Dodano zakładkę z historią RJ scenerii

src/assets/icon-history.svg

@@ -1 +0,0 @@
-<?xml version="1.0" ?><svg height="21px" version="1.1" viewBox="0 0 20 21" width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#ffffff" id="Core" opacity="0.9" transform="translate(-464.000000, -254.000000)"><g id="history" transform="translate(464.000000, 254.500000)"><path d="M10.5,0 C7,0 3.9,1.9 2.3,4.8 L0,2.5 L0,9 L6.5,9 L3.7,6.2 C5,3.7 7.5,2 10.5,2 C14.6,2 18,5.4 18,9.5 C18,13.6 14.6,17 10.5,17 C7.2,17 4.5,14.9 3.4,12 L1.3,12 C2.4,16 6.1,19 10.5,19 C15.8,19 20,14.7 20,9.5 C20,4.3 15.7,0 10.5,0 L10.5,0 Z M9,5 L9,10.1 L13.7,12.9 L14.5,11.6 L10.5,9.2 L10.5,5 L9,5 L9,5 Z" id="Shape"/></g></g></g></svg>

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>

src/scripts/interfaces/api/TimetablesAPIData.ts

@@ -1,4 +1,3 @@
-
 export interface TimetableHistory {
   timetableId: number;
   trainNo: number;
@@ -28,3 +27,9 @@ export interface TimetableHistory {
   authorName?: string;
   authorId?: number;
 }
+
+export interface SceneryTimetableHistory {
+  sceneryTimetables: TimetableHistory[];
+  totalCount: number;
+  sceneryName: string;
+}

src/views/SceneryView.vue

@@ -22,16 +22,26 @@
 
       <div class="scenery-right">
         <div class="info-actions">
-          <button class="btn btn--option checked">Aktywne rozkłady jazdy</button>
-          <button class="btn btn--option">Historia rozkładów scenerii</button>
-          <button class="btn btn--option">Historia dyżurów scenerii</button>
+          <button
+            v-for="viewMode in viewModes"
+            class="btn btn--option"
+            @click="setViewMode(viewMode.component)"
+            :data-checked="currentViewCompontent == viewMode.component"
+          >
+            {{ viewMode.value }}
+          </button>
         </div>
 
-        <SceneryTimetable
-          :station="stationInfo"
-          :timetableOnly="timetableOnly"
-          :selectedCheckpoint="selectedCheckpoint"
-        />
+        <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>
@@ -49,22 +59,48 @@ 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',
+  'TIMETABLES_HISTORY',
+  'SCENERY_HISTORY',
+}
 
 export default defineComponent({
-  components: { SceneryInfo, SceneryTimetable, ActionButton, SceneryHeader },
+  components: { SceneryInfo, SceneryTimetable, ActionButton, SceneryHeader, SceneryTimetablesHistory },
 
   mixins: [routerMixin],
 
   data: () => ({
     icons: {
-      history: require('@/assets/icon-history.svg'),
       user: require('@/assets/icon-user.svg'),
       back: require('@/assets/icon-back.svg'),
     },
 
+    viewModes: [
+      {
+        name: SceneryViewMode.TIMETABLES_ACTIVE,
+        value: 'Aktywne rozkłady jazdy',
+        component: 'SceneryTimetable',
+      },
+      {
+        name: SceneryViewMode.TIMETABLES_HISTORY,
+        value: 'Historia rozkładów scenerii',
+        component: 'SceneryTimetablesHistory',
+      },
+      {
+        name: SceneryViewMode.SCENERY_HISTORY,
+        value: 'Historia dyżurów scenerii',
+        component: 'SceneryDispatchersHistory',
+      },
+    ],
+
+    sceneryViewMode: SceneryViewMode,
+
     selectedCheckpoint: '',
 
-    viewMode: 'info',
+    currentViewCompontent: 'SceneryTimetable',
 
     onlineFrom: -1,
   }),
@@ -94,8 +130,8 @@ export default defineComponent({
   },
 
   methods: {
-    setCardViewMode(mode: string) {
-      this.viewMode = mode;
+    setViewMode(componentName: string) {
+      this.currentViewCompontent = componentName;
     },
 
     loadSelectedCheckpoint() {
@@ -157,7 +193,6 @@ button.back-btn {
   width: 100%;
   max-width: 1700px;
 
-  padding: 1em;
   margin: 1rem 0;
 
   text-align: center;
@@ -187,7 +222,7 @@ button.back-btn {
   max-height: 1000px;
 
   display: grid;
-  grid-template-rows: 50px 1fr;
+  grid-template-rows: auto 1fr;
   gap: 1em;
 }
 
@@ -198,10 +233,17 @@ button.back-btn {
 .info-actions {
   display: flex;
   justify-content: center;
+  align-items: center;
 
   .btn {
     margin: 0.5em;
+    padding: 0.5em;
     box-shadow: 0 0 10px 4px #242424;
+
+    &[data-checked='true'] {
+      color: var(--clr-primary);
+      font-weight: bold;
+    }
   }
 }
 
@@ -234,8 +276,18 @@ button.back-btn {
   }
 
   .scenery-left {
+    border-radius: 1em;
+    margin-bottom: 1em;
     height: auto;
-    margin-bottom: 2em;
+  }
+
+  .scenery-right {
+    border-radius: 1em;
+    height: auto;
+  }
+
+  .info-actions {
+    flex-wrap: wrap;
   }
 }
 </style>