Dodano historię dyżurów do widoku scenerii

src/components/SceneryView/SceneryHeader.vue

@@ -31,12 +31,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/responsive.scss';
-
+@import '../../styles/variables.scss';
+@import '../../styles/responsive.scss';
 
 .info-header {
-  padding: 2em 1em;
+  padding-top: 2em;
 
   & > .scenery-name {
     font-weight: bold;

src/components/SceneryView/SceneryHistory.vue

@@ -3,10 +3,29 @@
     <h2>HISTORIA DYŻURÓW</h2>
 
     <ul>
-      <li v-for="(dispatcher, i) in dispatcherHistory" :key="i">
-        {{ dispatcher.dispatcherName }}
-        &nbsp;
-        {{ timestampToString(dispatcher.dispatcherFrom) }}
+      <li v-for="(timeline, i) in dispatcherTimeline" :key="i">
+        <h3
+          @click="toggleTimeline(i)"
+          @keydown.enter="toggleTimeline(i)"
+          @keydown.space="toggleTimeline(i)"
+          tabindex="0"
+        >
+          {{ timeline.date }} <img :src="icons.descArrow" alt="" />
+        </h3>
+
+        <span v-if="timeline.showTimeline">
+          <div v-for="dispatcher in timeline.dispatchers" :key="dispatcher.dispatcherFrom">
+            <span>
+              <span class="dispatcher-from text--primary">
+                {{ timestampToString(dispatcher.dispatcherFrom, true) }}
+              </span>
+              >
+              <span class="dispatcher-to text--primary"> {{ timestampToString(dispatcher.dispatcherTo, true) }}</span>
+            </span>
+
+            <b>{{ dispatcher.dispatcherName }}</b>
+          </div>
+        </span>
       </li>
     </ul>
   </div>
@@ -16,6 +35,12 @@
 import axios from 'axios';
 import { defineComponent } from 'vue';
 
+interface DispatcherTimeline {
+  date: string;
+  dispatchers: DispatcherHistory[];
+  showTimeline: boolean;
+}
+
 interface DispatcherHistory {
   dispatcherName: string;
   dispatcherId: number;
@@ -38,15 +63,17 @@ interface HistoryResultAPI {
   errorMessage?: any;
 }
 
-const PROD_MODE = true;
-
-const API_URL = PROD_MODE
-  ? 'https://stacjownik-api-di22o.ondigitalocean.app/api/getSceneryHistory'
-  : 'http://localhost:3001/api/getTimetables';
+const API_URL = 'https://stacjownik-api-di22o.ondigitalocean.app/api/getSceneryHistory';
 
 export default defineComponent({
   data: () => ({
     dispatcherHistory: [] as DispatcherHistory[],
+    dispatcherTimeline: [] as DispatcherTimeline[],
+
+    icons: {
+      ascArrow: require('@/assets/icon-arrow-asc.svg'),
+      descArrow: require('@/assets/icon-arrow-desc.svg'),
+    },
   }),
   props: {
     name: {
@@ -62,18 +89,42 @@ export default defineComponent({
     try {
       const apiResult: HistoryResultAPI = (await axios.get(`${API_URL}?name=${this.name}`)).data;
 
-      if (!apiResult.errorMessage) this.dispatcherHistory = apiResult.result.dispatcherHistory;
+      if (!apiResult.errorMessage) {
+        this.dispatcherHistory = apiResult.result.dispatcherHistory;
+
+        this.dispatcherTimeline = this.dispatcherHistory
+          .reduce((acc, dispatcher) => {
+            const dateStr = new Date(dispatcher.dispatcherFrom).toLocaleDateString('pl-PL').replace(/\./g, '/');
+
+            const timelineDay = acc.find((timeline) => timeline.date == dateStr) || {
+              date: dateStr,
+              dispatchers: [],
+              showTimeline: false,
+            };
+
+            timelineDay.dispatchers.push(dispatcher);
+
+            if (!acc.find((timeline) => timeline.date == dateStr)) acc.push(timelineDay);
+
+            return acc;
+          }, [] as DispatcherTimeline[])
+          .reverse();
+      }
     } catch (error) {
-      console.error(error); 
+      console.error(error);
     }
   },
 
   methods: {
-    timestampToString: (timestamp: number): string =>
+    toggleTimeline(index: number) {
+      this.dispatcherTimeline[index].showTimeline = !this.dispatcherTimeline[index].showTimeline;
+    },
+
+    timestampToString: (timestamp: number, timeOnly = false): string =>
       new Date(timestamp).toLocaleTimeString('pl-PL', {
-        day: '2-digit',
-        month: '2-digit',
-        year: '2-digit',
+        day: timeOnly ? undefined : '2-digit',
+        month: timeOnly ? undefined : '2-digit',
+        year: timeOnly ? undefined : '2-digit',
         hour: '2-digit',
         minute: '2-digit',
       }),
@@ -81,4 +132,55 @@ export default defineComponent({
 });
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.scenery-history {
+    max-height: 600px;
+    overflow-y: scroll;
+}
+
+ul {
+  margin-top: 1em;
+}
+
+li {
+  margin: 1em 0;
+
+  h3 {
+    cursor: pointer;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background: #444;
+    padding: 0.5em;
+    margin: 0 auto 0.5em auto;
+
+    max-width: 700px;
+
+    img {
+      width: 1.3em;
+      vertical-align: middle;
+
+      margin-left: 0.5em;
+    }
+
+    &:focus {
+      outline: 1px solid white;
+    }
+  }
+
+  div {
+    padding: 0.5em 0;
+    margin: 0.5em auto;
+
+    background-color: #444;
+    border-radius: 0.5em;
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+
+    max-width: 400px;
+  }
+}
+</style>

src/components/SceneryView/SceneryInfo.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="scenery-info">
-    <!-- info header -->
-    <scenery-info-header :station="station" />
-
     <section v-if="!timetableOnly">
       <!-- info stats -->
       <scenery-info-stats :station="station" />
@@ -24,12 +21,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/runtime-core';
+import { defineComponent } from '@vue/runtime-core';
 
 import SceneryInfoDispatcher from './SceneryInfo/SceneryInfoDispatcher.vue';
 import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
 import SceneryInfoStats from './SceneryInfo/SceneryInfoStats.vue';
-import SceneryInfoHeader from './SceneryInfo/SceneryInfoHeader.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 
@@ -40,7 +36,6 @@ export default defineComponent({
     SceneryInfoDispatcher,
     SceneryInfoIcons,
     SceneryInfoStats,
-    SceneryInfoHeader,
     SceneryInfoUserList,
     SceneryInfoSpawnList,
   },

src/components/TrainsView/TrainSchedule.vue

@@ -17,6 +17,7 @@
             <span class="stop-name">
               <span v-html="stop.stopName"></span>
               <img v-if="stop.comments" :src="icons.warning" :title="`${$t('trains.comment')}: ${stop.comments}`">
+              {{ decodeURIComponent(stop.comments) }}
             </span>
             <span class="stop-date">
               <span