From a3722273e9c9ccabbdc45e9955c5761fcb2caa4f Mon Sep 17 00:00:00 2001 From: cgfhtw Date: Mon, 24 Oct 2022 15:44:12 +0200 Subject: [PATCH] use Bootstrap modals --- public/js/components/Dashboard/Dashboard.js | 97 ++++++------------- public/js/components/Dashboard/Item.js | 54 +++++------ public/js/components/Dashboard/Section.js | 23 +++-- .../js/components/Dashboard/Widget/Picker.js | 54 +++++++++++ 4 files changed, 127 insertions(+), 101 deletions(-) create mode 100644 public/js/components/Dashboard/Widget/Picker.js diff --git a/public/js/components/Dashboard/Dashboard.js b/public/js/components/Dashboard/Dashboard.js index 8cd234812..8b58b6efc 100644 --- a/public/js/components/Dashboard/Dashboard.js +++ b/public/js/components/Dashboard/Dashboard.js @@ -1,4 +1,5 @@ import DashboardSection from "./Section.js"; +import DashboardWidgetPicker from "./Widget/Picker.js"; import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js"; import ObjectUtils from "../../composables/ObjectUtils.js"; @@ -9,21 +10,15 @@ export default { ], data: () => ({ sections: [], - widgets: [], - isLoading: 0, - tmpCreate: null, + widgets: null }), components: { - DashboardSection - }, - computed: { - listReady() { - return this.widgets.length && !this.isLoading; - } + DashboardSection, + DashboardWidgetPicker }, methods: { widgetAdd(section_name, widget) { - if (!this.widgets.length) { + if (this.widgets === null) { axios.get(this.apiurl + '/Widget/getWidgetsForDashboard', {params:{ db: this.dashboard }}).then(res => { @@ -35,34 +30,32 @@ export default { this.widgets = res.data.retval; }).catch(err => console.error('ERROR:', err)); } - this.tmpCreate = {section_name,widget}; - this.listModal.show(); - }, - widgetCreate(widget) { - this.isLoading = 1; - this.tmpCreate.widget.widget = widget; - axios.post(this.apiurl + '/Config/addWidgetsToUserOverride', { - db: this.dashboard, - funktion_kurzbz: this.tmpCreate.section_name, - widgets: [this.tmpCreate.widget] - }).then(result => { - let newId = 0; - let sec = result.data.retval.data.widgets[this.tmpCreate.section_name]; - for (var i in sec) { - newId = i; - break; - } - this.tmpCreate.widget.id = newId; + this.$refs.widgetpicker.getWidget().then(widget_id => { + widget.widget = widget_id; + let loading = {...widget}; + loading.loading = true; this.sections.forEach(section => { - if (section.name == this.tmpCreate.section_name) - section.widgets.push(this.tmpCreate.widget); + if (section.name == section_name) + section.widgets.push(loading); + }); + + axios.post(this.apiurl + '/Config/addWidgetsToUserOverride', { + db: this.dashboard, + funktion_kurzbz: section_name, + widgets: [widget] + }).then(result => { + let newId = Object.keys(result.data.retval.data.widgets[section_name]).pop(); + widget.id = newId; + this.sections.forEach(section => { + if (section.name == section_name) { + section.widgets.splice(section.widgets.indexOf(loading),1); + section.widgets.push(widget); + } + }); + }).catch(error => { + console.error('ERROR: ', error); + alert('ERROR: ' + error.response.data.retval); }); - }).catch(error => { - console.error('ERROR: ', error); - alert('ERROR: ' + error.response.data.retval); - }).finally(() => { - this.listModal.hide(); - this.isLoading = 0; }); }, widgetUpdate(section_name, payload) { @@ -89,7 +82,7 @@ export default { db: this.dashboard, funktion_kurzbz: section_name, widgets: payload - }).then(result => { + }).then(() => { this.sections.forEach(section => { if (section.name == section_name) { section.widgets.forEach((widget, i) => { @@ -112,7 +105,7 @@ export default { db: this.dashboard, funktion_kurzbz: section_name, widgetid: id - }).then(result => { + }).then(() => { this.sections.forEach(section => { if (section.name == section_name) section.widgets = section.widgets.filter(widget => widget.id != id); @@ -142,34 +135,8 @@ export default { } }).catch(err => console.error('ERROR:', err)); }, - mounted() { - this.listModal = new bootstrap.Modal(this.$refs.widgetlist); - }, template: `
-
-
-
-
-
Create new widget
- -
-
-
-
-
- -
-
{{ widget.setup.name || widget.widget_kurzbz }}
-

{{ widget.beschreibung }}

