Edit-mode: Add panel to list custom mini-widgets bars contents

Signed-off-by: Arturo Manzoli <[email protected]>
bluerobotics · Jan 24, 2025 · f105fd8 · f105fd8
1 parent 4b9b3eb
commit f105fd8
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 11 deletions.
diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
@@ -442,6 +442,63 @@
           </div>
         </template>
       </ExpansiblePanel>
+      <ExpansiblePanel
+        v-for="miniWidgetContainer in miniWidgetsBars"
+        :key="miniWidgetContainer.name"
+        :compact="interfaceStore.isLg || interfaceStore.isOnSmallScreen ? true : false"
+        invert-chevron
+        hover-effect
+        elevation-effect
+        no-top-divider
+        :is-expanded="miniWidgetContainer?.widgets!.length > 0"
+      >
+        <template #title>
+          <div
+            class="flex w-[90%] justify-between items-center 2xl:text-[18px] xl:text-[16px] lg:text-[14px] -mb-3 font-normal ml-2"
+          >
+            {{ miniWidgetContainer.name }}
+            <v-badge
+              :content="miniWidgetContainer.widgets?.length"
+              color="#4FA483"
+              rounded="md"
+              class="ml-10 2xl:mb-1 opacity-90"
+              :class="interfaceStore.isLg || interfaceStore.isOnSmallScreen ? 'scale-75' : ''"
+            />
+          </div>
+        </template>
+        <template #content>
+          <div class="w-full mb-1">
+            <div class="flex flex-col items-center w-full 2xl:px-3 overflow-x-hidden grow">
+              <TransitionGroup name="fade">
+                <div v-if="miniWidgetContainer?.widgets?.isEmpty()" class="flex items-center justify-between w-full">
+                  ---
+                </div>
+                <div
+                  v-for="widget in miniWidgetContainer.widgets"
+                  :key="widget.hash"
+                  class="flex items-center justify-center w-full border-[1px] border-[#FFFFFF15] rounded-md 2xl:mx-2 my-[3px] 2xl:p-1 pl-1 pr-[2px] py-[2px] cursor-pointer"
+                  :class="store.miniWidgetManagerVars(widget.hash).highlighted ? 'bg-[#CBCBCB64]' : 'bg-[#CBCBCB2A]'"
+                  @mouseover="store.miniWidgetManagerVars(widget.hash).highlighted = true"
+                  @mouseleave="store.miniWidgetManagerVars(widget.hash).highlighted = false"
+                >
+                  <div class="flex items-center justify-start w-full overflow-auto">
+                    <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap 2xl:text-sm text-xs ml-3">
+                      {{ widget.name || widget.component }}
+                    </p>
+                  </div>
+                  <v-divider vertical class="opacity-10 mr-1" />
+                  <div
+                    class="icon-btn mdi mdi-cog"
+                    :class="{ 'opacity-20 cursor-not-allowed': !isMiniWidgetConfigurable[widget.component as WidgetType] }"
+                    @click="store.miniWidgetManagerVars(widget.hash).configMenuOpen = true"
+                  />
+                  <div class="icon-btn mdi mdi-trash-can" @click="store.deleteMiniWidget(widget)" />
+                </div>
+              </TransitionGroup>
+            </div>
+          </div>
+        </template>
+      </ExpansiblePanel>
     </div>
   </div>
   <div class="flex items-center justify-between edit-panel bottom-panel" :class="{ active: editMode }">
@@ -666,11 +723,13 @@ import {
   type Profile,
   type View,
   type Widget,
+  CustomWidgetElementContainer,
   CustomWidgetElementType,
   ExternalWidgetSetupInfo,
   InternalWidgetSetupInfo,
   isMiniWidgetConfigurable,
   isWidgetConfigurable,
+  MiniWidgetContainer,
   MiniWidgetType,
   WidgetType,
 } from '@/types/widgets'
@@ -686,6 +745,32 @@ const { showDialog, closeDialog } = useInteractionDialog()
 const interfaceStore = useAppInterfaceStore()
 const store = useWidgetManagerStore()
 
