Unified settings

core/frontend/src/App.vue

@@ -17,6 +17,7 @@
           :label="name"
           :value="name"
           class="pa-0 pl-3 ma-0"
+          @change="settings.user_top_widgets = selected_widgets"
         />
       </v-list>
     </v-card>
@@ -480,6 +481,9 @@ export default Vue.extend({
     build_clicks: 0,
   }),
   computed: {
+    settings_selected_widgets(): string[] {
+      return settings.user_top_widgets
+    },
     isBehindWebProxy(): boolean {
       return window.location.host.endsWith('.cloud')
     },
@@ -694,8 +698,8 @@ export default Vue.extend({
 
       document.title = `${this.$route.name} - ${project_name}`
     },
-    selected_widgets() {
-      settings.user_top_widgets = this.selected_widgets
+    settings_selected_widgets() {
+      this.selected_widgets = this.settings_selected_widgets
     },
   },
 

core/frontend/src/libs/settings.ts

@@ -1,5 +1,5 @@
 import vuetify from '@/plugins/vuetify'
-import settingsStore from '@/store/settings'
+import settingsStore, { SettingsStore } from '@/store/settings'
 
 class Settings {
   // eslint-disable-next-line
@@ -55,16 +55,14 @@ class Settings {
   }
 
   // eslint-disable-next-line
-  run_tour_version(version: number) : Promise<void> {
-    return new Promise((resolve) => {
-      const store_tour_version = settingsStore.tour_version
-      if (version === store_tour_version) {
-        throw new Error(`Tour version (${version}) is the same as in store (${store_tour_version}})`)
-      }
+  async run_tour_version(version: number): Promise<void> {
+    await SettingsStore.start()
+    const store_tour_version = settingsStore.tour_version
+    if (version === store_tour_version) {
+      throw new Error(`Tour version (${version}) is the same as in store (${store_tour_version}})`)
+    }
 
-      settingsStore.setTourVersion(version)
-      resolve()
-    })
+    await settingsStore.setTourVersion(version)
   }
 }
 

core/frontend/src/store/settings.ts

@@ -6,6 +6,7 @@ import {
 import store from '@/store'
 import beacon from '@/store/beacon'
 import { castString } from '@/utils/helper_functions'
+import bag from '@/store/bag'
 
 @Module({
   dynamic: true,
@@ -74,70 +75,48 @@ class SettingsStore extends VuexModule {
     return this.is_pirate_mode && this.is_dev_mode_enabled
   }
 
-  /**
-   * Get name of the settings variable on the system
-   * @param string name
-   * @returns string
-   */
-  private static settingsName(name: string): string {
-    return `bluerobotics-blueos-${name}`
-  }
-
   /**
    * Get variable value from settings system
    * @param string name
    * @returns T
    */
-  static loadVariable<T>(name: string): T {
-    const storedVariable = window.localStorage.getItem(SettingsStore.settingsName(name))
-    const castedVariable = storedVariable === null ? null : castString(storedVariable)
-    return castedVariable as T
+  static async loadVariable<T>(name: string): Promise<T | null> {
+    const data = await bag.getData(`settings/${name}`)
+    return data as T ?? null
   }
 
   /**
    * Load all variables from settings system
    */
-  static load(): void {
-    Object.keys(SettingsStore.state).forEach((name: string) => {
-      const value = SettingsStore.loadVariable(name)
+  static async load(): Promise<void> {
+    const data = await bag.getData('settings')
+    if (!data) {
+      console.warn('No settings data found')
+      return
+    }
+    Object.entries(data).forEach(([name, value]) => {
       Vue.set(SettingsStore.state, name, value)
     })
   }
 
   /**
-   * Save a variable on the settings system
-   * @param string name
-   * @param T value
+   * Save all variables on the settings system
    */
-  static saveVariable<T>(name: string, value: T): void {
-    // eslint-disable-next-line
-    window.localStorage.setItem(SettingsStore.settingsName(name), JSON.stringify(value))
-  }
-
-  /**
-   * Save all variables on the settings sytem
-   */
-  static save(): void {
-    Object.entries(SettingsStore.state).forEach(([name, value]) => {
-      SettingsStore.saveVariable(name, value)
-    })
+  static async save(): Promise<void> {
+    await bag.setData('settings', SettingsStore.state)
   }
 
   /**
    * Start the instance and do the proper connections
    */
-  static start(): void {
-    window.onstorage = () => {
-      SettingsStore.load()
-    }
-
-    const settings_version: number = SettingsStore.loadVariable('settings_version')
+  static async start(): Promise<void> {
+    const settings_version = await SettingsStore.loadVariable<number>('settings_version')
     if (settings_version === null) {
-      SettingsStore.save()
+      await SettingsStore.save()
       return
     }
 
-    SettingsStore.load()
+    await SettingsStore.load()
   }
 }