diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue index 9ae01866a..97ceb3ab9 100644 --- a/src/components/EditMenu.vue +++ b/src/components/EditMenu.vue @@ -442,6 +442,63 @@ + + + +
@@ -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([]) 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 index bae6170a4..fe784746b 100644 --- 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 index cd70ab3bc..fe472cd5f 100644 --- a/src/stores/widgetManager.ts +++ b/src/stores/widgetManager.ts @@ -70,6 +70,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => { const elementToShowOnDrawer = ref() const widgetToEdit = ref() const miniWidgetLastValues = useBlueOsStorage>('cockpit-mini-widget-last-values', {}) + const floatingWidgetContainers = ref([]) 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(() => + 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))