From 7b9ee6e3e1a5441fc394771bd04800aeaf1ad516 Mon Sep 17 00:00:00 2001 From: Spythere Date: Wed, 9 Feb 2022 21:16:18 +0100 Subject: [PATCH] =?UTF-8?q?Wydzielono=20status=20indicator=20do=20oddzieln?= =?UTF-8?q?ego=20modu=C5=82u?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.scss | 98 ------- src/App.vue | 146 +--------- src/components/App/StatusIndicator.vue | 386 +++++++++++++++++++++++++ 3 files changed, 391 insertions(+), 239 deletions(-) create mode 100644 src/components/App/StatusIndicator.vue diff --git a/src/App.scss b/src/App.scss index f5db103..abba5c4 100644 --- a/src/App.scss +++ b/src/App.scss @@ -18,19 +18,6 @@ } } -// INDICATOR TOOLTIP ANIMATION -.tooltip-anim { - &-enter-from, - &-leave-to { - opacity: 0; - } - - &-enter-active, - &-leave-active { - transition: all $animDuration $animType; - } -} - .route { margin: 0 0.2em; @@ -99,91 +86,6 @@ } -.indicator { - &-wrapper { - position: absolute; - left: 50%; - bottom: 0; - transform: translateX(11.6em); - z-index: 100; - - } - - &-content { - display: flex; - position: relative; - - } - - &-svg { - width: 1.2em; - } - - &-tooltip { - position: absolute; - top: 50%; - left: 100%; - - - transform: translateY(-50%); - padding: 0.5em; - margin-left: 1em; - - background-color: #171717; - border-radius: 0.75em; - - min-width: 13em; - text-align: center; - overflow: none; - - font-size: 0.95em; - - &::before { - position: absolute; - top: 50%; - left: 1px; - - transform: translate(-100%, -50%); - - width: 0; - height: 0; - - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-right: 12px solid #171717; - - content: ''; - } - - @include midScreen() { - left: 50%; - top: 100%; - - transform: translate(-50%, 0); - margin-left: 0; - margin-top: 0.75em; - - &::before { - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-bottom: 10px solid #171717; - - top: 0; - left: 50%; - - transform: translate(-50%, -100%); - } - } - - @include smallScreen() { - min-width: 8em; - } - - - } -} - - .header { &_brand { position: relative; diff --git a/src/App.vue b/src/App.vue index 99bfb4e..39b68e0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,28 +8,8 @@ -->
-
-
- + - -
- {{ indicator.status <= 0 ? 'S3' : indicator.status == 1 ? 'S1a' : indicator.status == 2 ? 'S2' : 'S5' }} -
- {{ indicator.message }} -
- -
-
- - S @@ -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; diff --git a/src/components/App/StatusIndicator.vue b/src/components/App/StatusIndicator.vue new file mode 100644 index 0000000..128f647 --- /dev/null +++ b/src/components/App/StatusIndicator.vue @@ -0,0 +1,386 @@ + + + + +