+const miniWidgetsBars = computed(() => {
+  let regularContainers = store.miniWidgetContainersInCurrentView.filter(
+    (container) => !container.name.startsWith('Top') && !container.name.startsWith('Bottom')
+  )
+  let customContainers = getAllMiniWidgetFromCustomWidget()
+  return [...regularContainers, ...customContainers]
+})
+
+const getAllMiniWidgetFromCustomWidget = (): MiniWidgetContainer[] => {
+  const allCustomBases = store.currentProfile.views
+    .flatMap((view) => view.widgets)
+    .filter((widget) => widget.component === WidgetType.CustomWidgetBase)
+
+  return allCustomBases.map((base) => {
+    const baseName = base.name || 'Unnamed Custom Widget'
+    const miniWidgets = base.options.elementContainers.flatMap(
+      (container: CustomWidgetElementContainer) => container.elements
+    )
+
+    return {
+      name: baseName,
+      widgets: miniWidgets,
+    }
+  })
+}
+
 const trashList = ref<Widget[]>([])
 watch(trashList, () => {
   nextTick(() => (trashList.value = []))
@@ -721,9 +806,9 @@ const emit = defineEmits<{
 }>()
 
 watch(
-  () => store.elementToShowOnDrawer?.hash,
+  () => store.elementToShowOnDrawer,
   (newValue) => {
-    if (newValue) interfaceStore.configPanelVisible = true
+    if (newValue?.isCustomElement) interfaceStore.configPanelVisible = true
     if (!newValue) interfaceStore.configPanelVisible = false
   }
 )

diff --git a/src/components/widgets/CustomWidgetBase.vue b/src/components/widgets/CustomWidgetBase.vue
@@ -415,6 +415,8 @@ const widgetAdded = (e: SortableEvent.SortableEvent, containerName: string): voi
     if (newWidget && e.pullMode === 'clone') {
       newWidget.hash = uuid()
       widgetStore.miniWidgetManagerVars(newWidget.hash).configMenuOpen = true
+      lastKnownHashes.value.set(containerName, currentHashes)
+      return
     }
     widgetStore.showElementPropsDrawer(newWidget.hash)
     lastKnownHashes.value.set(containerName, currentHashes)

diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
@@ -70,6 +70,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const elementToShowOnDrawer = ref<CustomWidgetElement>()
   const widgetToEdit = ref<Widget>()
   const miniWidgetLastValues = useBlueOsStorage<Record<string, any>>('cockpit-mini-widget-last-values', {})
+  const floatingWidgetContainers = ref<MiniWidgetContainer[]>([])
 
   const editWidgetByHash = (hash: string): Widget | undefined => {
     widgetToEdit.value = currentProfile.value.views
@@ -272,11 +273,11 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const miniWidgetContainersInCurrentView = computed(() => {
     const fixedBarContainers = currentMiniWidgetsProfile.value.containers
     const viewBarContainers = currentView.value.miniWidgetContainers
-    const floatingWidgetContainers = currentView.value.widgets
+    floatingWidgetContainers.value = currentView.value.widgets
       .filter((w) => w.component === WidgetType.MiniWidgetsBar)
       .filter((w) => w.options && w.options.miniWidgetsContainer)
       .map((w) => w.options.miniWidgetsContainer)
-    return [...fixedBarContainers, ...viewBarContainers, ...floatingWidgetContainers]
+    return [...fixedBarContainers, ...viewBarContainers, ...floatingWidgetContainers.value]
   })
 
   /**
@@ -608,18 +609,34 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     const container: MiniWidgetContainer | undefined = miniWidgetContainersInCurrentView.value.find((cont) => {
       return cont.widgets.includes(miniWidget)
     })
-    if (container === undefined) {
-      showDialog({ variant: 'error', message: 'Mini-widget container not found.' })
+    const customWidgetContainer = getElementByHash(miniWidget.hash)
+    if (container) {
+      const index = container.widgets.indexOf(miniWidget)
+      container.widgets.splice(index, 1)
+      // Remove miniWidget variable from the list of currently logged variables
+      CurrentlyLoggedVariables.removeVariable(miniWidget.options.displayName)
+      return
+    }
+    if (customWidgetContainer) {
+      removeElementFromCustomWidget(miniWidget.hash)
+      CurrentlyLoggedVariables.removeVariable(miniWidget.options.displayName)
       return
     }
 
-    const index = container.widgets.indexOf(miniWidget)
-    container.widgets.splice(index, 1)
-
-    // Remove miniWidget variable from the list of currently logged variables
-    CurrentlyLoggedVariables.removeVariable(miniWidget.options.displayName)
+    showDialog({ variant: 'error', message: 'Mini-widget container not found.' })
   }
 
+  const customWidgetContainers = computed<MiniWidgetContainer[]>(() =>
+    currentProfile.value.views
+      .flatMap((view) => view.widgets)
+      .filter((widget) => widget.component === WidgetType.CustomWidgetBase)
+      .flatMap((widget) => widget.options.elementContainers)
+      .map((container) => ({
+        name: '',
+        widgets: container.elements as unknown as MiniWidget[],
+      }))
+  )
+
   /**
    * States whether the given mini-widget is a real mini-widget
    * Fake mini-widgets are those used as placeholders, in the edit-menu, for example
@@ -630,6 +647,8 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     const allContainers = [
       ...savedProfiles.value.flatMap((profile) => profile.views.flatMap((view) => view.miniWidgetContainers)),
       ...currentMiniWidgetsProfile.value.containers,
+      ...floatingWidgetContainers.value,
+      ...customWidgetContainers.value,
     ]
 
     return allContainers.some((container) => container.widgets.some((widget) => widget.hash === miniWidgetHash))