Tłumaczenia i poprawki designu

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>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>