Add notification settings to profile view

dashboard/src/components/NotificationSettings.vue

@@ -0,0 +1,104 @@
+<script setup>
+
+import { ref, onMounted } from 'vue';
+import { Switch } from 'pankow';
+import SettingsItem from '../components/SettingsItem.vue';
+import Section from '../components/Section.vue';
+import ProfileModel from '../models/ProfileModel.js';
+
+const profileModel = ProfileModel.create();
+
+const busy = ref(false);
+const appUpp = ref(false);
+const appDown = ref(false);
+const appOutOfMemory = ref(false);
+const backupFailed = ref(false);
+const certificateRenewalFailed = ref(false);
+const diskSpace = ref(false);
+const cloudronUpdateFailed = ref(false);
+const reboot = ref(false);
+
+async function onSubmit() {
+  busy.value = true;
+
+  const config = [];
+  if (appUpp.value) config.push('appUpp');
+  if (appDown.value) config.push('appDown');
+  if (appOutOfMemory.value) config.push('appOutOfMemory');
+  if (backupFailed.value) config.push('backupFailed');
+  if (certificateRenewalFailed.value) config.push('certificateRenewalFailed');
+  if (diskSpace.value) config.push('diskSpace');
+  if (cloudronUpdateFailed.value) config.push('cloudronUpdateFailed');
+  if (reboot.value) config.push('reboot');
+
+  const [error] = await profileModel.setNotificationConfig(config);
+  if (error) return console.error(error);
+
+  busy.value = false;
+}
+
+onMounted(async () => {
+  const [error, result] = await profileModel.get();
+  if (error) return console.error(error);
+
+  const config = result.notificationConfig || [];
+
+  appUpp.value = config.indexOf('appUpp') !== -1;
+  appDown.value = config.indexOf('appDown') !== -1;
+  appOutOfMemory.value = config.indexOf('appOutOfMemory') !== -1;
+  backupFailed.value = config.indexOf('backupFailed') !== -1;
+  certificateRenewalFailed.value = config.indexOf('certificateRenewalFailed') !== -1;
+  diskSpace.value = config.indexOf('diskSpace') !== -1;
+  cloudronUpdateFailed.value = config.indexOf('cloudronUpdateFailed') !== -1;
+  reboot.value = config.indexOf('reboot') !== -1;
+});
+
+</script>
+
+<template>
+  <Section :title="$t('notifications.settings.title')">
+
+    <p>{{ $t('notifications.settingsDialog.description') }}</p>
+    <br/>
+
+    <SettingsItem>
+      <div>{{ $t('notifications.settings.appUp') }}</div>
+      <Switch v-model="appUpp" :disabled="busy" @change="onSubmit()"/>
+    </SettingsItem>
+
+    <SettingsItem>
+      <div>{{ $t('notifications.settings.appDown') }}</div>
+      <Switch v-model="appDown" :disabled="busy" @change="onSubmit()"/>
+    </SettingsItem>
+
+    <SettingsItem>
+      <div>{{ $t('notifications.settings.appOutOfMemory') }}</div>
+      <Switch v-model="appOutOfMemory" :disabled="busy" @change="onSubmit()"/>
+    </SettingsItem>
+
+    <SettingsItem>
+      <div>{{ $t('notifications.settings.backupFailed') }}</div>
+      <Switch v-model="backupFailed" :disabled="busy" @change="onSubmit()"/>
+    </SettingsItem>
+
+    <SettingsItem>
+      <div>{{ $t('notifications.settings.certificateRenewalFailed') }}</div>
+      <Switch v-model="certificateRenewalFailed" :disabled="busy" @change="onSubmit()"/>
+    </SettingsItem>
+
+    <SettingsItem>
+      <div>{{ $t('notifications.settings.diskSpace') }}</div>
+      <Switch v-model="diskSpace" :disabled="busy" @change="onSubmit()"/>
+    </SettingsItem>
+
+    <SettingsItem>
+      <div>{{ $t('notifications.settings.cloudronUpdateFailed') }}</div>
+      <Switch v-model="cloudronUpdateFailed" :disabled="busy" @change="onSubmit()"/>
+    </SettingsItem>
+
+    <SettingsItem>
+      <div>{{ $t('notifications.settings.rebootRequired') }}</div>
+      <Switch v-model="reboot" :disabled="busy" @change="onSubmit()"/>
+    </SettingsItem>
+  </Section>
+</template>

dashboard/src/models/ProfileModel.js

@@ -208,6 +208,17 @@ function create() {
       if (error || result.status !== 204) return [error || result];
       return [null];
     },
+    async setNotificationConfig(notificationConfig) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/profile/notification_config`, { notificationConfig }, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 204) return [error || result];
+      return [null, result.body];
+    },
     async setupAccount(data) {
       let error, result;
       try {

dashboard/src/views/ProfileView.vue

@@ -5,8 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, SingleSelect, Dialog, InputDialog, TextInput, InputGroup } from 'pankow';
+import { Button, SingleSelect, Dialog, InputDialog, TextInput, InputGroup, FormGroup } from 'pankow';
 import { TOKEN_TYPES } from '../constants.js';
+import NotificationSettings from '../components/NotificationSettings.vue';
 import AppPasswords from '../components/AppPasswords.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import Section from '../components/Section.vue';
@@ -326,6 +327,7 @@ onMounted(async () => {
       </div>
     </Section>
 
+    <NotificationSettings/>
     <AppPasswords/>
     <ApiTokens v-show="user.isAtLeastAdmin"/>