dzienniki

This commit is contained in:
2023-09-02 18:47:01 +02:00
parent 9d1dc4ffca
commit 1550849360
11 changed files with 163 additions and 167 deletions
@@ -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> &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
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>
+7 -11
View File
@@ -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: () => ({