Historia dyżurów (WIP)

src/components/SceneryView/SceneryHistory.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="scenery-history">
+    <div>HISTORIA DYŻURÓW</div>
+
+    <ul>
+      <li v-for="(dispatcher, i) in dispatcherHistory" :key="i">
+        {{ dispatcher.dispatcherName }}
+        &nbsp;
+        {{ timestampToString(dispatcher.dispatcherFrom) }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+import { defineComponent } from 'vue';
+
+interface DispatcherHistory {
+  dispatcherName: string;
+  dispatcherId: number;
+  dispatcherFrom: any;
+  dispatcherTo: any;
+}
+
+interface SceneryHistory {
+  stops: any[];
+  checkpoints: any[];
+  stationName: string;
+  currentDispatcher: string;
+  currentDispatcherId: number;
+  currentDispatcherFrom: number;
+  dispatcherHistory: DispatcherHistory[];
+}
+
+interface HistoryResultAPI {
+  result: SceneryHistory;
+  errorMessage?: any;
+}
+
+const PROD_MODE = true;
+
+const API_URL = PROD_MODE
+  ? 'https://stacjownik-api-di22o.ondigitalocean.app/api/getSceneryHistory'
+  : 'http://localhost:3001/api/getTimetables';
+
+export default defineComponent({
+  data: () => ({
+    dispatcherHistory: [] as DispatcherHistory[],
+  }),
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    return {};
+  },
+
+  async mounted() {
+    try {
+      const apiResult: HistoryResultAPI = (await axios.get(`${API_URL}?name=${this.name}`)).data;
+
+      if (!apiResult.errorMessage) this.dispatcherHistory = apiResult.result.dispatcherHistory;
+    } catch (error) {
+      console.error(error);
+    }
+  },
+
+  methods: {
+    timestampToString: (timestamp: number): string =>
+      new Date(timestamp).toLocaleTimeString('pl-PL', {
+        day: '2-digit',
+        month: '2-digit',
+        year: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+      }),
+  },
+});
+</script>
+
+<style scoped></style>

src/views/SceneryView.vue

@@ -18,6 +18,8 @@
         :station="stationInfo"
         :timetableOnly="timetableOnly"
       />
+
+      <SceneryHistory :name="stationInfo.name" />
     </div>
   </div>
 </template>
@@ -28,6 +30,8 @@ import { DataStatus } from "@/scripts/enums/DataStatus";
 
 import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
 import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
+import SceneryHistory from "@/components/SceneryView/SceneryHistory.vue"
+
 import ActionButton from "@/components/Global/ActionButton.vue";
 
 import { computed, ComputedRef, defineComponent } from "@vue/runtime-core";
@@ -36,7 +40,7 @@ import { GETTERS } from "@/constants/storeConstants";
 import { useRoute } from "vue-router";
 
 export default defineComponent({
-  components: { SceneryInfo, SceneryTimetable, ActionButton },
+  components: { SceneryInfo, SceneryTimetable, SceneryHistory, ActionButton },
 
   setup() {
     const route = useRoute();