add buttons in modal to toggle all statuses

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

1 files changed, 34 insertions, 3 deletions

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index b70401c0267..f151648232a 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -2,8 +2,6 @@
 	<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">
@@ -40,6 +38,18 @@
 		<Modal v-if="modal" @close="closeModal">
 			<div class="modal__content">
 				<h3>{{ t('dashboard', 'Edit widgets') }}</h3>
+				<ol class="panels">
+					<li v-for="(cb, status) in allCallbacksStatus" :key="status">
+						<input :id="'status-checkbox-' + status"
+							type="checkbox"
+							class="checkbox"
+							:checked="isStatusActive(status)"
+							@input="updateStatusCheckbox(status, $event.target.checked)">
+						<label :for="'status-checkbox-' + status" :class="statusInfo[status].icon">
+							{{ statusInfo[status].text }}
+						</label>
+					</li>
+				</ol>
 				<Draggable v-model="layout"
 					class="panels"
 					tag="ol"
@@ -92,6 +102,16 @@ const firstRun = loadState('dashboard', 'firstRun')
 const background = loadState('dashboard', 'background')
 const version = loadState('dashboard', 'version')
 const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds')
+const statusInfo = {
+	weather: {
+		text: t('dashboard', 'Weather'),
+		icon: 'icon-github',
+	},
+	status: {
+		text: t('dashboard', 'User status'),
+		icon: 'icon-discourse',
+	},
+}
 
 export default {
 	name: 'App',
@@ -111,6 +131,7 @@ export default {
 			callbacks: {},
 			callbacksStatus: {},
 			allCallbacksStatus: {},
+			statusInfo,
 			enabledStatuses: loadState('dashboard', 'statuses'),
 			panels,
 			firstRun,
@@ -166,6 +187,9 @@ export default {
 		isActive() {
 			return (panel) => this.layout.indexOf(panel.id) > -1
 		},
+		isStatusActive() {
+			return (status) => !(status in this.enabledStatuses) || this.enabledStatuses[status]
+		},
 		sortedPanels() {
 			return Object.values(this.panels).sort((a, b) => {
 				const indexA = this.layout.indexOf(a.id)
@@ -231,7 +255,7 @@ export default {
 			// 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]) {
+			if (this.isStatusActive(app)) {
 				this.registeredStatus.push(app)
 				this.$nextTick(() => {
 					Vue.set(this.callbacksStatus, app, callback)
@@ -310,6 +334,13 @@ export default {
 				document.body.classList.remove('dashboard--dark')
 			}
 		},
+		updateStatusCheckbox(app, checked) {
+			if (checked) {
+				this.enableStatus(app)
+			} else {
+				this.disableStatus(app)
+			}
+		},
 		enableStatus(app) {
 			this.enabledStatuses[app] = true
 			this.registerStatus(app, this.allCallbacksStatus[app])