Uaktualnienie do wersji API

src/components/JournalView/DriverStats.vue

@@ -49,7 +49,7 @@
 
 <script lang="ts">
 import { DriverStatsAPIData } from '@/scripts/interfaces/api/DriverStatsAPIData';
-import { TimetableHistory, TimetablesAPIData } from '@/scripts/interfaces/api/TimetablesAPIData';
+import { TimetableHistory } from '@/scripts/interfaces/api/TimetablesAPIData';
 import { URLs } from '@/scripts/utils/apiURLs';
 import { useStore } from '@/store/store';
 import axios from 'axios';
@@ -86,12 +86,12 @@ export default defineComponent({
         await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
       ).data;
 
-      const recentTimetablesData: TimetablesAPIData = await (
+      const recentTimetablesData: TimetableHistory[] = await (
         await axios.get(`${URLs.stacjownikAPI}/api/getTimetables?driver=${this.store.driverStatsName}`)
       ).data;
 
       this.store.driverStatsData = statsData.response;
-      this.lastTimetables = recentTimetablesData.response || [];
+      this.lastTimetables = recentTimetablesData || [];
     },
 
     closeCard() {

src/components/JournalView/JournalDispatchers.vue

@@ -47,7 +47,7 @@
 
               <ul v-else>
                 <transition-group name="journal-list-anim">
-                  <li v-for="(doc, i) in computedHistoryList" :key="doc._id">
+                  <li v-for="(doc, i) in computedHistoryList" :key="doc.id">
                     <div class="journal_day" v-if="isAnotherDay(i - 1, i)">
                       <span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
                     </div>
@@ -117,13 +117,8 @@ const PROD_MODE = process.env.VUE_APP_JORUNAL_DISPATCHERS_DEV != '1' || process.
 
 const DISPATCHERS_API_URL = (PROD_MODE ? `${URLs.stacjownikAPI}/api` : 'http://localhost:3001/api') + '/getDispatchers';
 
-interface APIResponse {
-  errorMessage: string | null;
-  response: DispatcherHistoryItem[] | null;
-}
-
 interface DispatcherHistoryItem {
-  _id: string;
+  id: string;
 
   stationName: string;
   stationHash: string;
@@ -307,18 +302,18 @@ export default defineComponent({
 
       const countFrom = this.historyList.length;
 
-      const responseData: APIResponse | null = await (
+      const responseData: DispatcherHistoryItem[] = await (
         await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
       ).data;
 
-      if (!responseData?.response) return;
+      if (!responseData) return;
 
-      if (responseData.response.length == 0) {
+      if (responseData.length == 0) {
         this.scrollNoMoreData = true;
         return;
       }
 
-      this.historyList.push(...responseData.response);
+      this.historyList.push(...responseData);
       this.scrollDataLoaded = true;
     },
 
@@ -340,7 +335,7 @@ export default defineComponent({
 
       // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
       if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
-      else if (this.sorterActive.id == 'duration') queries.push('sortBy=duration');
+      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
       else queries.push('sortBy=timestampFrom');
 
       queries.push('countLimit=15');
@@ -348,7 +343,7 @@ export default defineComponent({
       this.currentQuery = queries.join('&');
 
       try {
-        const responseData: APIResponse | null = await (
+        const responseData: DispatcherHistoryItem[] = await (
           await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
         ).data;
 
@@ -358,17 +353,17 @@ export default defineComponent({
           return;
         }
 
-        if (responseData.errorMessage) {
+        // if (responseData.errorMessage) {
-          this.historyDataStatus.status = DataStatus.Error;
+        //   this.historyDataStatus.status = DataStatus.Error;
-          this.historyDataStatus.error = responseData.errorMessage;
+        //   this.historyDataStatus.error = responseData.errorMessage;
 
-          return;
+        //   return;
-        }
+        // }
 
-        if (!responseData.response) return;
+        if (!responseData) return;
 
         // Response data exists
-        this.historyList = responseData.response;
+        this.historyList = responseData;
 
         // Stats display
         this.store.dispatcherStatsName =

src/components/JournalView/JournalTimetables.vue

@@ -176,7 +176,7 @@ import { JournalFilterType } from '@/scripts/enums/JournalFilterType';
 import routerMixin from '@/mixins/routerMixin';
 import { useStore } from '@/store/store';
 import DriverStats from './DriverStats.vue';
-import { TimetableHistory, TimetablesAPIData } from '@/scripts/interfaces/api/TimetablesAPIData';
+import { TimetableHistory } from '@/scripts/interfaces/api/TimetablesAPIData';
 
 const PROD_MODE = process.env.VUE_APP_JOURNAL_TIMETABLES_DEV != '1' || process.env.NODE_ENV === 'production';
 
@@ -310,18 +310,18 @@ export default defineComponent({
 
       const countFrom = this.historyList.length;
 
-      const responseData: TimetablesAPIData | null = await (
+      const responseData: TimetableHistory[] = await (
         await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
       ).data;
 
-      if (!responseData?.response) return;
+      if (!responseData) return;
 
-      if (responseData.response.length == 0) {
+      if (responseData.length == 0) {
         this.scrollNoMoreData = true;
         return;
       }
 
-      this.historyList.push(...responseData.response);
+      this.historyList.push(...responseData);
       this.scrollDataLoaded = true;
     },
 
@@ -338,8 +338,8 @@ export default defineComponent({
       const driver = props.searchers?.find((s) => s.id == 'search-driver')?.value.trim();
       const train = props.searchers?.find((s) => s.id == 'search-train')?.value.trim();
 
-      if (driver) queries.push(`driver=${driver}`);
+      if (driver) queries.push(`driverName=${driver}`);
-      if (train) queries.push(`train=${train}`);
+      if (train) queries.push(`trainNo=${train}`);
 
       // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
       if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
@@ -369,7 +369,7 @@ export default defineComponent({
       this.currentQuery = queries.join('&');
 
       try {
-        const responseData: TimetablesAPIData = await (
+        const responseData: TimetableHistory[] = await (
           await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
         ).data;
 
@@ -379,17 +379,17 @@ export default defineComponent({
           return;
         }
 
-        if (responseData.errorMessage) {
+        // if (responseData) {
-          this.historyDataStatus.status = DataStatus.Error;
+        //   this.historyDataStatus.status = DataStatus.Error;
-          this.historyDataStatus.error = responseData.errorMessage;
+        //   this.historyDataStatus.error = responseData;
 
-          return;
+        //   return;
-        }
+        // }
 
-        if (!responseData.response) return;
+        if (!responseData) return;
 
         // Response data exists
-        this.historyList = responseData.response;
+        this.historyList = responseData;
 
         // Stats display
         this.store.driverStatsName =

src/components/SceneryView/SceneryHistory.vue

@@ -1,291 +0,0 @@
-<template>
-  <div class="scenery-history">
-    <div class="history-title">
-      <img :src="icons.history" alt="icon history" />
-      <h2>{{ $t('journal.title') }}</h2>
-    </div>
-
-    <transition name="history-list-anim" mode="out-in">
-      <ul :key="dispatcherTimeline.length">
-        <li v-if="!isLoaded">
-          <h3>{{ $t('journal.loading') }}</h3>
-        </li>
-
-        <li v-if="isLoaded && dispatcherTimeline.length == 0">
-          <h3>{{ $t('journal.no-history') }}</h3>
-        </li>
-
-        <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="timeline.showTimeline ? icons.ascArrow : icons.descArrow" alt="arrow" /> -->
-          </h3>
-
-          <!-- <transition name="unfold-anim" @enter="enter" @afterEnter="afterEnter" @leave="leave"> -->
-          <!-- <div class="dispatcher-list" v-if="timeline.showTimeline"> -->
-          <div class="dispatcher-item" v-for="dispatcher in timeline.dispatchers" :key="dispatcher.timestampFrom">
-            <b>{{ dispatcher.dispatcherName }}</b>
-            <span>
-              <span class="dispatcher-from text--primary">
-                {{ timestampToString(dispatcher.timestampFrom, true) }}
-              </span>
-
-              <span class="dispatcher-to text--primary" v-if="dispatcher.timestampTo">
-                &gt; {{ timestampToString(dispatcher.timestampTo, true) }}
-              </span>
-            </span>
-          </div>
-          <!-- </div> -->
-          <!-- </transition> -->
-        </li>
-      </ul>
-    </transition>
-  </div>
-</template>
-
-<script lang="ts">
-import { URLs } from '@/scripts/utils/apiURLs';
-import axios from 'axios';
-import { defineComponent, inject } from 'vue';
-
-interface DispatcherTimeline {
-  date: string;
-  dispatchers: DispatcherHistory[];
-  showTimeline: boolean;
-}
-
-interface DispatcherHistory {
-  dispatcherName: string;
-  dispatcherId: number;
-  timestampFrom: number;
-  timestampTo?: number;
-}
-
-interface SceneryHistoryResponse {
-  stationName: string;
-  stationHash: string;
-  region: string;
-  dispatcherName: string;
-  dispatcherId: number;
-  timestampFrom: number;
-  timestampTo?: number;
-  currentDuration: number;
-  isOnline: boolean;
-  lastOnlineTimestamp: number;
-}
-
-interface HistoryResultAPI {
-  response: SceneryHistoryResponse[];
-  errorMessage?: string;
-}
-
-const HISTORY_API_URL = `${URLs.stacjownikAPI}/api/getSceneryHistory`;
-
-export default defineComponent({
-  data: () => ({
-    dispatcherTimeline: [] as DispatcherTimeline[],
-
-    isLoaded: false,
-
-    icons: {
-      history: require('@/assets/icon-history.svg'),
-    },
-  }),
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-
-  setup() {
-    return {
-      savedSceneryHistory: inject('savedSceneryHistory'),
-    };
-  },
-
-  async mounted() {
-    try {
-      const apiResult: HistoryResultAPI = (await axios.get(`${HISTORY_API_URL}?name=${this.name}&historyCount=100`)).data;
-
-      if (!apiResult || !apiResult.response) return;
-      this.isLoaded = true;
-
-      if (apiResult.errorMessage) return;
-
-      const dispatcherHistoryResult = apiResult.response;
-      this.savedSceneryHistory = dispatcherHistoryResult;
-
-      this.dispatcherTimeline = apiResult.response.reduce(
-        (acc, { timestampFrom, timestampTo, dispatcherId, dispatcherName }) => {
-          const dateStr = new Date(timestampFrom).toLocaleDateString('pl-PL').replace(/\./g, '/');
-
-          const timelineDay = acc.find((timeline) => timeline.date == dateStr) || {
-            date: dateStr,
-            dispatchers: [],
-            showTimeline: false,
-          };
-
-          timelineDay.dispatchers.unshift({
-            timestampFrom,
-            timestampTo,
-            dispatcherId,
-            dispatcherName,
-          });
-
-          if (!acc.find((timeline) => timeline.date == dateStr)) acc.push(timelineDay);
-
-          return acc;
-        },
-        [] as DispatcherTimeline[]
-      );
-    } catch (error) {
-      console.error(error);
-    }
-  },
-
-  methods: {
-    toggleTimeline(index: number) {
-      this.dispatcherTimeline[index].showTimeline = !this.dispatcherTimeline[index].showTimeline;
-    },
-
-    enter(el: HTMLElement) {
-      const maxHeight = getComputedStyle(el).height;
-
-      el.style.height = '0px';
-
-      getComputedStyle(el);
-
-      setTimeout(() => {
-        el.style.height = maxHeight;
-      }, 10);
-    },
-
-    afterEnter(el: HTMLElement) {
-      el.style.height = 'auto';
-    },
-
-    leave(el: HTMLElement) {
-      el.style.height = getComputedStyle(el).height;
-
-      setTimeout(() => {
-        el.style.height = '0px';
-      }, 10);
-    },
-
-    timestampToString: (timestamp: number, timeOnly = false): string =>
-      new Date(timestamp).toLocaleTimeString('pl-PL', {
-        day: timeOnly ? undefined : '2-digit',
-        month: timeOnly ? undefined : '2-digit',
-        year: timeOnly ? undefined : '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-      }),
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.unfold-anim {
-  &-leave-active,
-  &-enter-active {
-    transition: all 100ms ease-out;
-    overflow: hidden;
-  }
-}
-
-.history-list-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transition: all 100ms ease-out;
-  }
-
-  &-leave-active {
-    transition: all 100ms ease-out 100ms;
-  }
-}
-
-.scenery-history {
-  overflow-y: hidden;
-
-  padding-top: 1em;
-}
-
-.history-title {
-  display: flex;
-  justify-content: center;
-
-  margin-bottom: 0.5em;
-  font-size: 1.2em;
-
-  img {
-    margin-right: 0.5em;
-    width: 1.3em;
-  }
-}
-
-ul {
-  height: 600px;
-  overflow-y: scroll;
-}
-
-li {
-  margin: 1em 0;
-  padding: 0 0.5em;
-
-  h3 {
-    cursor: pointer;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    background: #222;
-    padding: 0.5em;
-    margin: 0 auto 0.5em auto;
-
-    max-width: 700px;
-
-    position: sticky;
-    top: 0;
-
-    img {
-      width: 1.3em;
-      vertical-align: middle;
-
-      margin-left: 0.5em;
-    }
-
-    &:focus {
-      outline: 1px solid white;
-    }
-  }
-
-  .dispatcher-list {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .dispatcher-item {
-    padding: 0.5em 0;
-    margin: 0.5em auto;
-
-    background-color: #444;
-
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-
-    width: 90%;
-    max-width: 600px;
-  }
-}
-</style>

src/scripts/interfaces/api/TimetablesAPIData.ts

@@ -1,7 +1,3 @@
-export interface TimetablesAPIData {
-  errorMessage: string | null;
-  response: TimetableHistory[] | null;
-}
 
 export interface TimetableHistory {
   timetableId: number;

src/scripts/utils/apiURLs.ts

@@ -1,10 +1,7 @@
 export const URLs = {
-  sceneryData: "https://spythere.github.io/api/stationData.json",
+  stacjownikAPI2: 'https://stacjownik.eu-4.evennode.com',
-  sceneryDataDev: "http://127.0.0.1:8000/data",
+  stacjownikAPI: 'http://localhost:3000',
-  stations: "https://api.td2.info.pl:9640/?method=getStationsOnline",
+  stacjownikAPIDev: 'http://localhost:3000',
-  dispatchers: "https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1",
-  stacjownikAPI: "https://stacjownik.eu-4.evennode.com",
-  stacjownikAPIDev: "http://localhost:3001"
   // trains: "https://api.td2.info.pl:9640/?method=getTrainsOnline",
   // getTimetableURL: (trainNo: string | number, region = "eu") => `https://api.td2.info.pl:9640/?method=readFromSWDR&value=getTimetable%3B${trainNo}%3B${region}`
 };

src/store/store.ts

@@ -258,8 +258,8 @@ export const useStore = defineStore('store', {
 
     async fetchStationsGeneralInfo() {
       const sceneryData: StationJSONData[] = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getSceneryData?timestamp=${Math.floor(Date.now() / 1800000)}`)
+        await axios.get(`${URLs.stacjownikAPI}/api/getSceneries?timestamp=${Math.floor(Date.now() / 1800000)}`)
-      ).data.response;
+      ).data;
 
       if (!sceneryData) {
         this.dataStatuses.sceneries = DataStatus.Error;
@@ -342,9 +342,16 @@ export const useStore = defineStore('store', {
       socket.on('UPDATE', (data: APIData) => {
         this.apiData = data;
         this.setOnlineData();
+
+        console.log(data);
+        
+      });
+
+      socket.emit('FETCH_DATA', {}, (data: APIData) => {
+        this.apiData = data;
+        this.setOnlineData();
       });
 
-      socket.emit('connection');
       this.webSocket = socket;
     },
 

src/views/SceneryView.vue

@@ -40,25 +40,20 @@
 </template>
 
 <script lang="ts">
-import { StoreData } from '@/scripts/interfaces/StoreData';
-
 import SceneryInfo from '@/components/SceneryView/SceneryInfo.vue';
 import SceneryTimetable from '@/components/SceneryView/SceneryTimetable.vue';
-import SceneryHistory from '@/components/SceneryView/SceneryHistory.vue';
 import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
 
 import ActionButton from '@/components/Global/ActionButton.vue';
 
-import { computed, ComputedRef, defineComponent, provide, reactive } from '@vue/runtime-core';
+import { computed, defineComponent, provide, reactive } from '@vue/runtime-core';
 import { useRoute } from 'vue-router';
 
-import axios from 'axios';
-import { URLs } from '@/scripts/utils/apiURLs';
 import Station from '@/scripts/interfaces/Station';
 import { useStore } from '@/store/store';
 
 export default defineComponent({
-  components: { SceneryInfo, SceneryTimetable, SceneryHistory, ActionButton, SceneryHeader },
+  components: { SceneryInfo, SceneryTimetable, ActionButton, SceneryHeader },
 
   data: () => ({
     icons: {
@@ -113,14 +108,6 @@ export default defineComponent({
       });
     },
   },
-
-  async activated() {
-    if (this.currentRegion.id != 'eu' && this.viewMode == 'history') this.viewMode = 'info';
-
-    const onlineFrom = await (
-      await axios.get(`${URLs.stacjownikAPI}/api/getSceneryHistory?name=${this.$route.query.station}&historyCount=0`)
-    ).data;
-  },
 });
 </script>