From 8b590dc58a21a2208e27d1f0dd67ac3abb6ab60c Mon Sep 17 00:00:00 2001 From: cgfhtw Date: Wed, 7 Aug 2024 14:23:35 +0200 Subject: [PATCH] optimizing Ampel Widget --- public/js/components/DashboardWidget/Ampel.js | 333 ++++++++++-------- 1 file changed, 180 insertions(+), 153 deletions(-) diff --git a/public/js/components/DashboardWidget/Ampel.js b/public/js/components/DashboardWidget/Ampel.js index 1f2319b58..9ec65fa14 100755 --- a/public/js/components/DashboardWidget/Ampel.js +++ b/public/js/components/DashboardWidget/Ampel.js @@ -1,16 +1,21 @@ import AbstractWidget from './Abstract'; import BaseOffcanvas from '../Base/Offcanvas'; +let _idcounter = 0; + export default { name: 'WidgetsAmpel', components: { BaseOffcanvas }, - data: () => ({ - WIDGET_AMPEL_MAX: 4, - filter: '', - source: '', - allAmpeln:null, - activeAmpeln:null, - }), + data() { + return { + WIDGET_AMPEL_MAX: 4, + filter: '', + source: 'offen', + allAmpeln:null, + activeAmpeln:null, + idcounter: this.configMode ? 0 : ++_idcounter + }; + }, mixins: [ AbstractWidget ], @@ -26,13 +31,14 @@ export default { return this.activeAmpeln?.slice(0, this.WIDGET_AMPEL_MAX); // show only newest 4 active ampeln }, count () { + const now = new Date(); let datasource = this.activeAmpeln; if (this.source == 'offen') datasource = this.activeAmpeln; if (this.source == 'alle') datasource = this.allAmpeln; return { verpflichtend: datasource?.filter(item => item.verpflichtend).length, - ueberfaellig: datasource?.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt).length, + ueberfaellig: datasource?.filter(item => (now > new Date(item.deadline)) && !item.bestaetigt).length, alle: datasource?.length } } @@ -41,7 +47,7 @@ export default { applyFilter(data) { switch(this.filter) { case 'verpflichtend': return data?.filter(item => item.verpflichtend); - case 'ueberfaellig': return data?.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt); + case 'ueberfaellig': const now = new Date(); return data?.filter(item => (now > new Date(item.deadline)) && !item.bestaetigt); default: return data; } }, @@ -69,29 +75,46 @@ export default { this.filter = ''; // maybe we also want to reset the source (open/alle) of the displayed ampeln }, - async fetchNonConfirmedActiveAmpeln() { - await this.$fhcApi.factory.ampeln.open().then(res => { - this.activeAmpeln = res.data.sort((a,b) => new Date(b.deadline) - new Date(a.deadline)); - }); + fetchNonConfirmedActiveAmpeln() { + this.$fhcApi.factory + .ampeln.open() + .then(res => { + this.activeAmpeln = res.data; + }) + .catch(error => { + if (error.code === 'ECONNABORTED') + this.fetchNonConfirmedActiveAmpeln(); + else + this.$fhcAlert.handleSystemError(error); + }); }, - async fetchAllActiveAmpeln() { - await this.$fhcApi.factory.ampeln.all().then(res => { - this.allAmpeln = res.data.sort((a,b) => new Date(b.deadline) - new Date(a.deadline)); - }); + fetchAllActiveAmpeln() { + this.$fhcApi.factory + .ampeln.all() + .then(res => { + this.allAmpeln = res.data; + }) + .catch(error => { + if (error.code === 'ECONNABORTED') + this.fetchAllActiveAmpeln(); + else + this.$fhcAlert.handleSystemError(error); + }); + }, async confirm(ampelId) { - this.$fhcApi.factory.ampeln.confirm(ampelId) - .then(() => { - this.$fhcAlert.alertSuccess(this.$p.t('ampeln','ampelBestaetigt')); - }) - .catch(this.$fhcAlert.handleSystemError); - - // update the ampeln by refetching them - this.fetchNonConfirmedActiveAmpeln(); - this.fetchAllActiveAmpeln(); + this.$fhcApi.factory + .ampeln.confirm(ampelId) + .then(() => { + this.$fhcAlert.alertSuccess(this.$p.t('ampeln', 'ampelBestaetigt')); + // update the ampeln by refetching them + this.fetchNonConfirmedActiveAmpeln(); + this.fetchAllActiveAmpeln(); + }) + .catch(this.$fhcAlert.handleSystemError); }, validateBtnTxt(buttontext) { - if (buttontext instanceof Array && !buttontext.length) return this.$p.t('ui','bestaetigen'); + if (buttontext instanceof Array && !buttontext.length) return this.$p.t('ui', 'bestaetigen'); if (!buttontext) return this.$p.t('ui', 'bestaetigen'); @@ -99,148 +122,152 @@ export default { } }, created() { - this.$emit('setConfig', false); + this.$emit('setConfig', false); }, async mounted() { - await this.fetchNonConfirmedActiveAmpeln(); - await this.fetchAllActiveAmpeln(); + if (!this.configMode) { + this.fetchNonConfirmedActiveAmpeln(); + this.fetchAllActiveAmpeln(); + } }, template: /*html*/`
-
-
-
{{$p.t('ampeln', 'newestAmpeln')}}
-
- - {{$p.t('ampeln', 'allAmpeln')}} +
+
+
+
{{$p.t('ampeln', 'newestAmpeln')}}
+
+ + {{$p.t('ampeln', 'allAmpeln')}} + +
+
+
+ + + {{$p.t('ampeln','overdue')}}: {{ count.ueberfaellig }} +
-
-
- - - {{$p.t('ampeln','overdue')}}: {{ count.ueberfaellig }} - - -
-
-
-
-
-
-
{{$p.t('ampeln','deadline')}}: {{ getDate(ampel.deadline) }}
-
-
-
+
+
+
+
+
+
{{$p.t('ampeln','deadline')}}: {{ getDate(ampel.deadline) }}
+
+
+
+
+ {{ ampel.kurzbz }}
- {{ ampel.kurzbz }}
-
-
- - {{$p.t('ampeln','super')}}
- {{$p.t('ampeln','noOpenAmpeln')}} +
+ + {{$p.t('ampeln','super')}}
+ {{$p.t('ampeln','noOpenAmpeln')}} +
+
+
+
{{$p.t('ampeln', 'newestAmpeln')}}
+
-
-
{{$p.t('ampeln', 'newestAmpeln')}}
-