Compare commits

..

49 Commits

Author SHA1 Message Date
Spythere 96714550d0 Merge pull request #62 - Wersja 1.18.3
Wersja 1.18.3
2023-11-15 02:13:54 +01:00
Spythere 2b6c751f55 hotifx toString 2023-11-13 15:57:01 +01:00
Spythere 08d3a2a03a feature: nawigacja URL w widoku scenerii 2023-11-13 15:32:02 +01:00
Spythere a79ca78781 poprawki animacji statusów danych & tryb offline 2023-11-13 14:59:17 +01:00
Spythere e08333dba1 fix: tłumaczenie statusów dr 2023-11-12 16:40:25 +01:00
Spythere 8705dd1df5 fix filtrowania RJ na posterunkach; favicons index 2023-11-12 15:47:55 +01:00
Spythere 7b4da9d422 poprawki layoutu aplikacji 2023-11-10 16:18:06 +01:00
Spythere e51b2fe2f3 poprawki filtrów poc. 2023-11-10 15:39:49 +01:00
Spythere f8b4ce103f refactor typów danych 2023-11-10 15:04:49 +01:00
Spythere e82b4b8817 bump 1.18.3 2023-11-08 22:04:11 +01:00
Spythere 36e9df82b0 hotfixy 2023-11-08 22:03:45 +01:00
Spythere cbce9af00b nowe pobieranie i przetwarzanie statusów dyżurnych 2023-11-07 20:16:58 +01:00
Spythere 4a4304d65f Merge pull request #61 - Wersja 1.18.2
Wersja 1.18.2
2023-11-04 17:03:51 +01:00
Spythere edad5306f2 bump: 1.18.2 2023-11-04 17:01:01 +01:00
Spythere 5b775dfec9 fix: filtry RJ 2023-11-04 17:00:50 +01:00
Spythere a485652ca5 Merge pull request #60 (hotfix)
hotfix: maksymalny timeout dyżurnych (1.18.1)
2023-11-02 22:44:48 +01:00
Spythere ed308246d7 hotfix: maksymalny timeout dyżurnych 2023-11-02 22:42:28 +01:00
Spythere 621bb1ad55 Merge pull request #59 - Wersja 1.18.1
Wersja 1.18.1
2023-11-02 17:41:59 +01:00
Spythere 154ae2ddac bump 1.18.1 2023-11-02 17:40:55 +01:00
Spythere d9da49a867 rozszerzony wybór regionów przez URL; poprawki headerów 2023-11-02 17:40:31 +01:00
Spythere 826d51f66c Merge pull request #58 - Wersja 1.18
Wersja 1.18
2023-11-02 01:27:29 +01:00
Spythere 1d7fc2955f animacje userów i spawnów scenerii 2023-11-01 17:20:05 +01:00
Spythere c550e7598a bump 1.18.0 2023-10-31 23:03:51 +01:00
Spythere d5168ce59d lock sync 2023-10-31 22:54:53 +01:00
Spythere 380c97655c filtrowanie statusów; poprawki w statystykach 2023-10-31 22:53:18 +01:00
Spythere e4ed24de80 region query 2023-10-31 02:35:41 +01:00
Spythere 8de03b9210 rework reaktywności danych z API i WS 2023-10-30 23:19:17 +01:00
Spythere 12ece46089 migracja assetów 2023-10-04 17:30:30 +02:00
Spythere 085238fada hotfix: zapamiętywanie stanu statystyk 2023-10-04 15:32:36 +02:00
Spythere 45c1d83512 format & lint 2023-10-04 15:01:01 +02:00
Spythere af9073ab98 Merge do wersji 1.17.1
Wersja 1.17.1
2023-10-03 21:58:23 +02:00
Spythere 800fc35e63 pliki lock 2023-10-03 21:53:59 +02:00
Spythere d5649d221b hotfixy 2023-10-03 21:51:00 +02:00
Spythere 5b35fac512 miniaturki c.d. 2023-10-03 21:31:06 +02:00
Spythere d5bc90f668 mock data 2023-10-02 22:09:27 +02:00
Spythere 6d663886f0 bump wersji 2023-10-02 22:06:58 +02:00
Spythere 85a1a0216e poprawki miniatur 2023-10-02 22:05:54 +02:00
Spythere 4ac054e947 miniaturki 2EN57 2023-10-01 15:11:53 +02:00
Spythere ba70fa1316 miniaturki pojazdów c.d. 2023-10-01 15:08:01 +02:00
Spythere 77e6b20d0c obsługa niezaładowanych miniaturek pojazdów 2023-10-01 01:41:14 +02:00
Spythere f60263c923 mocking danych 2023-10-01 00:23:17 +02:00
Spythere 6aec1a75c9 cleanup c.d. 2023-09-29 16:49:37 +02:00
Spythere d28d600833 code cleanup dziennika 2023-09-29 03:03:59 +02:00
Spythere a353eb3185 Meta tagi; aktualizacja paczek
Meta tagi; aktualizacja paczek
2023-09-26 14:44:48 +02:00
Spythere c5735a6953 pliki lock 2023-09-26 14:42:11 +02:00
Spythere 7930f7fc8a package.json 2023-09-26 14:36:01 +02:00
Spythere 68f4d54619 index: meta tagi 2023-09-26 14:33:58 +02:00
Spythere c4f9738589 Merge #54 (hotfix)
hotfix: wersja WS
2023-09-07 15:21:28 +02:00
Spythere dd916afd1d hotfix: wersja WS 2023-09-07 15:20:37 +02:00
223 changed files with 24756 additions and 17437 deletions
+18
View File
@@ -0,0 +1,18 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
rules: {
'vue/multi-word-component-names': 'off'
},
parserOptions: {
ecmaVersion: 'latest'
}
}
+1
View File
@@ -31,6 +31,7 @@ node_modules
.firebase .firebase
.firebaserc .firebaserc
# Env
.env .env
.fake .fake
+7
View File
@@ -0,0 +1,7 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}
+38 -9
View File
@@ -1,11 +1,14 @@
<!DOCTYPE html> <!doctype html>
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="keywords" content="Stacjownik, TD2, Train Driver 2, stacjownik-td2, stacjownik, td2.info.pl" /> <meta
name="keywords"
content="Stacjownik, TD2, Train Driver 2, stacjownik-td2, stacjownik, td2.info.pl"
/>
<meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" /> <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
<title>Stacjownik</title> <title>Stacjownik</title>
@@ -16,15 +19,42 @@
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" /> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" /> <meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#222222" />
<link rel="icon" href="favicon-64.png" sizes="64x64" type="image/png" />
<link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="favicon-62.png" sizes="62x62" type="image/png" />
<link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png" />
<link rel="icon" href="favicon.ico" /> <link rel="icon" href="favicon.ico" />
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap" rel="stylesheet" /> <!-- Static OpenGraph meta -->
<meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
<meta property="og:url" content="https://stacjownik-td2.web.app/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Stacjownik" />
<meta
property="og:description"
content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2"
/>
<meta
property="og:image"
content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Stacjownik" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Stacjownik" />
<meta
name="twitter:description"
content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2"
/>
<meta
name="twitter:image"
content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg"
/>
<link
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
@@ -32,4 +62,3 @@
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>
+6581 -2901
View File
File diff suppressed because it is too large Load Diff
+30 -19
View File
@@ -1,33 +1,44 @@
{ {
"name": "stacjownik", "name": "stacjownik",
"version": "1.17.0", "version": "1.18.3",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vue-tsc --noEmit && vite build", "build": "vue-tsc --noEmit && vite build",
"deploy": "yarn build && firebase deploy --only hosting", "deploy": "yarn build && firebase deploy --only hosting",
"preview": "yarn build && vite preview" "preview": "yarn build && vite preview",
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.12.1", "core-js": "^3.32.2",
"dotenv": "^16.0.3", "dotenv": "^16.3.1",
"firebase": "^9.8.1", "firebase": "^10.4.0",
"howler": "^2.2.1", "howler": "^2.2.4",
"pinia": "^2.0.14", "pinia": "^2.1.6",
"sass": "^1.53.0", "sass": "^1.67.0",
"socket.io-client": "^4.4.1", "socket.io-client": "^4.7.2",
"vue": "^3.2.37", "vue": "^3.3.4",
"vue-i18n": "^9.1.6", "vue-i18n": "^9.4.1",
"vue-router": "^4.0.0-0" "vue-router": "^4.2.4"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^18.11.17", "@types/node": "^20.6.2",
"@vitejs/plugin-vue": "^4.0.0", "@vite-pwa/assets-generator": "^0.0.10",
"axios": "^1.2.1", "@vitejs/plugin-vue": "^4.3.4",
"typescript": "^4.9.4", "axios": "^1.5.0",
"vite": "^4.0.3", "prettier": "^3.0.3",
"vite-plugin-pwa": "^0.14.0", "typescript": "^5.2.2",
"vue-tsc": "^1.0.18" "vite": "^4.4.9",
"vite-plugin-pwa": "^0.16.5",
"vue-tsc": "^1.8.11",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/tsconfig": "^0.4.0",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"@rushstack/eslint-patch": "^1.3.3"
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",

Before

Width:  |  Height:  |  Size: 363 B

After

Width:  |  Height:  |  Size: 363 B

Before

Width:  |  Height:  |  Size: 537 B

After

Width:  |  Height:  |  Size: 537 B

Before

Width:  |  Height:  |  Size: 482 B

After

Width:  |  Height:  |  Size: 482 B

Before

Width:  |  Height:  |  Size: 271 B

After

Width:  |  Height:  |  Size: 271 B

Before

Width:  |  Height:  |  Size: 201 B

After

Width:  |  Height:  |  Size: 201 B

Before

Width:  |  Height:  |  Size: 212 B

After

Width:  |  Height:  |  Size: 212 B

Before

Width:  |  Height:  |  Size: 170 B

After

Width:  |  Height:  |  Size: 170 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 932 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 953 B

Before

Width:  |  Height:  |  Size: 350 B

After

Width:  |  Height:  |  Size: 350 B

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before

Width:  |  Height:  |  Size: 264 B

After

Width:  |  Height:  |  Size: 264 B

Before

Width:  |  Height:  |  Size: 582 B

After

Width:  |  Height:  |  Size: 582 B

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Before

Width:  |  Height:  |  Size: 256 B

After

Width:  |  Height:  |  Size: 256 B

Before

Width:  |  Height:  |  Size: 201 B

After

Width:  |  Height:  |  Size: 201 B

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before

Width:  |  Height:  |  Size: 632 B

After

Width:  |  Height:  |  Size: 632 B

Before

Width:  |  Height:  |  Size: 398 B

After

Width:  |  Height:  |  Size: 398 B

Before

Width:  |  Height:  |  Size: 938 B

After

Width:  |  Height:  |  Size: 938 B

Before

Width:  |  Height:  |  Size: 356 B

After

Width:  |  Height:  |  Size: 356 B

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1020 B

Before

Width:  |  Height:  |  Size: 369 B

After

Width:  |  Height:  |  Size: 369 B

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Before

Width:  |  Height:  |  Size: 252 B

After

Width:  |  Height:  |  Size: 252 B

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Before

Width:  |  Height:  |  Size: 264 B

After

Width:  |  Height:  |  Size: 264 B

Before

Width:  |  Height:  |  Size: 199 B

After

Width:  |  Height:  |  Size: 199 B

Before

Width:  |  Height:  |  Size: 384 B

After

Width:  |  Height:  |  Size: 384 B

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

Before

Width:  |  Height:  |  Size: 270 B

After

Width:  |  Height:  |  Size: 270 B

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before

Width:  |  Height:  |  Size: 476 B

After

Width:  |  Height:  |  Size: 476 B

Before

Width:  |  Height:  |  Size: 863 B

After

Width:  |  Height:  |  Size: 863 B

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 304 B

Before

Width:  |  Height:  |  Size: 546 B

After

Width:  |  Height:  |  Size: 546 B

Before

Width:  |  Height:  |  Size: 230 B

After

Width:  |  Height:  |  Size: 230 B

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before

Width:  |  Height:  |  Size: 199 B

After

Width:  |  Height:  |  Size: 199 B

Before

Width:  |  Height:  |  Size: 522 B

After

Width:  |  Height:  |  Size: 522 B

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before

Width:  |  Height:  |  Size: 268 B

After

Width:  |  Height:  |  Size: 268 B

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before

Width:  |  Height:  |  Size: 478 B

After

Width:  |  Height:  |  Size: 478 B

Before

Width:  |  Height:  |  Size: 477 B

After

Width:  |  Height:  |  Size: 477 B

Before

Width:  |  Height:  |  Size: 477 B

After

Width:  |  Height:  |  Size: 477 B

Before

Width:  |  Height:  |  Size: 477 B

After

Width:  |  Height:  |  Size: 477 B

Before

Width:  |  Height:  |  Size: 457 B

After

Width:  |  Height:  |  Size: 457 B

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Before

Width:  |  Height:  |  Size: 326 B

After

Width:  |  Height:  |  Size: 326 B

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before

Width:  |  Height:  |  Size: 285 B

After

Width:  |  Height:  |  Size: 285 B

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 799 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

-3
View File
@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 215 B

+10 -16
View File
@@ -43,9 +43,10 @@
#app { #app {
color: white; color: white;
font-size: 1rem; font-size: 1rem;
overflow-x: hidden;
@include smallScreen() { @include smallScreen() {
font-size: calc(0.55rem + 1.1vw); font-size: calc(0.65rem + 0.8vw);
} }
@include screenLandscape() { @include screenLandscape() {
@@ -55,24 +56,17 @@
// CONTAINER // CONTAINER
.app_container { .app_container {
display: flex; // display: flex;
flex-flow: column; // flex-flow: column;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100vh; min-height: 100vh;
}
header { .app_main {
flex: 0 0 auto; padding: 0 0.5em;
}
main {
flex: 1 1 auto;
padding: 0 0.5em;
}
footer {
flex: 0 1 0.2em;
}
} }
.warning { .warning {
+36 -55
View File
@@ -6,13 +6,11 @@
</keep-alive> </keep-alive>
</transition> </transition>
<UpdatePrompt />
<AppHeader :current-lang="currentLang" @change-lang="changeLang" /> <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
<main class="app_main"> <main class="app_main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive exclude="JournalView"> <keep-alive exclude="JournalView,SceneryView">
<component :is="Component" :key="$route.name" /> <component :is="Component" :key="$route.name" />
</keep-alive> </keep-alive>
</router-view> </router-view>
@@ -24,7 +22,9 @@
{{ new Date().getUTCFullYear() }} | {{ new Date().getUTCFullYear() }} |
<a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a> <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
<br /> <br />
<a href="https://discord.gg/x2mpNN3svk"><img :src="getIcon('discord', 'png')" alt="">&nbsp;<b>{{ $t('footer.discord') }}</b></a> <a href="https://discord.gg/x2mpNN3svk">
<img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
</a>
<div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div> <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
</footer> </footer>
@@ -32,82 +32,51 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, KeepAlive, provide, ref, watch } from 'vue'; import { defineComponent, watch } from 'vue';
import Clock from './components/App/Clock.vue'; import Clock from './components/App/Clock.vue';
import packageInfo from '.././package.json'; import packageInfo from '.././package.json';
import { regions } from './data/options.json';
import { useStore } from './store/mainStore';
import StatusIndicator from './components/App/StatusIndicator.vue'; import StatusIndicator from './components/App/StatusIndicator.vue';
import SelectBox from './components/Global/SelectBox.vue';
import { useStore } from './store/store';
import TrainModal from './components/Global/TrainModal.vue'; import TrainModal from './components/Global/TrainModal.vue';
import StorageManager from './scripts/managers/storageManager';
import imageMixin from './mixins/imageMixin';
import AppHeader from './components/App/AppHeader.vue'; import AppHeader from './components/App/AppHeader.vue';
import axios from 'axios'; import axios from 'axios';
import UpdatePrompt from './components/App/UpdatePrompt.vue'; import StorageManager from './managers/storageManager';
import { VERSION } from 'vue-i18n';
import { RouterView } from 'vue-router';
import useCustomSW from './mixins/useCustomSW';
export default defineComponent({ export default defineComponent({
components: { components: {
Clock, Clock,
StatusIndicator, StatusIndicator,
SelectBox,
TrainModal, TrainModal,
AppHeader, AppHeader
UpdatePrompt,
},
mixins: [imageMixin],
setup() {
const store = useStore();
store.connectToAPI();
const { offlineReady } = useCustomSW();
const isFilterCardVisible = ref(false);
provide('isFilterCardVisible', isFilterCardVisible);
return {
store,
isFilterCardVisible,
onlineDispatchers: computed(() =>
store.stationList.filter((station) => station.onlineInfo && station.onlineInfo.region == store.region.id)
),
dispatcherDataStatus: store.dataStatuses.dispatchers,
};
}, },
data: () => ({ data: () => ({
VERSION: packageInfo.version, VERSION: packageInfo.version,
store: useStore(),
currentLang: 'pl', currentLang: 'pl',
releaseURL: '', releaseURL: '',
isOnProductionHost: location.hostname == 'stacjownik-td2.web.app', isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
}), }),
created() { created() {
this.loadLang(); this.loadLang();
this.store.connectToAPI();
this.store.isOffline = !window.navigator.onLine; this.store.isOffline = !window.navigator.onLine;
window.addEventListener('offline', () => { window.addEventListener('offline', () => {
this.store.isOffline = true; this.store.isOffline = true;
this.store.apiData = { this.store.activeData.activeSceneries = [];
stations: [], this.store.activeData.trains = [];
dispatchers: [], this.store.activeData.connectedSocketCount = 0;
trains: [],
connectedSocketCount: 0,
};
this.store.setOnlineData(); this.store.setStatuses();
}); });
window.addEventListener('online', () => { window.addEventListener('online', () => {
@@ -121,16 +90,28 @@ export default defineComponent({
watch( watch(
() => this.store.blockScroll, () => this.store.blockScroll,
(value) => { (value) => {
if (value) { if (value) document.body.classList.add('no-scroll');
document.body.classList.add('no-scroll'); else document.body.classList.remove('no-scroll');
return;
}
document.body.classList.remove('no-scroll');
} }
); );
}, },
watch: {
'$route.query.region': {
immediate: true,
handler(regionQuery: string) {
if (regionQuery) {
this.store.region.id =
regions.find(
(reg) =>
reg.id == regionQuery.toLocaleLowerCase() ||
reg.value.toLocaleLowerCase() == regionQuery.toLocaleLowerCase()
)?.id || 'eu';
}
}
}
},
methods: { methods: {
changeLang(lang: string) { changeLang(lang: string) {
this.$i18n.locale = lang; this.$i18n.locale = lang;
@@ -170,8 +151,8 @@ export default defineComponent({
this.changeLang('en'); this.changeLang('en');
return; return;
} }
}, }
}, }
}); });
</script> </script>
+33 -56
View File
@@ -3,8 +3,13 @@
<div class="header_container"> <div class="header_container">
<div class="header_icons"> <div class="header_icons">
<span class="icons-top"> <span class="icons-top">
<img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" /> <img
<img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else /> src="/images/icon-pl.svg"
alt="icon-pl"
@click="changeLang('en')"
v-if="currentLang == 'pl'"
/>
<img src="/images/icon-en.jpg" alt="icon-en" @click="changeLang('pl')" v-else />
</span> </span>
</div> </div>
@@ -13,7 +18,7 @@
<span class="header_brand"> <span class="header_brand">
<router-link to="/"> <router-link to="/">
<img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" /> <img src="/images/stacjownik-header-logo.svg" alt="Stacjownik" />
</router-link> </router-link>
</span> </span>
@@ -21,7 +26,7 @@
<Clock /> <Clock />
<div class="info_counter"> <div class="info_counter">
<img :src="getIcon('dispatcher')" alt="icon dispatcher" /> <img src="/images/icon-dispatcher.svg" alt="icon dispatcher" />
<span class="text--primary">{{ onlineDispatchersCount }}</span> <span class="text--primary">{{ onlineDispatchersCount }}</span>
<!-- <span class="g-tooltip"> <!-- <span class="g-tooltip">
@@ -31,12 +36,12 @@
<span class="text--grayed"> / </span> <span class="text--grayed"> / </span>
<span class="text--primary">{{ onlineTrainsCount }}</span> <span class="text--primary">{{ onlineTrainsCount }}</span>
<img :src="getIcon('train')" alt="icon train" /> <img src="/images/icon-train.svg" alt="icon train" />
</div> </div>
<span class="info_region"> <div class="info_region">
<SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" /> <RegionDropdown />
</span> </div>
</span> </span>
<span class="header_links"> <span class="header_links">
@@ -44,7 +49,9 @@
{{ $t('app.sceneries') }} {{ $t('app.sceneries') }}
</router-link> </router-link>
/ /
<router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link> <router-link class="route" active-class="route-active" to="/trains">{{
$t('app.trains')
}}</router-link>
/ /
<router-link <router-link
class="route" class="route"
@@ -61,65 +68,50 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useStore } from '../../store/store'; import { useStore } from '../../store/mainStore';
import options from '../../data/options.json';
import imageMixin from '../../mixins/imageMixin';
import SelectBox from '../Global/SelectBox.vue';
import StatusIndicator from './StatusIndicator.vue'; import StatusIndicator from './StatusIndicator.vue';
import Clock from './Clock.vue'; import Clock from './Clock.vue';
import RegionDropdown from '../Global/RegionDropdown.vue';
export default defineComponent({ export default defineComponent({
emits: ['changeLang'], emits: ['changeLang'],
mixins: [imageMixin],
props: { props: {
currentLang: { currentLang: {
type: String, type: String,
required: true, required: true
}, }
}, },
setup() { setup() {
return { return {
store: useStore(), store: useStore()
}; };
}, },
methods: { methods: {
changeRegion(region: { id: string; value: string }) {
this.store.changeRegion(region);
},
changeLang(lang: string) { changeLang(lang: string) {
this.$emit('changeLang', lang); this.$emit('changeLang', lang);
}, }
}, },
computed: { computed: {
onlineTrainsCount() { onlineTrainsCount() {
return this.store.trainList.filter((train) => train.online).length; return this.store.trainList.filter((train) => train.region == this.store.region.id).length;
}, },
onlineDispatchersCount() { onlineDispatchersCount() {
return this.store.stationList.filter( return this.store.onlineSceneryList.filter(
(station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id (scenery) => scenery.region == this.store.region.id
).length; ).length;
}, },
factorU() { factorU() {
return this.onlineDispatchersCount == 0 ? '-' : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2); return this.onlineDispatchersCount == 0
}, ? '-'
: (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
computedRegions() { }
return options.regions.map((region) => {
const regionStationCount =
this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
const regionTrainCount =
this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
return {
id: region.id,
value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
selectedValue: region.value,
};
});
},
}, },
components: { SelectBox, StatusIndicator, Clock }, components: { StatusIndicator, Clock, RegionDropdown }
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -215,23 +207,8 @@ export default defineComponent({
} }
} }
// REGION SELECTION
.info_region { .info_region {
color: white;
font-weight: bold;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.select-box_content button {
background-color: transparent;
font-weight: bold;
padding: 0.1em 0.5em;
color: paleturquoise;
}
.options {
font-size: 0.9em;
}
} }
</style> </style>
+14 -13
View File
@@ -2,32 +2,33 @@
<div class="clock">{{ computedDate }}</div> <div class="clock">{{ computedDate }}</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from "vue"; import { computed, defineComponent, ref } from 'vue';
export default defineComponent({ export default defineComponent({
name: "clock", name: 'VueClock',
data: () => ({ data: () => ({
timestamp: Date.now(), timestamp: Date.now()
}), }),
setup() { setup() {
let timestamp = ref(Date.now()); let timestamp = ref(Date.now());
const computedDate = computed(() => new Date(timestamp.value).toLocaleString("pl-PL", { const computedDate = computed(() =>
hour: "2-digit", new Date(timestamp.value).toLocaleString('pl-PL', {
minute: "2-digit", hour: '2-digit',
second: "2-digit", minute: '2-digit',
})); second: '2-digit'
})
);
setInterval(() => (timestamp.value = Date.now()), 1000); setInterval(() => (timestamp.value = Date.now()), 1000);
return { computedDate } return { computedDate };
} }
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../styles/responsive.scss"; @import '../../styles/responsive.scss';
.clock { .clock {
display: flex; display: flex;
+65 -34
View File
@@ -43,7 +43,13 @@
<g v-if="greenBlinkLight" filter="url(#filter0_d_843_28)"> <g v-if="greenBlinkLight" filter="url(#filter0_d_843_28)">
<circle cx="15" cy="17" r="7" fill="#00FF0A" /> <circle cx="15" cy="17" r="7" fill="#00FF0A" />
<animate attributeType="XML" attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite" /> <animate
attributeType="XML"
attributeName="opacity"
values="1;0;1"
dur="1s"
repeatCount="indefinite"
/>
</g> </g>
<g v-if="redTopLight" filter="url(#filter1_d_843_28)"> <g v-if="redTopLight" filter="url(#filter1_d_843_28)">
@@ -56,7 +62,13 @@
<g v-if="redBottomLight" filter="url(#filter3_d_843_28)"> <g v-if="redBottomLight" filter="url(#filter3_d_843_28)">
<circle cx="15" cy="74" r="7" fill="#F40000" /> <circle cx="15" cy="74" r="7" fill="#F40000" />
<animate attributeType="XML" attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite" /> <animate
attributeType="XML"
attributeName="opacity"
values="1;0;1"
dur="1s"
repeatCount="indefinite"
/>
</g> </g>
</g> </g>
@@ -82,7 +94,12 @@
<feComposite in2="hardAlpha" operator="out" /> <feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.04 0 0 0 1 0" /> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.04 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" /> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_843_28" result="shape" /> <feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_843_28"
result="shape"
/>
</filter> </filter>
<filter <filter
id="filter1_d_843_28" id="filter1_d_843_28"
@@ -104,7 +121,12 @@
<feGaussianBlur stdDeviation="2.5" /> <feGaussianBlur stdDeviation="2.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.770833 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <feColorMatrix type="matrix" values="0 0 0 0 0.770833 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" /> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_843_28" result="shape" /> <feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_843_28"
result="shape"
/>
</filter> </filter>
<filter <filter
id="filter2_d_843_28" id="filter2_d_843_28"
@@ -126,7 +148,12 @@
<feGaussianBlur stdDeviation="2.5" /> <feGaussianBlur stdDeviation="2.5" />
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.72 0 0 0 0 0 0 0 0 1 0" /> <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.72 0 0 0 0 0 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" /> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_843_28" result="shape" /> <feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_843_28"
result="shape"
/>
</filter> </filter>
<filter <filter
id="filter3_d_843_28" id="filter3_d_843_28"
@@ -148,7 +175,12 @@
<feGaussianBlur stdDeviation="2.5" /> <feGaussianBlur stdDeviation="2.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.770833 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <feColorMatrix type="matrix" values="0 0 0 0 0.770833 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" /> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_843_28" result="shape" /> <feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_843_28"
result="shape"
/>
</filter> </filter>
</defs> </defs>
</svg> </svg>
@@ -162,9 +194,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { DataStatus } from '../../scripts/enums/DataStatus'; import { StoreState } from '../../store/typings';
import { useStore } from '../../store/store'; import { useStore } from '../../store/mainStore';
import { StoreState } from '../../scripts/interfaces/store/storeTypes'; import { Status } from '../../typings/common';
export default defineComponent({ export default defineComponent({
data() { data() {
@@ -172,20 +204,20 @@ export default defineComponent({
tooltipActive: false, tooltipActive: false,
indicator: { indicator: {
offline: false, offline: false,
status: DataStatus.Loading, status: Status.Data.Loading,
message: 'data-status.S3', message: 'data-status.S3'
}, },
greenLight: false, greenLight: false,
greenBlinkLight: false, greenBlinkLight: false,
redTopLight: false, redTopLight: false,
orangeLight: false, orangeLight: false,
redBottomLight: false, redBottomLight: false
}; };
}, },
mounted() { mounted() {
this.setSignalStatus(DataStatus.Loading); this.setSignalStatus(Status.Data.Loading);
}, },
setup() { setup() {
@@ -193,7 +225,7 @@ export default defineComponent({
return { return {
dataStatus: store.dataStatuses, dataStatus: store.dataStatuses,
store, store
}; };
}, },
@@ -208,80 +240,80 @@ export default defineComponent({
const dispatcherDataStatus = statuses.dispatchers; const dispatcherDataStatus = statuses.dispatchers;
if (this.store.isOffline) { if (this.store.isOffline) {
this.setSignalStatus(DataStatus.Initialized); this.setSignalStatus(Status.Data.Initialized);
this.indicator.status = DataStatus.Initialized; this.indicator.status = Status.Data.Initialized;
this.indicator.message = 'data-status.S1-offline'; this.indicator.message = 'data-status.S1-offline';
return; return;
} }
if (connectionStatus == DataStatus.Error) { if (connectionStatus == Status.Data.Error) {
this.setSignalStatus(connectionStatus); this.setSignalStatus(connectionStatus);
this.indicator.status = connectionStatus; this.indicator.status = connectionStatus;
this.indicator.message = 'data-status.S1a-connection'; this.indicator.message = 'data-status.S1a-connection';
return; return;
} }
if (sceneryDataStatus == DataStatus.Error) { if (sceneryDataStatus == Status.Data.Error) {
this.setSignalStatus(sceneryDataStatus); this.setSignalStatus(sceneryDataStatus);
this.indicator.status = sceneryDataStatus; this.indicator.status = sceneryDataStatus;
this.indicator.message = 'data-status.S1a-sceneries'; this.indicator.message = 'data-status.S1a-sceneries';
return; return;
} }
if (trainsDataStatus == DataStatus.Warning) { if (trainsDataStatus == Status.Data.Warning) {
this.setSignalStatus(trainsDataStatus); this.setSignalStatus(trainsDataStatus);
this.indicator.status = trainsDataStatus; this.indicator.status = trainsDataStatus;
this.indicator.message = 'data-status.S5-trains'; this.indicator.message = 'data-status.S5-trains';
return; return;
} }
if (dispatcherDataStatus == DataStatus.Warning) { if (dispatcherDataStatus == Status.Data.Warning) {
this.setSignalStatus(dispatcherDataStatus); this.setSignalStatus(dispatcherDataStatus);
this.indicator.status = dispatcherDataStatus; this.indicator.status = dispatcherDataStatus;
this.indicator.message = 'data-status.S5-dispatchers'; this.indicator.message = 'data-status.S5-dispatchers';
return; return;
} }
if (sceneryDataStatus == DataStatus.Loaded) { if (sceneryDataStatus == Status.Data.Loaded) {
this.setSignalStatus(DataStatus.Loaded); this.setSignalStatus(Status.Data.Loaded);
this.indicator.status = DataStatus.Loaded; this.indicator.status = Status.Data.Loaded;
this.indicator.message = 'data-status.S2'; this.indicator.message = 'data-status.S2';
} }
}, }
}, }
}, },
methods: { methods: {
setSignalStatus(status: DataStatus) { setSignalStatus(status: Status.Data) {
this.greenLight = false; this.greenLight = false;
this.greenBlinkLight = false; this.greenBlinkLight = false;
this.redTopLight = false; this.redTopLight = false;
this.orangeLight = false; this.orangeLight = false;
this.redBottomLight = false; this.redBottomLight = false;
if (status == DataStatus.Initialized) { if (status == Status.Data.Initialized) {
this.redTopLight = true; this.redTopLight = true;
} }
if (status == DataStatus.Loaded) { if (status == Status.Data.Loaded) {
this.greenLight = true; this.greenLight = true;
} }
if (status == DataStatus.Warning) { if (status == Status.Data.Warning) {
this.orangeLight = true; this.orangeLight = true;
} }
if (status == DataStatus.Error) { if (status == Status.Data.Error) {
this.redTopLight = true; this.redTopLight = true;
this.redBottomLight = true; this.redBottomLight = true;
} }
if (status == DataStatus.Loading) { if (status == Status.Data.Loading) {
this.greenBlinkLight = true; this.greenBlinkLight = true;
} }
}, }
}, }
}); });
</script> </script>
@@ -375,4 +407,3 @@ export default defineComponent({
} }
} }
</style> </style>
-168
View File
@@ -1,168 +0,0 @@
<template>
<transition name="modal-anim">
<section class="update-modal card" v-if="releaseData && modalOpen">
<h2 class="modal_header text--primary">
<img :src="getImage('stacjownik-header-logo.svg')" alt="stacjownik logo" />
{{ releaseData.tag_name }}
</h2>
<div class="horizontal"></div>
<div class="modal_content">
<h3>{{ $t('update.title') }}</h3>
<a :href="releaseData.html_url" target="_blank">{{ $t('update.release-link') }}</a>
<br />
<br />
<p>{{ $t('update.paragraph1') }}</p>
<!-- <div class="modal_changelog" v-html="markdownReleaseBody"></div> -->
</div>
<div class="modal_actions">
<button class="btn btn--option" @click="modalOpen = false">{{ $t('update.confirm-button') }}</button>
</div>
</section>
</transition>
</template>
<script lang="ts">
import axios from 'axios';
import { defineComponent } from 'vue';
import packageInfo from '../../../package.json';
import imageMixin from '../../mixins/imageMixin';
import { ReleaseAPIData } from '../../scripts/interfaces/github_api/ReleaseAPIData';
import StorageManager from '../../scripts/managers/storageManager';
import { useStore } from '../../store/store';
const GH_LASTEST_RELEASE_URL = 'https://api.github.com/repos/Spythere/stacjownik/releases/latest';
export default defineComponent({
mixins: [imageMixin],
mounted() {
this.fetchReleases();
},
data() {
return {
modalOpen: false,
releaseData: null as ReleaseAPIData | null,
};
},
setup() {
return {
store: useStore()
}
},
methods: {
async fetchReleases() {
const storedVersion = StorageManager.getStringValue('appVersion');
const appVersion = packageInfo.version;
// Zmiana
if (appVersion != storedVersion) {
StorageManager.setStringValue('appVersion', appVersion);
// Znajdź changelog na GitHubie, jeśli jest pokaż modal
try {
const releaseData: ReleaseAPIData = await (await axios.get(GH_LASTEST_RELEASE_URL)).data;
if (!releaseData) return;
const lastReleaseVersion = releaseData.tag_name.slice(1);
if (lastReleaseVersion == appVersion) {
this.releaseData = releaseData;
this.modalOpen = true;
StorageManager.setStringValue('releaseURL', releaseData.html_url);
}
} catch (error) {
console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
}
}
},
},
});
</script>
<style lang="scss" scoped>
@import '../../styles/card.scss';
@import '../../styles/responsive.scss';
.modal-anim {
&-enter-active,
&-leave-active {
transition: all $animDuration $animType;
}
&-enter-from,
&-leave-to {
opacity: 0;
transform: translate(-50%, -50%) scale(0.45);
}
}
.update-modal {
text-align: center;
background-color: var(--clr-secondary);
padding: 1em;
}
.horizontal {
margin: 1em 0;
height: 2px;
width: 100%;
background-color: white;
}
.modal_header {
font-size: 1.6em;
img {
width: 50%;
vertical-align: text-top;
}
}
.modal_content {
font-size: 1.1em;
a {
text-decoration: underline;
}
}
.modal_actions {
margin-top: 2em;
button {
color: white;
padding: 0.5em;
font-size: 1.2em;
background-color: black;
}
}
.modal_changelog {
font-size: 0.8em;
margin-top: 2em;
}
@include smallScreen {
.update-modal {
height: auto;
max-width: 95%;
}
}
</style>
-69
View File
@@ -1,69 +0,0 @@
<template>
<div class="update-prompt">
<transition name="prompt-anim">
<div class="prompt_content" v-if="!hidePrompt && needRefresh">
<div>{{ $t('update.title') }}</div>
<div class="prompt_actions">
<button class="btn btn--filled" @click="updateServiceWorker(true)">{{ $t('update.confirm-button') }}</button>
<button class="btn btn--filled" @click="hidePrompt = true">{{ $t('update.later-button') }}</button>
</div>
</div>
</transition>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import useCustomSW from '../../mixins/useCustomSW';
const hidePrompt = ref(false);
const { needRefresh, updateServiceWorker } = useCustomSW();
</script>
<style lang="scss" scoped>
@import '../../styles/variables.scss';
.update-prompt {
position: fixed;
bottom: 0;
right: 0;
z-index: 200;
}
.prompt_content {
margin: 1em;
padding: 1em;
font-weight: bold;
background-color: black;
box-shadow: 0 0 10px 1px $accentCol;
border-radius: 1em;
}
.prompt_actions {
display: flex;
margin-top: 1em;
gap: 0.5em;
button {
width: 100%;
}
}
// Animation
.prompt-anim {
&-enter-active,
&-leave-active {
transition: all 120ms ease-in;
transform: translateY(0);
}
&-enter-from,
&-leave-to {
transform: translateY(100%);
}
}
</style>
+3 -3
View File
@@ -7,14 +7,14 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from 'vue';
export default defineComponent({}); export default defineComponent({});
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../../styles/variables"; @import '../../styles/variables';
@import "../../styles/responsive"; @import '../../styles/responsive';
.button_content { .button_content {
display: flex; display: flex;
+42
View File
@@ -0,0 +1,42 @@
<template>
<button
class="btn btn--option btn--load-data"
v-if="!scrollNoMoreData && scrollDataLoaded && list.length >= 15"
@click="addHistoryData"
>
{{ $t('journal.load-data') }}
</button>
</template>
<script lang="ts">
import { PropType, defineComponent } from 'vue';
export default defineComponent({
props: {
scrollNoMoreData: {
type: Boolean,
required: true
},
scrollDataLoaded: {
type: Boolean,
required: true
},
list: {
type: Array as PropType<any[]>,
required: true
}
},
emits: ['addHistoryData'],
methods: {
addHistoryData() {
this.$emit('addHistoryData');
}
}
});
</script>
<style scoped></style>
+1 -1
View File
@@ -12,7 +12,7 @@ import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
setup() { setup() {
return {}; return {};
}, }
}); });
</script> </script>
+9 -6
View File
@@ -1,7 +1,10 @@
<template> <template>
<div class="progress-bar"> <div class="progress-bar">
<span class="bar-bg"></span> <span class="bar-bg"></span>
<span class="bar-fg" :style="{ width: `${~~progressPercent}%`, backgroundColor: bgColor }"></span> <span
class="bar-fg"
:style="{ width: `${~~progressPercent}%`, backgroundColor: bgColor }"
></span>
</div> </div>
</template> </template>
@@ -12,12 +15,12 @@ export default defineComponent({
props: { props: {
progressPercent: { progressPercent: {
type: Number, type: Number,
required: true, required: true
}, },
progressType: { progressType: {
type: String, type: String,
required: false, required: false
}, }
}, },
computed: { computed: {
@@ -29,8 +32,8 @@ export default defineComponent({
default: default:
return 'springgreen'; return 'springgreen';
} }
}, }
}, }
}); });
</script> </script>
@@ -1,25 +1,24 @@
<template> <template>
<div class="select-box"> <div class="region-dropdown" v-click-outside="clickedOutside">
<div class="select-box_content"> <div class="content">
<button class="selected" @click="toggleBox"> <button class="selected-region" @click="toggleBox">
<span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span> <span>{{ selectedItem.name }}</span>
<div class="arrow"> <img :src="`/images/icon-arrow-${listOpen ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
<img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
</div>
</button> </button>
<ul class="options" :ref="(el) => (listRef = el as Element)"> <ul class="options">
<li class="option" v-for="(item, i) in itemList" :key="item.id"> <li class="option" v-for="(item, i) in regionList" :key="item.id">
<transition <transition
name="unfold" name="unfold"
:style="` :style="`
--delay-in: ${i * 55}ms; --delay-in: ${i * 55}ms;
--delay-out: ${(itemList.length - 1 - i) * 55}ms`" --delay-out: ${(regionList.length - 1 - i) * 55}ms`"
> >
<label :for="item.id" v-if="listOpen"> <label :for="item.id" v-if="listOpen">
<input type="button" :id="item.id" name="select-box" @click="selectOption(item)" /> <input type="button" :id="item.id" name="select-box" @click="selectOption(item)" />
<span :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''" v-html="item.value"> </span> <span :style="selectedItem.id == item.id ? 'color: gold;' : ''" v-html="item.value">
</span>
</label> </label>
</transition> </transition>
</li> </li>
@@ -29,65 +28,68 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, Ref, ref, computed } from 'vue'; import { defineComponent, Ref, ref } from 'vue';
import imageMixin from '../../mixins/imageMixin'; import { regions as regionsJSON } from '../../data/options.json';
import { useStore } from '../../store/mainStore';
interface Item { interface Item {
id: string; id: string;
value: string; value: string;
selectedValue?: string; name: string;
} }
export default defineComponent({ export default defineComponent({
emits: ['selected'], data() {
mixins: [imageMixin],
props: {
itemList: {
type: Array as () => Item[],
required: true,
},
defaultItemIndex: {
type: Number,
default: 0,
},
prefix: {
type: String,
default: '',
},
},
setup(props) {
let listRef: Ref<Element | null> = ref(null);
let buttonRef: Ref<HTMLButtonElement | null> = ref(null);
let activeEl: Ref<Element | null> = ref(document.activeElement);
let listOpen = ref(false);
let selectedItem: Ref<Item> = ref(props.itemList[props.defaultItemIndex]);
const computedSelectedItem = computed(() => {
return props.itemList.find((item) => item.id === selectedItem.value.id) || props.itemList[props.defaultItemIndex];
});
return { return {
computedSelectedItem, store: useStore(),
listOpen, selectedItemIndex: 0,
selectedItem, listOpen: false
listRef,
buttonRef,
activeEl,
}; };
}, },
methods: { setup() {
selectOption(item: Item) { let buttonRef: Ref<HTMLButtonElement | null> = ref(null);
this.selectedItem = item;
this.listOpen = false;
this.$emit('selected', item); return {
buttonRef
};
},
watch: {
'store.region.id': {
handler(regionId) {
this.selectedItemIndex = this.regionList.findIndex((reg) => reg.id == regionId);
}
}
},
computed: {
selectedItem() {
return this.regionList[this.selectedItemIndex] || null;
},
regionList() {
return regionsJSON.map((region) => {
const regionStationCount = this.store.onlineSceneryList.filter(
(scenery) => scenery.region == region.id
).length;
const regionTrainCount =
this.store.trainList.filter((train) => train.region == region.id).length || 0;
return {
id: region.id,
value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
name: region.name
};
});
}
},
methods: {
selectOption(selectedRegion: Item) {
this.store.region = selectedRegion;
this.listOpen = false;
}, },
toggleBox(e: Event) { toggleBox(e: Event) {
@@ -99,48 +101,28 @@ export default defineComponent({
clickedOutside() { clickedOutside() {
this.listOpen = false; this.listOpen = false;
this.buttonRef?.blur(); this.buttonRef?.blur();
}, }
}, }
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/variables.scss'; @import '../../styles/variables.scss';
.unfold { .region-dropdown {
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(-10px) scale(0.85);
}
&-enter-active,
&-leave-active {
transition: all 110ms ease-out;
}
&-enter-active {
transition-delay: var(--delay-in);
}
&-leave-active {
transition-delay: var(--delay-out);
}
}
.select-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
} }
.arrow { button img {
img { vertical-align: middle;
vertical-align: middle; width: 1.35em;
width: 1.35em;
}
} }
button.selected { button.selected-region {
display: flex;
justify-content: space-between;
color: paleturquoise; color: paleturquoise;
font-weight: bold; font-weight: bold;
@@ -149,11 +131,16 @@ button.selected {
&:focus { &:focus {
background-color: #262626; background-color: #262626;
} }
span {
margin-right: 10px;
}
} }
.select-box_content { .content {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
font-weight: bold;
height: 100%; height: 100%;
@@ -214,4 +201,25 @@ li.option {
cursor: pointer; cursor: pointer;
} }
} }
.unfold {
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(-10px) scale(0.85);
}
&-enter-active,
&-leave-active {
transition: all 110ms ease-out;
}
&-enter-active {
transition-delay: var(--delay-in);
}
&-leave-active {
transition-delay: var(--delay-out);
}
}
</style> </style>
+16 -24
View File
@@ -7,39 +7,31 @@
@keypress="updateValue" @keypress="updateValue"
/> />
<img <img class="search-exit" src="/images/icon-exit.svg" alt="exit-icon" @click="clearSearchValue" />
class="search-exit"
:src="getIcon('exit')"
alt="exit-icon"
@click="clearValue"
/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, watch } from "vue"; import { defineComponent, ref, watch } from 'vue';
import imageMixin from "../../mixins/imageMixin";
export default defineComponent({ export default defineComponent({
mixins: [imageMixin], emits: ['update:searchedValue', 'clearValue'],
emits: ["update:searchedValue", "clearValue"],
props: { props: {
searchedValue: { searchedValue: {
type: String, type: String,
required: true, required: true
}, },
updateOnInput: { updateOnInput: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
titleToTranslate: { titleToTranslate: {
type: String, type: String,
required: true, required: true
}, },
clearValue: { clearValue: {
type: Function, type: Function
}, }
}, },
setup(props, { emit }) { setup(props, { emit }) {
@@ -49,32 +41,32 @@ export default defineComponent({
watch( watch(
() => compSearchedValue.value, () => compSearchedValue.value,
(value) => { (value) => {
emit("update:searchedValue", value); emit('update:searchedValue', value);
} }
); );
} }
const clearValue = () => { const clearSearchValue = () => {
compSearchedValue.value = ""; compSearchedValue.value = '';
emit("clearValue"); emit('clearValue');
}; };
const updateValue = (e: any) => { const updateValue = (e: any) => {
if (!props.updateOnInput && e.keyCode == 13) if (!props.updateOnInput && e.keyCode == 13)
emit("update:searchedValue", compSearchedValue.value); emit('update:searchedValue', compSearchedValue.value);
}; };
return { return {
compSearchedValue, compSearchedValue,
updateValue, updateValue,
clearValue, clearSearchValue
}; };
}, }
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../styles/responsive"; @import '../../styles/responsive';
.search { .search {
&-box { &-box {
+52 -16
View File
@@ -1,7 +1,11 @@
<template> <template>
<span class="status-badge" :class="statusID" v-if="isOnline"> <span class="status-badge" :class="statusName" v-if="isOnline">
{{ $t(`status.${statusID}`) }} {{ $t(`status.${statusName}`) }}
{{ statusID == 'online' ? timestampToString(statusTimestamp!) : '' }} {{
statusName == 'online' && dispatcherStatus && dispatcherStatus > 5
? timestampToString(dispatcherStatus)
: ''
}}
</span> </span>
<span class="status-badge free" v-else> <span class="status-badge free" v-else>
@@ -10,22 +14,53 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { PropType, defineComponent } from 'vue';
import dateMixin from '../../mixins/dateMixin'; import dateMixin from '../../mixins/dateMixin';
import { Status } from '../../typings/common';
export default defineComponent({ export default defineComponent({
props: { props: {
statusID: { dispatcherStatus: {
type: String, type: Number as PropType<Status.ActiveDispatcher | number>
},
statusTimestamp: {
type: Number,
}, },
isOnline: { isOnline: {
type: Boolean, type: Boolean
}, }
}, },
mixins: [dateMixin], mixins: [dateMixin],
computed: {
statusName() {
if (!this.dispatcherStatus) return 'free';
switch (this.dispatcherStatus) {
case Status.ActiveDispatcher.AFK:
return 'afk';
case Status.ActiveDispatcher.ENDING:
return 'ending';
case Status.ActiveDispatcher.INVALID:
return 'invalid';
case Status.ActiveDispatcher.NOT_LOGGED_IN:
return 'not-signed';
case Status.ActiveDispatcher.NO_SPACE:
return 'no-space';
case Status.ActiveDispatcher.UNAVAILABLE:
return 'unavailable';
case Status.ActiveDispatcher.UNKNOWN:
return 'unknown';
default:
if (this.dispatcherStatus >= Date.now() + 25500000) return 'no-limit';
return 'online';
}
}
}
}); });
</script> </script>
@@ -34,10 +69,10 @@ $free: #8a8a8a;
$ending: #e6c300; $ending: #e6c300;
$no-limit: #117fc9; $no-limit: #117fc9;
$unav: #ff3d5d; $unav: #ff3d5d;
$brb: #e6a100; $afk: #e6a100;
$no-space: #222; $no-space: #222;
$online: #09a116; $online: #09a116;
$unknown: rgb(185, 60, 60); $unknown: #b93c3c;
.status-badge { .status-badge {
border-radius: 1rem; border-radius: 1rem;
@@ -69,8 +104,8 @@ $unknown: rgb(185, 60, 60);
font-size: 0.85em; font-size: 0.85em;
} }
&.brb { &.afk {
background-color: $brb; background-color: $afk;
color: black; color: black;
font-size: 0.95em; font-size: 0.95em;
} }
@@ -82,7 +117,8 @@ $unknown: rgb(185, 60, 60);
font-size: 0.85em; font-size: 0.85em;
} }
&.unknown { &.unknown,
&.invalid {
background-color: $unknown; background-color: $unknown;
font-size: 0.95em; font-size: 0.95em;
} }

Some files were not shown because too many files have changed in this diff Show More