Zmiany w wyglądzie aplikacji (1.6.0)

This commit is contained in:
2022-04-24 01:01:55 +02:00
parent aefa6627b4
commit 7817cbec71
9 changed files with 77 additions and 63 deletions
+1 -1
View File
@@ -164,7 +164,7 @@
left: 0;
right: auto;
bottom: 0;
bottom: 0.5em;
top: auto;
+25 -19
View File
@@ -49,7 +49,7 @@
<script lang="ts">
import { URLs } from '@/scripts/utils/apiURLs';
import axios from 'axios';
import { defineComponent } from 'vue';
import { defineComponent, inject } from 'vue';
interface DispatcherTimeline {
date: string;
@@ -99,34 +99,41 @@ export default defineComponent({
},
},
async mounted() {
setup() {
return {
savedSceneryHistory: inject('savedSceneryHistory'),
};
},
async mounted() {
try {
const apiResult: HistoryResultAPI = (await axios.get(`${API_URL}?name=${this.name}&historyCount=100`)).data;
if (!apiResult || !apiResult.response) return;
this.isLoaded = true;
if (!apiResult.errorMessage) {
this.dispatcherHistory = apiResult.response.dispatcherHistory;
if (apiResult.errorMessage) return;
this.dispatcherTimeline = this.dispatcherHistory
.reduce((acc, dispatcher) => {
const dateStr = new Date(dispatcher.dispatcherFrom).toLocaleDateString('pl-PL').replace(/\./g, '/');
this.dispatcherHistory = apiResult.response.dispatcherHistory;
this.savedSceneryHistory = this.dispatcherHistory;
const timelineDay = acc.find((timeline) => timeline.date == dateStr) || {
date: dateStr,
dispatchers: [],
showTimeline: false,
};
this.dispatcherTimeline = this.dispatcherHistory
.reduce((acc, dispatcher) => {
const dateStr = new Date(dispatcher.dispatcherFrom).toLocaleDateString('pl-PL').replace(/\./g, '/');
timelineDay.dispatchers.unshift(dispatcher);
const timelineDay = acc.find((timeline) => timeline.date == dateStr) || {
date: dateStr,
dispatchers: [],
showTimeline: false,
};
if (!acc.find((timeline) => timeline.date == dateStr)) acc.push(timelineDay);
timelineDay.dispatchers.unshift(dispatcher);
return acc;
}, [] as DispatcherTimeline[])
.reverse();
}
if (!acc.find((timeline) => timeline.date == dateStr)) acc.push(timelineDay);
return acc;
}, [] as DispatcherTimeline[])
.reverse();
} catch (error) {
console.error(error);
}
@@ -216,7 +223,6 @@ export default defineComponent({
}
}
ul {
height: 600px;
overflow-y: scroll;
+2 -2
View File
@@ -81,8 +81,8 @@ h3.section-header {
.info-lists {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 550px));
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
justify-content: space-around;
}
.badge {
@@ -3,7 +3,7 @@
<h3 class="user-header section-header">
<img :src="icons.user" alt="icon-user" />
&nbsp;{{ $t('scenery.users') }} &nbsp;
<span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}/{{ station.onlineInfo?.maxUsers || '0' }}</span>
<span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span>&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
</h3>
<div
@@ -80,7 +80,7 @@ $no-timetable: #aaa;
$departed: springgreen;
$stopped: #ffa600;
$online: gold;
$terminated: red;
$terminated: salmon;
$disconnected: slategray;
.info-user-list {
+27 -20
View File
@@ -62,19 +62,21 @@
<span style="color: white">
{{ scheduledTrain.driverName }}
</span>
|
<span class="general-status">
<span :class="scheduledTrain.stopStatus">
{{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
<span v-if="scheduledTrain.stopStatus == 'arriving'"> {{ scheduledTrain.prevStationName }}</span>
<span v-if="scheduledTrain.stopStatus.startsWith('departed')">{{
scheduledTrain.nextStationName
}}</span>
</span>
</span>
<div class="info-route">
<strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
</div>
</span>
<span class="general-status">
<span :class="scheduledTrain.stopStatus">
{{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
<span v-if="scheduledTrain.stopStatus == 'arriving'">z: {{ scheduledTrain.prevStationName }}</span>
<span v-if="scheduledTrain.stopStatus.startsWith('departed')">do: {{ scheduledTrain.nextStationName }}</span>
</span>
</span>
</span>
<span class="timetable-schedule">
@@ -255,15 +257,24 @@ export default defineComponent({
@import '../../styles/responsive.scss';
@import '../../styles/variables.scss';
h3 {
h3.timetable-header {
margin: 0.5em 0;
padding: 0.3em;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
font-size: 1.5em;
a {
display: flex;
}
img {
width: 1.2em;
}
}
.timetable-only {
@@ -294,18 +305,13 @@ h3 {
}
.timetable {
&-header {
a {
display: flex;
}
}
&-count {
margin-left: 0.5em;
}
&-item {
margin: 1em auto;
max-width: 1100px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -433,11 +439,10 @@ h3 {
}
.general-status {
margin-left: 1em;
text-align: right;
span.arriving {
color: #aaa;
color: #ccc;
}
span.departed {
@@ -446,7 +451,7 @@ h3 {
&-away {
font-weight: bold;
color: rgb(0, 155, 0);
color: #5ecc5e;
}
}
@@ -460,7 +465,7 @@ h3 {
}
span.terminated {
color: #e00000;
color: salmon;
font-weight: bold;
}
}
@@ -477,12 +482,14 @@ h3 {
}
&-stop {
position: relative;
display: flex;
flex-direction: column;
.stop-time {
font-size: 0.85em;
margin: 0.5em 0;
// position: absolute;
transform: translateY(-0.25em);
}
}
}
+10 -11
View File
@@ -3,17 +3,17 @@
<section>
<span>
<div>
<span class="timetable_warnings">
<span class="warning twr" v-if="train.timetableData?.TWR">TWR</span>
<span class="warning skr" v-if="train.timetableData?.SKR">SKR</span>
<span>
<span class="timetable_warnings">
<span class="warning twr" v-if="train.timetableData?.TWR">TWR</span>
<span class="warning skr" v-if="train.timetableData?.SKR">SKR</span>
</span>
<strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
<strong>{{ train.trainNo }}</strong>
<span>&nbsp;| {{ train.driverName }}</span>
</span>
<strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
<strong>{{ train.trainNo }}</strong>
<span>&nbsp;| {{ train.driverName }}</span>
<img class="image-offline" v-if="!train.currentStationHash" :src="icons.offline" alt="offline"
<img class="image-offline" style="height: 1em" v-if="!train.currentStationHash" :src="icons.offline" alt="offline"
:title="$t('trains.offline')"
>
</div>
@@ -117,10 +117,9 @@ export default defineComponent({
@import '../../styles/responsive.scss';
.image-warning, .image-offline {
width: 1em;
height: 1em;
margin-left: 0.25em;
margin-left: 0.5em;
}
.train-image {
+3 -3
View File
@@ -208,9 +208,9 @@
"timetables": {
"timetable-only": "Switch to timetable-only view",
"online": "At station",
"departed": "Dispatched",
"departed-away": "Departed",
"arriving": "En route",
"departed": "Dispatched to:",
"departed-away": "Departed to:",
"arriving": "Arriving from:",
"stopped": "Stopped",
"terminated": "Terminated",
"begins": "BEGINS HERE",
+3 -3
View File
@@ -210,9 +210,9 @@
"timetables": {
"timetable-only": "Wyodrębnij rozkłady jazdy",
"online": "Na stacji",
"departed": "Odprawiony",
"departed-away": "Odjechał",
"arriving": "W drodze",
"departed": "Odprawiony do:",
"departed-away": "Odjechał do:",
"arriving": "W drodze z:",
"stopped": "Postój",
"terminated": "Skończył bieg",
"begins": "ROZPOCZYNA\nBIEG",
+4 -2
View File
@@ -47,7 +47,6 @@
<script lang="ts">
import { StoreData } from '@/scripts/interfaces/StoreData';
import { DataStatus } from '@/scripts/enums/DataStatus';
import SceneryInfo from '@/components/SceneryView/SceneryInfo.vue';
import SceneryTimetable from '@/components/SceneryView/SceneryTimetable.vue';
@@ -56,7 +55,7 @@ import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
import ActionButton from '@/components/Global/ActionButton.vue';
import { computed, ComputedRef, defineComponent, onMounted } from '@vue/runtime-core';
import { computed, ComputedRef, defineComponent, provide, reactive } from '@vue/runtime-core';
import { useStore } from '@/store';
import { GETTERS } from '@/constants/storeConstants';
import { useRoute } from 'vue-router';
@@ -85,6 +84,7 @@ export default defineComponent({
const route = useRoute();
const store = useStore();
const savedSceneryHistory = reactive({});
const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
const timetableOnly = computed(() => (route.query['timetable_only'] == '1' ? true : false));
@@ -97,6 +97,8 @@ export default defineComponent({
);
});
provide('savedSceneryHistory', savedSceneryHistory);
// const onlineFrom = computed(async () => {
// return await (await axios.get(`${URLs.stacjownikAPI}?name=${route.query.station}&historyCount=0`)).data;
// });