Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 13:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Wydzielono status indicator do oddzielnego modułu

Browse Source
This commit is contained in:
Spythere
2022-02-09 21:16:18 +01:00
parent e892a32942
commit 7b9ee6e3e1
3 changed files with 391 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+5 -141
View File
@@ -8,28 +8,8 @@
</div> -->
<header class="app_header">
<div class="header_body">
<div class="indicator-wrapper">
<div class="indicator-content">
<object
class="indicator-svg"
type="image/svg+xml"
:data="icons.statusIndicator"
ref="status-indicator"
@mouseenter="() => tooltipActive = true"
@mouseleave="() => tooltipActive = false"
></object>
<status-indicator :dataStatus="dataStatus" />
<transition name="tooltip-anim">
<div class="indicator-tooltip" v-if="tooltipActive">
<b>{{ indicator.status <= 0 ? 'S3' : indicator.status == 1 ? 'S1a' : indicator.status == 2 ? 'S2' : 'S5' }}</b>
<br>
{{ indicator.message }}
</div>
</transition>
</div>
</div>
<!-- <object class="signal-status-indicator" :src="icons.statusIndicator" alt="status-icon" ref="status-indicator"></object> -->
<span class="header_brand">
<span>
<span>S</span>
@@ -111,17 +91,18 @@
import Clock from '@/components/App/Clock.vue';
import StorageManager from '@/scripts/managers/storageManager';
import { computed, ComputedRef, defineComponent, provide, ref, watch } from 'vue';
import { computed, ComputedRef, defineComponent, provide, ref } 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';
import StatusIndicator from './components/App/StatusIndicator.vue';
export default defineComponent({
components: {
Clock,
StatusIndicator,
},
setup() {
@@ -163,86 +144,18 @@ export default defineComponent({
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: {
status: DataStatus.Loading,
message: "Ładowanie danych..."
},
tooltipActive: false
}),
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 (timetableDataStatus == DataStatus.Warning) {
this.indicator.status = DataStatus.Warning;
this.indicator.message = "Rozkłady jazdy mogą być niekompletne!";
this.setSignalStatus(DataStatus.Warning);
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;
}
this.indicator.status = DataStatus.Loaded;
this.indicator.message = "Dane załadowane poprawnie!";
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);
@@ -253,12 +166,6 @@ export default defineComponent({
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: {
@@ -267,50 +174,7 @@ export default defineComponent({
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(!green || !greenBlink || !redTop || !orange || !redBottom) return;
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';
}
},
changeLang(lang: string) {
this.$i18n.locale = lang;
this.currentLang = lang;