Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-04 22:08:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

dzienniki

Browse Source
This commit is contained in:
Spythere
2023-09-02 18:47:01 +02:00
parent 9d1dc4ffca
commit 1550849360
11 changed files with 163 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.scss
-1
View File
@@ -1,7 +1,6 @@
@import './styles/responsive.scss'; @import './styles/responsive.scss';
@import './styles/variables.scss'; @import './styles/variables.scss';
@import './styles/global.scss'; @import './styles/global.scss';
@import './styles/scenery_status.scss';
// VUE ROUTE CHANGE ANIMATION // VUE ROUTE CHANGE ANIMATION
.view-anim { .view-anim {
src/components/Global/StationStatusBadge.vue
+90
View File
@@ -0,0 +1,90 @@
<template>
<span class="status-badge" :class="statusID" v-if="isOnline">
{{ $t(`status.${statusID}`) }}
{{ statusID == 'online' ? timestampToString(statusTimestamp!) : '' }}
</span>
<span class="status-badge free" v-else>
{{ $t('status.free') }}
</span>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import dateMixin from '../../mixins/dateMixin';
export default defineComponent({
props: {
statusID: {
type: String,
},
statusTimestamp: {
type: Number,
},
isOnline: {
type: Boolean,
},
},
mixins: [dateMixin],
});
</script>
<style lang="scss" scoped>
$free: #8a8a8a;
$ending: #e6c300;
$no-limit: #117fc9;
$unav: #ff3d5d;
$brb: #e6a100;
$no-space: #222;
$online: #09a116;
$unknown: rgb(185, 60, 60);
.status-badge {
border-radius: 1rem;
font-weight: 500;
padding: 0.2em 0.55em;
background-color: $online;
&.free {
background-color: $free;
font-size: 0.95em;
}
&.ending {
background-color: $ending;
color: black;
font-size: 0.9em;
}
&.no-limit {
background-color: $no-limit;
font-size: 0.85em;
}
&.not-signed,
&.unavailable {
background-color: $unav;
font-size: 0.85em;
}
&.brb {
background-color: $brb;
color: black;
font-size: 0.95em;
}
&.no-space {
background-color: $no-space;
border: 1px solid white;
color: white;
font-size: 0.85em;
}
&.unknown {
background-color: $unknown;
font-size: 0.95em;
}
}
</style>
src/components/JournalView/JournalDispatchersList.vue
+20 -67
View File
@@ -19,12 +19,12 @@
<div v-else> <div v-else>
<table class="scenery-history-table"> <table class="scenery-history-table">
<thead> <thead>
<th>Sceneria</th> <th>{{ $t('journal.history-name') }}</th>
<th>{{ $t('scenery.dispatchers-history-hash') }}</th> <th>{{ $t('journal.history-hash') }}</th>
<th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th> <th>{{ $t('journal.history-dispatcher') }}</th>
<th>{{ $t('scenery.dispatchers-history-level') }}</th> <th>{{ $t('journal.history-level') }}</th>
<th>{{ $t('scenery.dispatchers-history-rate') }}</th> <th>{{ $t('journal.history-rate') }}</th>
<th>{{ $t('scenery.dispatchers-history-date') }}</th> <th>{{ $t('journal.history-date') }}</th>
</thead> </thead>
<tbody> <tbody>
@@ -54,7 +54,7 @@
<b>{{ historyItem.dispatcherRate }}</b> <b>{{ historyItem.dispatcherRate }}</b>
</td> </td>
<td style="min-width: 250px" class="time"> <td style="min-width: 200px" class="time">
<span v-if="historyItem.timestampTo"> <span v-if="historyItem.timestampTo">
<b>{{ $d(historyItem.timestampFrom) }}</b> <b>{{ $d(historyItem.timestampFrom) }}</b>
@@ -66,7 +66,10 @@
<span class="dispatcher-online" v-else> <span class="dispatcher-online" v-else>
<b class="text--online"> <b class="text--online">
{{ $t('journal.online-since') }} {{ timestampToString(historyItem.timestampFrom) }} <router-link :to="`/scenery?station=${historyItem.stationName}`">{{
$t('journal.online-since')
}}</router-link>
{{ timestampToString(historyItem.timestampFrom) }}
</b> </b>
({{ calculateDuration(historyItem.currentDuration) }}) ({{ calculateDuration(historyItem.currentDuration) }})
</span> </span>
@@ -74,63 +77,6 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<!-- <transition-group class="journal-list" tag="ul" name="list-anim">
<li
v-for="item in computedDispatcherHistory"
:key="typeof item === 'string' ? item : item.timestampFrom + item.dispatcherId"
:class="{ sticky: typeof item == 'string' }"
>
<div v-if="typeof item == 'string'" class="journal_day">
{{ item }}
</div>
<div
v-else
class="journal_item"
:class="{ online: item.isOnline }"
@click="navigateToScenery(item.stationName, item.isOnline)"
@keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
tabindex="0"
>
<span class="item-general">
<b
v-if="item.dispatcherLevel !== null"
class="level-badge dispatcher"
:style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
>
{{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
</b>
<b class="text--primary">{{ item.dispatcherName }}</b> &bull; <b>{{ item.stationName }}</b>
<span class="text--grayed">&nbsp;#{{ item.stationHash }}&nbsp;</span>
<span class="region-badge" :class="item.region">PL1</span>
<span class="like-count" v-if="item.dispatcherRate">
<img :src="getIcon('like')" alt="like icon" />
{{ item.dispatcherRate }}
</span>
</span>
<span class="item-time">
<span :data-status="item.isOnline">
{{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
</span>
<span>
{{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
</span>
<span v-if="item.currentDuration && item.isOnline">
({{ calculateDuration(item.currentDuration) }})
</span>
<span v-if="item.timestampTo">
&gt;
{{ new Date(item.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
({{ $t('journal.duty-lasted') }} {{ calculateDuration(item.currentDuration!) }})
</span>
</span>
</div>
</li>
</transition-group> -->
<button <button
class="btn btn--option btn--load-data" class="btn btn--option btn--load-data"
@@ -161,8 +107,11 @@ import styleMixin from '../../mixins/styleMixin';
import imageMixin from '../../mixins/imageMixin'; import imageMixin from '../../mixins/imageMixin';
import { DataStatus } from '../../scripts/enums/DataStatus'; import { DataStatus } from '../../scripts/enums/DataStatus';
import { useStore } from '../../store/store'; import { useStore } from '../../store/store';
import Loading from '../Global/Loading.vue';
export default defineComponent({ export default defineComponent({
components: { Loading },
mixins: [dateMixin, styleMixin, imageMixin], mixins: [dateMixin, styleMixin, imageMixin],
props: { props: {
@@ -180,7 +129,7 @@ export default defineComponent({
type: Function as PropType<() => void>, type: Function as PropType<() => void>,
}, },
dataStatus: { dataStatus: {
type: Object as PropType<DataStatus>, type: Number as PropType<DataStatus>,
}, },
}, },
@@ -252,12 +201,16 @@ table.scenery-history-table {
td { td {
padding: 0.75em; padding: 0.75em;
border-bottom: solid 5px #1a1a1a; border-bottom: solid 5px #111;
.level-badge { .level-badge {
margin: 0 auto; margin: 0 auto;
} }
} }
@media screen and (max-width: 550px) {
font-size: 0.9em;
}
} }
.text { .text {
src/components/JournalView/JournalTimetablesList.vue
+4 -2
View File
@@ -255,9 +255,11 @@ import styleMixin from '../../mixins/styleMixin';
import { DataStatus } from '../../scripts/enums/DataStatus'; import { DataStatus } from '../../scripts/enums/DataStatus';
import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData'; import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
import { useStore } from '../../store/store'; import { useStore } from '../../store/store';
import Loading from '../Global/Loading.vue';
import ProgressBar from '../Global/ProgressBar.vue'; import ProgressBar from '../Global/ProgressBar.vue';
export default defineComponent({ export default defineComponent({
components: { ProgressBar, Loading },
mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin], mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
props: { props: {
timetableHistory: { timetableHistory: {
@@ -274,7 +276,7 @@ export default defineComponent({
type: Function as PropType<() => void>, type: Function as PropType<() => void>,
}, },
dataStatus: { dataStatus: {
type: Object as PropType<DataStatus>, type: Number as PropType<DataStatus>,
}, },
}, },
@@ -310,6 +312,7 @@ export default defineComponent({
})); }));
}, },
}, },
methods: { methods: {
getTimetableStops(timetable: TimetableHistory) { getTimetableStops(timetable: TimetableHistory) {
const stopNames = timetable.sceneriesString.split('%'); const stopNames = timetable.sceneriesString.split('%');
@@ -365,7 +368,6 @@ export default defineComponent({
imageEl.src = this.getImage('unknown.png'); imageEl.src = this.getImage('unknown.png');
}, },
}, },
components: { ProgressBar },
}); });
</script> </script>
src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
+18 -23
View File
@@ -21,18 +21,11 @@
</span> </span>
</div> </div>
<span class="status-badge" v-if="station.onlineInfo && onlineFrom > 0"> <StationStatusBadge
OD {{ new Date(onlineFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }} :statusID="station.onlineInfo?.statusID"
</span> :isOnline="station.onlineInfo ? true : false"
:statusTimestamp="station.onlineInfo?.statusTimestamp"
<span class="status-badge" v-if="station.onlineInfo" :class="station.onlineInfo.statusID"> />
{{ $t(`status.${station.onlineInfo.statusID}`) }}
{{ station.onlineInfo.statusID == 'online' ? timestampToString(station.onlineInfo.statusTimestamp) : '' }}
</span>
<span class="status-badge free" v-else>
{{ $t('status.free') }}
</span>
</section> </section>
</template> </template>
@@ -43,20 +36,21 @@ import imageMixin from '../../../mixins/imageMixin';
import routerMixin from '../../../mixins/routerMixin'; import routerMixin from '../../../mixins/routerMixin';
import styleMixin from '../../../mixins/styleMixin'; import styleMixin from '../../../mixins/styleMixin';
import Station from '../../../scripts/interfaces/Station'; import Station from '../../../scripts/interfaces/Station';
import StationStatusBadge from '../../Global/StationStatusBadge.vue';
export default defineComponent({ export default defineComponent({
mixins: [styleMixin, dateMixin, routerMixin, imageMixin], mixins: [styleMixin, dateMixin, routerMixin, imageMixin],
props: { props: {
station: { station: {
type: Object as () => Station, type: Object as () => Station,
default: {}, default: {},
},
onlineFrom: {
type: Number,
default: -1,
},
}, },
components: { StationStatusBadge }
onlineFrom: {
type: Number,
default: -1,
},
},
}); });
</script> </script>
@@ -104,3 +98,4 @@ export default defineComponent({
} }
} }
</style> </style>
src/components/StationsView/StationTable.vue
+7 -11
View File
@@ -93,16 +93,11 @@
</td> </td>
<td class="station_status"> <td class="station_status">
<span class="status-badge" :class="station.onlineInfo.statusID" v-if="station.onlineInfo"> <StationStatusBadge
{{ $t(`status.${station.onlineInfo.statusID}`) }} :statusID="station.onlineInfo?.statusID"
{{ :isOnline="station.onlineInfo ? true : false"
station.onlineInfo.statusID == 'online' ? timestampToString(station.onlineInfo.statusTimestamp) : '' :statusTimestamp="station.onlineInfo?.statusTimestamp"
}} />
</span>
<span class="status-badge free" v-else>
{{ $t('status.free') }}
</span>
</td> </td>
<td class="station_dispatcher-name"> <td class="station_dispatcher-name">
@@ -253,6 +248,7 @@ import { useStationFiltersStore } from '../../store/stationFiltersStore';
import { useStore } from '../../store/store'; import { useStore } from '../../store/store';
import Loading from '../Global/Loading.vue'; import Loading from '../Global/Loading.vue';
import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames'; import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
import StationStatusBadge from '../Global/StationStatusBadge.vue';
export default defineComponent({ export default defineComponent({
props: { props: {
@@ -262,7 +258,7 @@ export default defineComponent({
}, },
}, },
components: { Loading }, components: { Loading, StationStatusBadge },
mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin], mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
data: () => ({ data: () => ({
src/locales/en.json
+8 -1
View File
@@ -335,7 +335,14 @@
"stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/", "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/",
"timetable-location-signal": "signal:", "timetable-location-signal": "signal:",
"timetable-location-route": "route:" "timetable-location-route": "route:",
"history-name": "Scenery name",
"history-hash": "Hash",
"history-dispatcher": "Dispatcher",
"history-level": "Level",
"history-rate": "Rate",
"history-date": "Service date"
}, },
"scenery": { "scenery": {
"users": "PLAYERS ONLINE", "users": "PLAYERS ONLINE",
src/locales/pl.json
+8 -1
View File
@@ -338,7 +338,14 @@
"stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/", "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/",
"timetable-location-signal": "semafor:", "timetable-location-signal": "semafor:",
"timetable-location-route": "szlak:" "timetable-location-route": "szlak:",
"history-name": "Sceneria",
"history-hash": "Hash",
"history-dispatcher": "Dyżurny",
"history-level": "Poziom",
"history-rate": "Ocena",
"history-date": "Data służby"
}, },
"scenery": { "scenery": {
"users": "GRACZE ONLINE", "users": "GRACZE ONLINE",
src/scripts/interfaces/api/DispatchersAPIData.ts
+1
View File
@@ -7,6 +7,7 @@ export interface DispatcherHistory {
dispatcherLevel: number | null; dispatcherLevel: number | null;
dispatcherRate: number; dispatcherRate: number;
dispatcherIsSupporter: boolean; dispatcherIsSupporter: boolean;
dispatcherStatus?: number;
isOnline: boolean; isOnline: boolean;
lastOnlineTimestamp: number; lastOnlineTimestamp: number;
region: string; region: string;
src/styles/scenery_status.scss
-56
View File
@@ -1,56 +0,0 @@
$free: #8a8a8a;
$ending: #e6c300;
$no-limit: #117fc9;
$unav: #ff3d5d;
$brb: #e6a100;
$no-space: #222;
$taken: #09a116;
$unknown: rgb(185, 60, 60);
.status-badge {
border-radius: 1rem;
font-weight: 500;
padding: 0.2em .55em;
background-color: $taken;
&.free {
background-color: $free;
font-size: 0.95em;
}
&.ending {
background-color: $ending;
color: black;
font-size: 0.9em;
}
&.no-limit {
background-color: $no-limit;
font-size: 0.85em;
}
&.not-signed,
&.unavailable {
background-color: $unav;
font-size: 0.85em;
}
&.brb {
background-color: $brb;
color: black;
font-size: 0.95em;
}
&.no-space {
background-color: $no-space;
color: white;
font-size: 0.85em;
}
&.unknown {
background-color: $unknown;
font-size: 0.95em;
}
}
src/views/JournalDispatchers.vue
+7 -5
View File
@@ -6,7 +6,7 @@
<JournalOptions <JournalOptions
@on-search-confirm="fetchHistoryData" @on-search-confirm="fetchHistoryData"
@on-options-reset="resetOptions" @on-options-reset="resetOptions"
@on-refresh-data="fetchHistoryData" @on-refresh-data="fetchHistoryData(true)"
:sorter-option-ids="['timestampFrom', 'duration']" :sorter-option-ids="['timestampFrom', 'duration']"
:data-status="dataStatus" :data-status="dataStatus"
:current-options-active="currentOptionsActive" :current-options-active="currentOptionsActive"
@@ -186,10 +186,10 @@ export default defineComponent({
async addHistoryData() { async addHistoryData() {
this.scrollDataLoaded = false; this.scrollDataLoaded = false;
const countFrom = this.historyList.length; this.countFromIndex = this.historyList.length;
const responseData: DispatcherHistory[] = await ( const responseData: DispatcherHistory[] = await (
await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`) await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${this.countFromIndex}`)
).data; ).data;
if (!responseData) return; if (!responseData) return;
@@ -203,7 +203,7 @@ export default defineComponent({
this.scrollDataLoaded = true; this.scrollDataLoaded = true;
}, },
async fetchHistoryData() { async fetchHistoryData(reset = false) {
const queries: string[] = []; const queries: string[] = [];
const dispatcher = this.searchersValues['search-dispatcher'].trim(); const dispatcher = this.searchersValues['search-dispatcher'].trim();
@@ -217,7 +217,7 @@ export default defineComponent({
if (station) queries.push(`stationName=${station}`); if (station) queries.push(`stationName=${station}`);
if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`); if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
// Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance']; // API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom'); if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration'); else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
else queries.push('sortBy=timestampFrom'); else queries.push('sortBy=timestampFrom');
@@ -230,6 +230,8 @@ export default defineComponent({
this.currentQueryArray = queries; this.currentQueryArray = queries;
try { try {
if (reset) this.dataStatus = DataStatus.Loading;
const responseData: DispatcherHistory[] = await ( const responseData: DispatcherHistory[] = await (
await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`) await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
).data; ).data;