mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
338 lines
11 KiB
Vue
338 lines
11 KiB
Vue
<template>
|
|
<div class="app">
|
|
<div class="app_container">
|
|
<!-- <div class="wip-alert">
|
|
<img class="icon-error" :src="iconError" alt="error" />
|
|
<h2>Stacjownik tymczasowo nieaktywny!</h2>
|
|
<p>Absolutny zakaz wjazdu!</p>
|
|
</div> -->
|
|
<header class="app_header">
|
|
<div class="header_body">
|
|
<object
|
|
class="signal-status-indicator"
|
|
type="image/svg+xml"
|
|
:data="icons.statusIndicator"
|
|
ref="status-indicator"
|
|
></object>
|
|
|
|
<!-- <object class="signal-status-indicator" :src="icons.statusIndicator" alt="status-icon" ref="status-indicator"></object> -->
|
|
<span class="header_brand">
|
|
<span>
|
|
<span>S</span>
|
|
<span>tacj</span>
|
|
<span class="train-logo">
|
|
<img class="logo-image" src="@/assets/stacjownik-logo.svg" alt="stacjownik logo" />
|
|
</span>
|
|
<span>wnik</span>
|
|
</span>
|
|
|
|
<span class="brand_lang">
|
|
<span
|
|
class="lang pl"
|
|
@click="changeLang('en')"
|
|
:class="{ current: currentLang == 'pl' }"
|
|
v-if="currentLang == 'pl'"
|
|
>
|
|
<img :src="icons.pl" alt="icon-pl" />
|
|
</span>
|
|
|
|
<span
|
|
class="lang en"
|
|
@click="changeLang('pl')"
|
|
:class="{ current: currentLang == 'en' }"
|
|
v-if="currentLang == 'en'"
|
|
>
|
|
<img :src="icons.en" alt="icon-en" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
|
|
<span class="header_info">
|
|
<Clock />
|
|
|
|
<div class="info_counter">
|
|
<span class="region" @click="openFilterCard">
|
|
{{ currentRegion.value }}
|
|
</span>
|
|
|
|
<img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
|
|
<span>{{ data.activeStationCount }}</span>
|
|
<span>{{ data.activeTrainCount }}</span>
|
|
<img src="@/assets/icon-train.svg" alt="icon train" />
|
|
</div>
|
|
</span>
|
|
|
|
<span class="header_links">
|
|
<router-link class="route" active-class="route-active" to="/" exact>{{ $t('app.sceneries') }} </router-link>
|
|
/
|
|
<router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }} </router-link>
|
|
/
|
|
<router-link class="route" active-class="route-active" to="/journal">{{ $t('app.journal') }} </router-link>
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="app_main">
|
|
<router-view v-slot="{ Component }">
|
|
<transition name="view-anim" mode="out-in">
|
|
<keep-alive>
|
|
<component :is="Component" />
|
|
</keep-alive>
|
|
</transition>
|
|
</router-view>
|
|
</main>
|
|
|
|
<footer class="app_footer">
|
|
©
|
|
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">
|
|
Spythere
|
|
</a>
|
|
{{ new Date().getUTCFullYear() }} | v{{ VERSION }}
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Clock from '@/components/App/Clock.vue';
|
|
|
|
import StorageManager from '@/scripts/managers/storageManager';
|
|
import { computed, ComputedRef, defineComponent, provide, ref, watch } from 'vue';
|
|
import { GETTERS } from './constants/storeConstants';
|
|
import { StoreData } from './scripts/interfaces/StoreData';
|
|
import { useStore } from './store';
|
|
|
|
import packageInfo from '.././package.json';
|
|
import { DataStatus } from './scripts/enums/DataStatus';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
Clock,
|
|
},
|
|
|
|
setup() {
|
|
const store = useStore();
|
|
store.dispatch('synchronizeData');
|
|
|
|
const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
|
|
|
|
const currentRegion: ComputedRef<{ id: string; value: string }> = computed(
|
|
() => store.getters[GETTERS.currentRegion]
|
|
);
|
|
|
|
const dataStatus = computed(() => data.value);
|
|
const sceneryDataStatus = computed(() => data.value.sceneryDataStatus);
|
|
|
|
const isFilterCardVisible = ref(false);
|
|
|
|
provide('isFilterCardVisible', isFilterCardVisible);
|
|
|
|
return {
|
|
data,
|
|
currentRegion,
|
|
isFilterCardVisible,
|
|
|
|
dataStatus,
|
|
sceneryDataStatus,
|
|
dispatcherDataStatus: computed(() => data.value.dispatcherDataStatus),
|
|
|
|
openFilterCard() {
|
|
isFilterCardVisible.value = true;
|
|
},
|
|
};
|
|
},
|
|
|
|
data: () => ({
|
|
VERSION: packageInfo.version,
|
|
updateModalVisible: false,
|
|
hasReleaseNotes: false,
|
|
currentLang: 'pl',
|
|
|
|
icons: {
|
|
statusIndicator: require('@/assets/signal-status-indicator.svg'),
|
|
en: require('@/assets/icon-en.jpg'),
|
|
pl: require('@/assets/icon-pl.svg'),
|
|
error: require('@/assets/icon-error.svg'),
|
|
},
|
|
|
|
indicator: {} as {
|
|
status: DataStatus;
|
|
message: string;
|
|
},
|
|
}),
|
|
|
|
created() {
|
|
this.loadLang();
|
|
},
|
|
|
|
watch: {
|
|
dataStatus(storeData: StoreData) {
|
|
// if(val == DataStatus.Loaded)
|
|
// this.setSignalStatus(DataStatus.Loaded)
|
|
|
|
const dataConnectionStatus = storeData.dataConnectionStatus;
|
|
const sceneryDataStatus = storeData.sceneryDataStatus;
|
|
const trainsDataStatus = storeData.trainsDataStatus;
|
|
const dispatcherDataStatus = storeData.dispatcherDataStatus;
|
|
const timetableDataStatus = storeData.timetableDataStatus;
|
|
|
|
if (dataConnectionStatus == DataStatus.Error) {
|
|
this.indicator.status = DataStatus.Error;
|
|
this.indicator.message = "Błąd podczas łączenia z serwisem SWDR!";
|
|
this.setSignalStatus(DataStatus.Error);
|
|
return;
|
|
}
|
|
|
|
if (sceneryDataStatus == DataStatus.Error) {
|
|
this.indicator.status = DataStatus.Error;
|
|
this.indicator.message = "Nie można pobrać danych o sceneriach!";
|
|
this.setSignalStatus(DataStatus.Error);
|
|
return;
|
|
}
|
|
|
|
if (trainsDataStatus == DataStatus.Warning) {
|
|
this.indicator.status = DataStatus.Warning;
|
|
this.indicator.message = "Nie można pobrać danych o pociągach!";
|
|
this.setSignalStatus(DataStatus.Warning);
|
|
return;
|
|
}
|
|
|
|
if (dispatcherDataStatus == DataStatus.Warning) {
|
|
this.indicator.status = DataStatus.Warning;
|
|
this.indicator.message = "Nie można pobrać danych o statusach dyżurnych ruchu!";
|
|
this.setSignalStatus(DataStatus.Warning);
|
|
return;
|
|
}
|
|
|
|
if (timetableDataStatus == DataStatus.Warning) {
|
|
this.indicator.status = DataStatus.Warning;
|
|
this.indicator.message = "Rozkłady jazdy mogą być niekompletne!";
|
|
this.setSignalStatus(DataStatus.Warning);
|
|
return;
|
|
}
|
|
|
|
this.indicator.status = DataStatus.Loaded;
|
|
this.indicator.message = "";
|
|
|
|
this.setSignalStatus(DataStatus.Loaded);
|
|
},
|
|
|
|
sceneryDataStatus(val: DataStatus) {
|
|
if (val == DataStatus.Error) this.setSignalStatus(DataStatus.Error);
|
|
},
|
|
|
|
dispatcherDataStatus(val: DataStatus) {
|
|
if (val == DataStatus.Warning && this.sceneryDataStatus != DataStatus.Error)
|
|
this.setSignalStatus(DataStatus.Warning);
|
|
},
|
|
},
|
|
|
|
async mounted() {
|
|
if (StorageManager.getStringValue('version') != this.VERSION) {
|
|
StorageManager.setStringValue('version', this.VERSION);
|
|
|
|
if (this.hasReleaseNotes) StorageManager.setBooleanValue('version_notes_read', false);
|
|
}
|
|
|
|
this.updateModalVisible = this.hasReleaseNotes && !StorageManager.getBooleanValue('version_notes_read');
|
|
|
|
this.updateToNewestVersion();
|
|
|
|
const obj = this.$refs['status-indicator'] as HTMLObjectElement;
|
|
|
|
obj.addEventListener('load', () => {
|
|
this.setSignalStatus(DataStatus.Loading);
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
toggleUpdateModal() {
|
|
this.updateModalVisible = !this.updateModalVisible;
|
|
StorageManager.setBooleanValue('version_notes_read', true);
|
|
},
|
|
|
|
setSignalStatus(status: DataStatus) {
|
|
const obj = this.$refs['status-indicator'] as HTMLObjectElement;
|
|
|
|
const green = obj.contentDocument?.querySelector('#green') as SVGElement;
|
|
const greenBlink = obj.contentDocument?.querySelector('#green-blink') as SVGElement;
|
|
const redTop = obj.contentDocument?.querySelector('#red-top') as SVGElement;
|
|
const orange = obj.contentDocument?.querySelector('#orange') as SVGElement;
|
|
const redBottom = obj.contentDocument?.querySelector('#red-bottom') as SVGElement;
|
|
|
|
if (status == DataStatus.Loaded) {
|
|
green.style.visibility = 'visible';
|
|
greenBlink.style.visibility = 'hidden';
|
|
redTop.style.visibility = 'hidden';
|
|
orange.style.visibility = 'hidden';
|
|
redBottom.style.visibility = 'hidden';
|
|
}
|
|
|
|
if (status == DataStatus.Warning) {
|
|
green.style.visibility = 'hidden';
|
|
greenBlink.style.visibility = 'hidden';
|
|
redTop.style.visibility = 'hidden';
|
|
orange.style.visibility = 'visible';
|
|
redBottom.style.visibility = 'hidden';
|
|
}
|
|
|
|
if (status == DataStatus.Error) {
|
|
green.style.visibility = 'hidden';
|
|
greenBlink.style.visibility = 'hidden';
|
|
redTop.style.visibility = 'visible';
|
|
orange.style.visibility = 'hidden';
|
|
redBottom.style.visibility = 'visible';
|
|
}
|
|
|
|
if (status == DataStatus.Loading) {
|
|
green.style.visibility = 'hidden';
|
|
greenBlink.style.visibility = 'visible';
|
|
redTop.style.visibility = 'hidden';
|
|
orange.style.visibility = 'hidden';
|
|
redBottom.style.visibility = 'hidden';
|
|
}
|
|
|
|
// (this.$refs['redTop'] as SVGElement).style.display = "none";
|
|
// (this.$refs['orangeBottom'] as SVGElement).style.display = "block";
|
|
// (this.$refs['redBottom'] as SVGElement).style.display = "none";
|
|
},
|
|
|
|
changeLang(lang: string) {
|
|
this.$i18n.locale = lang;
|
|
this.currentLang = lang;
|
|
|
|
StorageManager.setStringValue('lang', lang);
|
|
},
|
|
|
|
updateToNewestVersion() {
|
|
if (!StorageManager.isRegistered('unavailable-status')) {
|
|
StorageManager.setBooleanValue('unavailable-status', true);
|
|
StorageManager.setBooleanValue('ending-status', true);
|
|
StorageManager.setBooleanValue('no-space-status', true);
|
|
StorageManager.setBooleanValue('afk-status', true);
|
|
}
|
|
},
|
|
|
|
loadLang() {
|
|
const storageLang = StorageManager.getStringValue('lang');
|
|
|
|
if (storageLang) {
|
|
this.changeLang(storageLang);
|
|
return;
|
|
}
|
|
|
|
if (!window.navigator.language) return;
|
|
|
|
const naviLanguage = window.navigator.language.toString();
|
|
|
|
if (naviLanguage.includes('en')) {
|
|
this.changeLang('en');
|
|
return;
|
|
}
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" src="./App.scss"></style>
|