mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
dzienniki
This commit is contained in:
@@ -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>
|
||||
@@ -19,12 +19,12 @@
|
||||
<div v-else>
|
||||
<table class="scenery-history-table">
|
||||
<thead>
|
||||
<th>Sceneria</th>
|
||||
<th>{{ $t('scenery.dispatchers-history-hash') }}</th>
|
||||
<th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
|
||||
<th>{{ $t('scenery.dispatchers-history-level') }}</th>
|
||||
<th>{{ $t('scenery.dispatchers-history-rate') }}</th>
|
||||
<th>{{ $t('scenery.dispatchers-history-date') }}</th>
|
||||
<th>{{ $t('journal.history-name') }}</th>
|
||||
<th>{{ $t('journal.history-hash') }}</th>
|
||||
<th>{{ $t('journal.history-dispatcher') }}</th>
|
||||
<th>{{ $t('journal.history-level') }}</th>
|
||||
<th>{{ $t('journal.history-rate') }}</th>
|
||||
<th>{{ $t('journal.history-date') }}</th>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@@ -54,7 +54,7 @@
|
||||
<b>{{ historyItem.dispatcherRate }}</b>
|
||||
</td>
|
||||
|
||||
<td style="min-width: 250px" class="time">
|
||||
<td style="min-width: 200px" class="time">
|
||||
<span v-if="historyItem.timestampTo">
|
||||
<b>{{ $d(historyItem.timestampFrom) }}</b>
|
||||
|
||||
@@ -66,7 +66,10 @@
|
||||
|
||||
<span class="dispatcher-online" v-else>
|
||||
<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>
|
||||
({{ calculateDuration(historyItem.currentDuration) }})
|
||||
</span>
|
||||
@@ -74,63 +77,6 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</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> • <b>{{ item.stationName }}</b>
|
||||
<span class="text--grayed"> #{{ item.stationHash }} </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' }}
|
||||
</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">
|
||||
>
|
||||
{{ new Date(item.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
|
||||
({{ $t('journal.duty-lasted') }} {{ calculateDuration(item.currentDuration!) }})
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group> -->
|
||||
|
||||
<button
|
||||
class="btn btn--option btn--load-data"
|
||||
@@ -161,8 +107,11 @@ import styleMixin from '../../mixins/styleMixin';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import { DataStatus } from '../../scripts/enums/DataStatus';
|
||||
import { useStore } from '../../store/store';
|
||||
import Loading from '../Global/Loading.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Loading },
|
||||
|
||||
mixins: [dateMixin, styleMixin, imageMixin],
|
||||
|
||||
props: {
|
||||
@@ -180,7 +129,7 @@ export default defineComponent({
|
||||
type: Function as PropType<() => void>,
|
||||
},
|
||||
dataStatus: {
|
||||
type: Object as PropType<DataStatus>,
|
||||
type: Number as PropType<DataStatus>,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -252,12 +201,16 @@ table.scenery-history-table {
|
||||
|
||||
td {
|
||||
padding: 0.75em;
|
||||
border-bottom: solid 5px #1a1a1a;
|
||||
border-bottom: solid 5px #111;
|
||||
|
||||
.level-badge {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
|
||||
@@ -255,9 +255,11 @@ import styleMixin from '../../mixins/styleMixin';
|
||||
import { DataStatus } from '../../scripts/enums/DataStatus';
|
||||
import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
|
||||
import { useStore } from '../../store/store';
|
||||
import Loading from '../Global/Loading.vue';
|
||||
import ProgressBar from '../Global/ProgressBar.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { ProgressBar, Loading },
|
||||
mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
|
||||
props: {
|
||||
timetableHistory: {
|
||||
@@ -274,7 +276,7 @@ export default defineComponent({
|
||||
type: Function as PropType<() => void>,
|
||||
},
|
||||
dataStatus: {
|
||||
type: Object as PropType<DataStatus>,
|
||||
type: Number as PropType<DataStatus>,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -310,6 +312,7 @@ export default defineComponent({
|
||||
}));
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
getTimetableStops(timetable: TimetableHistory) {
|
||||
const stopNames = timetable.sceneriesString.split('%');
|
||||
@@ -365,7 +368,6 @@ export default defineComponent({
|
||||
imageEl.src = this.getImage('unknown.png');
|
||||
},
|
||||
},
|
||||
components: { ProgressBar },
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -21,18 +21,11 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="status-badge" v-if="station.onlineInfo && onlineFrom > 0">
|
||||
OD {{ new Date(onlineFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }}
|
||||
</span>
|
||||
|
||||
<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>
|
||||
<StationStatusBadge
|
||||
:statusID="station.onlineInfo?.statusID"
|
||||
:isOnline="station.onlineInfo ? true : false"
|
||||
:statusTimestamp="station.onlineInfo?.statusTimestamp"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -43,20 +36,21 @@ import imageMixin from '../../../mixins/imageMixin';
|
||||
import routerMixin from '../../../mixins/routerMixin';
|
||||
import styleMixin from '../../../mixins/styleMixin';
|
||||
import Station from '../../../scripts/interfaces/Station';
|
||||
import StationStatusBadge from '../../Global/StationStatusBadge.vue';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [styleMixin, dateMixin, routerMixin, imageMixin],
|
||||
props: {
|
||||
station: {
|
||||
type: Object as () => Station,
|
||||
default: {},
|
||||
mixins: [styleMixin, dateMixin, routerMixin, imageMixin],
|
||||
props: {
|
||||
station: {
|
||||
type: Object as () => Station,
|
||||
default: {},
|
||||
},
|
||||
onlineFrom: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
},
|
||||
|
||||
onlineFrom: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
},
|
||||
components: { StationStatusBadge }
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -104,3 +98,4 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -93,16 +93,11 @@
|
||||
</td>
|
||||
|
||||
<td class="station_status">
|
||||
<span class="status-badge" :class="station.onlineInfo.statusID" v-if="station.onlineInfo">
|
||||
{{ $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>
|
||||
<StationStatusBadge
|
||||
:statusID="station.onlineInfo?.statusID"
|
||||
:isOnline="station.onlineInfo ? true : false"
|
||||
:statusTimestamp="station.onlineInfo?.statusTimestamp"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="station_dispatcher-name">
|
||||
@@ -253,6 +248,7 @@ import { useStationFiltersStore } from '../../store/stationFiltersStore';
|
||||
import { useStore } from '../../store/store';
|
||||
import Loading from '../Global/Loading.vue';
|
||||
import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
|
||||
import StationStatusBadge from '../Global/StationStatusBadge.vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
@@ -262,7 +258,7 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
|
||||
components: { Loading },
|
||||
components: { Loading, StationStatusBadge },
|
||||
mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
|
||||
|
||||
data: () => ({
|
||||
|
||||
Reference in New Issue
Block a user