Aktualizacja 1.9.8 06/07/2022

Aktualizacja wersji 1.9.8
2026-05-03 13:28:11 +00:00 · 2022-07-06 22:42:05 +02:00
parent 49efa48642 10934b12d8
commit 47e6d18efe
16 changed files with 178 additions and 81 deletions
@@ -213,6 +213,7 @@
    font-weight: bold;
    padding: 0.1em 0.5em;
    color: paleturquoise;
+
  }

  .options {
@@ -42,7 +42,7 @@
              </div>

              <span class="info_region">
-                <SelectBox :itemList="options.regions" :defaultItemIndex="0" @selected="changeRegion" />
+                <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
              </span>
            </span>

@@ -124,6 +124,20 @@ export default defineComponent({
    trainList() {
      return this.store.trainList.filter((train) => train.online);
    },
+
+    computedRegions() {
+      return this.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,
+        };
+      });
+    },
  },

  data: () => ({
@@ -141,6 +155,8 @@ export default defineComponent({
      pl: require('@/assets/icon-pl.svg'),
      error: require('@/assets/icon-error.svg'),
      dollar: require('@/assets/icon-dollar.svg'),
+      dispatcher: require('@/assets/icon-dispatcher.svg'),
+      train: require('@/assets/icon-train.svg'),
      discord: require('@/assets/icon-discord.png'),
    },
  }),
@@ -204,10 +204,18 @@ export default defineComponent({
      deep: true,

      handler(statuses: StoreState['dataStatuses']) {
+        const connectionStatus = statuses.connection;
        const sceneryDataStatus = statuses.sceneries;
        const trainsDataStatus = statuses.trains;
        const dispatcherDataStatus = statuses.dispatchers;

+        if (connectionStatus == DataStatus.Error) {
+          this.setSignalStatus(connectionStatus);
+          this.indicator.status = connectionStatus;
+          this.indicator.message = 'data-status.S1a-connection';
+          return;
+        }
+
        if (sceneryDataStatus == DataStatus.Error) {
          this.setSignalStatus(sceneryDataStatus);
          this.indicator.status = sceneryDataStatus;
@@ -1,8 +1,9 @@
 <template>
-  <div class="select-box">
+  <div class="select-box" >
    <div class="select-box_content">
      <button class="selected" @click="toggleBox">
-        <span class="text--primary">{{ prefix }}</span> {{ computedSelectedItem.value }}
+        <span class="text--primary">{{ prefix }}</span>
+        <span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
      </button>

      <ul class="options" :ref="(el) => (listRef = el as Element)">
@@ -15,9 +16,7 @@
          >
            <label :for="item.id" v-if="listOpen">
              <input type="button" :id="item.id" name="select-box" @click="selectOption(item)" />
-              <span :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''">
-                {{ item.value }}
-              </span>
+              <span :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''" v-html="item.value"> </span>
            </label>
          </transition>
        </li>
@@ -36,6 +35,7 @@ import { computed, defineComponent, Ref, ref } from '@vue/runtime-core';
 interface Item {
  id: string;
  value: string;
+  selectedValue?: string;
 }

 export default defineComponent({
@@ -193,8 +193,6 @@ ul.options {
  z-index: 10;

  width: 100%;
-
-  margin-top: 0.25em;
 }

 li.option {
@@ -207,10 +205,11 @@ li.option {
    -moz-appearance: none;
    appearance: none;
    border: none;
+    outline: none;

    &:focus + span {
      color: $accentCol;
-      font-weight: bold;
+      font-weight: 800;
    }
  }

@@ -229,7 +228,7 @@ li.option {
      background-color: hsla(0, 0%, 20%, 0.95);
    }

-    padding: 0.75em 0;
+    padding: 0.5em 0;

    width: 100%;

@@ -149,11 +149,7 @@ export default defineComponent({
    statsCardOpen: false,
  }),

-  setup(props) {
-    watch(props, (val) => {
-      console.log(val.dispatcherName);
-    });
-
+  setup() {
    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
      status: DataStatus.Loading,
      error: null,
@@ -79,7 +79,6 @@ $terminated: salmon;
 $disconnected: slategray;

 .info-user-list {
-  padding: 0.5em;

  ul {
    display: flex;
@@ -95,9 +95,12 @@
                  <span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
                </div>
                <div v-else>
-                  <s style="margin-right: 0.2em" class="text--grayed">{{
-                    timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
-                  }}</s>
+                  <div>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{
+                      timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
+                    }}</s>
+                  </div>
+
                  <span>
                    {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
@@ -108,11 +111,22 @@
            </span>

            <span class="schedule-stop">
-              <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
-                {{ scheduledTrain.stopInfo.stopTime }}
-                {{ scheduledTrain.stopInfo.stopType || 'pt' }}
+              <span class="stop-time">
+                <span v-if="scheduledTrain.stopInfo.stopTime">
+                  {{ scheduledTrain.stopInfo.stopTime }}
+                  {{ scheduledTrain.stopInfo.stopType || 'pt' }}
+                </span>
+
+                <span v-else>&nbsp;</span>
+              </span>
+
+              <span class="arrow"></span>
+
+              <span class="stop-line">
+                {{ scheduledTrain.arrivingLine }}
+                {{ scheduledTrain.arrivingLine && scheduledTrain.departureLine && '&gt;' }}
+                {{ scheduledTrain.departureLine }}
              </span>
-              <span class="stop-arrow arrow"></span>
            </span>

            <span class="schedule-departure">
@@ -125,9 +139,11 @@
                  <span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
                </div>
                <div v-else>
-                  <s style="margin-right: 0.2em" class="text--grayed">{{
-                    timestampToString(scheduledTrain.stopInfo.departureTimestamp)
-                  }}</s>
+                  <div>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{
+                      timestampToString(scheduledTrain.stopInfo.departureTimestamp)
+                    }}</s>
+                  </div>

                  <span>
                    {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
@@ -201,13 +217,15 @@ export default defineComponent({
        station.onlineInfo?.scheduledTrains ||
        [];

+      if (!scheduledTrains) return [];
+
      return (
-        scheduledTrains?.sort((a, b) => {
+        scheduledTrains.sort((a, b) => {
          if (a.stopStatusID > b.stopStatusID) return 1;
-          else if (a.stopStatusID < b.stopStatusID) return -1;
+          if (a.stopStatusID < b.stopStatusID) return -1;

          if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
-          else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp) return -1;
+          if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp) return -1;

          return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp ? 1 : -1;
        }) || []
@@ -459,10 +477,15 @@ h3.timetable-header {
    position: relative;
    display: flex;
    flex-direction: column;
+    font-size: 0.85em;
+
+    padding: 0.3em 0;
+
+    .stop-line {
+      margin-top: 0.25em;
+    }

    .stop-time {
-      font-size: 0.85em;
-      // position: absolute;
      transform: translateY(-0.25em);
    }
  }
@@ -123,7 +123,7 @@ export default defineComponent({
        if (lastMajorConfirmed + 1 >= props.train.timetableData!.followingStops.length) return activeMinorStopList;

        for (let i = lastMajorConfirmed + 1; i < props.train.timetableData!.followingStops.length; i++) {
-          if (props.train.timetableData!.followingStops[i].stopNameRAW.includes('po.')) activeMinorStopList.push(i);
+          if (/po\.|sbl/gi.test(props.train.timetableData!.followingStops[i].stopNameRAW)) activeMinorStopList.push(i);
          else break;
        }

@@ -144,6 +144,7 @@ export default defineComponent({
        begin: stop.beginsHere,
        end: stop.terminatesHere,
        delayed: stop.departureDelay > 0,
+        sbl: /sbl/gi.test(stop.stopName),
        [stop.stopType.replaceAll(', ', '-')]:
          stop.stopType.match(new RegExp('ph|pm|pt')) && !stop.confirmed && !stop.beginsHere,
        'minor-stop-active': this.activeMinorStops.includes(index),
@@ -232,6 +233,10 @@ ul.stock-list {

  display: flex;
  align-items: center;
+
+  &.misc {
+    background: gray;
+  }
 }

 .stop-comment {
@@ -272,6 +277,17 @@ ul.stop_list > li.stop {

  padding: 0 0.5em;

+  &.sbl {
+    .stop-name,
+    .stop-date {
+      opacity: 0.7;
+    }
+
+    .stop-name {
+      background-color: #333;
+    }
+  }
+
  &[class*='ph'] > .stop_info > .indicator {
    border-color: $stopNameClr;
  }
@@ -183,9 +183,9 @@ export default defineComponent({
  padding: 1em 0;
  margin: 1em 0;

-  font-size: 1.35em;
+  font-size: 1.5em;

-  background: var(--clr-bg);
+  background: #333;
 }

 img.train-image {
@@ -11,7 +11,7 @@
    "migration-confirm": "Roger that!"
  },
  "data-status": {
-    "S1a-connection": "<b>S1a signal</b> <br> Cannot connect with SWDR API service!",
+    "S1a-connection": "<b>S1a signal</b> <br> Cannot connect with Stacjownik API service!",
    "S1a-sceneries": "<b>S1a signal</b> <br> Cannot load online stations data!",
    "S2": "<b>S2 signal</b> <br> All data loaded successfully!",
    "S3": "<b>S3 signal</b> <br> Loading data...",
@@ -108,7 +108,7 @@
    "hour": "h",
    "no-limit": "NO LIMIT",
    "include-selected": "INCLUDE SELECTED",
-    "save": "🗸 SAVE FILTERS",
+    "save": "↵ SAVE FILTERS",
    "reset": "RESET FILTERS",
    "close": "CLOSE FILTERS"
  },
@@ -12,7 +12,7 @@
  },

  "data-status": {
-    "S1a-connection": "<b>Sygnał S1a</b> <br> Błąd podczas próby połączenia się z serwisem SWDR!",
+    "S1a-connection": "<b>Sygnał S1a</b> <br> Błąd podczas próby połączenia się z API Stacjownika!",
    "S1a-sceneries": "<b>Sygnał S1a</b> <br> Błąd podczas pobierania danych o sceneriach online!",
    "S2": "<b>Sygnał S2</b> <br> Pomyślnie załadowano dane!",
    "S3": "<b>Sygnał S3</b> <br> Pobieranie danych...",
@@ -109,7 +109,7 @@
    "hour": " godz.",
    "no-limit": "BEZ LIMITU",
    "include-selected": "POKAŻ ZAZNACZONE",
-    "save": "🗸 ZAPISZ FILTRY",
+    "save": "↵ ZAPISZ FILTRY",
    "reset": "RESETUJ FILTRY",
    "close": "ZAMKNIJ FILTRY"
  },
@@ -65,8 +65,7 @@ export default defineComponent({
          else if (
            i > 0 &&
            i < stops.length - 1 &&
-            !stop.stopNameRAW.includes('po.') &&
-            !stop.stopNameRAW.includes('SBL')
+            !/po\.|sbl/gi.test(stop.stopNameRAW)
          )
            acc.push(`<span style='color:${stop.confirmed ? 'springgreen' : 'lightgray'}'>${stop.stopName}</span>`);
          return acc;
@@ -15,6 +15,9 @@ export default interface ScheduledTrain {
    prevStationName: string;
    nextStationName: string;

+    arrivingLine: string | null;
+    departureLine: string | null;
+
    stopLabel: string;
    stopStatus: string;
    stopStatusID: number;
@@ -1,37 +1,38 @@
-import ScheduledTrain from "../interfaces/ScheduledTrain";
-import Train from "../interfaces/Train";
-import TrainStop from "../interfaces/TrainStop";
+import ScheduledTrain from '../interfaces/ScheduledTrain';
+import Train from '../interfaces/Train';
+import TrainStop from '../interfaces/TrainStop';

-export const getLocoURL = (locoType: string): string => (`https://rj.td2.info.pl/dist/img/thumbnails/${locoType.includes("EN") ? locoType + "rb" : locoType}.png`)
+export const getLocoURL = (locoType: string): string =>
+  `https://rj.td2.info.pl/dist/img/thumbnails/${locoType.includes('EN') ? locoType + 'rb' : locoType}.png`;

 export const getStatusID = (stationStatus: any): string => {
-  if (!stationStatus) return "unknown";
-  if (stationStatus == -1) return "not-signed";
+  if (!stationStatus) return 'unknown';
+  if (stationStatus == -1) return 'not-signed';

  const statusCode = stationStatus[2];
  const statusTimestamp = stationStatus[3];

  switch (statusCode) {
    case 0:
-      if (statusTimestamp - Date.now() > 21000000) return "no-limit";
+      if (statusTimestamp - Date.now() > 21000000) return 'no-limit';

-      return "online";
+      return 'online';

    case 1:
-      return "brb";
+      return 'brb';

    case 2:
-      if (statusTimestamp == 0) return "ending";
+      if (statusTimestamp == 0) return 'ending';
      break;

    case 3:
-      return "no-space";
+      return 'no-space';

    default:
      break;
  }

-  return "unavailable";
+  return 'unavailable';
 };

 export const getStatusTimestamp = (stationStatus: any): number => {
@@ -59,10 +60,10 @@ export const getStatusTimestamp = (stationStatus: any): number => {

 export const parseSpawns = (spawnString: string) => {
  if (!spawnString) return [];
-  if (spawnString === "NO_SPAWN") return [];
+  if (spawnString === 'NO_SPAWN') return [];

-  return spawnString.split(";").map(spawn => {
-    const spawnArray = spawn.split(",");
+  return spawnString.split(';').map((spawn) => {
+    const spawnArray = spawn.split(',');
    const spawnName = spawnArray[6] ? spawnArray[6] : spawnArray[0];
    const spawnLength = parseInt(spawnArray[2]);

@@ -73,40 +74,39 @@ export const parseSpawns = (spawnString: string) => {
 export const getTimestamp = (date: string | null): number => (date ? new Date(date).getTime() : 0);

 export const getTrainStopStatus = (stopInfo: TrainStop, currentStationName: string, stationName: string) => {
-  let stopStatus = "",
-    stopLabel = "",
+  let stopStatus = '',
+    stopLabel = '',
    stopStatusID = -1;

  if (stopInfo.terminatesHere && stopInfo.confirmed) {
-    stopStatus = "terminated";
-    stopLabel = "Skończył bieg";
+    stopStatus = 'terminated';
+    stopLabel = 'Skończył bieg';
    stopStatusID = 5;
  } else if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == stationName) {
-    stopStatus = "departed";
-    stopLabel = "Odprawiony";
+    stopStatus = 'departed';
+    stopLabel = 'Odprawiony';
    stopStatusID = 2;
  } else if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != stationName) {
-    stopStatus = "departed-away";
-    stopLabel = "Odjechał";
+    stopStatus = 'departed-away';
+    stopLabel = 'Odjechał';
    stopStatusID = 4;
  } else if (currentStationName == stationName && !stopInfo.stopped) {
-    stopStatus = "online";
-    stopLabel = "Na stacji";
+    stopStatus = 'online';
+    stopLabel = 'Na stacji';
    stopStatusID = 0;
  } else if (currentStationName == stationName && stopInfo.stopped) {
-    stopStatus = "stopped";
-    stopLabel = "Postój";
+    stopStatus = 'stopped';
+    stopLabel = 'Postój';
    stopStatusID = 1;
  } else if (currentStationName != stationName) {
-    stopStatus = "arriving";
-    stopLabel = "W drodze";
+    stopStatus = 'arriving';
+    stopLabel = 'W drodze';
    stopStatusID = 3;
  }

  return { stopStatus, stopLabel, stopStatusID };
 };

-
 export function getScheduledTrain(train: Train, trainStopIndex: number, stationName: string): ScheduledTrain {
  const timetable = train.timetableData!;
  const followingStops = timetable.followingStops;
@@ -114,22 +114,48 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN

  const trainStopStatus = getTrainStopStatus(trainStop, train.currentStationName, stationName);

-  let prevStationName = "", nextStationName = "";  
+  let prevStationName = '',
+    nextStationName = '';

  for (let i = trainStopIndex - 1; i >= 0; i--) {
-    if (followingStops[i].stopName.startsWith("<strong>")) {
+    if (followingStops[i].stopName.startsWith('<strong>')) {
      prevStationName = followingStops[i].stopNameRAW;
      break;
    }
  }

  for (let i = trainStopIndex + 1; i < followingStops.length; i++) {
-    if (followingStops[i].stopName.startsWith("<strong>")) {
+    if (followingStops[i].stopName.startsWith('<strong>')) {
      nextStationName = followingStops[i].stopNameRAW;
      break;
    }
  }

+  let departureLine: string | null = trainStop.departureLine;
+  let arrivingLine: string | null = trainStop.arrivalLine;
+
+  for (let i = trainStopIndex; i < followingStops.length; i++) {
+    const currentStop = followingStops[i];
+
+    if (currentStop.departureLine == null) break;
+
+    if (!/-|_|it|sbl/gi.test(currentStop.departureLine)) {
+      departureLine = currentStop.departureLine;
+      break;
+    }
+  }
+
+  for (let i = trainStopIndex; i >= 0; i--) {
+    const currentStop = followingStops[i];
+
+    if (currentStop.arrivalLine == null) break;
+
+    if (!/-|_|it|sbl/gi.test(currentStop.arrivalLine)) {
+      arrivingLine = currentStop.arrivalLine;
+      break;
+    }
+  }
+
  return {
    trainNo: train.trainNo,
    driverName: train.driverName,
@@ -139,13 +165,16 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
    category: timetable.category,
    beginsAt: timetable.followingStops[0].stopNameRAW,
    terminatesAt: timetable.followingStops[timetable.followingStops.length - 1].stopNameRAW,
-    
+
    nextStationName,
    prevStationName,

    stopInfo: trainStop,
    stopLabel: trainStopStatus.stopLabel,
    stopStatus: trainStopStatus.stopStatus,
-    stopStatusID: trainStopStatus.stopStatusID
-  }
-}
+    stopStatusID: trainStopStatus.stopStatusID,
+
+    arrivingLine,
+    departureLine,
+  };
+}
@@ -56,7 +56,7 @@ export const useStore = defineStore('store', {
    setTrainsOnlineData() {
      const { trains } = this.apiData;

-      if (!trains) return [];
+      if (!trains) return [];      

      this.trainList = trains
        .filter(
@@ -334,6 +334,12 @@ export const useStore = defineStore('store', {
        transports: ['websocket', 'polling'],
        rememberUpgrade: true,
        reconnection: true,
+        timeout: 10000
+      });
+
+      socket.on('connect_error', (err) => {
+        this.dataStatuses.connection = DataStatus.Error;
+        this.webSocket = undefined;
      });

      socket.on('UPDATE', (data: APIData) => {
@@ -347,6 +353,7 @@ export const useStore = defineStore('store', {
      });

      this.webSocket = socket;
+      this.dataStatuses.connection = DataStatus.Loaded;
    },

    async connectToAPI() {
@@ -370,10 +377,11 @@ export const useStore = defineStore('store', {
        return;
      }

+      
      this.dataStatuses.sceneries = DataStatus.Loaded;
      this.dataStatuses.trains = !this.apiData.trains ? DataStatus.Warning : DataStatus.Loaded;
      this.dataStatuses.dispatchers = !this.apiData.dispatchers ? DataStatus.Warning : DataStatus.Loaded;
-
+      
      this.setTrainsOnlineData();
      this.setStationsOnlineInfo();
    },
@@ -146,8 +146,8 @@ $sceneryBgCol: #333;
  &-wrapper {
    position: relative;

-    width: 75%;
-    max-width: 1200px;
+    width: 100%;
+    max-width: 1100px;

    @include midScreen {
      width: 100%;