Widget controller & model & table

application/controllers/dashboard/Widget.php

@@ -37,37 +37,43 @@ class Widget extends Auth_Controller
 		);
 		
 		$this->load->library('dashboard/DashboardLib', null, 'DashboardLib');
+		$this->load->model('dashboard/Dashboard_Widget_model', 'DashboardWidgetModel');
 	}
 	
 	public function index() 
 	{
 		$widget_id = $this->input->get('id');
 
-		foreach ($this->demoData as $widget) {
-			if ($widget["id"] == $widget_id)
-				return $this->outputJsonSuccess($widget);
-		}
-		return $this->outputJsonSuccess([
-			"id" => 0,
-			"name" => 'Widget Not Found',
-			"file" => 'DashboardWidget/Default.js',
-			"arguments" => [
-				"className" => 'alert-danger',
-				"title" => 'Widget Not Found',
-				"msg" => 'The widget with the id ' . $widget_id . ' could not be found'
-			],
-			"size" => [
-				"width" => 1,
-				"height" => 1
-			]
-		]);
+		$widget = $this->DashboardWidgetModel->load($widget_id);
+
+		if (isError($widget) || !getData($widget))
+			return $this->outputJsonSuccess([
+				"widget_id" => 0,
+				"widget_kurzbz" => "notfound",
+				"arguments" => json_encode([
+					"className" => 'alert-danger',
+					"title" => 'Widget Not Found',
+					"msg" => 'The widget with the id ' . $widget_id . ' could not be found'
+				]),
+				"setup" => json_encode([
+					"name" => 'Widget Not Found',
+					"file" => 'DashboardWidget/Default.js',
+					"width" => 1,
+					"height" => 1
+				])
+			]);
+		return $this->outputJsonSuccess(current(getData($widget)));
 	}
 	
 	public function getWidgetsForDashboard() 
 	{
 		$db = $this->input->get('db');
+		$result = $this->DashboardWidgetModel->getAllForDashboard($db);
 
-		$this->outputJsonSuccess($this->demoData);
+		if (isError($result))
+			return $this->outputJsonError(getError($result));
+
+		$this->outputJsonSuccess(getData($result));
 	}
 	
 	public function addWidgetToUserOverride() 

application/models/dashboard/Dashboard_Widget_model.php

@@ -0,0 +1,24 @@
+<?php
+class Dashboard_Widget_model extends DB_Model
+{
+
+	/**
+	 * Constructor
+	 */
+	public function __construct()
+	{
+		parent::__construct();
+		$this->dbTable = 'dashboard.tbl_widget';
+		$this->pk = 'widget_id';
+	}
+
+	public function getAllForDashboard($db)
+	{
+		$this->addSelect($this->dbTable . '.*');
+		$this->addJoin('dashboard.tbl_dashboard_widget', 'widget_id');
+		$this->addJoin('dashboard.tbl_dashboard', 'dashboard_id');
+
+		return $this->loadWhere(['dashboard_kurzbz' => $db]);
+	}
+
+}

public/js/components/Dashboard/Dashboard.js

@@ -27,6 +27,10 @@ export default {
 					db: this.dashboard
 				}}).then(res => {
 					//console.log(res.data.retval);
+					res.data.retval.forEach(widget => {
+						widget.arguments = JSON.parse(widget.arguments);
+						widget.setup = JSON.parse(widget.setup);
+					});
 					this.widgets = res.data.retval;
 				}).catch(err => console.error('ERROR:', err));
 			}
