Compare commits

...

86 Commits

Author SHA1 Message Date
Spythere d7a609a4f2 Merge pull request #67 from Spythere/development
poprawki tłumaczeń; scrolling
2023-11-28 19:12:57 +01:00
Spythere 763506d5a9 bump: 1.18.6 2023-11-28 19:10:08 +01:00
Spythere 8dbb32b821 dodatkowe tłumaczenia 2023-11-28 19:09:14 +01:00
Spythere b8a21e0f70 Merge pull request #66 from Spythere/development
hotfix: scrollowanie tabelki scenerii
2023-11-28 18:58:27 +01:00
Spythere 7c2b5fbd50 hotfix scrollowania 2023-11-28 18:56:02 +01:00
Spythere ac740c2743 Merge pull request #65 from Spythere/development
feature: darowizny + poprawki (wersja 1.18.5)
2023-11-28 18:44:44 +01:00
Spythere 916f19df72 poprawki tłumaczenia en 2023-11-28 18:38:42 +01:00
Spythere de8facfb05 bump: 1.18.5 2023-11-28 18:36:37 +01:00
Spythere 5d5ad44508 wielkość czcionki 2023-11-28 18:35:41 +01:00
Spythere 647055d2f0 ikona donatora w zakładce Pociągi; poprawki tłumaczeń 2023-11-28 18:33:40 +01:00
Spythere 1947555724 poprawki responsywności 2023-11-28 17:56:08 +01:00
Spythere 86417f3422 lock sync 2023-11-26 19:50:04 +01:00
Spythere a224b58d17 feature: modal darowizn 2023-11-26 19:49:32 +01:00
Spythere 69be01fb1e Merge pull request #64 - 1.18.4 fix
poprawki do 1.18.4
2023-11-17 16:55:09 +01:00
Spythere 6ef04f0dbd fix sortowania statusów dr; linting 2023-11-17 16:52:53 +01:00
Spythere 451d90f854 bump: 1.18.4 2023-11-15 21:09:30 +01:00
Spythere b01d3e894b Merge pull request #63 from Spythere/development
hotfix: statusy dr
2023-11-15 21:07:28 +01:00
Spythere 13dc6a0e32 hotfix: statusy dr 2023-11-15 21:06:16 +01:00
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
Spythere ea5c9e0028 Merge do wersji 1.17.0
Wersja 1.17.0
2023-09-06 15:43:52 +02:00
Spythere eb7c2d7132 revamp postoju i strzałek w RJ scenerii 2023-09-05 16:48:26 +02:00
Spythere ee7c50f59b szybkie filtry (wip) 2023-09-05 16:10:38 +02:00
Spythere 439f59fedc poprawki filtrów scenerii 2023-09-05 15:40:32 +02:00
Spythere c47d839ce3 poprawki kolorów 2023-09-04 18:50:12 +02:00
Spythere f77c13cbcf srjp: poprawki dostępności modalu 2023-09-04 18:37:52 +02:00
Spythere dbbbd33100 poprawki dzienników 2023-09-03 19:24:32 +02:00
Spythere 14d13360a8 dziennik dr: animacje 2023-09-03 18:47:01 +02:00
Spythere dc862252ba dziennik dr: kolumna regionów 2023-09-03 18:34:45 +02:00
Spythere e5fe727ccd aktualizacja URLi 2023-09-03 17:58:55 +02:00
Spythere e836bbed0c szybkie filtry (wip) 2023-09-02 19:36:49 +02:00
Spythere d4438fd215 station filters active indicator 2023-09-02 18:53:23 +02:00
Spythere 1550849360 dzienniki 2023-09-02 18:47:01 +02:00
Spythere 9d1dc4ffca bump 1.17 2023-08-31 22:46:41 +02:00
Spythere 0397fa788d zmiana wyglądu listy dzienników 2023-08-31 22:45:14 +02:00
Spythere 6e5696b0a6 daily stats hotfix 2023-08-31 21:46:05 +02:00
Spythere 4537341a57 odświeżony wygląd dziennika RJ 2023-08-30 20:31:40 +02:00
Spythere c35c74bd4a Merge pull request #52
fix: data wcześniejszego przyjazdu dla 0pt
2023-08-27 23:07:01 +02:00
Spythere 25735c5e6e fix: data wcześniejszego przyjazdu dla 0pt 2023-08-27 22:45:36 +02:00
228 changed files with 23487 additions and 15555 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
.firebaserc
# Env
.env
.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">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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" />
<title>Stacjownik</title>
@@ -16,15 +19,42 @@
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<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 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>
<body>
@@ -32,4 +62,3 @@
<script type="module" src="/src/main.ts"></script>
</body>
</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",
"version": "1.16.3",
"version": "1.18.6",
"private": true,
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"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": {
"core-js": "^3.12.1",
"dotenv": "^16.0.3",
"firebase": "^9.8.1",
"howler": "^2.2.1",
"pinia": "^2.0.14",
"sass": "^1.53.0",
"socket.io-client": "^4.4.1",
"vue": "^3.2.37",
"vue-i18n": "^9.1.6",
"vue-router": "^4.0.0-0"
"core-js": "^3.32.2",
"dotenv": "^16.3.1",
"firebase": "^10.4.0",
"howler": "^2.2.4",
"pinia": "^2.1.6",
"sass": "^1.67.0",
"socket.io-client": "^4.7.2",
"vue": "^3.3.4",
"vue-i18n": "^9.4.1",
"vue-router": "^4.2.4"
},
"devDependencies": {
"@types/node": "^18.11.17",
"@vitejs/plugin-vue": "^4.0.0",
"axios": "^1.2.1",
"typescript": "^4.9.4",
"vite": "^4.0.3",
"vite-plugin-pwa": "^0.14.0",
"vue-tsc": "^1.0.18"
"@types/node": "^20.6.2",
"@vite-pwa/assets-generator": "^0.0.10",
"@vitejs/plugin-vue": "^4.3.4",
"axios": "^1.5.0",
"prettier": "^3.0.3",
"typescript": "^5.2.2",
"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": [
"> 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

+18
View File
@@ -0,0 +1,18 @@
<svg width="256" height="213" viewBox="0 0 256 213" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_1571_41)">
<path d="M217.048 55.9333L238 80.4039L128 194.6L18 80.4039L38.9524 55.9333L71.6905 18.6H128H184.31L217.048 55.9333Z" fill="#F47FFF"/>
<path d="M238 80.4039L217.048 55.9333L184.31 18.6M238 80.4039L128 194.6M238 80.4039H164.536M128 194.6L18 80.4039M128 194.6L91.4641 80.4039M128 194.6L164.536 80.4039M184.31 18.6H128M184.31 18.6L164.536 80.4039M18 80.4039L38.9524 55.9333L71.6905 18.6M18 80.4039H91.4641M71.6905 18.6L91.4641 80.4039M71.6905 18.6H128M91.4641 80.4039H128H164.536M91.4641 80.4039L128 18.6M128 18.6L164.536 80.4039" stroke="#ECECEC" stroke-width="7.45763" stroke-linejoin="round"/>
</g>
<defs>
<filter id="filter0_d_1571_41" x="0.367179" y="0.967155" width="255.266" height="211.266" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="6.952"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.956863 0 0 0 0 0.498039 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1571_41"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1571_41" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

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: 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

+48
View File
@@ -0,0 +1,48 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" rx="256" fill="#121212"/>
<rect x="325.818" y="405.665" width="7.11086" height="143.867" rx="3.55543" transform="rotate(90 325.818 405.665)" fill="white"/>
<rect x="361.785" y="430.553" width="10.6663" height="208.608" rx="5.33314" transform="rotate(90 361.785 430.553)" fill="white"/>
<g filter="url(#filter0_d_272_208)">
<rect width="25.0328" height="117.468" rx="12.5164" transform="matrix(0.711174 0.703016 -0.711174 0.703016 211.54 363)" fill="white"/>
</g>
<g filter="url(#filter1_d_272_208)">
<rect width="25.0328" height="117.468" rx="12.5164" transform="matrix(-0.711174 0.703016 0.711174 0.703016 300.46 363)" fill="white"/>
</g>
<g filter="url(#filter2_d_272_208)">
<rect x="139.352" y="65.4912" width="232.66" height="325.893" rx="41.5866" stroke="#7A7A7A" stroke-width="8.31733"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M135.193 107.078C135.193 81.8134 155.674 61.3325 180.938 61.3325H330.425C355.69 61.3325 376.171 81.8134 376.171 107.078V349.797C376.171 375.062 355.69 395.543 330.426 395.543H180.938C155.674 395.543 135.193 375.062 135.193 349.797V107.078ZM208.217 338.656C208.217 352.401 196.774 363.544 182.659 363.544C168.543 363.544 157.1 352.401 157.1 338.656C157.1 324.91 168.543 313.768 182.659 313.768C196.774 313.768 208.217 324.91 208.217 338.656ZM328.706 363.544C342.821 363.544 354.264 352.401 354.264 338.656C354.264 324.91 342.821 313.768 328.706 313.768C314.591 313.768 303.148 324.91 303.148 338.656C303.148 352.401 314.591 363.544 328.706 363.544ZM248.38 136.323C248.38 132.07 244.932 128.622 240.679 128.622H164.802C160.549 128.622 157.101 132.07 157.101 136.323V203.223C157.101 207.476 160.549 210.924 164.802 210.924H240.679C244.932 210.924 248.38 207.476 248.38 203.223V136.323ZM346.563 128.622C350.817 128.622 354.265 132.07 354.265 136.323V203.223C354.265 207.476 350.817 210.924 346.563 210.924H270.686C266.433 210.924 262.985 207.476 262.985 203.223V136.323C262.985 132.07 266.433 128.622 270.686 128.622H346.563Z" fill="white"/>
<ellipse cx="255.682" cy="64.888" rx="25.5582" ry="24.888" fill="#F3F1F1"/>
</g>
<defs>
<filter id="filter0_d_272_208" x="106.676" y="341.617" width="143.99" height="142.947" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="13.269"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_272_208"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_272_208" result="shape"/>
</filter>
<filter id="filter1_d_272_208" x="261.334" y="341.617" width="143.99" height="142.947" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="13.269"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_272_208"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_272_208" result="shape"/>
</filter>
<filter id="filter2_d_272_208" x="110.241" y="15.048" width="290.882" height="405.446" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="12.476"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_272_208"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_272_208" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.2 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

+71 -106
View File
@@ -1,106 +1,71 @@
@import './styles/responsive.scss';
@import './styles/variables.scss';
@import './styles/global.scss';
@import './styles/scenery_status.scss';
// VUE ROUTE CHANGE ANIMATION
.view-anim {
&-enter-from,
&-leave-to {
opacity: 0.02;
}
&-enter-active,
&-leave-active {
transition: all $animDuration $animType;
min-height: 100%;
}
}
.modal-anim {
&-enter-active,
&-leave-active {
transition: all $animDuration $animType;
}
&-enter-from,
&-leave-to {
transform: translateY(-25%);
opacity: 0;
}
}
.route {
margin: 0 0.2em;
&-active,
&[data-active='true'] {
color: $accentCol;
font-weight: bold;
}
}
// APP
#app {
color: white;
font-size: 1rem;
@include smallScreen() {
font-size: calc(0.55rem + 1.1vw);
}
@include screenLandscape() {
font-size: calc(0.45rem + 0.8vw);
}
}
// CONTAINER
.app_container {
display: flex;
flex-flow: column;
min-height: 100vh;
header {
flex: 0 0 auto;
}
main {
flex: 1 1 auto;
padding: 0 0.5em;
}
footer {
flex: 0 1 0.2em;
}
}
.warning {
background-color: firebrick;
text-align: center;
padding: 0.5em 0.4em;
max-width: 1100px;
margin: 0 auto;
border-radius: 0 0 1em 1em;
}
// FOOTER
footer.app_footer {
max-width: 100%;
padding: 0.5em;
img {
width: 1.1em;
vertical-align: text-bottom;
}
z-index: 10;
background: #111;
color: white;
text-align: center;
vertical-align: middle;
}
@import './styles/responsive.scss';
@import './styles/variables.scss';
@import './styles/global.scss';
@import './styles/animations.scss';
.route {
margin: 0 0.2em;
&-active,
&[data-active='true'] {
color: $accentCol;
font-weight: bold;
}
}
// APP
#app {
color: white;
font-size: 1rem;
overflow-x: hidden;
@include smallScreen() {
font-size: calc(0.65rem + 0.8vw);
}
@include screenLandscape() {
font-size: calc(0.45rem + 0.8vw);
}
}
// CONTAINER
.app_container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100vh;
}
.app_main {
padding: 0 0.5em;
}
.warning {
background-color: firebrick;
text-align: center;
padding: 0.5em 0.4em;
max-width: 1100px;
margin: 0 auto;
border-radius: 0 0 1em 1em;
}
// FOOTER
footer.app_footer {
max-width: 100%;
padding: 0.5em;
img {
width: 1.1em;
vertical-align: text-bottom;
}
z-index: 10;
background: #111;
color: white;
text-align: center;
vertical-align: middle;
}
+159 -178
View File
@@ -1,178 +1,159 @@
<template>
<div class="app_container">
<transition name="modal-anim">
<keep-alive>
<TrainModal v-if="store.chosenModalTrainId" />
</keep-alive>
</transition>
<UpdatePrompt />
<AppHeader :current-lang="currentLang" @change-lang="changeLang" />
<main class="app_main">
<router-view v-slot="{ Component }">
<keep-alive exclude="JournalView">
<component :is="Component" :key="$route.name" />
</keep-alive>
</router-view>
</main>
<footer class="app_footer">
&copy;
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
{{ new Date().getUTCFullYear() }} |
<a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
<br />
<a href="https://discord.gg/x2mpNN3svk"><img :src="getIcon('discord', 'png')" alt="">&nbsp;<b>{{ $t('footer.discord') }}</b></a>
<div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
</footer>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, KeepAlive, provide, ref, watch } from 'vue';
import Clock from './components/App/Clock.vue';
import packageInfo from '.././package.json';
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 StorageManager from './scripts/managers/storageManager';
import imageMixin from './mixins/imageMixin';
import AppHeader from './components/App/AppHeader.vue';
import axios from 'axios';
import UpdatePrompt from './components/App/UpdatePrompt.vue';
import { VERSION } from 'vue-i18n';
import { RouterView } from 'vue-router';
import useCustomSW from './mixins/useCustomSW';
export default defineComponent({
components: {
Clock,
StatusIndicator,
SelectBox,
TrainModal,
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: () => ({
VERSION: packageInfo.version,
currentLang: 'pl',
releaseURL: '',
isOnProductionHost: location.hostname == 'stacjownik-td2.web.app',
}),
created() {
this.loadLang();
this.store.isOffline = !window.navigator.onLine;
window.addEventListener('offline', () => {
this.store.isOffline = true;
this.store.apiData = {
stations: [],
dispatchers: [],
trains: [],
connectedSocketCount: 0,
};
this.store.setOnlineData();
});
window.addEventListener('online', () => {
this.store.isOffline = false;
});
},
async mounted() {
this.setReleaseURL();
watch(
() => this.store.blockScroll,
(value) => {
if (value) {
document.body.classList.add('no-scroll');
return;
}
document.body.classList.remove('no-scroll');
}
);
},
methods: {
changeLang(lang: string) {
this.$i18n.locale = lang;
this.currentLang = lang;
StorageManager.setStringValue('lang', lang);
},
async setReleaseURL() {
try {
const releaseData = await (
await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
).data;
if (!releaseData) return;
this.releaseURL = releaseData.html_url;
} catch (error) {
console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
return;
}
},
loadLang() {
const storageLang = StorageManager.getStringValue('lang');
if (storageLang) {
this.changeLang(storageLang);
return;
}
if (!window.navigator.language) return;
const naviLanguage = window.navigator.language.toString();
if (naviLanguage.includes('en')) {
this.changeLang('en');
return;
}
},
},
});
</script>
<style lang="scss" src="./App.scss"></style>
<template>
<div class="app_container">
<transition name="modal-anim">
<keep-alive>
<TrainModal v-if="store.chosenModalTrainId" />
</keep-alive>
</transition>
<AppHeader :current-lang="currentLang" @change-lang="changeLang" />
<main class="app_main">
<router-view v-slot="{ Component }">
<keep-alive exclude="JournalView,SceneryView">
<component :is="Component" :key="$route.name" />
</keep-alive>
</router-view>
</main>
<footer class="app_footer">
&copy;
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
{{ new Date().getUTCFullYear() }} |
<a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
<br />
<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>
</footer>
</div>
</template>
<script lang="ts">
import { defineComponent, watch } from 'vue';
import Clock from './components/App/Clock.vue';
import packageInfo from '.././package.json';
import { regions } from './data/options.json';
import { useStore } from './store/mainStore';
import StatusIndicator from './components/App/StatusIndicator.vue';
import TrainModal from './components/Global/TrainModal.vue';
import AppHeader from './components/App/AppHeader.vue';
import axios from 'axios';
import StorageManager from './managers/storageManager';
export default defineComponent({
components: {
Clock,
StatusIndicator,
TrainModal,
AppHeader
},
data: () => ({
VERSION: packageInfo.version,
store: useStore(),
currentLang: 'pl',
releaseURL: '',
isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
}),
created() {
this.loadLang();
this.store.connectToAPI();
this.store.isOffline = !window.navigator.onLine;
window.addEventListener('offline', () => {
this.store.isOffline = true;
this.store.activeData.activeSceneries = [];
this.store.activeData.trains = [];
this.store.activeData.connectedSocketCount = 0;
this.store.setStatuses();
});
window.addEventListener('online', () => {
this.store.isOffline = false;
});
},
async mounted() {
this.setReleaseURL();
watch(
() => this.store.blockScroll,
(value) => {
if (value) document.body.classList.add('no-scroll');
else 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: {
changeLang(lang: string) {
this.$i18n.locale = lang;
this.currentLang = lang;
StorageManager.setStringValue('lang', lang);
},
async setReleaseURL() {
try {
const releaseData = await (
await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
).data;
if (!releaseData) return;
this.releaseURL = releaseData.html_url;
} catch (error) {
console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
return;
}
},
loadLang() {
const storageLang = StorageManager.getStringValue('lang');
if (storageLang) {
this.changeLang(storageLang);
return;
}
if (!window.navigator.language) return;
const naviLanguage = window.navigator.language.toString();
if (naviLanguage.includes('en')) {
this.changeLang('en');
return;
}
}
}
});
</script>
<style lang="scss" src="./App.scss"></style>
-3
View File
@@ -1,3 +0,0 @@
<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M67.4283 9.79351L67.8252 31.2232H79.5983L79.8628 9.79351H67.4283ZM67.8252 110.989L67.4283 132.816H79.8628L79.466 110.989H67.8252ZM91.6359 51.33L103.938 43.7899C102.439 40.527 100.322 37.3963 97.5886 34.3979C94.9429 31.3995 91.5918 28.9303 87.5352 26.9901C83.5667 25.05 78.8046 24.0799 73.2487 24.0799C67.6929 24.0799 62.7103 25.1382 58.3009 27.2547C53.8915 29.3712 50.4081 32.1932 47.8506 35.7207C45.3814 39.2483 44.1467 43.1726 44.1467 47.4938C44.1467 51.9032 44.9404 55.6512 46.5278 58.7378C48.1152 61.8243 50.1435 64.47 52.6128 66.6747C55.082 68.7912 57.6836 70.5549 60.4174 71.9659C63.2394 73.2888 65.7969 74.347 68.0897 75.1407C71.6173 76.4635 74.9243 77.8745 78.0109 79.3737C81.1856 80.8729 83.7431 82.7249 85.6832 84.9296C87.7115 87.0461 88.7257 89.824 88.7257 93.2633C88.7257 95.9089 88.1966 98.2018 87.1383 100.142C86.1683 101.994 84.625 103.405 82.5085 104.375C80.4801 105.345 77.8786 105.83 74.7038 105.83C71.0881 105.83 67.8693 105.08 65.0473 103.581C62.3134 102.082 59.8001 99.9215 57.5072 97.0995C55.2143 94.2775 53.0978 90.8381 51.1577 86.7815L39.12 94.5861C41.0602 99.3483 43.7499 103.581 47.1892 107.285C50.6286 110.989 54.6411 113.943 59.2269 116.148C63.8126 118.265 68.7512 119.323 74.0424 119.323C80.6565 119.323 86.2564 118.265 90.8422 116.148C95.428 113.943 98.9555 110.813 101.425 106.756C103.894 102.699 105.129 97.9814 105.129 92.6019C105.129 88.4571 104.423 84.8414 103.012 81.7548C101.601 78.6682 99.7492 76.0667 97.4563 73.9502C95.1634 71.7455 92.606 69.8935 89.784 68.3943C87.0501 66.8951 84.3604 65.6605 81.7148 64.6904C78.0109 63.2794 74.5275 61.8684 71.2645 60.4574C68.0016 59.0464 65.3559 57.3709 63.3276 55.4307C61.2993 53.4906 60.2851 51.0213 60.2851 48.0229C60.2851 45.7301 60.7261 43.7899 61.6079 42.2025C62.578 40.527 64.0331 39.2483 65.9732 38.3664C68.0016 37.4845 70.559 37.0436 73.6456 37.0436C76.644 37.0436 79.2455 37.705 81.4502 39.0278C83.6549 40.3506 85.5509 42.1144 87.1383 44.319C88.8139 46.4356 90.3131 48.7725 91.6359 51.33Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

+214 -237
View File
@@ -1,237 +1,214 @@
<template>
<header class="app_header">
<div class="header_container">
<div class="header_icons">
<span class="icons-top">
<img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
<img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
</span>
</div>
<div class="header_body">
<StatusIndicator />
<span class="header_brand">
<router-link to="/">
<img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
</router-link>
</span>
<span class="header_info">
<Clock />
<div class="info_counter">
<img :src="getIcon('dispatcher')" alt="icon dispatcher" />
<span class="text--primary">{{ onlineDispatchersCount }}</span>
<!-- <span class="g-tooltip">
<b class="text--primary">{{ factorU }}U</b>
<div class="content">Test</div>
</span> -->
<span class="text--grayed"> / </span>
<span class="text--primary">{{ onlineTrainsCount }}</span>
<img :src="getIcon('train')" alt="icon train" />
</div>
<span class="info_region">
<SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
</span>
</span>
<span class="header_links">
<router-link class="route" active-class="route-active" to="/" exact>
{{ $t('app.sceneries') }}
</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"
:data-active="$route.path.startsWith('/journal')"
to="/journal"
>
{{ $t('app.journal') }}
</router-link>
</span>
</div>
</div>
</header>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../../store/store';
import options from '../../data/options.json';
import imageMixin from '../../mixins/imageMixin';
import SelectBox from '../Global/SelectBox.vue';
import StatusIndicator from './StatusIndicator.vue';
import Clock from './Clock.vue';
export default defineComponent({
emits: ['changeLang'],
mixins: [imageMixin],
props: {
currentLang: {
type: String,
required: true,
},
},
setup() {
return {
store: useStore(),
};
},
methods: {
changeRegion(region: { id: string; value: string }) {
this.store.changeRegion(region);
},
changeLang(lang: string) {
this.$emit('changeLang', lang);
},
},
computed: {
onlineTrainsCount() {
return this.store.trainList.filter((train) => train.online).length;
},
onlineDispatchersCount() {
return this.store.stationList.filter(
(station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id
).length;
},
factorU() {
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 },
});
</script>
<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/responsive.scss';
// HEADER
.app_header {
display: flex;
justify-content: center;
position: relative;
background-color: $primaryCol;
}
.header {
&_body {
position: relative;
max-width: 20em;
}
&_container {
display: flex;
justify-content: center;
border-radius: 0 0 1em 1em;
@include smallScreen {
position: relative;
margin-top: 0.5em;
}
}
&_brand {
display: flex;
img {
width: 100%;
margin: 0 auto;
}
}
&_info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
font-size: 1.15em;
}
&_links {
display: flex;
justify-content: center;
border-radius: 0.7em;
font-size: 1.25em;
padding: 0.5em;
}
&_icons {
position: absolute;
right: 0;
top: 0;
padding: 0.5em;
@include smallScreen {
transform: translateX(85%);
}
}
}
// ICONS
.icons-top {
img {
width: 2.5em;
cursor: pointer;
}
}
// COUNTER
.info_counter {
display: flex;
justify-content: center;
align-items: center;
span {
margin: 0 0.15em;
}
img {
width: 1.35em;
}
}
// REGION SELECTION
.info_region {
color: white;
font-weight: bold;
display: flex;
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>
<template>
<header class="app_header">
<div class="header_container">
<div class="header_icons">
<span class="icons-top">
<img
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>
</div>
<div class="header_body">
<StatusIndicator />
<span class="header_brand">
<router-link to="/">
<img src="/images/stacjownik-header-logo.svg" alt="Stacjownik" />
</router-link>
</span>
<span class="header_info">
<Clock />
<div class="info_counter">
<img src="/images/icon-dispatcher.svg" alt="icon dispatcher" />
<span class="text--primary">{{ onlineDispatchersCount }}</span>
<!-- <span class="g-tooltip">
<b class="text--primary">{{ factorU }}U</b>
<div class="content">Test</div>
</span> -->
<span class="text--grayed"> / </span>
<span class="text--primary">{{ onlineTrainsCount }}</span>
<img src="/images/icon-train.svg" alt="icon train" />
</div>
<div class="info_region">
<RegionDropdown />
</div>
</span>
<span class="header_links">
<router-link class="route" active-class="route-active" to="/" exact>
{{ $t('app.sceneries') }}
</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"
:data-active="$route.path.startsWith('/journal')"
to="/journal"
>
{{ $t('app.journal') }}
</router-link>
</span>
</div>
</div>
</header>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../../store/mainStore';
import StatusIndicator from './StatusIndicator.vue';
import Clock from './Clock.vue';
import RegionDropdown from '../Global/RegionDropdown.vue';
export default defineComponent({
emits: ['changeLang'],
props: {
currentLang: {
type: String,
required: true
}
},
setup() {
return {
store: useStore()
};
},
methods: {
changeLang(lang: string) {
this.$emit('changeLang', lang);
}
},
computed: {
onlineTrainsCount() {
return this.store.trainList.filter((train) => train.region == this.store.region.id).length;
},
onlineDispatchersCount() {
return this.store.onlineSceneryList.filter(
(scenery) => scenery.region == this.store.region.id
).length;
},
factorU() {
return this.onlineDispatchersCount == 0
? '-'
: (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
}
},
components: { StatusIndicator, Clock, RegionDropdown }
});
</script>
<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/responsive.scss';
// HEADER
.app_header {
display: flex;
justify-content: center;
position: relative;
background-color: $primaryCol;
}
.header {
&_body {
position: relative;
max-width: 20em;
}
&_container {
display: flex;
justify-content: center;
border-radius: 0 0 1em 1em;
@include smallScreen {
position: relative;
margin-top: 0.5em;
}
}
&_brand {
display: flex;
img {
width: 100%;
margin: 0 auto;
}
}
&_info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
font-size: 1.15em;
}
&_links {
display: flex;
justify-content: center;
border-radius: 0.7em;
font-size: 1.25em;
padding: 0.5em;
}
&_icons {
position: absolute;
right: 0;
top: 0;
padding: 0.5em;
@include smallScreen {
transform: translateX(85%);
}
}
}
// ICONS
.icons-top {
img {
width: 2.5em;
cursor: pointer;
}
}
// COUNTER
.info_counter {
display: flex;
justify-content: center;
align-items: center;
span {
margin: 0 0.15em;
}
img {
width: 1.35em;
}
}
.info_region {
display: flex;
justify-content: flex-end;
}
</style>
+37 -36
View File
@@ -1,36 +1,37 @@
<template>
<div class="clock">{{ computedDate }}</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from "vue";
export default defineComponent({
name: "clock",
data: () => ({
timestamp: Date.now(),
}),
setup() {
let timestamp = ref(Date.now());
const computedDate = computed(() => new Date(timestamp.value).toLocaleString("pl-PL", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
}));
setInterval(() => (timestamp.value = Date.now()), 1000);
return { computedDate }
}
});
</script>
<style lang="scss" scoped>
@import "../../styles/responsive.scss";
.clock {
display: flex;
align-items: center;
}
</style>
<template>
<div class="clock">{{ computedDate }}</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
name: 'VueClock',
data: () => ({
timestamp: Date.now()
}),
setup() {
let timestamp = ref(Date.now());
const computedDate = computed(() =>
new Date(timestamp.value).toLocaleString('pl-PL', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
);
setInterval(() => (timestamp.value = Date.now()), 1000);
return { computedDate };
}
});
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
.clock {
display: flex;
align-items: center;
}
</style>
+65 -34
View File
@@ -43,7 +43,13 @@
<g v-if="greenBlinkLight" filter="url(#filter0_d_843_28)">
<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 v-if="redTopLight" filter="url(#filter1_d_843_28)">
@@ -56,7 +62,13 @@
<g v-if="redBottomLight" filter="url(#filter3_d_843_28)">
<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>
@@ -82,7 +94,12 @@
<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" />
<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
id="filter1_d_843_28"
@@ -104,7 +121,12 @@
<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" />
<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
id="filter2_d_843_28"
@@ -126,7 +148,12 @@
<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" />
<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
id="filter3_d_843_28"
@@ -148,7 +175,12 @@
<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" />
<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>
</defs>
</svg>
@@ -162,9 +194,9 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { DataStatus } from '../../scripts/enums/DataStatus';
import { useStore } from '../../store/store';
import { StoreState } from '../../scripts/interfaces/store/storeTypes';
import { StoreState } from '../../store/typings';
import { useStore } from '../../store/mainStore';
import { Status } from '../../typings/common';
export default defineComponent({
data() {
@@ -172,20 +204,20 @@ export default defineComponent({
tooltipActive: false,
indicator: {
offline: false,
status: DataStatus.Loading,
message: 'data-status.S3',
status: Status.Data.Loading,
message: 'data-status.S3'
},
greenLight: false,
greenBlinkLight: false,
redTopLight: false,
orangeLight: false,
redBottomLight: false,
redBottomLight: false
};
},
mounted() {
this.setSignalStatus(DataStatus.Loading);
this.setSignalStatus(Status.Data.Loading);
},
setup() {
@@ -193,7 +225,7 @@ export default defineComponent({
return {
dataStatus: store.dataStatuses,
store,
store
};
},
@@ -208,80 +240,80 @@ export default defineComponent({
const dispatcherDataStatus = statuses.dispatchers;
if (this.store.isOffline) {
this.setSignalStatus(DataStatus.Initialized);
this.indicator.status = DataStatus.Initialized;
this.setSignalStatus(Status.Data.Initialized);
this.indicator.status = Status.Data.Initialized;
this.indicator.message = 'data-status.S1-offline';
return;
}
if (connectionStatus == DataStatus.Error) {
if (connectionStatus == Status.Data.Error) {
this.setSignalStatus(connectionStatus);
this.indicator.status = connectionStatus;
this.indicator.message = 'data-status.S1a-connection';
return;
}
if (sceneryDataStatus == DataStatus.Error) {
if (sceneryDataStatus == Status.Data.Error) {
this.setSignalStatus(sceneryDataStatus);
this.indicator.status = sceneryDataStatus;
this.indicator.message = 'data-status.S1a-sceneries';
return;
}
if (trainsDataStatus == DataStatus.Warning) {
if (trainsDataStatus == Status.Data.Warning) {
this.setSignalStatus(trainsDataStatus);
this.indicator.status = trainsDataStatus;
this.indicator.message = 'data-status.S5-trains';
return;
}
if (dispatcherDataStatus == DataStatus.Warning) {
if (dispatcherDataStatus == Status.Data.Warning) {
this.setSignalStatus(dispatcherDataStatus);
this.indicator.status = dispatcherDataStatus;
this.indicator.message = 'data-status.S5-dispatchers';
return;
}
if (sceneryDataStatus == DataStatus.Loaded) {
this.setSignalStatus(DataStatus.Loaded);
if (sceneryDataStatus == Status.Data.Loaded) {
this.setSignalStatus(Status.Data.Loaded);
this.indicator.status = DataStatus.Loaded;
this.indicator.status = Status.Data.Loaded;
this.indicator.message = 'data-status.S2';
}
},
},
}
}
},
methods: {
setSignalStatus(status: DataStatus) {
setSignalStatus(status: Status.Data) {
this.greenLight = false;
this.greenBlinkLight = false;
this.redTopLight = false;
this.orangeLight = false;
this.redBottomLight = false;
if (status == DataStatus.Initialized) {
if (status == Status.Data.Initialized) {
this.redTopLight = true;
}
if (status == DataStatus.Loaded) {
if (status == Status.Data.Loaded) {
this.greenLight = true;
}
if (status == DataStatus.Warning) {
if (status == Status.Data.Warning) {
this.orangeLight = true;
}
if (status == DataStatus.Error) {
if (status == Status.Data.Error) {
this.redTopLight = true;
this.redBottomLight = true;
}
if (status == DataStatus.Loading) {
if (status == Status.Data.Loading) {
this.greenBlinkLight = true;
}
},
},
}
}
});
</script>
@@ -375,4 +407,3 @@ export default defineComponent({
}
}
</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>
+24 -24
View File
@@ -1,24 +1,24 @@
<template>
<button class="action-btn btn--filled">
<div class="button_content">
<slot></slot>
</div>
</button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({});
</script>
<style lang="scss">
@import "../../styles/variables";
@import "../../styles/responsive";
.button_content {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<template>
<button class="action-btn btn--filled">
<div class="button_content">
<slot></slot>
</div>
</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({});
</script>
<style lang="scss">
@import '../../styles/variables';
@import '../../styles/responsive';
.button_content {
display: flex;
justify-content: center;
align-items: center;
}
</style>
+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>
+101
View File
@@ -0,0 +1,101 @@
<template>
<transition name="modal-anim" tag="div" class="modal">
<div class="body" v-if="isOpen">
<div class="background" @click="toggleModal(false)"></div>
<div class="wrapper" ref="wrapper" tabindex="0">
<slot></slot>
</div>
<div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
</div>
</transition>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../../store/mainStore';
export default defineComponent({
emits: ['toggleModal'],
props: {
isOpen: Boolean
},
data() {
return {
store: useStore()
};
},
watch: {
isOpen(v) {
this.$nextTick(() => {
if (v) (this.$refs['wrapper'] as HTMLElement).focus();
else (this.store.modalLastClickedTarget as HTMLElement)?.focus();
});
}
},
methods: {
toggleModal(value: boolean) {
this.$emit('toggleModal', value);
}
}
});
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
.body {
position: fixed;
top: 0;
left: 0;
z-index: 200;
width: 100vw;
height: 100vh;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.55);
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #1a1a1a;
box-shadow: 0 0 15px 10px #333333;
width: 95%;
max-width: 800px;
max-height: 95vh;
& > :slotted(div) {
max-height: 95vh;
}
}
@include smallScreen {
.wrapper {
top: 0;
transform: translate(-50%, 1em);
max-height: 90vh;
& > :slotted(div) {
max-height: 90vh;
}
}
}
</style>
+184
View File
@@ -0,0 +1,184 @@
<template>
<div class="donation-modal" @keydown.esc="toggleModal(false)">
<button
class="modal_button action btn--image"
ref="btn"
@click="toggleModal(true)"
@focus="toggleModal(false)"
>
<img src="/images/icon-dollar.svg" alt="dollar donation icon" />
<span>{{ $t('donations.button-title') }}</span>
</button>
<AnimatedModal :isOpen="isModalOpen" @toggleModal="toggleModal">
<div class="modal_content">
<div class="modal_main">
<h1 v-html="$t('donations.header')"></h1>
<br />
<p v-html="$t('donations.p1')"></p>
<br />
<i18n-t keypath="donations.p2" tag="p">
<template v-slot:b1>
<b>{{ $t('donations.p2-b1') }}</b>
</template>
<template v-slot:b2>
<b>{{ $t('donations.p2-b2') }}</b>
</template>
<template v-slot:b3>
<b>{{ $t('donations.p2-b3') }}</b>
</template>
<template v-slot:link>
<a href="https://discord.gg/x2mpNN3svk" target="_blank">
{{ $t('donations.p2-a1') }}
</a>
</template>
</i18n-t>
<br />
<p v-html="$t('donations.p3')"></p>
<br />
<i18n-t keypath="donations.p4" tag="p">
<template v-slot:img>
<img src="/images/icon-diamond.svg" alt="donator diamond icon" />
</template>
<template v-slot:b1>
<b>{{ $t('donations.p4-b1') }}</b>
</template>
<template v-slot:b2>
<b>{{ $t('donations.p4-b2') }}</b>
</template>
</i18n-t>
<br />
<i
v-html="$t('donations.p5')"
style="display: flex; justify-content: flex-end; text-align: right"
>
</i>
</div>
<div class="modal_actions">
<button class="modal_button exit btn--image" @click="toggleModal(false)">
<img src="/images/icon-exit.svg" alt="dollar donation icon" />
{{ $t('donations.action-exit') }}
</button>
<form action="https://www.paypal.com/donate" method="post">
<input type="hidden" name="hosted_button_id" value="EDB3SKFAHXFTW" />
<button class="modal_button action btn--image" @click="toggleModal(false)">
<img src="/images/icon-dollar.svg" alt="dollar donation icon" />
{{ $t('donations.action-confirm') }}
</button>
</form>
</div>
</div>
</AnimatedModal>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import AnimatedModal from './AnimatedModal.vue';
export default defineComponent({
props: {
isModalOpen: Boolean
},
emits: ['toggleModal'],
methods: {
toggleModal(value: boolean) {
this.$emit('toggleModal', value);
}
},
components: { AnimatedModal }
});
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
.modal_button {
&.action {
$btnColor: #254069;
background-color: $btnColor;
&:hover {
background-color: lighten($btnColor, 10%);
}
}
&.exit {
$btnColor: crimson;
background-color: $btnColor;
&:hover {
background-color: lighten($btnColor, 10%);
}
}
@include smallScreen {
span {
display: none;
}
}
}
.modal-logo {
position: absolute;
top: 0;
left: 50%;
width: 6em;
transform: translate(-50%, -50%);
}
.modal_content {
display: grid;
grid-template-rows: 1fr auto;
gap: 1em;
font-size: 1.1em;
& > div {
padding: 1em;
}
h1 {
font-size: 1.95em;
text-align: center;
}
p {
text-align: justify;
}
a {
text-decoration: underline;
}
}
.modal_main {
overflow: auto;
img {
max-height: 20px;
margin-right: 5px;
vertical-align: text-bottom;
}
}
.modal_actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
gap: 0.5em;
form button {
width: 100%;
}
}
</style>
+1 -1
View File
@@ -12,7 +12,7 @@ import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return {};
},
}
});
</script>

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