From 3e0aa849d4dcd71832847920026a12a58043fca9 Mon Sep 17 00:00:00 2001 From: cgfhtw Date: Thu, 24 Nov 2022 11:52:01 +0100 Subject: [PATCH] bugfixes & "+" background --- application/controllers/dashboard/Config.php | 8 ++- .../js/components/Dashboard/Admin/Presets.js | 13 +++- public/js/components/Dashboard/Section.js | 71 ++++++++++++++----- 3 files changed, 73 insertions(+), 19 deletions(-) diff --git a/application/controllers/dashboard/Config.php b/application/controllers/dashboard/Config.php index 213781b74..b9c4c6c31 100644 --- a/application/controllers/dashboard/Config.php +++ b/application/controllers/dashboard/Config.php @@ -207,7 +207,13 @@ class Config extends Auth_Controller foreach ($funktionen as $funktion) { $conf = $this->DashboardLib->getPreset($db, $funktion); if ($conf) - $result[$funktion] = json_decode($conf->preset, true)['widgets'][$funktion]; + { + $preset = json_decode($conf->preset, true); + if (!isset($preset['widgets']) || !isset($preset['widgets'][$funktion])) + $result[$funktion] = []; + else + $result[$funktion] = $preset['widgets'][$funktion]; + } else $result[$funktion] = []; } diff --git a/public/js/components/Dashboard/Admin/Presets.js b/public/js/components/Dashboard/Admin/Presets.js index 44ff2f854..a86de1966 100644 --- a/public/js/components/Dashboard/Admin/Presets.js +++ b/public/js/components/Dashboard/Admin/Presets.js @@ -14,6 +14,7 @@ export default { data: () => ({ funktionen: {}, sections: [], + tmpLoading: '' }), computed: { apiurl() { @@ -117,10 +118,14 @@ export default { loadSections(evt) { let funktionen = Array.from(evt.target.querySelectorAll("option:checked"),e=>e.value); this.sections = []; + this.tmpLoading = funktionen.join('###'); axios.get(this.apiurl + '/Config/PresetBatch', {params: { db: this.dashboard, funktionen }}).then(res => { + if (this.tmpLoading !== funktionen.join('###')) + return; // NOTE(chris): prevent race condition + for (var section in res.data.retval) { let widgets = []; for (var wid in res.data.retval[section]) { @@ -145,10 +150,16 @@ export default { }); }).catch(err => console.error('ERROR:', err)); }, + watch: { + dashboard() { + // TODO(chris): this should be done without a watcher + this.loadSections({target:this.$refs.funktionenList}); + } + }, template: `
-
diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js index 250a26a7b..84bcdd58e 100644 --- a/public/js/components/Dashboard/Section.js +++ b/public/js/components/Dashboard/Section.js @@ -24,13 +24,16 @@ export default { data() { return { gridWidth: 0, - containerRect: {top:0,left:0}, changeHeight: 1, movedObjects: [], editMode: this.adminMode ? 1 : 0, - gridXLast: 0, - gridYLast: 0, - dataTransfer: {} + gridXLast: -1, // NOTE(chris): 0 based + gridYLast: -1, + dragging: 0, + dataTransfer: {}, + gridAddFound: false, + gridXAdd: -1, // NOTE(chris): 0 based + gridYAdd: -1 } }, computed: { @@ -38,7 +41,7 @@ export default { this.widgets.forEach((item,i) => item.index = i); return this.widgets; }, - itemCoords() { + itemCoords() { // NOTE(chris): 1 based if (!this.gridWidth) return []; let itemCoords = this.items.map(item => item.place[this.gridWidth] || this.createItemPlacement(item)); @@ -103,11 +106,13 @@ export default { if (!this.gridWidth || !this.changeHeight) return 0; let minH = 0; - this.itemCoords.forEach((item,i) => minH = Math.max(minH, (!this.editMode && this.items[i].hidden) ? 0 : item.y + item.h - 1)); + this.itemCoords.forEach((item,i) => minH = Math.max(minH, (!this.editMode && this.items[i].hidden) ? 0 : item.y - 1 + item.h)); // TODO(chris): the extraline should only be present if all slots are occupied - return minH + this.editMode; + if (minH == 0 && this.editMode) + return 1; + return minH + this.editMode*this.dragging; }, - gridOccupiers() { + gridOccupiers() { // NOTE(chris): 0 based let occupiers = []; let gridWidth = this.gridWidth; this.items.forEach(item => { @@ -123,20 +128,26 @@ export default { } }); return occupiers; + }, + cssBg() { + if (!this.editMode || this.dragging || !this.gridAddFound) + return 'transparent'; + let x = this.gridXAdd, y = this.gridYAdd, h = this.gridHeight-1 || 1, w = this.gridWidth-1 || 1; + return `url('data:image/svg+xml;utf8,')` + (100 * x/w) + '% ' + (100 * y/h) + '%/' + (100/this.gridWidth) + '% ' + (100/this.gridHeight) + '% no-repeat;cursor:pointer'; } }, methods: { addWidget(evt) { if (evt.target != this.$refs.container || !this.editMode) return; - const rect = this.containerRect; + const rect = this.$refs.container.getBoundingClientRect(); const gridX = Math.floor(this.gridWidth * (evt.clientX - rect.left) / this.$refs.container.clientWidth); const gridY = Math.floor(this.gridHeight * (evt.clientY - rect.top) / this.$refs.container.clientHeight); if (this.gridOccupiers[gridY * this.gridWidth + gridX] === undefined) { let widget = { widget: 1, config: {}, place: {}, custom: 1 }; widget.place[this.gridWidth] = { - x: gridX, - y: gridY, + x: gridX+1, + y: gridY+1, w: 1, h: 1 }; @@ -162,7 +173,29 @@ export default { });*/ return item.place[this.gridWidth]; }, + onMouseMove(evt) { + if (!this.editMode || this.dragging) { + this.gridXAdd = this.gridYAdd = -1; + return; + } + + const rect = this.$refs.container.getBoundingClientRect(); + const gridX = Math.floor(this.gridWidth * (evt.clientX - rect.left) / this.$refs.container.clientWidth); + const gridY = Math.floor(this.gridHeight * (evt.clientY - rect.top) / this.$refs.container.clientHeight); + + if (this.gridXAdd == gridX && this.gridYAdd == gridY) + return; + // TODO(chris): only mark it when its not occupied + this.gridXAdd = gridX; + this.gridYAdd = gridY; + this.gridAddFound = (this.gridOccupiers[gridX + gridY * this.gridWidth] === undefined); + }, + onMouseLeave() { + this.gridXAdd = this.gridYAdd = -1; + this.gridAddFound = false; + }, startDrag(evt, item) { + this.dragging = 1; this.gridXLast = -1; this.gridYLast = -1; item._x = this.itemCoords[item.index].x; @@ -178,6 +211,7 @@ export default { } }, startResize(evt, item) { + this.dragging = 1; this.gridXLast = -1; this.gridYLast = -1; item._w = this.itemCoords[item.index].w; @@ -239,7 +273,7 @@ export default { onDragOver(evt) { let id, x, y, w, h; const action = this.dataTransfer.action; - const rect = this.containerRect; + const rect = this.$refs.container.getBoundingClientRect(); const gridX = Math.floor(this.gridWidth * (evt.clientX - rect.left) / this.$refs.container.clientWidth); const gridY = Math.floor(this.gridHeight * (evt.clientY - rect.top) / this.$refs.container.clientHeight); @@ -304,6 +338,9 @@ export default { } }, onDrop() { + this.dragging = 0; + this.gridXLast = -1; + this.gridYLast = -1; let id = 0; let update = {}; while ((id = this.movedObjects.pop())) { @@ -376,14 +413,12 @@ export default { let self = this; let cont = self.$refs.container; self.gridWidth = window.getComputedStyle(cont).getPropertyValue('grid-template-columns').split(" ").length; - self.containerRect = cont.getBoundingClientRect(); window.addEventListener('resize', () => { for (const child of cont.children) { child.style.display = 'none'; } self.gridWidth = window.getComputedStyle(cont).getPropertyValue('grid-template-columns').split(" ").length; - self.containerRect = cont.getBoundingClientRect(); for (const child of cont.children) { child.style.display = ''; } @@ -394,14 +429,16 @@ export default { {{name}} -
+
+ @dragenter.prevent + @mousemove="onMouseMove" + @mouseleave="onMouseLeave">