vehicle-settings: Store vehicle settings inside it (instead of local …

…browser storage)

src/stores/alert.ts

@@ -1,16 +1,20 @@
-import { useStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed, reactive, watch } from 'vue'
 
+import { useBlueOsStorage } from '@/composables/settingsSyncer'
+
 import { Alert, AlertLevel } from '../types/alert'
 
 export const useAlertStore = defineStore('alert', () => {
   const alerts = reactive([new Alert(AlertLevel.Success, 'Cockpit started')])
-  const enableVoiceAlerts = useStorage('cockpit-enable-voice-alerts', true)
+  const enableVoiceAlerts = useBlueOsStorage('cockpit-enable-voice-alerts', true)
   // eslint-disable-next-line jsdoc/require-jsdoc
   const availableAlertSpeechVoices = reactive<SpeechSynthesisVoice[]>([])
-  const selectedAlertSpeechVoiceName = useStorage<string | undefined>('cockpit-selected-alert-speech-voice', undefined)
-  const enabledAlertLevels = useStorage('cockpit-enabled-alert-levels', [
+  const selectedAlertSpeechVoiceName = useBlueOsStorage<string | undefined>(
+    'cockpit-selected-alert-speech-voice',
+    undefined
+  )
+  const enabledAlertLevels = useBlueOsStorage('cockpit-enabled-alert-levels', [
     { level: AlertLevel.Success, enabled: true },
     { level: AlertLevel.Error, enabled: true },
     { level: AlertLevel.Info, enabled: false },

src/stores/controller.ts

@@ -1,4 +1,4 @@
-import { useDocumentVisibility, useStorage } from '@vueuse/core'
+import { useDocumentVisibility } from '@vueuse/core'
 import { saveAs } from 'file-saver'
 import { defineStore } from 'pinia'
 import Swal from 'sweetalert2'
@@ -10,6 +10,7 @@ import {
   cockpitStandardToProtocols,
   defaultProtocolMappingVehicleCorrespondency,
 } from '@/assets/joystick-profiles'
+import { useBlueOsStorage } from '@/composables/settingsSyncer'
 import { getKeyDataFromCockpitVehicleStorage, setKeyDataOnCockpitVehicleStorage } from '@/libs/blueos'
 import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { type JoystickEvent, EventType, joystickManager, JoystickModel } from '@/libs/joystick/manager'
@@ -45,19 +46,19 @@ export const useControllerStore = defineStore('controller', () => {
   const alertStore = useAlertStore()
   const joysticks = ref<Map<number, Joystick>>(new Map())
   const updateCallbacks = ref<controllerUpdateCallback[]>([])
-  const protocolMappings = useStorage<JoystickProtocolActionsMapping[]>(protocolMappingsKey, cockpitStandardToProtocols)
-  const protocolMappingIndex = useStorage(protocolMappingIndexKey, 0)
-  const cockpitStdMappings = useStorage(cockpitStdMappingsKey, availableGamepadToCockpitMaps)
+  const protocolMappings = useBlueOsStorage(protocolMappingsKey, cockpitStandardToProtocols)
+  const protocolMappingIndex = useBlueOsStorage(protocolMappingIndexKey, 0)
+  const cockpitStdMappings = useBlueOsStorage(cockpitStdMappingsKey, availableGamepadToCockpitMaps)
   const availableAxesActions = allAvailableAxes
   const availableButtonActions = allAvailableButtons
   const enableForwarding = ref(false)
-  const holdLastInputWhenWindowHidden = useStorage('cockpit-hold-last-joystick-input-when-window-hidden', false)
-  const vehicleTypeProtocolMappingCorrespondency = useStorage<typeof defaultProtocolMappingVehicleCorrespondency>(
+  const holdLastInputWhenWindowHidden = useBlueOsStorage('cockpit-hold-last-joystick-input-when-window-hidden', false)
+  const vehicleTypeProtocolMappingCorrespondency = useBlueOsStorage<typeof defaultProtocolMappingVehicleCorrespondency>(
     'cockpit-default-vehicle-type-protocol-mappings',
     defaultProtocolMappingVehicleCorrespondency
   )
   // Confirmation per joystick action required currently is only available for cockpit actions
-  const actionsJoystickConfirmRequired = useStorage(
+  const actionsJoystickConfirmRequired = useBlueOsStorage(
     'cockpit-actions-joystick-confirm-required',
     {} as Record<string, boolean>
   )

src/stores/mission.ts

@@ -1,21 +1,19 @@
-import { useStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { reactive, ref, watch } from 'vue'
 
+import { useBlueOsStorage } from '@/composables/settingsSyncer'
 import { eventCategoriesDefaultMapping } from '@/libs/slide-to-confirm'
 import type { Waypoint, WaypointCoordinates } from '@/types/mission'
 
 export const useMissionStore = defineStore('mission', () => {
   const missionName = ref('')
-  const lastMissionName = useStorage('cockpit-last-mission-name', '')
-  const missionStartTime = useStorage('cockpit-mission-start-time', new Date())
-  const slideEventsEnabled = useStorage('cockpit-slide-events-enabled', true)
-  const slideEventsCategoriesRequired = useStorage(
+  const slideEventsEnabled = useBlueOsStorage('cockpit-slide-events-enabled', true)
+  const slideEventsCategoriesRequired = useBlueOsStorage(
     'cockpit-slide-events-categories-required',
-    eventCategoriesDefaultMapping,
-    localStorage,
-    { mergeDefaults: true }
+    eventCategoriesDefaultMapping
   )
+  const lastMissionName = useBlueOsStorage('cockpit-last-mission-name', '')
+  const missionStartTime = useBlueOsStorage('cockpit-mission-start-time', new Date())
 
   watch(missionName, () => (lastMissionName.value = missionName.value))
 

src/stores/widgetManager.ts

@@ -1,6 +1,6 @@
 import '@/libs/cosmos'
 
-import { useDebounceFn, useStorage, useWindowSize } from '@vueuse/core'
+import { useDebounceFn, useWindowSize } from '@vueuse/core'
 import { saveAs } from 'file-saver'
 import { defineStore } from 'pinia'
 import Swal from 'sweetalert2'
@@ -9,6 +9,7 @@ import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 
 import { defaultProfileVehicleCorrespondency, defaultWidgetManagerVars, widgetProfiles } from '@/assets/defaults'
 import { miniWidgetsProfile } from '@/assets/defaults'
+import { useBlueOsStorage } from '@/composables/settingsSyncer'
 import { getKeyDataFromCockpitVehicleStorage, setKeyDataOnCockpitVehicleStorage } from '@/libs/blueos'
 import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import * as Words from '@/libs/funny-name/words'
@@ -32,14 +33,14 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const editingMode = ref(false)
   const snapToGrid = ref(true)
   const gridInterval = ref(0.01)
-  const currentMiniWidgetsProfile = useStorage('cockpit-mini-widgets-profile-v4', miniWidgetsProfile)
-  const savedProfiles = useStorage<Profile[]>(savedProfilesKey, [])
-  const currentViewIndex = useStorage('cockpit-current-view-index', 0)
-  const currentProfileIndex = useStorage('cockpit-current-profile-index', 0)
+  const currentMiniWidgetsProfile = useBlueOsStorage('cockpit-mini-widgets-profile-v4', miniWidgetsProfile)
+  const savedProfiles = useBlueOsStorage<Profile[]>(savedProfilesKey, [])
+  const currentViewIndex = useBlueOsStorage('cockpit-current-view-index', 0)
+  const currentProfileIndex = useBlueOsStorage('cockpit-current-profile-index', 0)
   const desiredTopBarHeightPixels = ref(48)
   const desiredBottomBarHeightPixels = ref(48)
   const visibleAreaMinClearancePixels = ref(20)
-  const vehicleTypeProfileCorrespondency = useStorage<typeof defaultProfileVehicleCorrespondency>(
+  const vehicleTypeProfileCorrespondency = useBlueOsStorage<typeof defaultProfileVehicleCorrespondency>(
     'cockpit-default-vehicle-type-profiles',
     defaultProfileVehicleCorrespondency
   )