CustomWidgetBase: Rename feature to Collapsible Container

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
bluerobotics · Feb 19, 2025 · 8239931 · 8239931
1 parent 4c4da7c
commit 8239931
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 13 deletions.
diff --git a/src/assets/widgets/CustomWidgetBase.png → src/assets/widgets/CollapsibleContainer.png b/src/assets/widgets/CustomWidgetBase.png → src/assets/widgets/CollapsibleContainer.png
diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
@@ -532,8 +532,8 @@
           <v-btn
             type="flat"
             class="bg-[#FFFFFF33] text-white w-[95%]"
-            @click="store.addWidget(makeNewWidget(WidgetType.CustomWidgetBase), store.currentView)"
-            >Add widget base
+            @click="store.addWidget(makeNewWidget(WidgetType.CollapsibleContainer), store.currentView)"
+            >Add new container
           </v-btn>
         </div>
       </div>
@@ -699,9 +699,9 @@ import BoatThumb from '@/assets/vehicles/BlueBoat_thumb.png'
 import BlueRoboticsLogo from '@/assets/vehicles/BlueRoboticsLogo.png'
 import RovThumb from '@/assets/vehicles/BlueROV_thumb.png'
 import AttitudeImg from '@/assets/widgets/Attitude.png'
+import CollapsibleContainerImg from '@/assets/widgets/CollapsibleContainer.png'
 import CompassImg from '@/assets/widgets/Compass.png'
 import CompassHUDImg from '@/assets/widgets/CompassHUD.png'
-import CustomWidgetBaseImg from '@/assets/widgets/CustomWidgetBase.png'
 import DepthHUDImg from '@/assets/widgets/DepthHUD.png'
 import DoItYourselfImg from '@/assets/widgets/DoItYourself.png'
 import IFrameImg from '@/assets/widgets/IFrame.png'
