refactor: refreshed packages and code; adjusted settings and updated config files

.eslintrc.cjs

@@ -1,17 +0,0 @@
-/* eslint-env node */
-
-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",
-  },
-};

.gitignore

@@ -13,8 +13,6 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
 .DS_Store
 *.suo

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "oxc.oxc-vscode",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts, typed-router.d.ts",
+    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .oxfmt*, .prettier*, prettier*, .editorconfig"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package.json

@@ -6,28 +6,28 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview",
+    "preview": "yarn build && vite preview",
     "deploy": "yarn build && firebase deploy --only hosting",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "axios": "^1.6.2",
+    "pinia": "^3.0.4",
-    "pinia": "^2.1.7",
+    "sass": "^1.87.0",
-    "sass": "^1.69.5",
     "vue": "^3.3.11",
-    "vue-router": "4.2.5"
+    "vue-router": "5.0.4"
   },
   "devDependencies": {
-    "@types/vue-router": "^2.0.0",
+    "@tsconfig/node24": "^24.0.4",
-    "@vitejs/plugin-vue": "^4.5.2",
+    "@types/node": "^25.6.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.9.1",
-    "eslint": "^8.55.0",
+    "prettier": "3.8.2",
-    "eslint-plugin-vue": "^9.19.2",
+    "typescript": "~6.0.0",
-    "prettier": "^3.1.1",
+    "vite": "^8.0.3",
-    "typescript": "^5.3.3",
+    "vue-tsc": "^3.2.6"
-    "vite": "^5.0.7",
+  },
-    "vue-tsc": "^2.0.29"
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
   }
 }

src/App.vue

@@ -3,7 +3,6 @@
     <Navbar :version="version" />
 
     <main>
-      <!-- <button @click="testAudio">test audio</button> -->
       <router-view v-slot="{ Component }">
         <keep-alive>
           <component :is="Component" :key="$route.path"></component>
@@ -60,7 +59,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import './styles.scss';
+@use '@/styles/styles';
 
 .app_content {
   text-align: center;

src/components/Navbar.vue

@@ -31,15 +31,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles.scss';
+@use '@/styles/theme';
 
 nav.navbar {
-  background-color: $accentBg;
+  background-color: theme.$accentBg;
   padding: 0 0.5em;
 
   sup {
     font-size: 0.8em;
-    color: $dimmedText;
+    color: theme.$dimmedText;
   }
 }
 

src/http.ts

@@ -1,7 +0,0 @@
-import axios from 'axios';
-
-const http = axios.create({
-  baseURL: 'https://stacjownik.spythere.eu'
-});
-
-export default http;

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp, Directive } from 'vue';
+import { createApp, type Directive } from 'vue';
 import App from './App.vue';
 import router from './router';
 import { createPinia } from 'pinia';

src/router.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
 
 import HomeView from './views/HomeView.vue';
 import PragotronView from './views/PragotronView.vue';

