From 71699f6e7482043dcb2e9a810ba0729d38b96308 Mon Sep 17 00:00:00 2001 From: Cris Date: Tue, 25 Oct 2022 14:17:52 +0200 Subject: [PATCH] Added Ampel Widget --- public/js/components/DashboardWidget/Ampel.js | 345 ++++++++++++++++++ 1 file changed, 345 insertions(+) create mode 100644 public/js/components/DashboardWidget/Ampel.js diff --git a/public/js/components/DashboardWidget/Ampel.js b/public/js/components/DashboardWidget/Ampel.js new file mode 100644 index 000000000..c26e5d3e0 --- /dev/null +++ b/public/js/components/DashboardWidget/Ampel.js @@ -0,0 +1,345 @@ +import AbstractWidget from './Abstract'; +import BaseOffcanvas from '../Base/Offcanvas'; + +export default { + name: 'WidgetsAmpel', + components: { BaseOffcanvas }, + data: () => ({ + filter: '', + source: '', + ampeln: [] + }), + mixins: [ + AbstractWidget + ], + computed: { + widgetAmpeln () { + return this.ampeln.slice(0, 2); // show only newest 2 ampeln + }, + offcanvasAmpeln () + { + switch(this.filter) + { + case 'verpflichtend': return this.ampeln.filter(item => item.verpflichtend); + case 'ueberfaellig': return this.ampeln.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt); + default: return this.ampeln; + } + }, + count () { + return { + verpflichtend: this.ampeln.filter(item => item.verpflichtend).length, + ueberfaellig: this.ampeln.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt).length, + alle: this.ampeln.length + } + } + }, + methods: { + closeOffcanvasAmpeln() + { + for (let i = 0; i < this.offcanvasAmpeln.length; i++) + { + let ampelId = this.offcanvasAmpeln[i].ampel_id; + this.$refs['ampelCollapse_' + ampelId][0].classList.remove('show'); + } + }, + openOffcanvasAmpel(ampelId){ + // Close earlier opened Ampeln + this.closeOffcanvasAmpeln(); + + // Show given Ampel + this.$refs['ampelCollapse_' + ampelId][0].classList.add('show'); + }, + closeOffcanvas(){ + this.filter = ''; + }, + confirm(ampelId){ + let indexToRemove = this.ampeln.findIndex((obj => obj.ampel_id === ampelId)); + this.ampeln.splice(indexToRemove, 1); + }, + changeDisplay(){ + this.filter = ''; + if (this.source == 'offen') + { + this.ampeln = TEST_OFFENE_AMPELN; + } + + 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; + } + }, + created() { + this.$emit('setConfig', false); + this.ampeln = TEST_OFFENE_AMPELN; + }, + template: ` +
+
+
+
Neueste Ampeln
+
Alle Ampeln
+
+
+ Überfällig: {{ count.ueberfaellig }} +
+
+
+
+
+
+
Deadline: {{ getDate(ampel.deadline) }}
+
+
+
+
+
+ {{ ampel.kurzbz }}
+
+
+
+
+ + Super!
+ Keine offenen Ampeln. +
+
+
+ + + + + + ` +} + +const TEST_ALLE_AMPELN = [ + { + ampel_id: 0, + kurzbz: 'Ampeltitel 1', + deadline: '2022-12-31', + verfallszeit: 10, + verpflichtend: false, + bestaetigt: false, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + '1-Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + '1-Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + }, + { + ampel_id: 1, + kurzbz: 'Ampeltitel 2 kann auch etwas länger sein', + deadline: '2023-10-03', + verfallszeit: 20, + verpflichtend: true, + bestaetigt: false, + buttontext: ['Gelesen', 'Read'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + '2-Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + '2-Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + }, + { + ampel_id: 2, + kurzbz: 'Ampeltitel 3', + deadline: '2022-10-31', + verfallszeit: null, // Dauerampel, Bis zur Bestätigung + verpflichtend: false, + bestaetigt: true, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + '3-Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + '3-Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + }, + { + ampel_id: 3, + kurzbz: 'Ampeltitel 4', + deadline: '2022-10-31', + verfallszeit: 40, + verpflichtend: false, + bestaetigt: true, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + 'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + 'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + }, + { + ampel_id: 4, + kurzbz: 'Ampeltitel 5', + deadline: '2022-10-31', + verfallszeit: 10, + verpflichtend: false, + bestaetigt: true, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + 'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + 'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + }, + { + ampel_id: 5, + kurzbz: 'Ampeltitel 6', + deadline: '2022-10-31', + verfallszeit: 40, + verpflichtend: false, + bestaetigt: true, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + 'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + 'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + }, + { + ampel_id: 6, + kurzbz: 'Ampeltitel 7', + deadline: '2020-12-31', + verfallszeit: 10, + verpflichtend: false, + bestaetigt: true, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + 'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + 'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + },{ + ampel_id: 7, + kurzbz: 'Ampeltitel 8', + deadline: '2022-09-25', + verfallszeit: 40, + verpflichtend: false, + bestaetigt: false, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + 'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + 'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + }, + { + ampel_id: 8, + kurzbz: 'Ampeltitel 9', + deadline: '2022-10-01', + verfallszeit: 10, + verpflichtend: false, + bestaetigt: false, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + 'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + 'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + } +] + +const TEST_OFFENE_AMPELN = [ + { + ampel_id: 0, + kurzbz: 'Ampeltitel 1', + deadline: '2022-12-31', + verfallszeit: 10, + verpflichtend: false, + bestaetigt: false, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + '1-Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + '1-Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + }, + { + ampel_id: 1, + kurzbz: 'Ampeltitel 2 kann auch etwas länger sein', + deadline: '2023-10-03', + verfallszeit: 20, + verpflichtend: true, + bestaetigt: false, + buttontext: ['Gelesen', 'Read'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + '2-Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + '2-Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + }, + { + ampel_id: 7, + kurzbz: 'Ampeltitel 8', + deadline: '2022-09-25', + verfallszeit: 40, + verpflichtend: false, + bestaetigt: false, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + 'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + 'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + }, + { + ampel_id: 8, + kurzbz: 'Ampeltitel 9', + deadline: '2022-10-01', + verfallszeit: 10, + verpflichtend: false, + bestaetigt: false, + buttontext: ['Bestätigen', 'Confirm'], + insertamum: '2022-09-21 15:25:00', + beschreibung: [ + 'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.', + 'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.' + ] + } +]; \ No newline at end of file