Tłumaczenia i poprawki designu

src/components/JournalView/JournalDispatchers.vue

@@ -46,9 +46,9 @@
                         <span class="region-badge" :class="doc.region">PL1</span>
                       </span>
                       <span>
-                        <span :data-status="doc.isOnline"
+                        <span :data-status="doc.isOnline">
-                          >{{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;</span
+                          {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
-                        >
+                        </span>
                         <span>
                           {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
                         </span>
@@ -196,7 +196,7 @@ export default defineComponent({
     computedHistoryList() {
       return this.historyList.filter(
         (doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
-      ); //.sort((a, b) => (b.isOnline ? 1 : 0) - (a.isOnline ? 1 : 0));
+      );
     },
   },
 
@@ -231,16 +231,6 @@ export default defineComponent({
       this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
     },
 
-    calculateDuration(timestampMs: number) {
-      const minsTotal = Math.round(timestampMs / 60000);
-      const hoursTotal = Math.floor(minsTotal / 60);
-      const minsInHour = minsTotal % 60;
-
-      return minsTotal > 60
-        ? this.$t('journal.hours', { hours: hoursTotal, minutes: minsInHour })
-        : this.$t('journal.minutes', { minutes: minsTotal });
-    },
-
     isAnotherDay(prevIndex: number, currIndex: number) {
       if (currIndex == 0) return true;
 
@@ -333,13 +323,6 @@ export default defineComponent({
           return;
         }
 
-        // if (responseData.errorMessage) {
-        //   this.historyDataStatus.status = DataStatus.Error;
-        //   this.historyDataStatus.error = responseData.errorMessage;
-
-        //   return;
-        // }
-
         if (!responseData) return;
 
         // Response data exists
@@ -439,3 +422,4 @@ export default defineComponent({
   }
 }
 </style>
+

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -0,0 +1,112 @@
+<template>
+  <section class="scenery-dispatchers-history  scenery-section">
+    <Loading v-if="dataStatus != 2" />
+
+    <div class="list-warning" v-else-if="dispatcherHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
+
+    <ul class="history-list" v-else>
+      <li class="list-item" v-for="historyItem in dispatcherHistoryList">
+        <div>
+          <span class="text--grayed">#{{ historyItem.stationHash }}&nbsp;</span>
+          <b class="text--primary">{{ historyItem.dispatcherName }}</b>
+        </div>
+
+        <div v-if="historyItem.timestampTo">
+          <b>{{ $d(historyItem.timestampFrom) }}</b>
+
+          {{ timestampToString(historyItem.timestampFrom) }}
+          - {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
+        </div>
+
+        <div class="dispatcher-online" v-else>
+          {{ $t('journal.online-since') }}
+          <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
+          ({{ calculateDuration(historyItem.currentDuration) }})
+          <span></span>
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script lang="ts">
+import dateMixin from '@/mixins/dateMixin';
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import { DispatcherHistory } from '@/scripts/interfaces/api/DispatchersAPIData';
+import Station from '@/scripts/interfaces/Station';
+import { URLs } from '@/scripts/utils/apiURLs';
+import axios from 'axios';
+import { defineComponent, PropType } from 'vue';
+import Loading from '../Global/Loading.vue';
+
+export default defineComponent({
+  name: 'SceneryDispatchersHistory',
+  mixins: [dateMixin],
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dispatcherHistoryList: [] as DispatcherHistory[],
+      dataStatus: DataStatus.Loading,
+    };
+  },
+  mounted() {
+    this.fetchAPIData();
+  },
+  methods: {
+    async fetchAPIData(countFrom = 0, countLimit = 30) {
+      try {
+        const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const historyAPIData: DispatcherHistory[] = await (await axios.get(requestString)).data;
+
+        this.dispatcherHistoryList = historyAPIData;
+        this.dataStatus = DataStatus.Loaded;
+
+        console.log(this.dispatcherHistoryList);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+  components: { Loading },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/SceneryView/styles.scss';
+
+
+.history-list {
+  padding: 0 0.5em;
+}
+
+.list-item {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  text-align: left;
+  background-color: #353535;
+  padding: 0.5em;
+  margin: 0.5em 0;
+
+  line-height: 1.5em;
+}
+
+.dispatcher-online {
+  color: springgreen;
+}
+
+@include smallScreen {
+  .list-item {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+</style>
+

src/components/SceneryView/SceneryInfo.vue

@@ -8,10 +8,14 @@
           <span>
             <b>{{ $t('availability.title') }}:</b> {{ $t(`availability.${station.generalInfo.availability}`) }}
 
-            <span v-if="station.generalInfo.reqLevel > 0">
+            <span v-if="station.generalInfo.reqLevel > -1">
+              - {{ $tc('scenery.req-level', station.generalInfo.reqLevel, { lvl: station.generalInfo.reqLevel }) }}
+            </span>
+
+            <!-- <span v-if="station.generalInfo.reqLevel > 0">
               - minimum {{ station.generalInfo.reqLevel }} poziom dyżurnego
             </span>
-            <span v-else-if="station.generalInfo.reqLevel == 0">- dla wszystkich poziomów</span>
+            <span v-else-if="station.generalInfo.reqLevel == 0">- dla wszystkich poziomów</span> -->
           </span>
 
           <span>

src/components/SceneryView/SceneryTimetable.vue

@@ -507,7 +507,7 @@ export default defineComponent({
       flex-direction: column;
       align-items: center;
 
-      font-size: 1.2em;
+      font-size: 1.05em;
     }
 
     &-general {
@@ -516,7 +516,6 @@ export default defineComponent({
 
     &-schedule {
       width: 100%;
-      margin: 0.5em 0;
     }
   }
 }

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -1,23 +1,28 @@
 <template>
-  <section class="scenery-timetables-history">
+  <section class="scenery-timetables-history scenery-section">
     <Loading v-if="dataStatus != 2" />
+
+    <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
     <ul class="history-list" v-else>
       <li class="list-item" v-for="historyItem in sceneryHistoryList">
+        <div>
+          <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
+          {{ localeTime(historyItem.beginDate, $i18n.locale) }}
+        </div>
         <div>
           <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
           <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
-          {{ historyItem.driverName }}
+          <div>{{ historyItem.driverName }}</div>
-
-          <div>Odjazd: {{ localeDate(historyItem.beginDate, $i18n.locale) }}</div>
         </div>
 
-        <div style="text-align: right">
+        <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
-          {{ historyItem.route.replace('|', ' -> ') }} | {{ historyItem.routeDistance }} km
+        <!-- <div>{{ historyItem.routeDistance }} km</div> -->
-          <div v-if="historyItem.authorName">
+        <div>
-            Autor:
+          {{ $t('scenery.timetable-author-title') }}:
-            <b>{{ historyItem.authorName }}</b>
+          <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
-          </div>
+          <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
         </div>
+
         <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
       </li>
     </ul>
@@ -70,10 +75,13 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.scenery-timetables-history {
+@import '../../styles/responsive.scss';
-  position: relative;
+@import '../../styles/SceneryView/styles.scss';
-  height: 100%;
+
-  overflow-y: scroll;
+.list-warning {
+  padding: 1em 0.5em;
+  background-color: #444;
+  font-size: 1.2em;
 }
 
 .history-list {
@@ -81,15 +89,22 @@ export default defineComponent({
 }
 
 .list-item {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: 1fr 2fr 2fr 1fr;
-  justify-content: space-between;
+  gap: 1em;
+  align-items: center;
 
-  text-align: left;
   background-color: #353535;
   padding: 0.5em;
   margin: 0.5em 0;
 
   line-height: 1.5em;
 }
+
+@include smallScreen {
+  .list-item {
+    grid-template-columns: 1fr 1fr;
+    font-size: 1.05em;
+  }
+}
 </style>

src/locales/en.json

@@ -38,7 +38,7 @@
     "współczesna": "modern",
     "mieszana": "mixed",
     "kształtowa": "mechanical",
-    "historyczna": "historyczna"
+    "historyczna": "historical"
   },
   "controls": {
     "title": "Control type",
@@ -248,7 +248,17 @@
     "lines-title": "Real lines",
     "project-title": "Project name",
     "one-way-routes": "One way routes",
-    "two-way-routes": "Two way routes"
+    "two-way-routes": "Two way routes",
+
+    "option-active-timetables": "Active timetables",
+    "option-timetables-history": "Scenery timetables history",
+    "option-dispatchers-history": "Scenery dispatchers history",
+
+    "timetable-author-title": "Issued by",
+    "timetable-author-unknown": "Author unknown",
+
+    "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
+    "history-list-empty": "No recorded scenery history!"
   },
   "availability": {
     "title": "Availability",

src/locales/pl.json

@@ -249,7 +249,17 @@
     "lines-title": "Rzeczywiste linie",
     "project-title": "Projekt",
     "one-way-routes": "Szlaki jednotorowe",
-    "two-way-routes": "Szlaki dwutorowe"
+    "two-way-routes": "Szlaki dwutorowe",
+
+    "option-active-timetables": "Aktywne rozkłady jazdy",
+    "option-timetables-history": "Historia rozkładów scenerii",
+    "option-dispatchers-history": "Historia dyżurów scenerii",
+
+    "timetable-author-title": "Wydany przez",
+    "timetable-author-unknown": "Autor nieznany",
+
+    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
+    "history-list-empty": "Brak historii dla tej scenerii!"
   },
   "availability": {
     "title": "Dostępność",

src/mixins/dateMixin.ts

@@ -4,37 +4,47 @@ export default defineComponent({
   methods: {
     localeDate(dateString: string, locale: string) {
       return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        weekday: "long",
+        weekday: 'long',
-        day: "numeric",
+        day: 'numeric',
-        month: "2-digit",
+        month: '2-digit',
-        year: "numeric",
+        year: 'numeric',
-        hour: "2-digit",
+        hour: '2-digit',
-        minute: "2-digit"
+        minute: '2-digit',
-      })
+      });
     },
 
     localeDay(dateString: string, locale: string) {
       return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        day: "numeric",
+        day: 'numeric',
-        month: "2-digit",
+        month: '2-digit',
-        year: "numeric"
+        year: 'numeric',
-      })
+      });
     },
 
     localeTime(dateString: string, locale: string) {
       return new Date(dateString).toLocaleTimeString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        hour: "2-digit",
+        hour: '2-digit',
-        minute: "2-digit"
+        minute: '2-digit',
-      })
+      });
     },
 
     timestampToString(timestamp: number | null) {
       return timestamp
-        ? new Date(timestamp).toLocaleTimeString("pl-PL", {
+        ? new Date(timestamp).toLocaleTimeString('pl-PL', {
-          hour: "2-digit",
+            hour: '2-digit',
-          minute: "2-digit"
+            minute: '2-digit',
-        })
+          })
-        : "";
+        : '';
-    }
+    },
-  }
+
-})
+    calculateDuration(timestampMs: number) {
+      const minsTotal = Math.round(timestampMs / 60000);
+      const hoursTotal = Math.floor(minsTotal / 60);
+      const minsInHour = minsTotal % 60;
+
+      return minsTotal > 60
+        ? this.$t('journal.hours', { hours: hoursTotal, minutes: minsInHour })
+        : this.$t('journal.minutes', { minutes: minsTotal });
+    },
+  },
+});

src/scripts/interfaces/api/DispatchersAPIData.ts

@@ -0,0 +1,12 @@
+export interface DispatcherHistory {
+  currentDuration: number;
+  dispatcherId: number;
+  dispatcherName: string;
+  isOnline: boolean;
+  lastOnlineTimestamp: number;
+  region: string;
+  stationHash: string;
+  stationName: string;
+  timestampFrom: number;
+  timestampTo?: number;
+}

src/scripts/utils/storeUtils.ts

@@ -140,7 +140,7 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
 
     if (currentStop.departureLine == null) break;
 
-    if (!/_|it|sbl/gi.test(currentStop.departureLine)) {
+    if (!/-|_|it|sbl/gi.test(currentStop.departureLine)) {
       departureLine = currentStop.departureLine;
       break;
     }
@@ -151,7 +151,7 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
 
     if (currentStop.arrivalLine == null) break;
 
-    if (!/_|it|sbl/gi.test(currentStop.arrivalLine)) {
+    if (!/-|_|it|sbl/gi.test(currentStop.arrivalLine)) {
       arrivingLine = currentStop.arrivalLine;
       break;
     }

src/styles/SceneryView/styles.scss

@@ -0,0 +1,11 @@
+.scenery-section {
+  position: relative;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.list-warning {
+  padding: 1em 0.5em;
+  background-color: #444;
+  font-size: 1.2em;
+}

src/views/SceneryView.vue

@@ -28,20 +28,13 @@
             @click="setViewMode(viewMode.component)"
             :data-checked="currentViewCompontent == viewMode.component"
           >
-            {{ viewMode.value }}
+            {{ $t(viewMode.id) }}
           </button>
         </div>
 
         <keep-alive>
           <component :is="currentViewCompontent" :station="stationInfo" :key="currentViewCompontent"></component>
         </keep-alive>
-          <!-- Timetables active -->
-          <!-- <SceneryTimetable />
-
-          <SceneryTimetablesHistory
-            v-if="currentViewMode == sceneryViewMode.TIMETABLES_HISTORY"
-            :stationName="stationInfo.name"
-          /> -->
       </div>
     </div>
   </div>
@@ -50,6 +43,8 @@
 <script lang="ts">
 import SceneryInfo from '@/components/SceneryView/SceneryInfo.vue';
 import SceneryTimetable from '@/components/SceneryView/SceneryTimetable.vue';
+import SceneryTimetablesHistory from '../components/SceneryView/SceneryTimetablesHistory.vue';
+import SceneryDispatchersHistory from '@/components/SceneryView/SceneryDispatchersHistory.vue';
 import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
 
 import ActionButton from '@/components/Global/ActionButton.vue';
@@ -59,7 +54,6 @@ import { useRoute } from 'vue-router';
 
 import { useStore } from '@/store/store';
 import routerMixin from '@/mixins/routerMixin';
-import SceneryTimetablesHistory from '../components/SceneryView/SceneryTimetablesHistory.vue';
 
 enum SceneryViewMode {
   'TIMETABLES_ACTIVE',
@@ -68,7 +62,14 @@ enum SceneryViewMode {
 }
 
 export default defineComponent({
-  components: { SceneryInfo, SceneryTimetable, ActionButton, SceneryHeader, SceneryTimetablesHistory },
+  components: {
+    SceneryInfo,
+    SceneryTimetable,
+    ActionButton,
+    SceneryHeader,
+    SceneryTimetablesHistory,
+    SceneryDispatchersHistory,
+  },
 
   mixins: [routerMixin],
 
@@ -80,18 +81,15 @@ export default defineComponent({
 
     viewModes: [
       {
-        name: SceneryViewMode.TIMETABLES_ACTIVE,
+        id: 'scenery.option-active-timetables',
-        value: 'Aktywne rozkłady jazdy',
         component: 'SceneryTimetable',
       },
       {
-        name: SceneryViewMode.TIMETABLES_HISTORY,
+        id: 'scenery.option-timetables-history',
-        value: 'Historia rozkładów scenerii',
         component: 'SceneryTimetablesHistory',
       },
       {
-        name: SceneryViewMode.SCENERY_HISTORY,
+        id: 'scenery.option-dispatchers-history',
-        value: 'Historia dyżurów scenerii',
         component: 'SceneryDispatchersHistory',
       },
     ],
@@ -290,4 +288,10 @@ button.back-btn {
     flex-wrap: wrap;
   }
 }
+
+@include smallScreen {
+  .scenery-left, .scenery-right {
+    max-height: 100vh;
+  }
+}
 </style>