src/stores/apiStore.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
-import { API } from '../typings/api';
+import type { API } from '../typings/api';
-import http from '../http';
 
 export enum DataStatus {
   LOADING = 0,
@@ -11,6 +10,8 @@ export enum DataStatus {
 export const useApiStore = defineStore('api', {
   state() {
     return {
+      baseURL: 'https://stacjownik.spythere.eu',
+
       activeData: undefined as API.ActiveData.Response | undefined,
       stationData: undefined as API.Sceneries.Response | undefined,
 
@@ -24,11 +25,11 @@ export const useApiStore = defineStore('api', {
   actions: {
     async fetchActiveData() {
       try {
-        const response = (await http.get<API.ActiveData.Response | undefined>('api/getActiveData'))
+        const response = await fetch(`${this.baseURL}/api/getActiveData`);
-          .data;
+        const responseData: API.ActiveData.Response = await response.json();
 
         this.dataStatuses.activeData = DataStatus.LOADED;
-        this.activeData = response;
+        this.activeData = responseData;
       } catch (error) {
         this.dataStatuses.activeData = DataStatus.ERROR;
 
@@ -38,11 +39,11 @@ export const useApiStore = defineStore('api', {
 
     async fetchSceneriesData() {
       try {
-        const response = (await http.get<API.Sceneries.Response | undefined>('api/getSceneries'))
+        const response = await fetch(`${this.baseURL}/api/getSceneries`);
-          .data;
+        const responseData: API.Sceneries.Response = await response.json();
 
         this.dataStatuses.stationData = DataStatus.LOADED;
-        this.stationData = response;
+        this.stationData = responseData;
       } catch (error) {
         this.dataStatuses.stationData = DataStatus.ERROR;
 

src/stores/mainStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
-import ISceneryData from '../types/ISceneryData';
 import { useApiStore } from './apiStore';
+import type ISceneryData from '../typings/common';
 
 export enum Region {
   PL1 = 'eu',

src/styles/_fonts.scss

@@ -0,0 +1,15 @@
+@font-face {
+  font-display: swap;
+  font-family: 'Monda';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/monda-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Monda';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/monda-700.woff2') format('woff2');
+}

src/styles/_styles.scss

@@ -1,11 +1,11 @@
-@import url('https://fonts.googleapis.com/css2?family=Monda:wght@400;700&display=swap');
+@use 'fonts';
-@import 'theme.scss';
+@use 'theme';
 
 body,
 html {
-  background: $primaryBg;
+  background: theme.$primaryBg;
   min-height: 100vh;
-  color: $primaryText;
+  color: theme.$primaryText;
 
   padding: 0;
   margin: 0;
@@ -47,7 +47,7 @@ button {
   }
 
   &:focus-visible {
-    color: $accentText;
+    color: theme.$accentText;
   }
 
   &.btn--image {
@@ -59,7 +59,7 @@ button {
     }
 
     &:focus-visible {
-      outline: 1px solid $accentText;
+      outline: 1px solid theme.$accentText;
     }
   }
 }
@@ -89,7 +89,7 @@ button {
       position: absolute;
 
       &:checked + span {
-        color: $accentText;
+        color: theme.$accentText;
       }
 
       &:focus-visible + span {

src/types/IOnlineStationsResponse.ts

@@ -1,24 +0,0 @@
-export interface IOnlineStation {
-  dispatcherId: number;
-  dispatcherName: string;
-  dispatcherIsSupporter: boolean;
-  stationName: string;
-  stationHash: string;
-  region: string;
-  maxUsers: number;
-  currentUsers: number;
-  spawn: number;
-  lastSeen: any;
-  dispatcherExp: number;
-  nameFromHeader: string;
-  spawnString: string;
-  networkConnectionString: string;
-  isOnline: number;
-  dispatcherRate: number;
-}
-
-export interface IOnlineStationsResponse {
-  success: boolean;
-  respCode: number;
-  message: IOnlineStation[];
-}

src/types/ISceneryData.ts

@@ -1,5 +0,0 @@
-export default interface ISceneryData {
-  stationName: string;
-  nameAbbreviation: string;
-  stationCheckpoints: string[];
-}

src/types/ISceneryReponse.ts

@@ -1,17 +0,0 @@
-export interface ISceneryResponse {
-  id: string;
-  name: string;
-  SUP: boolean;
-  authors: string;
-  availability: string;
-  backupJSON: string;
-  checkpoints: string;
-  controlType: string;
-  lines: string;
-  project: string;
-  reqLevel: number;
-  routes: string;
-  signalType: string;
-  supportersOnly?: boolean;
-  url: string;
-}

src/types/ITableRow.ts

@@ -1,37 +0,0 @@
-export enum RowIndex {
-  HourLeading = 0,
-  HourSecondary = 1,
-  MinuteLeading = 2,
-  MinuteSecondary = 3,
-  TrainNumber = 4,
-  RouteVia = 5,
-  RouteTo = 6,
-} 
-
-interface ITableRowValues {
-  routeTo: string;
-  routeVia: string;
-  dateDigits: string[];
-  trainNumber: string;
-  // routeTo, routeVia, date1, date2, date3, date4, trainNumber
-  currentRowIndexes: [number, number, number, number, number, number, number];
-}
-
-export interface ITableRow {
-  trainNumber: string;
-  timetableId: number;
-
-  routeTo: string;
-  routeVia: string;
-
-  checkpointName: string;
-
-  arrivalTimestamp: number;
-  departureTimestamp: number;
-
-  delayMinutes: number;
-  date?: Date;
-  dateDigits: string[];
-
-  tableValues: ITableRowValues;
-}

src/types/ITrainResponse.ts

@@ -1,53 +0,0 @@
-export interface ITimetableStop {
-  stopName: string;
-  stopNameRAW: string;
-  stopType: string;
-  stopDistance: number;
-  pointId: string;
-  comments?: string;
-  mainStop: boolean;
-  arrivalLine: string | null;
-  arrivalTimestamp: number;
-  arrivalRealTimestamp: number;
-  arrivalDelay: number;
-  departureLine: string | null;
-  departureTimestamp: number;
-  departureRealTimestamp: number;
-  departureDelay: number;
-  beginsHere: boolean;
-  terminatesHere: boolean;
-  confirmed: number;
-  stopped: number;
-  stopTime?: number;
-}
-
-export interface ITrainTimetable {
-  SKR: number;
-  TWR: number;
-  category: string;
-  stopList: ITimetableStop[];
-  route: string;
-  timetableId: number;
-  sceneries: string[];
-}
-
-export interface ITrainResponse {
-  trainNo: number;
-  mass: number;
-  speed: number;
-  length: number;
-  distance: number;
-  stockString: string;
-  driverName: string;
-  driverId: number;
-  driverIsSupporter: boolean;
-  currentStationHash: string;
-  currentStationName: string;
-  signal: string;
-  connectedTrack: string;
-  online: number;
-  lastSeen: any;
-  region: string;
-  isTimeout: boolean;
-  timetable: ITrainTimetable;
-}

src/typings/common.ts

@@ -0,0 +1,44 @@
+export default interface ISceneryData {
+  stationName: string;
+  nameAbbreviation: string;
+  stationCheckpoints: string[];
+}
+
+/* Table Rows */
+export interface ITableRow {
+  trainNumber: string;
+  timetableId: number;
+
+  routeTo: string;
+  routeVia: string;
+
+  checkpointName: string;
+
+  arrivalTimestamp: number;
+  departureTimestamp: number;
+
+  delayMinutes: number;
+  date?: Date;
+  dateDigits: string[];
+
+  tableValues: ITableRowValues;
+}
+
+export enum RowIndex {
+  HourLeading = 0,
+  HourSecondary = 1,
+  MinuteLeading = 2,
+  MinuteSecondary = 3,
+  TrainNumber = 4,
+  RouteVia = 5,
+  RouteTo = 6
+}
+
+interface ITableRowValues {
+  routeTo: string;
+  routeVia: string;
+  dateDigits: string[];
+  trainNumber: string;
+  // routeTo, routeVia, date1, date2, date3, date4, trainNumber
+  currentRowIndexes: [number, number, number, number, number, number, number];
+}

src/views/PragotronView.vue

@@ -85,9 +85,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import { ITableRow, RowIndex } from '../types/ITableRow';
 import { useMainStore } from '../stores/mainStore';
 import { useApiStore } from '../stores/apiStore';
+import { RowIndex, type ITableRow } from '../typings/common';
 
 const departureInfoEmptyObj: ITableRow = {
   timetableId: -1,
@@ -141,7 +141,9 @@ export default defineComponent({
 
     animatingStatus: 'init' as 'init' | 'running' | 'complete',
 
-    departureTable: new Array(7).fill(0).map(() => ({ ...departureInfoEmptyObj })) as ITableRow[],
+    departureTable: Array.from({ length: 7 })
+      .fill(0)
+      .map(() => ({ ...departureInfoEmptyObj })) as ITableRow[],
     departureRoutes: [''],
     dateDigits: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ''],
     trainNumbersSet: new Set<string>(['']),
@@ -308,7 +310,6 @@ export default defineComponent({
           if (!this.departureRoutes.includes(routeVia)) this.departureRoutes.push(routeVia);
           if (!this.departureRoutes.includes(routeTo)) this.departureRoutes.push(routeTo);
 
-
           this.trainNumbersSet.add(`${timetable.category} ${train.trainNo}`);
 
           return list;
@@ -398,10 +399,13 @@ export default defineComponent({
         });
 
         if (dep.trainNumber != dep.tableValues.trainNumber) {
-          dep.tableValues.trainNumber = Array.from(this.trainNumbersSet)[dep.tableValues.currentRowIndexes[RowIndex.TrainNumber]]
+          dep.tableValues.trainNumber = Array.from(this.trainNumbersSet)[
+            dep.tableValues.currentRowIndexes[RowIndex.TrainNumber]
+          ];
 
           dep.tableValues.currentRowIndexes[RowIndex.TrainNumber] =
-            (dep.tableValues.currentRowIndexes[RowIndex.TrainNumber] + 1) % this.trainNumbersSet.size;
+            (dep.tableValues.currentRowIndexes[RowIndex.TrainNumber] + 1) %
+            this.trainNumbersSet.size;
 
           isCurrentTickAnimating = true;
         }

tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    // Extra safety for array and object lookups, but may have false positives.
+    "noUncheckedIndexedAccess": false,
+
+    // Path mapping for cleaner imports.
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
+    // Specified here to keep it out of the root directory.
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  }
+}

tsconfig.json

@@ -1,18 +1,11 @@
 {
-  "compilerOptions": {
+  "files": [],
-    "target": "ESNext",
+  "references": [
-    "useDefineForClassFields": true,
+    {
-    "module": "ESNext",
+      "path": "./tsconfig.node.json"
-    "moduleResolution": "Node",
+    },
-    "strict": true,
+    {
-    "jsx": "preserve",
+      "path": "./tsconfig.app.json"
-    "sourceMap": true,
+    }
-    "resolveJsonModule": true,
+  ]
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -1,9 +1,12 @@
+// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
 {
+  "extends": "@tsconfig/node24/tsconfig.json",
+  "include": ["vite.config.*"],
   "compilerOptions": {
-    "composite": true,
+    "module": "preserve",
-    "module": "ESNext",
+    "moduleResolution": "bundler",
-    "moduleResolution": "Node",
+    "types": ["node"],
-    "allowSyntheticDefaultImports": true
+    "noEmit": true,
-  },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
-  "include": ["vite.config.ts"]
+  }
-}
+}

vite.config.ts

@@ -1,7 +1,19 @@
-import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url';
-import vue from '@vitejs/plugin-vue'
 
-// https://vitejs.dev/config/
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
-})
+
+  preview: {
+    port: 4000
+  },
+
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+});