Merge pull request #89 from Spythere/development

v1.24.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.24.0",
+  "version": "1.24.1",
   "private": true,
   "scripts": {
     "dev": "vite",

src/components/Global/StockList.vue

@@ -8,9 +8,12 @@
 
       <img
         class="traction-only"
-        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${computedStockList[0].split(':')[0]}${
+        :src="
-          /^EN/.test(computedStockList[0]) ? 'rb' : ''
+          getVehicleThumbnailURL(
-        }.png`"
+            computedStockList[0].split(':')[0],
+            /^EN/.test(computedStockList[0]) ? 'rb' : ''
+          )
+        "
         @error="onImageError($event, computedStockList[0])"
         width="300"
         height="60"
@@ -29,9 +32,9 @@
             :data-mouseover="stockName"
             data-tooltip-type="VehiclePreviewTooltip"
             :data-tooltip-content="stockName.split(':')[0]"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
+            :src="
-              /^EN/.test(stockName) ? 'rb' : ''
+              getVehicleThumbnailURL(stockName.split(':')[0], /^EN/.test(stockName) ? 'rb' : '')
-            }.png`"
+            "
             @error="onImageError($event, stockName)"
             @click.stop="() => {}"
             width="400"
@@ -44,7 +47,7 @@
             data-tooltip-type="VehiclePreviewTooltip"
             :data-tooltip-content="stockName.split(':')[0]"
             v-if="/^(EN|2EN)/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
+            :src="getVehicleThumbnailURL(stockName, 's')"
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
             "
@@ -56,7 +59,7 @@
             data-tooltip-type="VehiclePreviewTooltip"
             :data-tooltip-content="stockName.split(':')[0]"
             v-if="/^EN71/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
+            :src="getVehicleThumbnailURL(stockName, 's')"
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
             "
@@ -68,7 +71,7 @@
             data-tooltip-type="VehiclePreviewTooltip"
             :data-tooltip-content="stockName.split(':')[0]"
             v-if="/^(EN|2EN)/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
+            :src="getVehicleThumbnailURL(stockName, 'ra')"
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')
             "
@@ -110,6 +113,10 @@ export default defineComponent({
   },
 
   methods: {
+    getVehicleThumbnailURL(locoType: string, suffix?: string) {
+      return `https://static.spythere.eu/thumbnails/${locoType}${suffix}.png`;
+    },
+
     onImageError(event: Event, stockName: string) {
       let fallbackName = '';
 

src/components/JournalView/JournalOptions.vue

@@ -301,6 +301,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
+@import '../../styles/dropdown';
-@import '../../styles/dropdown_filters.scss';
+@import '../../styles/dropdown_filters';
 </style>

src/components/StationsView/StationFilterCard.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
     <div class="card_controls">
-      <button class="btn--filled btn--image" @click="toggleCard">
+      <button class="card-button btn--filled btn--image" @click="toggleCard">
         <img class="button_icon" src="/images/icon-filter2.svg" alt="filter icon" />
-        [F] {{ $t('options.filters') }}
+        <p>[F] {{ $t('options.filters') }}</p>
         <span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
       </button>
 
@@ -327,9 +327,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@import '../../styles/responsive';
-@import '../../styles/card.scss';
+@import '../../styles/card';
-@import '../../styles/animations.scss';
+@import '../../styles/animations';
 
 h3.section-header {
   text-align: center;
@@ -582,4 +582,10 @@ h3.section-header {
     }
   }
 }
+
+@include smallScreen {
+  .card_controls > button.card-button > p {
+    display: none;
+  }
+}
 </style>

src/components/StationsView/StationStats.vue

@@ -1,29 +1,55 @@
 <template>
   <div class="station-stats">
     <div class="separator" />
-    <div>
+
-      {{ $t('station-stats.u-factor') }}
+    <div class="stats-row">
-      <a
+      <div>
-        href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
+        <span
-        target="_blank"
+          >{{ $t('station-stats.u-factor') }}
-        :data-tooltip="$t('station-stats.u-factor-tooltip')"
+          <a
-        >(?)</a
+            href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
-      >:
+            target="_blank"
-      <b :style="calculateFactorStyle()">
+            :data-tooltip="$t('station-stats.u-factor-tooltip')"
-        {{ uFactor.toFixed(2) }}
+            >(?)</a
-      </b>
+          >:
-      | {{ $t('station-stats.avg-timetable-count') }}
+        </span>
-      <b>{{ avgTimetableCount.toFixed(2) }}</b>
+
-    </div>
+        <b class="u-factor" :style="calculateFactorStyle()">
-    <div>
+          {{ uFactor.toFixed(2) }}
-      {{ $t('station-stats.single-track-count') }}
+        </b>
-      <b>{{ trackCount.oneWayElectric }}</b> {{ $t('station-stats.electrified') }} /
+      </div>
-      <b>{{ trackCount.oneWayOther }}</b> {{ $t('station-stats.not-electrified') }} |
+
-      {{ $t('station-stats.double-track-count') }} <b>{{ trackCount.twoWayElectric }}</b>
+      <div>
-      {{ $t('station-stats.electrified') }} / <b>{{ trackCount.twoWayOther }}</b>
+        &bull;
-      {{ $t('station-stats.not-electrified') }} | {{ $t('station-stats.open-spawns') }}
+        {{ $t('station-stats.med-timetable-count') }}
-      <b>{{ spawnCount.passenger }}</b> - PAS / <b>{{ spawnCount.freight }}</b> - TOW /
+        <b>{{ medTimetableCount }}</b>
-      <b>{{ spawnCount.loco }}</b> - LUZ / <b>{{ spawnCount.all }}</b> - ALL
+      </div>
+
+      <div>
+        &bull;
+        {{ $t('station-stats.single-track-count') }}
+        <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
+      </div>
+
+      <div>
+        &bull;
+        {{ $t('station-stats.double-track-count') }}
+        <b>{{ trackCount.twoWay }}</b>
+        (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
+      </div>
+
+      <div>
+        &bull; {{ $t('station-stats.cross-sceneries') }} <b>{{ trackCount.crossTrack }}</b> (<b
+          >{{ trackCount.crossTrackElectric }} ⚡</b
+        >)
+      </div>
+
+      <div>
+        &bull;
+        {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
+        <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
+        <b>{{ spawnCount.all }}</b> - ALL
+      </div>
     </div>
   </div>
 </template>
@@ -63,18 +89,27 @@ export default defineComponent({
       return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : 0;
     },
 
-    avgTimetableCount() {
+    medTimetableCount() {
-      const scheduledTrainsTotal = this.mainStore.activeSceneryList.reduce<number>((acc, sc) => {
+      const scheduledTrainsArr = this.mainStore.activeSceneryList
-        if (sc.region != this.mainStore.region.id) return acc;
+        .reduce<number[]>((acc, sc) => {
+          if (sc.region != this.mainStore.region.id) return acc;
 
-        acc += sc.scheduledTrainCount.all;
+          acc.push(sc.scheduledTrainCount.all);
 
-        return acc;
+          return acc;
-      }, 0);
+        }, [])
+        .sort((a, b) => Math.sign(a - b));
 
-      return this.mainStore.activeSceneryList.length != 0
+      if (scheduledTrainsArr.length == 0) return 0;
-        ? scheduledTrainsTotal / this.mainStore.activeSceneryList.length
+
-        : 0;
+      if (scheduledTrainsArr.length % 2 == 0) {
+        let v1 = scheduledTrainsArr[scheduledTrainsArr.length / 2];
+        let v2 = scheduledTrainsArr[scheduledTrainsArr.length / 2 - 1];
+
+        return (v1 + v2) / 2;
+      }
+
+      return scheduledTrainsArr[~~(scheduledTrainsArr.length / 2)];
     },
 
     trackCount() {
@@ -87,23 +122,46 @@ export default defineComponent({
         )
         .reduce(
           (acc, st) => {
-            [...st.generalInfo!.routes.single, ...st.generalInfo!.routes.double].forEach((r) => {
+            const { routes } = st.generalInfo!;
+
+            if (
+              routes.single.filter((r) => !r.isInternal).length > 0 &&
+              routes.double.filter((r) => !r.isInternal).length > 0
+            ) {
+              acc.crossTrack++;
+
+              if (
+                routes.single.some((r) => r.isElectric) &&
+                routes.double.some((r) => r.isElectric)
+              )
+                acc.crossTrackElectric++;
+            }
+
+            [...routes.single, ...routes.double].forEach((r) => {
               if (r.isInternal) return;
 
-              const keyName: keyof typeof acc = `${r.routeTracks == 2 ? 'twoWay' : 'oneWay'}${r.isElectric ? 'Electric' : 'Other'}`;
+              acc[r.routeTracks == 2 ? 'twoWay' : 'oneWay'] += 1;
-
+              if (r.isElectric) acc[r.routeTracks == 2 ? 'twoWayElectric' : 'oneWayElectric'] += 1;
-              acc[keyName] += 1;
             });
 
             return acc;
           },
-          { oneWayElectric: 0, oneWayOther: 0, twoWayElectric: 0, twoWayOther: 0 }
+          {
+            oneWay: 0,
+            oneWayElectric: 0,
+            twoWay: 0,
+            twoWayElectric: 0,
+            crossTrack: 0,
+            crossTrackElectric: 0
+          }
         );
     },
 
     spawnCount() {
       return this.mainStore.activeSceneryList.reduce(
         (acc, scenery) => {
+          if (scenery.region != this.mainStore.region.id) return acc;
+
           scenery.spawns.forEach((spawn) => {
             if (/EZT|POS|OSOB/i.test(spawn.spawnName)) acc['passenger'] += 1;
             if (/TOW/i.test(spawn.spawnName)) acc['freight'] += 1;
@@ -133,19 +191,30 @@ export default defineComponent({
   color: #ddd;
 }
 
-[data-factor-low='true'] {
+.stats-row {
-  color: #ddd;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  text-wrap: pretty;
+  gap: 0.25em;
+  margin-top: 0.25em;
 }
 
-[data-factor-mediocre='true'] {
+.u-factor {
-  color: lightgreen;
+  [data-factor-low='true'] {
-}
+    color: #ddd;
+  }
 
-[data-factor-high='true'] {
+  [data-factor-mediocre='true'] {
-  color: greenyellow;
+    color: lightgreen;
-}
+  }
 
-[data-factor-highest='true'] {
+  [data-factor-high='true'] {
-  color: rgb(22, 245, 22);
+    color: greenyellow;
+  }
+
+  [data-factor-highest='true'] {
+    color: rgb(22, 245, 22);
+  }
 }
 </style>

src/components/StationsView/StationTable.vue

@@ -406,7 +406,7 @@ $rowCol: #424242;
 
 .station_table {
   height: 80vh;
-  min-height: 550px;
+  min-height: 700px;
   overflow: auto;
   font-weight: 500;
 }

src/components/StationsView/typings.ts

@@ -55,4 +55,6 @@ export interface Filter {
   onlineFromHours: number;
   withActiveTimetables: boolean;
   withoutActiveTimetables: boolean;
+  junction: boolean;
+  nonJunction: boolean;
 }

src/components/TrainsView/TrainOptions.vue

@@ -81,7 +81,6 @@
           </div>
 
           <div class="filter-actions">
-            <div></div>
             <button class="btn--action" @click="resetAllFilters">
               {{ $t('options.filter-reset') }}
             </button>
@@ -223,9 +222,6 @@ export default defineComponent({
 
 .filter-actions {
   display: flex;
-  gap: 0.5em;
-  width: 100%;
-
   margin-top: 1em;
 
   > * {

src/data/options.json

@@ -4,6 +4,7 @@
     "timetables",
     "reality",
     "package-access",
+    "station-type",
     "access",
     "control",
     "blockades",
@@ -61,6 +62,20 @@
       "value": false,
       "defaultValue": false
     },
+    {
+      "id": "junction",
+      "name": "junction",
+      "section": "station-type",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "nonJunction",
+      "name": "nonJunction",
+      "section": "station-type",
+      "value": true,
+      "defaultValue": true
+    },
     {
       "id": "SPK",
       "name": "SPK",

src/locales/en.json

@@ -174,6 +174,7 @@
 
     "sections": {
       "quick": "QUICK FILTERS",
+      "station-type": "STATION TYPE",
       "reality": "SCENERY REALITY",
       "package-access": "IN-GAME AVAILABILITY",
       "access": "GENERAL AVAILABILITY",
@@ -233,6 +234,9 @@
     "withActiveTimetables": "ACTIVE",
     "withoutActiveTimetables": "NO ACTIVE",
 
+    "junction": "JUNCTIONS",
+    "nonJunction": "OTHER",
+
     "sliders": {
       "min-lvl": "MIN. REQUIRED DISPATCHER LEVEL",
       "max-lvl": "MAX. REQUIRED DISPATCHER LEVEL",
@@ -299,11 +303,10 @@
   "station-stats": {
     "u-factor": "U-factor",
     "u-factor-tooltip": "(?) Current server traffic factor (driver count divided by dispatcher count)",
-    "avg-timetable-count": "Average timetable count for one dispatcher:",
+    "med-timetable-count": "Median of scenery timetables:",
-    "single-track-count": "Available single track routes:",
+    "single-track-count": "Single track routes:",
-    "double-track-count": "Available double track routes:",
+    "double-track-count": "Double track routes:",
-    "electrified": "(electrified)",
+    "cross-sceneries": "Cross-track sceneries (1-track <-> 2-track)",
-    "not-electrified": "(not electr.)",
     "open-spawns": "Open spawns:"
   },
   "trains": {

src/locales/pl.json

@@ -108,8 +108,8 @@
     "filters": "FILTRY",
     "donate": "WESPRZYJ",
 
-    "search-button": "Szukaj",
+    "search-button": "SZUKAJ",
-    "reset-button": "Zresetuj",
+    "reset-button": "ZRESETUJ",
 
     "sort-title": "SORTUJ WG:",
     "filter-title": "FILTRUJ WG:",
@@ -171,6 +171,7 @@
 
     "sections": {
       "quick": "SZYBKIE FILTRY",
+      "station-type": "RODZAJ STACJI",
       "reality": "FIKCYJNOŚĆ SCENERII",
       "package-access": "DOSTĘPNOŚĆ W PACZCE",
       "access": "DOSTĘPNOŚĆ OGÓLNA",
@@ -229,6 +230,9 @@
     "withActiveTimetables": "AKTYWNE",
     "withoutActiveTimetables": "BEZ AKTYWNYCH",
 
+    "junction": "WĘZŁOWE",
+    "nonJunction": "INNE",
+
     "sliders": {
       "min-lvl": "MIN. WYMAGANY POZIOM DYŻURNEGO",
       "max-lvl": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
@@ -292,11 +296,10 @@
   "station-stats": {
     "u-factor": "Współczynnik Ugla",
     "u-factor-tooltip": "(?) Współczynnik ruchu na serwerze (liczba maszynistów online dzielona na liczbę dyżurnych ruchu)",
-    "avg-timetable-count": "Średnia liczba rozkładów jazdy na dyżurnego:",
+    "med-timetable-count": "Mediana rozkładów jazdy na sceneriach:",
-    "single-track-count": "Dostępne szlaki jednotorowe:",
+    "single-track-count": "Szlaki jednotorowe:",
-    "double-track-count": "Dostępne szlaki dwutorowe:",
+    "double-track-count": "Szlaki dwutorowe:",
-    "electrified": "(zelektr.)",
+    "cross-sceneries": "Scenerie przejściowe (1-tor <-> 2-tor):",
-    "not-electrified": "(niezelektr.)",
     "open-spawns": "Otwarte spawny:"
   },
   "trains": {

src/main.ts

@@ -5,10 +5,15 @@ import router from './router';
 import i18n from './i18n';
 
 import { createPinia } from 'pinia';
-import useCustomSW from './mixins/useCustomSW';
+import { registerSW } from 'virtual:pwa-register';
 
 // Service worker
-useCustomSW();
+registerSW({
+  immediate: true,
+  onNeedRefresh() {
+    console.log('Needs refresh!');
+  }
+});
 
 const clickOutsideDirective: Directive = {
   mounted(el, binding) {

src/mixins/useCustomSW.ts

@@ -1,13 +0,0 @@
-import { useRegisterSW } from 'virtual:pwa-register/vue';
-
-export default () => {
-  const { needRefresh, updateServiceWorker, offlineReady } = useRegisterSW({
-    immediate: true
-  });
-
-  return {
-    needRefresh,
-    updateServiceWorker,
-    offlineReady
-  };
-};

src/scripts/utils/stationFilterUtils.ts

@@ -229,6 +229,13 @@ export const filterStations = (station: Station, filters: Filter) => {
       !authors?.map((a) => a.toLocaleLowerCase()).includes(filters['authors'].toLocaleLowerCase())
     )
       return false;
+
+    const singleTracks = routes.single.filter((r) => !r.isInternal);
+    const doubleTracks = routes.double.filter((r) => !r.isInternal);
+
+    let isJunction = singleTracks.length > 0 && doubleTracks.length > 0;
+    if (filters['junction'] && isJunction) return false;
+    if (filters['nonJunction'] && !isJunction) return false;
   }
 
   return true;

src/store/stationFiltersStore.ts

@@ -30,12 +30,6 @@ const filterInitStates: Filter = {
   mieszana: false,
   SBL: false,
   PBL: false,
-  minLevel: 0,
-  maxLevel: 20,
-  minOneWayCatenary: 0,
-  minOneWay: 0,
-  minTwoWayCatenary: 0,
-  minTwoWay: 0,
   'include-selected': false,
   'no-1track': false,
   'no-2track': false,
@@ -52,10 +46,20 @@ const filterInitStates: Filter = {
   unsignedStatus: false,
   withActiveTimetables: false,
   withoutActiveTimetables: false,
+
+  junction: false,
+  nonJunction: false,
+
   maxVmax: 200,
   minVmax: 0,
   authors: '',
-  onlineFromHours: 0
+  onlineFromHours: 0,
+  minLevel: 0,
+  maxLevel: 20,
+  minOneWayCatenary: 0,
+  minOneWay: 0,
+  minTwoWayCatenary: 0,
+  minTwoWay: 0
 };
 
 export const useStationFiltersStore = defineStore('stationFiltersStore', {

src/store/utils.ts

@@ -9,12 +9,6 @@ import {
   ScenerySpawnType
 } from '../typings/common';
 
-export function getLocoURL(locoType: string): string {
-  return `https://rj.td2.info.pl/dist/img/thumbnails/${
-    locoType.includes('EN') ? locoType + 'rb' : locoType
-  }.png`;
-}
-
 export function getStatusTimestamp(stationStatus: any): number {
   if (!stationStatus) return -2;
 

src/styles/global.scss

@@ -121,8 +121,6 @@ input {
   height: 7px;
   background-color: lightgreen;
   border-radius: 50%;
-
-  margin-left: 10px;
 }
 
 a {

src/views/JournalDispatchers.vue

@@ -17,8 +17,9 @@
         <JournalStats :statsButtons="statsButtons" />
       </div>
 
-      <div class="journal_refreshed-date" v-if="dataRefreshedAt">
+      <div class="journal_refreshed-date">
-        {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
+        {{ $t('journal.data-refreshed-at') }}:
+        {{ dataRefreshedAt?.toLocaleString($i18n.locale) ?? '---' }}
       </div>
 
       <div class="list_wrapper" @scroll="handleScroll">

src/views/JournalTimetables.vue

@@ -17,8 +17,9 @@
         <JournalStats :statsButtons="statsButtons" />
       </div>
 
-      <div class="journal_refreshed-date" v-if="dataRefreshedAt">
+      <div class="journal_refreshed-date">
-        {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
+        {{ $t('journal.data-refreshed-at') }}:
+        {{ dataRefreshedAt?.toLocaleString($i18n.locale) ?? '---' }}
       </div>
 
       <div class="list_wrapper" @scroll="handleScroll">

src/views/StationsView.vue

@@ -84,6 +84,7 @@ export default defineComponent({
 .stations-options {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 0.5em;
 
   margin-bottom: 0.5em;

vite.config.ts

@@ -20,8 +20,8 @@ export default defineConfig({
         cleanupOutdatedCaches: true,
         runtimeCaching: [
           {
-            urlPattern: new RegExp('^https://stacjownik.spythere.eu/api/getSceneries', 'i'),
+            urlPattern: /^https:\/\/stacjownik.spythere.eu\/api\/getSceneries/i,
-            handler: 'CacheFirst',
+            handler: 'StaleWhileRevalidate',
             options: {
               cacheName: 'spythere-sceneries-cache',
               cacheableResponse: {
@@ -30,20 +30,10 @@ export default defineConfig({
             }
           },
           {
-            urlPattern: new RegExp('^https://rj.td2.info.pl/dist/img/thumbnails/*', 'i'),
+            urlPattern: /^https:\/\/static.spythere.eu\/.*/i,
             handler: 'CacheFirst',
             options: {
-              cacheName: 'swdr-images-cache',
+              cacheName: 'spythere-static-cache',
-              cacheableResponse: {
-                statuses: [0, 200, 404]
-              }
-            }
-          },
-          {
-            urlPattern: new RegExp('^https://static.spythere.eu/images/*', 'i'),
-            handler: 'CacheFirst',
-            options: {
-              cacheName: 'spythere-images-cache',
               cacheableResponse: {
                 statuses: [0, 200]
               }