Make mini-widgets in the bottom bar specific to each view

bluerobotics · Sep 7, 2023 · 3fcd3e5 · 3fcd3e5
1 parent 8d84269
commit 3fcd3e5
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 46 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -91,19 +91,19 @@
           </div>
           <div class="z-[60] w-full h-12 bg-slate-600/50 absolute flex bottom-0 backdrop-blur-[2px] justify-between">
             <MiniWidgetContainer
-              :container="widgetStore.currentMiniWidgetsProfile.containers[1]"
+              :container="widgetStore.currentView.miniWidgetContainers[0]"
               :allow-editing="widgetStore.editingMode"
               align="start"
             />
             <div />
             <MiniWidgetContainer
-              :container="widgetStore.currentMiniWidgetsProfile.containers[2]"
+              :container="widgetStore.currentView.miniWidgetContainers[1]"
               :allow-editing="widgetStore.editingMode"
               align="center"
             />
             <div />
             <MiniWidgetContainer
-              :container="widgetStore.currentMiniWidgetsProfile.containers[3]"
+              :container="widgetStore.currentView.miniWidgetContainers[2]"
               :allow-editing="widgetStore.editingMode"
               align="end"
             />

diff --git a/src/assets/defaults.ts b/src/assets/defaults.ts
@@ -92,6 +92,48 @@ export const widgetProfiles: { [key: string]: Profile } = {
             },
           },
         ],
+        miniWidgetContainers: [
+          {
+            name: 'Bottom-left container',
+            widgets: [
+              {
+                hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
+                component: MiniWidgetType.ViewSelector,
+                options: {},
+              },
+            ],
+          },
+          {
+            name: 'Bottom-center container',
+            widgets: [
+              {
+                hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
+                component: MiniWidgetType.DepthIndicator,
+                options: {},
+              },
+            ],
+          },
+          {
+            name: 'Bottom-right container',
+            widgets: [
+              {
+                hash: '837a6722-1e54-4ace-9a92-d9c5af059d16',
+                component: MiniWidgetType.ArmerButton,
+                options: {},
+              },
+              {
+                hash: 'c6301929-cdfc-48af-9fdd-c87ce65d7395',
+                component: MiniWidgetType.ModeSelector,
+                options: {},
+              },
+              {
+                hash: 'a4d0d6ce-9978-40f2-89ab-958f91137177',
+                component: MiniWidgetType.MiniVideoRecorder,
+                options: {},
+              },
+            ],
+          },
+        ],
       },
       {
         hash: 'f8a76470-9122-44f7-97f7-4555a59ee9c4',
@@ -114,6 +156,20 @@ export const widgetProfiles: { [key: string]: Profile } = {
             options: {},
           },
         ],
+        miniWidgetContainers: [
+          {
+            name: 'Bottom-left container',
+            widgets: [
+              {
+                hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
+                component: MiniWidgetType.ViewSelector,
+                options: {},
+              },
+            ],
+          },
+          { name: 'Bottom-center container', widgets: [] },
+          { name: 'Bottom-right container', widgets: [] },
+        ],
       },
     ],
   },
@@ -144,46 +200,6 @@ export const miniWidgetsProfiles: MiniWidgetProfile[] = [
           },
         ],
       },
-      {
-        name: 'Bottom-left container',
-        widgets: [
-          {
-            hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
-            component: MiniWidgetType.ViewSelector,
-            options: {},
-          },
-        ],
-      },
-      {
-        name: 'Bottom-center container',
-        widgets: [
-          {
-            hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
-            component: MiniWidgetType.DepthIndicator,
-            options: {},
-          },
-        ],
-      },
-      {
-        name: 'Bottom-right container',
-        widgets: [
-          {
-            hash: '837a6722-1e54-4ace-9a92-d9c5af059d16',
-            component: MiniWidgetType.ArmerButton,
-            options: {},
-          },
-          {
-            hash: 'c6301929-cdfc-48af-9fdd-c87ce65d7395',
-            component: MiniWidgetType.ModeSelector,
-            options: {},
-          },
-          {
-            hash: 'a4d0d6ce-9978-40f2-89ab-958f91137177',
-            component: MiniWidgetType.MiniVideoRecorder,
-            options: {},
-          },
-        ],
-      },
     ],
   },
 ]

diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
@@ -19,9 +19,9 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const editingMode = ref(false)
   const showGrid = ref(true)
   const gridInterval = ref(0.01)
-  const currentProfile = useStorage('cockpit-current-profile-v3', widgetProfile)
-  const currentMiniWidgetsProfile = useStorage('cockpit-mini-widgets-profile', miniWidgetsProfile)
-  const savedProfiles = useStorage('cockpit-saved-profiles-v3', widgetProfiles)
+  const currentProfile = useStorage('cockpit-current-profile-v4', widgetProfile)
+  const currentMiniWidgetsProfile = useStorage('cockpit-mini-widgets-profile-v2', miniWidgetsProfile)
+  const savedProfiles = useStorage('cockpit-saved-profiles-v4', widgetProfiles)
   const currentViewIndex = useStorage('cockpit-current-view-index', 0)
 
   const currentView = computed<View>({
@@ -133,6 +133,11 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
       hash: uuid4(),
       name: `${Words.animalsOcean.random()} view`,
       widgets: [],
+      miniWidgetContainers: [
+        { name: 'Bottom-left container', widgets: [] },
+        { name: 'Bottom-center container', widgets: [] },
+        { name: 'Bottom-right container', widgets: [] },
+      ],
     })
     currentViewIndex.value = 0
   }

diff --git a/src/types/widgets.ts b/src/types/widgets.ts
@@ -1,4 +1,5 @@
 import type { Point2D, SizeRect2D } from './general'
+import type { MiniWidgetContainer } from './miniWidgets'
 
 /**
  * Available components to be used in the Widget system
@@ -81,6 +82,11 @@ export type View = {
    * Array of widgets that are stored in the view
    */
   widgets: Widget[]
+  /**
+   * Array of mini-widget containers associated with this view.
+   * Mainly used for storing the configuration of the mini-widgets in the bottom bar.
+   */
+  miniWidgetContainers: MiniWidgetContainer[]
   /**
    * Editable name for the view
    */