now able to toggle statuses

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

apps/dashboard/appinfo/routes.php

@@ -28,6 +28,7 @@ return [
 	'routes' => [
 		['name' => 'dashboard#index', 'url' => '/', 'verb' => 'GET'],
 		['name' => 'dashboard#updateLayout', 'url' => '/layout', 'verb' => 'POST'],
+		['name' => 'dashboard#updateStatuses', 'url' => '/statuses', 'verb' => 'POST'],
 		['name' => 'dashboard#getBackground', 'url' => '/background', 'verb' => 'GET'],
 		['name' => 'dashboard#setBackground', 'url' => '/background/{type}', 'verb' => 'POST'],
 	]

apps/dashboard/lib/Controller/DashboardController.php

@@ -103,7 +103,10 @@ class DashboardController extends Controller {
 				'url' => $widget->getUrl()
 			];
 		}, $this->dashboardManager->getWidgets());
+		$configStatuses = $this->config->getUserValue($this->userId, 'dashboard', 'statuses', '{}');
+		$statuses = json_decode($configStatuses, true);
 		$this->inititalStateService->provideInitialState('dashboard', 'panels', $widgets);
+		$this->inititalStateService->provideInitialState('dashboard', 'statuses', $statuses);
 		$this->inititalStateService->provideInitialState('dashboard', 'layout', $userLayout);
 		$this->inititalStateService->provideInitialState('dashboard', 'firstRun', $this->config->getUserValue($this->userId, 'dashboard', 'firstRun', '1') === '1');
 		$this->inititalStateService->provideInitialState('dashboard', 'shippedBackgrounds', BackgroundService::SHIPPED_BACKGROUNDS);
@@ -131,6 +134,16 @@ class DashboardController extends Controller {
 		return new JSONResponse(['layout' => $layout]);
 	}
 
+	/**
+	 * @NoAdminRequired
+	 * @param string $statuses
+	 * @return JSONResponse
+	 */
+	public function updateStatuses(string $statuses): JSONResponse {
+		$this->config->setUserValue($this->userId, 'dashboard', 'statuses', $statuses);
+		return new JSONResponse(['statuses' => $statuses]);
+	}
+
 	/**
 	 * @NoAdminRequired
 	 */

apps/dashboard/src/App.vue

@@ -2,6 +2,8 @@
 	<div id="app-dashboard" :style="backgroundStyle">
 		<h2>{{ greeting.text }}</h2>
 		<ul class="statuses">
+			<button @click="enableStatus('weather')">en</button>
+			<button @click="disableStatus('weather')">dis</button>
 			<div v-for="status in sortedRegisteredStatus"
 				:id="'status-' + status"
 				:key="status">
@@ -108,6 +110,8 @@ export default {
 			registeredStatus: [],
 			callbacks: {},
 			callbacksStatus: {},
+			allCallbacksStatus: {},
+			enabledStatuses: loadState('dashboard', 'statuses'),
 			panels,
 			firstRun,
 			displayName: getCurrentUser()?.displayName,
@@ -224,10 +228,15 @@ export default {
 			Vue.set(this.callbacks, app, callback)
 		},
 		registerStatus(app, callback) {
-			this.registeredStatus.push(app)
-			this.$nextTick(() => {
-				Vue.set(this.callbacksStatus, app, callback)
-			})
+			// always save callbacks in case user enables the status later
+			Vue.set(this.allCallbacksStatus, app, callback)
+			// register only if status is enabled or missing from config
+			if (!(app in this.enabledStatuses) || this.enabledStatuses[app]) {
+				this.registeredStatus.push(app)
+				this.$nextTick(() => {
+					Vue.set(this.callbacksStatus, app, callback)
+				})
+			}
 		},
 		rerenderPanels() {
 			for (const app in this.callbacks) {
@@ -253,6 +262,11 @@ export default {
 				layout: this.layout.join(','),
 			})
 		},
+		saveStatuses() {
+			axios.post(generateUrl('/apps/dashboard/statuses'), {
+				statuses: JSON.stringify(this.enabledStatuses),
+			})
+		},
 		showModal() {
 			this.modal = true
 			this.firstRun = false
@@ -296,6 +310,23 @@ export default {
 				document.body.classList.remove('dashboard--dark')
 			}
 		},
+		enableStatus(app) {
+			this.enabledStatuses[app] = true
+			this.registerStatus(app, this.allCallbacksStatus[app])
+			this.saveStatuses()
+		},
+		disableStatus(app) {
+			this.enabledStatuses[app] = false
+			const i = this.registeredStatus.findIndex((s) => s === app)
+			if (i !== -1) {
+				this.registeredStatus.splice(i, 1)
+				Vue.set(this.statuses, app, { mounted: false })
+				this.$nextTick(() => {
+					Vue.delete(this.callbacksStatus, app)
+				})
+			}
+			this.saveStatuses()
+		},
 	},
 }
 </script>