diff --git a/public/js/components/DashboardWidget/Abstract.js b/public/js/components/DashboardWidget/Abstract.js index a21c9834f..c121dba9a 100755 --- a/public/js/components/DashboardWidget/Abstract.js +++ b/public/js/components/DashboardWidget/Abstract.js @@ -19,12 +19,12 @@ export default { methods: { formatDateTime: function(dateTime) { const dt = new Date(dateTime); - return dt.getDate() + '.' + dt.getMonth() + '.' + dt.getFullYear() + ' | ' + return dt.getDate() + '.' + (dt.getMonth()+1) + '.' + dt.getFullYear() + ' | ' + dt.getHours() + ':' + dt.getMinutes(); }, getDate: function(dateTime){ const dt = new Date(dateTime); - return dt.getDate() + '.' + dt.getMonth() + '.' + dt.getFullYear(); + return dt.getDate() + '.' + (dt.getMonth()+1) + '.' + dt.getFullYear(); } } } diff --git a/public/js/components/DashboardWidget/Ampel.js b/public/js/components/DashboardWidget/Ampel.js index 855eb15b6..271aa2326 100755 --- a/public/js/components/DashboardWidget/Ampel.js +++ b/public/js/components/DashboardWidget/Ampel.js @@ -1,6 +1,8 @@ import AbstractWidget from './Abstract'; import BaseOffcanvas from '../Base/Offcanvas'; +const widgetAmpelMAX = 4; + export default { name: 'WidgetsAmpel', components: { BaseOffcanvas }, @@ -15,53 +17,23 @@ export default { AbstractWidget ], computed: { - filteredAmpeln(){ + ampelnComputed(){ - if (this.source == 'offen') + switch(this.source) { - switch(this.filter) - { - case 'verpflichtend': return this.activeAmpeln?.filter(item => item.verpflichtend); - case 'ueberfaellig': return this.activeAmpeln?.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt); - default: return this.activeAmpeln; - } + case 'offen': return this.applyFilter(this.activeAmpeln); + case 'alle': return this.applyFilter(this.allAmpeln); + default: return this.activeAmpeln; } - if (this.source == 'alle') - { - switch(this.filter) - { - case 'verpflichtend': return this.allActiveAmpeln?.filter(item => item.verpflichtend); - case 'ueberfaellig': return this.allActiveAmpeln?.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt); - default: return this.allActiveAmpeln; - } - - } - return this.activeAmpeln; + }, - openAmpeln () { - return this.ampeln.filter(ampel=>{ - if(!ampel.bestaetigt){ - return true; - } - return false; - }) - }, - widgetAmpeln () { - return this.activeAmpeln?.slice(0, 4); // show only newest 4 ampeln - }, - offcanvasAmpeln () - { - switch(this.filter) - { - case 'verpflichtend': return this.activeAmpeln?.filter(item => item.verpflichtend); - case 'ueberfaellig': return this.activeAmpeln?.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt); - default: return this.activeAmpeln; - } + ampelnOverview () { + return this.activeAmpeln?.slice(0, widgetAmpelMAX); // show only newest 4 active ampeln }, count () { let datasource = this.activeAmpeln; if (this.source == 'offen') datasource = this.activeAmpeln; - if (this.source == 'alle') datasource = this.allActiveAmpeln; + if (this.source == 'alle') datasource = this.allAmpeln; return { verpflichtend: datasource?.filter(item => item.verpflichtend).length, @@ -72,6 +44,26 @@ export default { } }, methods: { + 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); + default: return data; + } + }, + isExpiredAmpel(ampel){ + + let deadline = new Date(ampel.deadline); + if(ampel.verfallszeit instanceof Number) deadline.setDate(deadline.getDate() + ampel.verfallszeit); + deadline.setHours(0, 0, 0, 0); + + let today = new Date(); + today.setHours(0, 0, 0, 0); + + return deadline < today ? true : false; + + }, toggleFilter(value){ this.filter === value ? this.filter = '' : this.filter = value; @@ -79,9 +71,9 @@ export default { closeOffcanvasAmpeln() { - for (let i = 0; i < this.offcanvasAmpeln.length; i++) + for (let i = 0; i < this.ampelnComputed.length; i++) { - let ampelId = this.offcanvasAmpeln[i].ampel_id; + let ampelId = this.ampelnComputed[i].ampel_id; this.$refs['ampelCollapse_' + ampelId][0].classList.remove('show'); } }, @@ -98,18 +90,18 @@ export default { async fetchActiveAmpeln(){ await this.$fhcApi.factory.ampeln.getNonConfirmedActiveAmpeln().then(res=>{ - this.activeAmpeln = res.data; + this.activeAmpeln = res.data.sort((a,b) => new Date(b.deadline) - new Date(a.deadline)); }); }, async fetchAllAmpeln(){ - await this.$fhcApi.factory.ampeln.getAllActiveAmpeln().then(res=>{ - this.allActiveAmpeln = res.data; + await this.$fhcApi.factory.ampeln.alleAmpeln().then(res=>{ + this.allAmpeln = res.data.sort((a,b) => new Date(b.deadline) - new Date(a.deadline)); }); }, async confirm(ampelId){ - this.$fhcApi.factory.ampeln.confirmAmpel(ampelId).then(res =>{ - console.log(res,"result of the insert into") + await this.$fhcApi.factory.ampeln.confirmAmpel(ampelId).then(res =>{ + res.data ? this.$toast.success('Ampel bestätigt') : this.$toast.error('Fehler beim Bestätigen der Ampel'); }); // fetch all the ampeln after an ampel has been confirmed @@ -117,40 +109,23 @@ export default { await this.fetchAllAmpeln(); }, - changeDisplay(){ - this.filter = ''; - if (this.source == 'offen') - { - //this.ampeln = openAmpeln; - } - - if (this.source == 'alle') - { - //this.ampeln = TEST_ALLE_AMPELN; - // axios - // .get(this.apiurl + '/dashboard/Api/getAmpeln') - // .then(res => { this.ampeln = res.data }) - // .catch(err => { console.error('ERROR: ', err.response.data) }); - } - }, validateBtnTxt(buttontext){ - return buttontext == null ? 'Bestätigen' : buttontext; + + if(buttontext instanceof Array && !buttontext.length) return 'Bestätigen'; + + if(!buttontext) return 'Bestätigen'; + + return buttontext; } }, - async created() { + created() { + + this.$emit('setConfig', false); + }, + async mounted() { await this.fetchActiveAmpeln(); await this.fetchAllAmpeln(); - - // add the first element of the active ampeln again just for testing purposes - /* let duplicate = {...this.allActiveAmpeln[0]}; - duplicate.verpflichtend= false; - this.allActiveAmpeln.push(duplicate); - console.log(this.activeAmpeln,"this are the active ampeln") - console.log(this.allActiveAmpeln,"this are all the ampeln") - */ - this.$emit('setConfig', false); - }, template: /*html*/`
@@ -162,7 +137,7 @@ export default {
Überfällig: {{ count.ueberfaellig }}
-
+
@@ -186,7 +161,7 @@ export default {
Neueste Ampeln
-