@@ -151,12 +155,12 @@ export default {
 					</div>
 					<div class="modal-body">
 						<div v-if="listReady" class="row">
-							<div v-for="widget in widgets" :v-key="widget.id" class="col">
-								<div class="card h-100" @click="widgetCreate(widget.id)">
-									<img class="card-img-top" :src="widget.icon" :alt="'pictogram for ' + widget.name">
+							<div v-for="widget in widgets" :v-key="widget.widget_id" class="col">
+								<div class="card h-100" @click="widgetCreate(widget.widget_id)">
+									<img class="card-img-top" :src="widget.setup.icon" :alt="'pictogram for ' + (widget.setup.name || widget.widget_kurzbz)">
 									<div class="card-body">
-										<h5 class="card-title">{{ widget.name }}</h5>
-										<p class="card-text">{{ widget.description }}</p>
+										<h5 class="card-title">{{ widget.setup.name || widget.widget_kurzbz }}</h5>
+										<p class="card-text">{{ widget.beschreibung }}</p>
 									</div>
 								</div>
 							</div>

public/js/components/Dashboard/Item.js

@@ -31,7 +31,7 @@ export default {
 		isResizeable() {
 			if (!this.widget)
 				return false;
-			return this.widget.size.width.max || this.widget.size.height.max;
+			return this.widget.setup.width.max || this.widget.setup.height.max;
 		},
 		ready() {
 			return this.component && this.arguments !== null
@@ -88,9 +88,9 @@ export default {
 	},
 	async created() {
 		this.widget = await CachedWidgetLoader.loadWidget(this.id);
-		let component = (await import('../' + this.widget.file)).default;
-		this.$options.components['widget' + this.widget.id] = component;
-		this.component = 'widget' + this.widget.id;
+		let component = (await import('../' + this.widget.setup.file)).default;
+		this.$options.components['widget' + this.widget.widget_id] = component;
+		this.component = 'widget' + this.widget.widget_id;
 		this.arguments = {...this.widget.arguments, ...this.config};
 		this.tmpConfig = {...this.arguments};
 	},
@@ -100,7 +100,7 @@ export default {
 	template: `<div v-if="!hidden || editMode" :class="'dashboard-item card overflow-hidden ' + (arguments ? arguments.className : '')" @mousedown="mouseDown($event)" @dragstart="startDrag($event)" :draggable="!!editMode">
 		<div v-if="editMode && widget" class="card-header d-flex">
 			<span ref="dragHandle" class="col-auto pe-3"><i class="fa-solid fa-grip-vertical"></i></span>
-			<span class="col">{{ widget.name }}</span>
+			<span class="col">{{ widget.setup.name }}</span>
 			<a v-if="hasConfig" class="col-auto ps-1" href="#" @click.prevent="openConfig"><i class="fa-solid fa-gear"></i></a>
 			<a v-if="custom" class="col-auto ps-1" href="#" @click.prevent="$emit('remove')">
 				<i class="fa-solid fa-trash"></i>
@@ -117,7 +117,7 @@ export default {
 			<div class="modal-dialog">
 				<div class="modal-content">
 					<div class="modal-header">
-						<h5 v-if="widget" class="modal-title">Config for {{ widget.name }}</h5>
+						<h5 v-if="widget" class="modal-title">Config for {{ widget.setup.name }}</h5>
 						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 					</div>
 					<div class="modal-body">

public/js/components/Dashboard/Section.js

@@ -263,7 +263,7 @@ export default {
 				id = evt.dataTransfer.getData('itemID');
 				let widget = CachedWidgetLoader.getWidget(this.items[id].widget);
 				if (widget) {
-					let minmaxW = widget.size.width;
+					let minmaxW = widget.setup.width;
 					if (minmaxW.max)
 						minmaxW.min = minmaxW.min || 1;
 					else
@@ -273,7 +273,7 @@ export default {
 					if (w > minmaxW.max)
 						w = minmaxW.max;
 					
-					let minmaxH = widget.size.height;
+					let minmaxH = widget.setup.height;
 					if (minmaxH.max)
 						minmaxH.min = minmaxH.min || 1;
 					else

public/js/composables/Dashboard/CachedWidgetLoader.js

@@ -16,6 +16,8 @@ export default {
 
 		__widgetsStarted[id] = new Promise((resolve, reject) => {
 			axios.get(__path, {params:{id}}).then(res => {
+				res.data.retval.arguments = JSON.parse(res.data.retval.arguments);
+				res.data.retval.setup = JSON.parse(res.data.retval.setup);
 				__widgets[id] = res.data.retval;
 				__widgetsStarted[id] = undefined;
 				resolve(__widgets[id]);