@@ -757,7 +757,7 @@ const miniWidgetsBars = computed(() => {
 const getAllMiniWidgetFromCustomWidget = (): MiniWidgetContainer[] => {
   const allCustomBases = store.currentProfile.views
     .flatMap((view) => view.widgets)
-    .filter((widget) => widget.component === WidgetType.CustomWidgetBase)
+    .filter((widget) => widget.component === WidgetType.CollapsibleContainer)
 
   return allCustomBases.map((base) => {
     const baseName = base.name || 'Unnamed Custom Widget'
@@ -902,7 +902,7 @@ const widgetImages = {
   Attitude: AttitudeImg,
   Compass: CompassImg,
   CompassHUD: CompassHUDImg,
-  CustomWidgetBase: CustomWidgetBaseImg,
+  CollapsibleContainer: CollapsibleContainerImg,
   DepthHUD: DepthHUDImg,
   DoItYourself: DoItYourselfImg,
   IFrame: IFrameImg,

diff --git a/src/components/widgets/CustomWidgetBase.vue → ...mponents/widgets/CollapsibleContainer.vue b/src/components/widgets/CustomWidgetBase.vue → ...mponents/widgets/CollapsibleContainer.vue
@@ -292,12 +292,12 @@ const handleCopyWidgetToView = (): void => {
   if (selectedViewToShareWidget.value) {
     try {
       widgetStore.copyWidgetToView(currentWidget.value, selectedViewToShareWidget.value)
-      showSnackbar({
+      openSnackbar({
         variant: 'success',
         message: 'Widget cloned successfully.',
       })
     } catch (error: any) {
-      showSnackbar({
+      openSnackbar({
         variant: 'error',
         message: error.message || 'Error cloning widget.',
       })

diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
@@ -82,7 +82,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const getElementByHash = (hash: string): CustomWidgetElement | undefined => {
     let customWidgetElement = currentProfile.value.views
       .flatMap((view) => view.widgets)
-      .filter((widget) => widget.component === WidgetType.CustomWidgetBase)
+      .filter((widget) => widget.component === WidgetType.CollapsibleContainer)
       .flatMap((widget) => widget.options.elementContainers)
       .flatMap((container) => container.elements)
       .find((element) => element.hash === hash)
@@ -117,7 +117,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
 
     const customWidget = currentProfile.value.views
       .flatMap((view) => view.widgets)
-      .filter((widget) => widget.component === WidgetType.CustomWidgetBase)
+      .filter((widget) => widget.component === WidgetType.CollapsibleContainer)
       .find((widget) =>
         widget.options.elementContainers.some((container: CustomWidgetElementContainer) =>
           container.elements.includes(customWidgetElement)
@@ -572,7 +572,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
       options: widget.options,
     }
 
-    if (widget.component === WidgetType.CustomWidgetBase) {
+    if (widget.component === WidgetType.CollapsibleContainer) {
       newWidget.options = {
         elementContainers: defaultCustomWidgetContainers,
         columns: 1,
@@ -629,7 +629,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const customWidgetContainers = computed<MiniWidgetContainer[]>(() =>
     currentProfile.value.views
       .flatMap((view) => view.widgets)
-      .filter((widget) => widget.component === WidgetType.CustomWidgetBase)
+      .filter((widget) => widget.component === WidgetType.CollapsibleContainer)
       .flatMap((widget) => widget.options.elementContainers)
       .map((container) => ({
         name: '',

diff --git a/src/types/widgets.ts b/src/types/widgets.ts
@@ -51,7 +51,7 @@ export enum WidgetType {
   Attitude = 'Attitude',
   Compass = 'Compass',
   CompassHUD = 'CompassHUD',
-  CustomWidgetBase = 'CustomWidgetBase',
+  CollapsibleContainer = 'CollapsibleContainer',
   DepthHUD = 'DepthHUD',
   DoItYourself = 'DoItYourself',
   IFrame = 'IFrame',
@@ -816,7 +816,7 @@ export const isWidgetConfigurable: Record<WidgetType, boolean> = {
   [WidgetType.Attitude]: true,
   [WidgetType.Compass]: true,
   [WidgetType.CompassHUD]: true,
-  [WidgetType.CustomWidgetBase]: true,
+  [WidgetType.CollapsibleContainer]: true,
   [WidgetType.DepthHUD]: true,
   [WidgetType.DoItYourself]: true,
   [WidgetType.IFrame]: true,

diff --git a/src/utils/migrations.ts b/src/utils/migrations.ts
@@ -1,3 +1,7 @@
+import { v4 as uuid4 } from 'uuid'
+
+import { Profile, WidgetType } from '@/types/widgets'
+
 /**
  * Migrate old localStorage keys to new ones
  */
@@ -16,9 +20,39 @@ const migrateRenameOfLocalStorageKeys = (): void => {
   })
 }
 
+/**
+ * Migrate old widget component names to new ones
+ */
+const migrateRenameWidgetTypeOnProfiles = (): void => {
+  const mappingWidgetComponentName = {
+    CustomWidgetBase: 'CollapsibleContainer',
+  }
+  const profiles: Profile[] = JSON.parse(localStorage.getItem('cockpit-saved-profiles-v8')!)
+  if (!profiles) return
+
+  profiles.forEach((profile) => {
+    profile.views.forEach((view) => {
+      view.widgets.forEach((widget) => {
+        Object.entries(mappingWidgetComponentName).forEach(([oldName, newName]) => {
+          if (widget.component === oldName) {
+            widget.component = newName as WidgetType
+          }
+          if (widget.name === oldName) {
+            widget.name = newName as WidgetType
+          }
+          widget.hash = uuid4()
+        })
+      })
+    })
+  })
+
+  localStorage.setItem('cockpit-saved-profiles-v8', JSON.stringify(profiles))
+}
+
 /**
  * Run all migrations
  */
 export function runMigrations(): void {
   migrateRenameOfLocalStorageKeys()
+  migrateRenameWidgetTypeOnProfiles()
 }