mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
Uaktualnienie do wersji API
This commit is contained in:
@@ -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() {
|
||||
|
||||
@@ -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;
|
||||
@@ -249,7 +244,7 @@ export default defineComponent({
|
||||
closeDispatcherStatsCard() {
|
||||
this.statsCardOpen = false;
|
||||
},
|
||||
|
||||
|
||||
navigateToScenery(name: string, isOnline: boolean) {
|
||||
if (!isOnline) return;
|
||||
|
||||
@@ -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) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = responseData.errorMessage;
|
||||
// if (responseData.errorMessage) {
|
||||
// this.historyDataStatus.status = DataStatus.Error;
|
||||
// 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 =
|
||||
|
||||
@@ -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 (train) queries.push(`train=${train}`);
|
||||
if (driver) queries.push(`driverName=${driver}`);
|
||||
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) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = responseData.errorMessage;
|
||||
// if (responseData) {
|
||||
// this.historyDataStatus.status = DataStatus.Error;
|
||||
// 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 =
|
||||
|
||||
@@ -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">
|
||||
> {{ 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>
|
||||
@@ -1,7 +1,3 @@
|
||||
export interface TimetablesAPIData {
|
||||
errorMessage: string | null;
|
||||
response: TimetableHistory[] | null;
|
||||
}
|
||||
|
||||
export interface TimetableHistory {
|
||||
timetableId: number;
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
export const URLs = {
|
||||
sceneryData: "https://spythere.github.io/api/stationData.json",
|
||||
sceneryDataDev: "http://127.0.0.1:8000/data",
|
||||
stations: "https://api.td2.info.pl:9640/?method=getStationsOnline",
|
||||
dispatchers: "https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1",
|
||||
stacjownikAPI: "https://stacjownik.eu-4.evennode.com",
|
||||
stacjownikAPIDev: "http://localhost:3001"
|
||||
stacjownikAPI2: 'https://stacjownik.eu-4.evennode.com',
|
||||
stacjownikAPI: 'http://localhost:3000',
|
||||
stacjownikAPIDev: 'http://localhost:3000',
|
||||
// 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}`
|
||||
};
|
||||
};
|
||||
|
||||
+11
-4
@@ -37,7 +37,7 @@ export const useStore = defineStore('store', {
|
||||
stationCount: 0,
|
||||
|
||||
webSocket: undefined,
|
||||
|
||||
|
||||
dispatcherStatsName: '',
|
||||
dispatcherStatsData: undefined,
|
||||
|
||||
@@ -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)}`)
|
||||
).data.response;
|
||||
await axios.get(`${URLs.stacjownikAPI}/api/getSceneries?timestamp=${Math.floor(Date.now() / 1800000)}`)
|
||||
).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;
|
||||
},
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user