diff --git a/public/css/components/dashboard.css b/public/css/components/dashboard.css
index d2635d4e9..bf06001a2 100755
--- a/public/css/components/dashboard.css
+++ b/public/css/components/dashboard.css
@@ -4,13 +4,24 @@
.empty-tile-hover {
height: 100%;
width: 100%;
- background-image: url('data:image/svg+xml;utf8,');
+ background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
cursor:pointer;
}
+.empty-tile-hover:hover {
+ background-image: url('data:image/svg+xml;utf8,');
+}
+
+/*.empty-tile-background {
+ background-image: url('data:image/svg+xml;utf8,');
+ background-repeat: repeat;
+ background-size: var(--fhc-dg-col-width);
+ cursor: pointer;
+}*/
+
.alert-danger .form-check-input:checked {
border-color: #842029;
background-color: #842029;
diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js
index d3212c72e..31b8a5085 100755
--- a/public/js/components/Dashboard/Item.js
+++ b/public/js/components/Dashboard/Item.js
@@ -86,7 +86,7 @@ export default {
config() {
this.arguments = { ...this.widget.arguments, ...this.config };
this.tmpConfig = { ...this.arguments };
- this.$refs.config.hide();
+ this.$refs.config && this.$refs.config.hide();
this.isLoading = false;
},
},
diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js
index 4aa7c823f..6c7445b9f 100755
--- a/public/js/components/Dashboard/Section.js
+++ b/public/js/components/Dashboard/Section.js
@@ -26,15 +26,65 @@ export default {
data() {
return {
gridWidth: 1,
+ gridHeight: null,
editMode: this.adminMode
}
},
computed: {
items() {
return this.widgets.map(item => {
- return {...item, ...(item.place[this.gridWidth] || {h: 1, w:1, x:0, y:0})};
+ return { ...item, ...(item.place[this.gridWidth] || {h: 1, w:1, x:0, y:0})};
});
- }
+ },
+ items_hashmap() {
+ let items = {};
+ this.items.forEach(item => {
+ items[`x${item.x}y${item.y}`] = item;
+ });
+ return items
+ },
+ items_placeholders(){
+ let placeholders = [];
+ let col_max = this.gridWidth;
+ // OLD way of calculating the max rows
+ //let max_row = Math.max(...this.items.map(item => item.y)) + 1;
+ //let max_row_max_height = Math.max(...this.items.filter(item => item.y == (max_row - 1)).map(item => item.h));
+ //max_row + max_row_max_height - 1;
+ let rows_max = this.gridHeight;
+
+ // occupied hashmap to keep track of the occupied cells
+ let occupied = {};
+
+ for (let y = 0; y < rows_max; y++) {
+ for (let x = 0; x < col_max; x++) {
+ // skip current position if it was registered as occupied
+ if (Object.keys(occupied).length && occupied[`x${x}y${y}`]) {
+ continue;
+ }
+ let current_item = this.items_hashmap[`x${x}y${y}`];
+ if (current_item) {
+ //calculate the occupied cells from the width and the height from the items
+ let width = current_item.w;
+ let height = current_item.h;
+ let max_x = x + width - 1;
+ let max_y = y + height - 1;
+ if(x != max_x || y != max_y){
+ for (let occupied_y = y; occupied_y <= max_y; occupied_y++) {
+ for (let occupied_x = x; occupied_x <= max_x; occupied_x++) {
+ if (occupied_x != x || occupied_y != y) {
+ occupied[`x${occupied_x}y${occupied_y}`]=true;
+ }
+ }
+ }
+ }
+ }
+ else {
+ placeholders.push({ x: x, y: y, w: 1, h: 1, placeholder: true });
+ }
+ }
+ }
+ return placeholders;
+ },
},
methods: {
checkResizeLimit(item, w, h) {
@@ -80,7 +130,9 @@ export default {
updatePositions(updated) {
let result = {};
updated.forEach(update => {
+
let item = {...update.item};
+ if (!item.placeholder) {
if (!item.place[this.gridWidth])
item.place[this.gridWidth] = {x: 0, y: 0, w: 1, h: 1};
delete item.x;
@@ -97,7 +149,9 @@ export default {
item.place[this.gridWidth].h = update.h;
result[item.id] = item;
+ }
});
+
this.updatePreset(result);
},
updatePreset(update) {
@@ -121,9 +175,10 @@ export default {
{{name}}
-
-
-
+
+
+
+
+
-
-
-
+
`
}
+
+/*
+OLD VERSION - ON HOVER
+
+
+
+*/
diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index 62e4c15ea..a55498eb8 100755
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -24,11 +24,16 @@ export default {
marginForExtraRow: {
type: Number,
default: 0
+ },
+ placeholders: {
+ type: Array,
+ default: () => []
}
},
emits: [
"rearrangeItems",
- "newItem"
+ "newItem",
+ "gridHeight"
],
data() {
return {
@@ -108,6 +113,9 @@ export default {
};
});
},
+ placedItems_withPlaceholders(){
+ return [...this.placedItems,...this.placeholders];
+ },
showEmptyTileHover() {
if (!this.active || !this.grid || this.mode != MODE_IDLE || this.x < 0 || this.y < 0 || this.x >= this.cols || this.y >= this.rows)
return false;
@@ -122,6 +130,9 @@ export default {
cols() {
this.dragCancel();
},
+ rows(value){
+ this.$emit('gridHeight',value);
+ },
indexedItems: {
handler(value) {
this.dragCancel();
@@ -333,6 +344,7 @@ export default {
`
}
+
+/*
+OLD VERSION - ON HOVER
+
+
+
+*/
\ No newline at end of file