Dodano zakładkę z historią RJ scenerii

src/components/Global/SelectBox.vue

@@ -190,7 +190,7 @@ ul.options {
 
   height: auto;
 
-  z-index: 10;
+  z-index: 100;
 
   width: 100%;
 }

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -79,6 +79,7 @@ $terminated: salmon;
 $disconnected: slategray;
 
 .info-user-list {
+  width: 100%;
 
   ul {
     display: flex;

src/components/SceneryView/SceneryTimetable.vue

@@ -1,15 +1,28 @@
 <template>
-  <div class="scenery-timetable">
-    <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
-      <button
-        v-for="cp in station.generalInfo.checkpoints"
-        :key="cp.checkpointName"
-        class="checkpoint_item btn btn--text"
-        :class="{ current: selectedCheckpoint === cp.checkpointName }"
-        @click="selectCheckpoint(cp)"
-      >
-        {{ cp.checkpointName }}
-      </button>
+  <section class="scenery-timetable">
+    <div class="timetable-header">
+      <h3>
+        <img :src="icons.timetable" alt="icon-timetable" />&nbsp;
+        <span>{{ $t('scenery.timetables') }}</span>
+        &nbsp;
+        <span class="text--primary">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
+        <span>&nbsp;/&nbsp;</span>
+        <span class="text--grayed">
+          {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
+        </span>
+      </h3>
+
+      <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
+        <button
+          v-for="cp in station.generalInfo.checkpoints"
+          :key="cp.checkpointName"
+          class="checkpoint_item btn btn--text"
+          :class="{ current: selectedCheckpoint === cp.checkpointName }"
+          @click="selectCheckpoint(cp)"
+        >
+          {{ cp.checkpointName }}
+        </button>
+      </div>
     </div>
 
     <div class="timetable-list">
@@ -141,13 +154,13 @@
     </div>
 
     <!-- </transition> -->
-  </div>
+  </section>
 </template>
 
 <script lang="ts">
 import Station from '@/scripts/interfaces/Station';
 import SelectBox from '../Global/SelectBox.vue';
-import { computed, defineComponent, ref } from '@vue/runtime-core';
+import { computed, defineComponent, PropType, ref } from '@vue/runtime-core';
 import { useRoute } from 'vue-router';
 import dateMixin from '@/mixins/dateMixin';
 import routerMixin from '@/mixins/routerMixin';
@@ -155,18 +168,17 @@ import { useStore } from '@/store/store';
 import Loading from '../Global/Loading.vue';
 
 export default defineComponent({
+  name: 'SceneryTimetable',
+
   components: { SelectBox, Loading },
 
   mixins: [dateMixin, routerMixin],
 
   props: {
     station: {
-      type: Object as () => Station,
+      type: Object as PropType<Station>,
       required: true,
     },
-    timetableOnly: {
-      type: Boolean,
-    },
   },
 
   data: () => ({
@@ -271,9 +283,19 @@ export default defineComponent({
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
 
-  font-size: 1.3em;
-  margin-top: 1em;
+  position: sticky;
+  top: 0;
+  z-index: 99;
+
+  background-color: #181818;
+
+  h3 {
+    display: flex;
+    align-items: center;
+    font-size: 1.4em;
+  }
 }
 
 .timetable {
@@ -282,7 +304,7 @@ export default defineComponent({
   }
 
   &-item {
-    margin: 1em auto;
+    margin: 0.5em auto;
     padding: 0 0.5em;
     max-width: 1100px;
 
@@ -290,7 +312,7 @@ export default defineComponent({
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     gap: 0 0.5em;
 
-    background: $bgCol;
+    background: #353535;
 
     cursor: pointer;
     z-index: 10;
@@ -319,6 +341,10 @@ export default defineComponent({
   }
 }
 
+.timetable-list {
+  position: relative;
+}
+
 .timetable-checkpoints {
   display: flex;
   justify-content: center;
@@ -326,13 +352,6 @@ export default defineComponent({
   flex-wrap: wrap;
   font-size: 1.1em;
   padding: 0.75em 0;
-
-  position: sticky;
-  top: 0;
-  z-index: 555;
-
-  background-color: #181818;
-
   .checkpoint_item {
     &.current {
       font-weight: bold;

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -0,0 +1,95 @@
+<template>
+  <section class="scenery-timetables-history">
+    <Loading v-if="dataStatus != 2" />
+    <ul class="history-list" v-else>
+      <li class="list-item" v-for="historyItem in sceneryHistoryList">
+        <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>
+
+        <div style="text-align: right">
+          {{ historyItem.route.replace('|', ' -> ') }} | {{ historyItem.routeDistance }} km
+          <div v-if="historyItem.authorName">
+            Autor:
+            <b>{{ historyItem.authorName }}</b>
+          </div>
+        </div>
+        <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script lang="ts">
+import dateMixin from '@/mixins/dateMixin';
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import { SceneryTimetableHistory, TimetableHistory } from '@/scripts/interfaces/api/TimetablesAPIData';
+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: 'SceneryTimetablesHistory',
+  mixins: [dateMixin],
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      sceneryHistoryList: [] as TimetableHistory[],
+      dataStatus: DataStatus.Loading,
+    };
+  },
+  mounted() {
+    this.fetchAPIData();
+  },
+  methods: {
+    async fetchAPIData(countFrom = 0, countLimit = 15) {
+      try {
+        const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
+
+        this.sceneryHistoryList = historyAPIData.sceneryTimetables;
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+  components: { Loading },
+});
+</script>
+
+<style lang="scss" scoped>
+.scenery-timetables-history {
+  position: relative;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.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;
+}
+</style>