Added version system & changed grouped timetable view to only group by destination

Author: GNimrodG

smo-frontend/.gitignore

@@ -25,3 +25,7 @@ dist-ssr
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+# Auto-generated version files
+src/version.ts
+public/version.txt

smo-frontend/package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "yarn generate-version && tsc && vite build",
+    "generate-version": "node scripts/generate-version.js",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

smo-frontend/scripts/generate-version.js

@@ -0,0 +1,43 @@
+import { writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Generate version number based on current date
+// Format: YYYY.MM.DD.HHMM
+const now = new Date();
+const year = now.getFullYear();
+const month = String(now.getMonth() + 1).padStart(2, "0");
+const day = String(now.getDate()).padStart(2, "0");
+const hours = String(now.getHours()).padStart(2, "0");
+const minutes = String(now.getMinutes()).padStart(2, "0");
+
+const version = `${year}.${month}.${day}.${hours}${minutes}`;
+
+// Generate version.ts file
+const versionTsContent = `// This file is auto-generated by scripts/generate-version.js
+// Do not edit manually
+
+export const VERSION = "${version}";
+export const BUILD_DATE = "${now.toISOString()}";
+`;
+
+// Generate version.txt file
+const versionTxtContent = version;
+
+// Write files
+const srcDir = join(__dirname, "..", "src");
+const publicDir = join(__dirname, "..", "public");
+
+try {
+  writeFileSync(join(srcDir, "version.ts"), versionTsContent, "utf8");
+  console.log(`✓ Generated src/version.ts with version ${version}`);
+
+  writeFileSync(join(publicDir, "version.txt"), versionTxtContent, "utf8");
+  console.log(`✓ Generated public/version.txt with version ${version}`);
+} catch (error) {
+  console.error("Error generating version files:", error);
+  throw error;
+}

smo-frontend/src/assets/translations.json

@@ -251,6 +251,12 @@
         "GotIt": "Got it!",
         "TurnOff": "Turn off"
       },
