Tłumaczenia i poprawki designu

2026-05-03 13:28:11 +00:00 · 2022-07-10 22:42:07 +02:00
parent faed36c41c
commit 740ce9c815
12 changed files with 257 additions and 86 deletions
@@ -46,9 +46,9 @@
                        <span class="region-badge" :class="doc.region">PL1</span>
                      </span>
                      <span>
-                        <span :data-status="doc.isOnline"
-                          >{{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;</span
-                        >
+                        <span :data-status="doc.isOnline">
+                          {{ 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>
+
@@ -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>
+
@@ -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>
@@ -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;
    }
  }
 }
@@ -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>Odjazd: {{ localeDate(historyItem.beginDate, $i18n.locale) }}</div>
+          <div>{{ historyItem.driverName }}</div>
        </div>

-        <div style="text-align: right">
-          {{ historyItem.route.replace('|', ' -> ') }} | {{ historyItem.routeDistance }} km
-          <div v-if="historyItem.authorName">
-            Autor:
-            <b>{{ historyItem.authorName }}</b>
-          </div>
+        <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
+        <!-- <div>{{ historyItem.routeDistance }} km</div> -->
+        <div>
+          {{ $t('scenery.timetable-author-title') }}:
+          <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
+          <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 {
-  position: relative;
-  height: 100%;
-  overflow-y: scroll;
+@import '../../styles/responsive.scss';
+@import '../../styles/SceneryView/styles.scss';
+
+.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;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr 2fr 2fr 1fr;
+  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>
@@ -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",
@@ -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ść",
@@ -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",
-        day: "numeric",
-        month: "2-digit",
-        year: "numeric",
-        hour: "2-digit",
-        minute: "2-digit"
-      })
+        weekday: 'long',
+        day: 'numeric',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
    },

    localeDay(dateString: string, locale: string) {
      return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        day: "numeric",
-        month: "2-digit",
-        year: "numeric"
-      })
+        day: 'numeric',
+        month: '2-digit',
+        year: 'numeric',
+      });
    },

    localeTime(dateString: string, locale: string) {
      return new Date(dateString).toLocaleTimeString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        hour: "2-digit",
-        minute: "2-digit"
-      })
+        hour: '2-digit',
+        minute: '2-digit',
+      });
    },

    timestampToString(timestamp: number | null) {
      return timestamp
-        ? new Date(timestamp).toLocaleTimeString("pl-PL", {
-          hour: "2-digit",
-          minute: "2-digit"
-        })
-        : "";
-    }
-  }
-})
+        ? new Date(timestamp).toLocaleTimeString('pl-PL', {
+            hour: '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 });
+    },
+  },
+});
@@ -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;
+}
@@ -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;
    }
@@ -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;
+}
@@ -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,
-        value: 'Aktywne rozkłady jazdy',
+        id: 'scenery.option-active-timetables',
        component: 'SceneryTimetable',
      },
      {
-        name: SceneryViewMode.TIMETABLES_HISTORY,
-        value: 'Historia rozkładów scenerii',
+        id: 'scenery.option-timetables-history',
        component: 'SceneryTimetablesHistory',
      },
      {
-        name: SceneryViewMode.SCENERY_HISTORY,
-        value: 'Historia dyżurów scenerii',
+        id: 'scenery.option-dispatchers-history',
        component: 'SceneryDispatchersHistory',
      },
    ],
@@ -290,4 +288,10 @@ button.back-btn {
    flex-wrap: wrap;
  }
 }
+
+@include smallScreen {
+  .scenery-left, .scenery-right {
+    max-height: 100vh;
+  }
+}
 </style>