mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Zmiany w wyglądzie aplikacji (1.6.0)
This commit is contained in:
+1
-1
@@ -164,7 +164,7 @@
|
||||
|
||||
left: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
bottom: 0.5em;
|
||||
top: auto;
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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" />
|
||||
{{ $t('scenery.users') }}
|
||||
<span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}/{{ station.onlineInfo?.maxUsers || '0' }}</span>
|
||||
<span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span> / <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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 }} </strong>
|
||||
<strong>{{ train.trainNo }}</strong>
|
||||
<span> | {{ train.driverName }}</span>
|
||||
</span>
|
||||
|
||||
<strong v-if="train.timetableData">{{ train.timetableData.category }} </strong>
|
||||
<strong>{{ train.trainNo }}</strong>
|
||||
<span> | {{ 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
@@ -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
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
// });
|
||||
|
||||
Reference in New Issue
Block a user