+      "VersionCheck": {
+        "UpdateAvailable": "Update Available",
+        "UpdateMessage": "A new version is available. Current: {{current}}, Latest: {{latest}}. Please refresh to get the latest version.",
+        "RefreshNow": "Refresh Now",
+        "RefreshDescription": "Refreshing the page will load the latest version of the application. If you experience any issues after refreshing, try clearing your browser cache."
+      },
       "TrainTypes": {
         "Main": {
           "EC": "EuroCity train",
@@ -593,6 +599,12 @@
         "GotIt": "Verstanden!",
         "TurnOff": "Ausschalten"
       },
+      "VersionCheck": {
+        "UpdateAvailable": "Update verfügbar",
+        "UpdateMessage": "Eine neue Version ist verfügbar. Aktuell: {{current}}, Neueste: {{latest}}. Bitte aktualisieren Sie, um die neueste Version zu erhalten.",
+        "RefreshNow": "Jetzt aktualisieren",
+        "RefreshDescription": "Das Aktualisieren der Seite lädt die neueste Version der Anwendung. Wenn Sie nach dem Aktualisieren Probleme haben, versuchen Sie, den Cache Ihres Browsers zu leeren."
+      },
       "TrainTypes": {
         "Main": {
           "EC": "EuroCity-Zug",
@@ -936,6 +948,12 @@
         "GotIt": "Értem!",
         "TurnOff": "Kikapcsolás"
       },
+      "VersionCheck": {
+        "UpdateAvailable": "Frissítés elérhető",
+        "UpdateMessage": "Új verzió érhető el. Jelenlegi: {{current}}, Legújabb: {{latest}}. Kérjük, frissítsen a legújabb verzió megszerzéséhez.",
+        "RefreshNow": "Frissítés most",
+        "RefreshDescription": "Az oldal frissítésével a legújabb verziót tölti be. Ha frissítés után problémái vannak, próbálja meg törölni a böngésző gyorsítótárát."
+      },
       "TrainTypes": {
         "Main": {
           "EC": "EuroCity vonat",
@@ -1283,6 +1301,12 @@
         "GotIt": "Anladım!",
         "TurnOff": "Kapat"
       },
+      "VersionCheck": {
+        "UpdateAvailable": "Güncelleme Mevcut",
+        "UpdateMessage": "Yeni bir sürüm mevcut. Mevcut: {{current}}, En son: {{latest}}. Lütfen en son sürümü almak için yenileyin.",
+        "RefreshNow": "Şimdi Yenile",
+        "RefreshDescription": "Sayfayı yenileyerek en son sürümü yüklersiniz. Yenileme sonrası sorun yaşarsanız, tarayıcı önbelleğinizi temizlemeyi deneyin."
+      },
       "TrainTypes": {
         "Main": {
           "EC": "EuroCity treni",
@@ -1628,6 +1652,12 @@
         "GotIt": "Rozumiem!",
         "TurnOff": "Wyłącz"
       },
+      "VersionCheck": {
+        "UpdateAvailable": "Dostępna aktualizacja",
+        "UpdateMessage": "Dostępna jest nowa wersja. Obecna: {{current}}, Najnowsza: {{latest}}. Odśwież stronę, aby uzyskać najnowszą wersję.",
+        "RefreshNow": "Odśwież teraz",
+        "RefreshDescription": "Odświeżenie strony załaduje najnowszą wersję aplikacji. Jeśli po odświeżeniu wystąpią jakiekolwiek problemy, spróbuj wyczyścić pamięć podręczną przeglądarki."
+      },
       "TrainTypes": {
         "Main": {
           "EC": "Pociąg EuroCity",

smo-frontend/src/components/MainMap.tsx

@@ -16,6 +16,7 @@ import { goToSignal } from "../utils/geom-utils";
 import MapLinesContext from "../utils/map-lines-context";
 import SelectedRouteContext from "../utils/selected-route-context";
 import SelectedTrainContext from "../utils/selected-train-context";
+import { VERSION } from "../version";
 import AutoZoomHandler from "./AutoZoom";
 import BackgroundUpdatesNotification from "./BackgroundUpdatesNotification";
 import ErrorBoundary from "./ErrorBoundary";
@@ -32,6 +33,7 @@ import StatsDisplay from "./StatsDisplay";
 import ServerTrainListModal from "./trains/ServerTrainListModal";
 import RefreshableTileLayer from "./utils/RefreshableTileLayer";
 import ThemeToggle from "./utils/ThemeToggle";
+import VersionCheck from "./VersionCheck";
 
 const ActiveSignalsLayer = lazy(() => import("./layers/ActiveSignalsLayer"));
 const MapLinesLayer = lazy(() => import("./layers/MapLinesLayer"));
@@ -95,7 +97,7 @@ const MainMap: FunctionComponent = () => {
     () =>
       [
         '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
-        '<a href="https://github.com/GNimrodG/simrail-map-optimized" target="_blank">GitHub</a>',
+        `<a href="https://github.com/GNimrodG/simrail-map-optimized" target="_blank">GitHub</a> (v${VERSION})`,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (window as any).feedback && `<a onclick="window.feedback()" href="#">${t("BugReport")}</a>`,
         `<a href="/privacy-policy.html" target="_blank">${t("PrivacyPolicy.Title")}</a>`,
@@ -132,6 +134,7 @@ const MainMap: FunctionComponent = () => {
   return (
     <>
       {!isConnected && <Loading />}
+      <VersionCheck />
       <MapContainer
         ref={setMap}
         center={[51.015482, 19.572143]}

smo-frontend/src/components/VersionCheck.tsx

@@ -0,0 +1,56 @@
+import Button from "@mui/joy/Button";
+import Sheet from "@mui/joy/Sheet";
+import Stack from "@mui/joy/Stack";
+import Typography from "@mui/joy/Typography";
+import { type FunctionComponent } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useVersionCheck } from "../hooks/useVersionCheck";
+
+const VersionCheck: FunctionComponent = () => {
+  const { t } = useTranslation();
+  const { isOutdated, currentVersion, latestVersion } = useVersionCheck();
+
+  if (!isOutdated) {
+    return null;
+  }
+
+  const handleRefresh = () => {
+    globalThis.location.reload();
+  };
+
+  return (
+    <Sheet
+      sx={{
+        position: "fixed",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        zIndex: 10000,
+        p: 3,
+        borderRadius: "md",
+        boxShadow: "lg",
+        maxWidth: 400,
+      }}
+      variant="outlined"
+      color="warning">
+      <Stack spacing={2}>
+        <Typography level="h4" color="warning">
+          {t("VersionCheck.UpdateAvailable")}
+        </Typography>
+        <Typography level="body-md">
+          {t("VersionCheck.UpdateMessage", {
+            current: currentVersion,
+            latest: latestVersion,
+          })}
+        </Typography>
+        <Button onClick={handleRefresh} color="warning">
+          {t("VersionCheck.RefreshNow")}
+        </Button>
+        <Typography level="body-xs">{t("VersionCheck.RefreshDescription")}</Typography>
+      </Stack>
+    </Sheet>
+  );
+};
+
+export default VersionCheck;

smo-frontend/src/components/timetable/StationTimetableDisplay.tsx

@@ -2,6 +2,7 @@
 import Chip from "@mui/joy/Chip";
 import Sheet from "@mui/joy/Sheet";
 import Stack from "@mui/joy/Stack";
+import moment from "moment";
 import { type FunctionComponent, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useMap } from "react-leaflet";
@@ -23,6 +24,7 @@ import StationTimetableTableView from "./StationTimetableTableView";
 export interface StationTimetableDisplayProps {
   timetable: SimplifiedTimtableEntry[];
   onClose?: () => void;
+  isCollapsed?: boolean;
 }
 
 const BUFFER_TIME = 30 * 60 * 1000; // 30 minutes in milliseconds
@@ -64,7 +66,11 @@ function isTrainAtPrevStation(
   );
 }
 
-const StationTimetableDisplay: FunctionComponent<StationTimetableDisplayProps> = ({ timetable, onClose }) => {
+const StationTimetableDisplay: FunctionComponent<StationTimetableDisplayProps> = ({
+  timetable,
+  onClose,
+  isCollapsed,
+}) => {
   const map = useMap();
   const { setSelectedTrain } = useContext(SelectedTrainContext);
   const { t: tSettings } = useTranslation("translation", {
@@ -187,7 +193,8 @@ const StationTimetableDisplay: FunctionComponent<StationTimetableDisplayProps> =
         !!train?.TrainData.SignalInFront &&
         train.TrainData.DistanceToSignalInFront < 2000 &&
         localStationNames.has(findStationForSignal(train.TrainData.SignalInFront.split("@")[0])?.Name ?? "") &&
-        train.TrainData.VDDelayedTimetableIndex >= minIndex;
+        (train.TrainData.VDDelayedTimetableIndex >= minIndex ||
+          indexes.includes(train.TrainData.VDDelayedTimetableIndex));
 
       const isCurrentStationTheNextStation =
         isTrainAtPrevStation(train, entry, trainDelays) ||
@@ -224,7 +231,11 @@ const StationTimetableDisplay: FunctionComponent<StationTimetableDisplayProps> =
         (line, index, arr) => index === 0 || line !== arr[index - 1],
       );
 
-      const shouldLeave = isInsideStation && passedBasedOnDepartureTime && !!train && train.TrainData.Velocity < 5;
+      const shouldLeave =
+        isInsideStation &&
+        isPastStation(entry, moment(currentTime).add(1, "minute").toDate()) &&
+        !!train &&
+        train.TrainData.SignalInFrontSpeed === 0;
 
       return {
         entry,
@@ -307,7 +318,7 @@ const StationTimetableDisplay: FunctionComponent<StationTimetableDisplayProps> =
           <StationTimetableCardsView entryStates={entryStates} onPanToTrain={panToTrain} />
         )}
         {activeViewMode === "grouped" && (
-          <StationTimetableGroupedView entryStates={entryStates} onPanToTrain={panToTrain} />
+          <StationTimetableGroupedView entryStates={entryStates} onPanToTrain={panToTrain} isCollapsed={isCollapsed} />
         )}
       </Sheet>
     </Stack>