-
-
-
-
-
-
-
-
-
+
` } \ No newline at end of file diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js index 7f3f41fb8..2c20bee64 100644 --- a/public/js/components/Dashboard/Item.js +++ b/public/js/components/Dashboard/Item.js @@ -1,11 +1,13 @@ +import BsModal from "../Bootstrap/Modal.js"; import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js"; export default { - components: {}, + components: { + BsModal + }, data: () => ({ component: '', arguments: null, - configModal: null, target: false, widget: null, tmpConfig: {}, @@ -25,7 +27,8 @@ export default { "height", "custom", "hidden", - "editMode" + "editMode", + "loading" ], computed: { isResizeable() { @@ -55,7 +58,7 @@ export default { }, openConfig() { this.tmpConfig = {...this.arguments}; - this.configModal.show(); + this.$refs.config.show(); }, setConfig(hasConfig) { this.hasConfig = hasConfig; @@ -82,7 +85,7 @@ export default { config() { this.arguments = {...this.widget.arguments, ...this.config}; this.tmpConfig = {...this.arguments}; - this.configModal.hide(); + this.$refs.config.hide(); this.isLoading = false; } }, @@ -94,10 +97,12 @@ export default { this.arguments = {...this.widget.arguments, ...this.config}; this.tmpConfig = {...this.arguments}; }, - mounted() { - this.configModal = new bootstrap.Modal(this.$refs.config); - }, - template: `
+ template: `
+
+ +
+
+
{{ widget.setup.name }} @@ -113,24 +118,19 @@ export default {
-
-
-
-
-
Config for {{ widget.setup.name }}
- -
-
- -
-
-
- - -
-
-
-
+ + + + +
diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js index 27ac148d4..7b2662709 100644 --- a/public/js/components/Dashboard/Section.js +++ b/public/js/components/Dashboard/Section.js @@ -1,3 +1,4 @@ +import BsConfirm from "../Bootstrap/Confirm.js"; import DashboardItem from "./Item.js"; import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js"; @@ -14,6 +15,7 @@ export default { dataTransfer: {} }), props: [ + "adminMode", "name", "widgets" ], @@ -66,9 +68,9 @@ export default { let h = item._h !== undefined ? item._h : itemCoords[item.index].h; for (var c = 0; c < occupiers.length + gridWidth; c++) { if (occupiers[c] === undefined) { - var occupied = false; - for (var i = 0; i < w; i++) { - for (var j = 0; j < h; j++) { + var occupied = false, i, j; + for (i = 0; i < w; i++) { + for (j = 0; j < h; j++) { if (occupiers[c + i + j * gridWidth] !== undefined) { i = w; occupied = true; @@ -79,8 +81,8 @@ export default { if (!occupied) { item.place[gridWidth].x = c%gridWidth + 1; item.place[gridWidth].y = Math.floor(c/gridWidth) + 1; - for (var i = 0; i < w; i++) { - for (var j = 0; j < h; j++) { + for (i = 0; i < w; i++) { + for (j = 0; j < h; j++) { occupiers[c + i + j * gridWidth] = item.index; } } @@ -295,7 +297,7 @@ export default { this.itemCoords[id].h = h; } }, - onDrop(evt) { + onDrop() { let id = 0; let update = {}; while ((id = this.movedObjects.pop())) { @@ -346,9 +348,7 @@ export default { }, removeWidget(item, revert) { if (item.custom) { - if (confirm('Are you sure you want to delete this widget?')) { - this.$emit('widgetRemove', this.name, item.id); - } + BsConfirm.popup('Are you sure you want to delete this widget?').then(() => this.$emit('widgetRemove', this.name, item.id)); } else { let update = {}; update[item.id] = { hidden: !revert }; @@ -366,6 +366,10 @@ export default { this.$emit('widgetUpdate', this.name, payload); } }, + created() { + if (this.adminMode) + this.editMode = 1; + }, mounted() { let self = this; let cont = self.$refs.container; @@ -401,6 +405,7 @@ export default { v-for="item in items" :key="item.id" :id="item.widget" + :loading="item.loading" :config="item.config" :custom="item.custom" :hidden="item.hidden" diff --git a/public/js/components/Dashboard/Widget/Picker.js b/public/js/components/Dashboard/Widget/Picker.js new file mode 100644 index 000000000..871d48a2d --- /dev/null +++ b/public/js/components/Dashboard/Widget/Picker.js @@ -0,0 +1,54 @@ +import BsModal from "../../Bootstrap/Modal.js"; + +export default { + components: { + BsModal + }, + props: [ + "widgets" + ], + data: () => ({ + callbacks: {} + }), + methods: { + getWidget() { + return new Promise((resolve,reject) => { + this.callbacks = {resolve,reject}; + this.$refs.modal.show(); + }); + }, + close() { + if (this.callbacks.reject) + this.callbacks.reject(); + this.callbacks = {}; + }, + pick(widget_id) { + if (this.callbacks.resolve) + this.callbacks.resolve(widget_id); + this.callbacks = {}; + this.$refs.modal.hide(); + } + }, + template: `
+ + + + +
` +}