settings page WIP

vue3/src/stores/MessageStore.ts

@@ -19,6 +19,11 @@ export enum ErrorMessageType {
     DELETE_ERROR = 'Update Error',
 }
 
+/** @enum {MessageType} prepared messages */
+export enum PreparedMessage {
+    UPDATE_SUCCESS = 'UPDATE_SUCCESS'
+}
+
 /**
  * Type Message holding all required contents of a message
  */
@@ -62,7 +67,6 @@ export const useMessageStore = defineStore('message_store', () => {
      * @param {string} data optional additional data only shown in log
      */
     function addMessage(type: MessageType, msg: string, showTimeout?: number, data?: any) {
-
         let message = new Message(type, msg, showTimeout, data)
 
         messages.value.push(message)
@@ -80,6 +84,16 @@ export const useMessageStore = defineStore('message_store', () => {
         addMessage(MessageType.ERROR, errorType, 7000, data)
     }
 
+    /**
+     * shorthand function to quickly add a message
+     * @param preparedMessage pre defined message
+     */
+    function addPreparedMessage(preparedMessage: PreparedMessage) {
+        if (preparedMessage == PreparedMessage.UPDATE_SUCCESS) {
+            addMessage(MessageType.SUCCESS, 'Updated Successfully', 7000, {})
+        }
+    }
+
     /**
      * delete all messages from store
      */
@@ -87,7 +101,7 @@ export const useMessageStore = defineStore('message_store', () => {
         messages.value = [] as Message[]
     }
 
-    return {snackbarQueue, messages, addMessage, addError, deleteAllMessages}
+    return {snackbarQueue, messages, addMessage, addError, addPreparedMessage, deleteAllMessages}
 })
 
 // enable hot reload for store

vue3/src/stores/UserPreferenceStore.ts

@@ -1,8 +1,7 @@
 import {acceptHMRUpdate, defineStore} from 'pinia'
 import {useStorage} from "@vueuse/core";
-import {ErrorMessageType, Message, useMessageStore} from "@/stores/MessageStore";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import {ApiApi, UserPreference} from "@/openapi";
-import {ref} from "vue";
 
 const DEVICE_SETTINGS_KEY = 'TANDOOR_DEVICE_SETTINGS'
 const USER_PREFERENCE_KEY = 'TANDOOR_USER_PREFERENCE'
@@ -47,10 +46,23 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
         })
     }
 
+    /**
+     * persist changes to user settings to DB
+     */
+    function updateUserSettings() {
+        let api = new ApiApi()
+
+        api.apiUserPreferencePartialUpdate({user: userSettings.value.user, patchedUserPreference: userSettings.value}).then(r => {
+            userSettings.value = r
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        })
+    }
+
     // always load user settings on first initialization of store
     loadUserSettings()
 
-    return {deviceSettings, userSettings, loadUserSettings}
+    return {deviceSettings, userSettings, loadUserSettings, updateUserSettings}
 })
 
 // enable hot reload for store