From 87da099b1127c4c7bf124ab0f0d8498ffa7c74a3 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Wed, 16 Oct 2024 18:22:30 -0300
Subject: [PATCH] Components: Very-generic-input-widget: Implement cockpit
 actions

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 .../CustomWidgetElementInstantiator.vue       |  11 +-
 src/components/EditMenu.vue                   |  19 +-
 src/components/ElementConfigPanel.vue         | 426 ++++++++++++----
 src/components/ElementHugger.vue              | 274 ----------
 src/components/WidgetHugger.vue               |   2 +-
 .../custom-widget-elements/Button.vue         |  34 +-
 .../custom-widget-elements/Checkbox.vue       |  47 +-
 .../custom-widget-elements/Dial.vue           |  55 +-
 .../custom-widget-elements/Dropdown.vue       |  89 +++-
 .../custom-widget-elements/Label.vue          |  43 +-
 .../custom-widget-elements/Slider.vue         |  63 ++-
 .../custom-widget-elements/Switch.vue         |  35 +-
 src/components/widgets/CustomWidgetBase.vue   |  45 +-
 src/libs/actions/data-lake.ts                 |  20 +-
 src/stores/widgetManager.ts                   |  37 +-
 src/types/widgets.ts                          | 470 +++++++++++-------
 src/views/ConfigurationActionsView.vue        |   3 +-
 17 files changed, 1003 insertions(+), 670 deletions(-)
 delete mode 100644 src/components/ElementHugger.vue

diff --git a/src/components/CustomWidgetElementInstantiator.vue b/src/components/CustomWidgetElementInstantiator.vue
index df2ea8f39..49a4ed9cd 100644
--- a/src/components/CustomWidgetElementInstantiator.vue
+++ b/src/components/CustomWidgetElementInstantiator.vue
@@ -5,8 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import { type AsyncComponentLoader, defineAsyncComponent, toRefs } from 'vue'
+import { type AsyncComponentLoader, defineAsyncComponent, onMounted, toRefs } from 'vue'
 
+import { createCockpitActionVariable } from '@/libs/actions/data-lake'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { CustomWidgetElement, CustomWidgetElementType } from '@/types/widgets'
 
@@ -31,4 +32,12 @@ const componentFromType = (componentType: CustomWidgetElementType): AsyncCompone
 
   return componentCache[componentType]
 }
+
+const registerCockpitActions = (): void => {
+  if (element.value.options.actionParameter) {
+    createCockpitActionVariable(element.value.options.actionParameter)
+  }
+}
+
+onMounted(() => registerCockpitActions())
 </script>
diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index 5d2373e3d..738fe4f90 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -152,7 +152,7 @@
     </div>
     <v-divider class="opacity-20" />
     <div
-      class="flex flex-row justify-start relative items-center bg-[#CBCBCB2A] elevation-5 2xl:h-full xl:h-[45px] h-[35px] overflow-hidden"
+      class="flex flex-row max-h-[48px] justify-start relative items-center bg-[#CBCBCB2A] elevation-5 2xl:h-full xl:h-[45px] h-[35px] overflow-hidden"
     >
       <v-icon
         size="sm"
@@ -444,7 +444,7 @@
   <div class="flex items-center justify-between edit-panel bottom-panel" :class="{ active: editMode }">
     <div class="w-px h-full bg-[#FFFFFF18]" />
     <div
-      class="flex flex-col justify-between items-center 2xl:w-[30%] w-[25%] max-w-[240px] h-full text-white 2xl:pr-2 px-1 2xl:py-5 xl:py-4 lg:py-1"
+      class="flex flex-col justify-around items-center 2xl:w-[30%] w-[25%] max-w-[240px] h-full text-white 2xl:pr-2 px-1 2xl:py-5 xl:py-4 lg:py-1"
     >
       <div>
         <p class="2xl:text-md text-xs ml-1">Widget type:</p>
@@ -463,21 +463,17 @@
         <div v-show="widgetMode === 'Regular'" class="w-[90%] 2xl:text-[16px] text-xs text-center mt-6">
           To be placed on the main view area
         </div>
-        <div v-show="widgetMode === 'Regular'" class="2xl:text-md text-sm mt-3 2xl:px-3 px-2 rounded-lg">
-          (Click on card to add)
-        </div>
+        <div v-show="widgetMode === 'Regular'" class="text-xs mt-3 2xl:px-3 px-2 rounded-lg">(Drag card to add)</div>
         <div v-show="widgetMode === 'Mini'" class="w-[90%] 2xl:text-[16px] text-xs text-center mt-6">
           To be placed on the top and bottom bars
         </div>
-        <div v-show="widgetMode === 'Mini'" class="2xl:text-md text-sm mt-3 2xl:px-3 px-2 rounded-lg">
-          (Drag card in place to add)
-        </div>
+        <div v-show="widgetMode === 'Mini'" class="text-xs mt-3 2xl:px-3 px-2 rounded-lg">(Drag card to add)</div>
         <div v-show="widgetMode === 'Custom'">
           <v-btn
             type="flat"
-            class="bg-[#3B78A8] text-white w-[95%]"
+            class="bg-[#FFFFFF33] text-white w-[95%]"
             @click="store.addWidget(WidgetType.CustomWidgetBase, store.currentView)"
-            >Create Custom Widget
+            >Add widget base
           </v-btn>
         </div>
       </div>
@@ -630,7 +626,7 @@
   >
     <div
       v-if="store.isElementsPropsDrawerVisible && store.editingMode && store.elementToShowOnDrawer"
-      class="flex fixed w-[250px] h-[78vh] right-0 top-0 border-l-[1px] border-[#FFFFFF44] text-white elevation-5 bg-[#2d404d]"
+      class="flex fixed w-[250px] h-[78vh] right-0 top-0 border-l-[1px] border-[#FFFFFF44] text-white elevation-5 bg-[#051e2d]"
     >
       <ElementConfigPanel />
     </div>
@@ -734,6 +730,7 @@ const availableCustomWidgetElementsTypes = computed(() =>
     name: widgetType,
     options: {},
     hash: uuid(),
+    isBoolean: false,
     managerVars: defaultCustomWidgetManagerVars,
     cockpitActions: [],
   }))
diff --git a/src/components/ElementConfigPanel.vue b/src/components/ElementConfigPanel.vue
index cae27548a..f68489e83 100644
--- a/src/components/ElementConfigPanel.vue
+++ b/src/components/ElementConfigPanel.vue
@@ -17,20 +17,29 @@
     >
       Delete
     </v-btn>
-    <ExpansiblePanel v-if="currentElement" mark-expanded compact darken-content invert-chevron :is-expanded="true">
+    <ExpansiblePanel
+      v-if="currentElement"
+      mark-expanded
+      compact
+      elevation-effect
+      no-bottom-divider
+      darken-content
+      invert-chevron
+      :is-expanded="true"
+    >
       <template #title>Options</template>
       <template #content>
         <div class="flex flex-col items-center mb-4 -ml-[7px] w-[248px]">
           <div
             v-for="optionKey in sortedOptionKeys"
             :key="optionKey"
-            class="flex w-full justify-between items-center border-b-[1px] border-[#FFFFFF44] h-auto"
+            class="flex w-full justify-between items-center border-b-[1px] border-[#FFFFFF33] h-auto"
           >
             <p class="text-start ml-1 text-[14px] w-[60%]">{{ formatLabel(optionKey) }}</p>
 
             <template
               v-if="
-                typeof currentElement.options[optionKey] === 'string' &&
+                typeof currentElement.options.layout[optionKey] === 'string' &&
                 !Array.isArray(getSelectChoices(optionKey)) &&
                 !isColorPicker(optionKey) &&
                 optionKey !== 'cockpitAction' &&
@@ -38,72 +47,47 @@
               "
             >
               <div class="max-w-[120px]">
-                <input v-model="currentElement.options[optionKey]" type="text" class="p-2 bg-[#FFFFFF22] w-[123px]" />
-              </div>
-            </template>
-
-            <template
-              v-else-if="
-                Array.isArray(currentElement.options[optionKey]) &&
-                currentElement.options[optionKey].every((item) => typeof item === 'string') &&
-                optionKey !== 'cockpitActions'
-              "
-              ><div class="flex flex-col">
-                <div
-                  v-for="(item, index) in currentElement.options[optionKey]"
-                  :key="index"
-                  class="max-w-[120px] justify-start"
-                >
-                  <div class="flex items-center">
-                    <p class="-ml-[11px] mr-1 text-xs">{{ index + 1 }}</p>
-                    <input
-                      v-model="currentElement.options[optionKey][index]"
-                      type="text"
-                      class="p-2 bg-[#FFFFFF22] w-[123px]"
-                    />
-                  </div>
-                </div>
+                <input
+                  v-model="currentElement.options.layout[optionKey]"
+                  type="text"
+                  class="p-2 bg-[#FFFFFF11] w-[123px]"
+                />
               </div>
             </template>
 
-            <template v-if="optionKey === 'cockpitActions'"
-              ><div class="flex flex-col">
-                <div
-                  v-for="(item, index) in currentElement.options[optionKey]"
-                  :key="index"
-                  class="max-w-[120px] justify-start"
-                >
-                  <div class="flex items-center">
-                    <p class="-ml-[11px] mr-1 text-xs">{{ index + 1 }}</p>
-                    <select v-model="currentElement.options[optionKey][index]" class="p-2 bg-[#FFFFFF22] w-[120px]">
-                      <option
-                        v-for="cockpitAction in availableCockpitActions"
-                        :key="cockpitAction.name"
-                        :value="cockpitAction.id"
-                        class="bg-[#00000088]"
-                      >
-                        {{ cockpitAction.name }}
-                      </option>
-                    </select>
-                  </div>
-                </div>
+            <template v-if="optionKey === 'cockpitAction'">
+              <div class="max-w-[120px]">
+                <select v-model="currentElement.options.layout[optionKey]" class="p-2 bg-[#FFFFFF11] w-[120px]">
+                  <option
+                    v-for="cockpitAction in availableCockpitActions"
+                    :key="cockpitAction.name"
+                    :value="cockpitAction"
+                    class="bg-[#000000AA]"
+                  >
+                    {{ cockpitAction.name }}
+                  </option>
+                </select>
               </div>
             </template>
 
-            <template v-else-if="typeof currentElement.options[optionKey] === 'number'">
+            <template v-if="typeof currentElement.options.layout[optionKey] === 'number'">
               <div class="max-w-[120px]">
-                <input v-model="currentElement.options[optionKey]" type="number" class="p-2 bg-[#FFFFFF22] w-[128px]" />
+                <input
+                  v-model="currentElement.options.layout[optionKey]"
+                  type="number"
+                  class="p-2 bg-[#FFFFFF11] w-[128px]"
+                />
               </div>
             </template>
 
-            <template v-else-if="Array.isArray(getSelectChoices(optionKey))">
+            <template v-else-if="Array.isArray(getSelectChoices(optionKey)) && optionKey !== 'selectorOptions'">
               <div class="max-w-[120px]">
-                <select v-model="currentElement.options[optionKey]" class="p-2 bg-[#FFFFFF22] w-[120px]">
+                <select v-model="currentElement.options.layout[optionKey]" class="p-2 bg-[#FFFFFF11] w-[120px]">
                   <option
                     v-for="choice in getSelectChoices(optionKey)"
                     :key="choice"
                     :value="choice"
-                    class="bg-[#00000088]"
+                    class="bg-[#000000AA]"
                   >
                     {{ choice }}
                   </option>
@@ -111,77 +95,321 @@
               </div>
             </template>
 
-            <template v-else-if="typeof currentElement.options[optionKey] === 'boolean'">
-              <div class="max-w-[120px]">
+            <template v-else-if="typeof currentElement.options.layout[optionKey] === 'boolean'">
+              <div class="flex items-center max-w-[120px]">
                 <v-checkbox
-                  v-model="currentElement.options[optionKey]"
+                  v-model="currentElement.options.layout[optionKey]"
                   hide-details
-                  class="p-0 h-10 mb-[12px] text-white mr-5"
+                  density="compact"
+                  class="text-white mr-10 h-[40px]"
                 />
               </div>
             </template>
 
             <template v-else-if="isColorPicker(optionKey)">
               <div class="max-w-[120px]">
-                <input v-model="currentElement.options[optionKey]" type="color" class="p-0 w-20 mr-4" />
+                <input v-model="currentElement.options.layout[optionKey]" type="color" class="p-0 w-20 mr-4" />
               </div>
             </template>
 
-            <template v-else-if="optionKey === 'cockpitAction'">
-              <div class="max-w-[120px]">
-                <select v-model="currentElement.options[optionKey]" class="p-2 bg-[#FFFFFF22] w-[120px]">
-                  <option
-                    v-for="cockpitAction in availableCockpitActions"
-                    :key="cockpitAction.name"
-                    :value="cockpitAction.id"
-                    class="bg-[#00000088]"
+            <template v-if="optionKey === 'selectorOptions'">
+              <div class="flex flex-col w-[144px] items-end h-auto">
+                <div
+                  v-for="(item, index) in currentElement.options.layout[optionKey]"
+                  :key="index"
+                  class="flex items-center text-center border-b-[1px] border-l-[1px] border-[#FFFFFF11] h-[40px] w-full whitespace-nowrap"
+                >
+                  <v-btn
+                    v-if="currentElement.options.layout.selectorOptions.length > 1"
+                    icon
+                    size="x-small"
+                    variant="text"
+                    @click="removeSelectorOption(optionKey, index)"
                   >
-                    {{ cockpitAction.name }}
-                  </option>
-                </select>
+                    <v-icon>mdi-delete</v-icon>
+                  </v-btn>
+                  <v-menu
+                    v-model="isOptionsMenuOpen[index]"
+                    :close-on-content-click="false"
+                    location="top start"
+                    origin="top start"
+                    transition="scale-transition"
+                  >
+                    <template #activator="{ props }">
+                      <p v-bind="props" class="text-[14px] w-full cursor-pointer">
+                        {{ currentElement.options.layout[optionKey][index].name || `Option ${index + 1}` }}
+                      </p>
+                    </template>
+                    <v-card
+                      class="flex flex-col overflow-hidden pa-3 pb-0 gap-x-4"
+                      :style="interfaceStore.globalGlassMenuStyles"
+                    >
+                      <div class="flex gap-x-4">
+                        <div class="flex flex-col items-center">
+                          <p class="text-[14px]">{{ `Option ${index + 1} name` }}</p>
+                          <input
+                            v-model="currentElement.options.layout[optionKey][index].name"
+                            placeholder="option name"
+                            theme="dark"
+                            type="text"
+                            class="p-2 w-[120px] bg-[#FFFFFF11]"
+                          />
+                        </div>
+                        <div class="flex flex-col items-center">
+                          <p class="text-[14px]">{{ `Option ${index + 1} value` }}</p>
+                          <input
+                            v-model="currentElement.options.layout[optionKey][index].value"
+                            placeholder="value"
+                            theme="dark"
+                            type="text"
+                            class="p-2 w-[120px] bg-[#FFFFFF11]"
+                          />
+                        </div>
+                      </div>
+                      <div class="flex justify-between items-center">
+                        <v-btn variant="text" size="x-small" class="my-2" @click="isOptionsMenuOpen[index] = false"
+                          >close</v-btn
+                        >
+                        <v-btn
+                          variant="text"
+                          size="small"
+                          class="my-3"
+                          @click="
+                            () => {
+                              addSelectorOption(optionKey)
+                              isOptionsMenuOpen[index] = false
+                              isOptionsMenuOpen[index + 1] = true
+                            }
+                          "
+                          >add another option</v-btn
+                        >
+                      </div>
+                    </v-card>
+                  </v-menu>
+                </div>
+                <v-btn
+                  v-if="currentElement.options.actionParameter === undefined || !openNewActionParameterForm"
+                  variant="elevated"
+                  class="bg-[#3B78A8] my-[10px] mr-[13px] w-22"
+                  size="x-small"
+                  @click="addSelectorOption(optionKey)"
+                  >add option</v-btn
+                >
               </div>
             </template>
           </div>
         </div>
       </template>
     </ExpansiblePanel>
-    <div class="mt-10">{{ currentElement?.hash }}</div>
+    <ExpansiblePanel
+      v-if="currentElement"
+      :key="currentElement.hash"
+      no-bottom-divider
+      no-top-divider
+      mark-expanded
+      elevation-effect
+      compact
+      darken-content
+      invert-chevron
+      :is-expanded="true"
+    >
+      <template #title>Cockpit actions</template>
+      <template #content>
+        <div class="flex flex-col items-center mb-4 -ml-[7px] w-[248px]">
+          <template v-if="currentElement.component !== CustomWidgetElementType.Button">
+            <div class="flex w-full justify-between items-center h-[40px] border-b-[1px] border-[#FFFFFF33]">
+              <p class="text-center w-full text-sm">Action URL parameter</p>
+              <v-btn
+                v-if="
+                  openNewActionParameterForm === false && currentElement.options.actionParameter?.name === undefined
+                "
+                variant="elevated"
+                class="bg-[#3B78A8] mr-[13px]"
+                size="x-small"
+                @click="openNewActionParameterForm = true"
+                >create</v-btn
+              >
+            </div>
+          </template>
+          <template v-if="openNewActionParameterForm || currentElement.options.actionParameter?.name">
+            <div
+              class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]"
+              :class="{ 'border-[1px] border-red-700': actionParameterError.includes('This name is already in use') }"
+            >
+              <p class="ml-1 text-[14px]">Name</p>
+              <input v-model="futureActionParameter.name" type="text" class="p-2 bg-[#FFFFFF11] w-[123px]" />
+            </div>
+            <div class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]">
+              <p class="ml-1 text-[14px]">Description</p>
+              <input v-model="futureActionParameter.description" type="text" class="p-2 bg-[#FFFFFF11] w-[123px]" />
+            </div>
+            <div class="flex w-full justify-end">
+              <v-btn
+                variant="text"
+                size="x-small"
+                class="mr-[15px] mt-2"
+                :disabled="currentElement.options.actionParameter === undefined"
+                @click="deleteParameterFromDataLake"
+                >delete</v-btn
+              >
+              <v-btn
+                variant="elevated"
+                size="x-small"
+                class="bg-[#3B78A8] mr-1 mt-2"
+                :class="{
+                  'opacity-10': futureActionParameter.name === '',
+                }"
+                :disabled="futureActionParameter.name === ''"
+                @click="saveOrUpdateParameter"
+                >{{ currentElement.options.actionParameter === undefined ? 'save' : 'update' }}</v-btn
+              >
+            </div>
+          </template>
+          <template v-if="currentElement.component === CustomWidgetElementType.Button">
+            <div class="flex justify-between items-center h-[40px] w-full border-b-[1px] border-[#FFFFFF33]">
+              <p class="ml-1 text-[14px]">Action to trigger</p>
+              <select v-model="currentElement.options.cockpitAction" class="p-2 bg-[#FFFFFF11] w-[123px]">
+                <option
+                  v-for="cockpitAction in availableCockpitActions"
+                  :key="cockpitAction.name"
+                  :value="cockpitAction"
+                  class="bg-[#000000AA]"
+                >
+                  {{ cockpitAction.name }}
+                </option>
+              </select>
+            </div>
+          </template>
+        </div>
+        <div
+          v-if="actionParameterError.length > 0"
+          class="flex justify-center items-center text-[14px] text-center h-[30px] bg-red-800 rounded-lg"
+        >
+          <p v-for="message in actionParameterError" :key="message">• {{ message }}</p>
+        </div>
+      </template>
+    </ExpansiblePanel>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
-import { modifierKeyActions } from '@/libs/joystick/protocols/other'
-import { useControllerStore } from '@/stores/controller'
+import { useSnackbar } from '@/composables/snackbar'
+import {
+  createCockpitActionVariable,
+  deleteCockpitActionVariable,
+  getCockpitActionVariableInfo,
+  updateCockpitActionVariableInfo,
+} from '@/libs/actions/data-lake'
+import { getAllHttpRequestActionConfigs, HttpRequestActionConfig } from '@/libs/actions/http-request'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
-import { JoystickAction, JoystickProtocol } from '@/types/joystick'
+import { CockpitActionParameter, CustomWidgetElement, CustomWidgetElementType } from '@/types/widgets'
 
-const controllerStore = useControllerStore()
 const widgetStore = useWidgetManagerStore()
+const interfaceStore = useAppInterfaceStore()
+const { showSnackbar } = useSnackbar()
+
+const currentElement = ref<CustomWidgetElement | undefined>(widgetStore.elementToShowOnDrawer)
+const defaultActionParameter: CockpitActionParameter = {
+  id: '',
+  name: '',
+  type: currentElement.value?.options.variableType,
+  description: '',
+}
 
-const currentElement = ref(widgetStore.elementToShowOnDrawer)
-const availableCockpitActions = computed(() => sortJoystickActions(JoystickProtocol.CockpitAction))
+const availableCockpitActions = reactive<Record<string, HttpRequestActionConfig>>({})
+const futureActionParameter = ref<CockpitActionParameter>(defaultActionParameter)
+const openNewActionParameterForm = ref(false)
+const isOptionsMenuOpen = ref<{ [key: number]: boolean }>({})
+const actionParameterError = ref<string[]>([])
 
 watch(
   () => widgetStore.elementToShowOnDrawer,
   (newValue) => {
     currentElement.value = newValue
+    futureActionParameter.value = newValue?.options.actionParameter || {
+      id: '',
+      name: '',
+      type: currentElement.value?.options.variableType,
+      description: '',
+    }
+    openNewActionParameterForm.value = false
   }
 )
 
+const showActionExistsError = (): void => {
+  showSnackbar({
+    message: 'Action name already exists',
+    variant: 'error',
+  })
+  actionParameterError.value.push('This name is already in use')
+  setTimeout(() => {
+    actionParameterError.value.splice(0, 1)
+  }, 3000)
+}
+
+const deleteParameterFromDataLake = (): void => {
+  if (currentElement.value?.options.actionParameter.name) {
+    deleteCockpitActionVariable(currentElement.value.options.actionParameter)
+    futureActionParameter.value.name = ''
+    futureActionParameter.value = defaultActionParameter
+    currentElement.value.options.actionParameter = undefined
+    openNewActionParameterForm.value = false
+  }
+}
+
+const saveOrUpdateParameter = (): void => {
+  let newCockpitActionParameter = {
+    id: futureActionParameter.value?.name,
+    name: futureActionParameter.value?.name,
+    type: currentElement.value?.options.variableType,
+    description: futureActionParameter.value?.description,
+  }
+  if (
+    currentElement.value &&
+    futureActionParameter.value &&
+    currentElement.value.options.actionParameter?.name === undefined // Knows that it's a new input element being named
+  ) {
+    if (getCockpitActionVariableInfo(newCockpitActionParameter.id) !== undefined) {
+      showActionExistsError()
+      return
+    }
+    createCockpitActionVariable(newCockpitActionParameter)
+    currentElement.value.options.actionParameter = newCockpitActionParameter
+    return
+  }
+  if (futureActionParameter.value && currentElement.value?.options.actionParameter?.name) {
+    const actionVariableToCheck = getCockpitActionVariableInfo(newCockpitActionParameter.id)
+    // Checks if it is updating the same element
+    if (
+      actionVariableToCheck !== undefined &&
+      actionVariableToCheck.id !== currentElement.value.options.actionParameter.id
+    ) {
+      showActionExistsError()
+      return
+    }
+    updateCockpitActionVariableInfo(newCockpitActionParameter)
+    currentElement.value.options.actionParameter = newCockpitActionParameter
+  }
+}
+
+// Sort layout options in alphabetical order
 const sortedOptionKeys = computed(() => {
   if (!currentElement.value) return []
-  return Object.keys(currentElement.value.options).sort((a, b) => a.localeCompare(b))
+
+  return Object.keys(currentElement.value.options.layout).sort((a, b) => {
+    return a.localeCompare(b)
+  })
 })
 
-// Utility function to capitalize and format labels
+// Capitalize and format labels
 const formatLabel = (key: string): string => {
   return key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1')
 }
 
-// Dynamically generate select options based on the option key
 const getSelectChoices = (key: string): string[] | undefined => {
   if (key === 'align') {
     return ['start', 'center', 'end']
@@ -201,27 +429,49 @@ const getSelectChoices = (key: string): string[] | undefined => {
   if (key === 'decoration') {
     return ['none', 'underline', 'overline', 'line-through']
   }
-  return undefined
+  if (key === 'selectorOptions') {
+    return ['selector']
+  }
 }
 
 const isColorPicker = (key: string): boolean => {
   return key.toLowerCase().includes('color')
 }
 
+const addSelectorOption = (key: string): void => {
+  if (currentElement.value) {
+    if (!currentElement.value.options.layout[key]) {
+      currentElement.value.options.layout[key] = [{ name: '', value: '' }]
+    } else {
+      currentElement.value.options.layout[key].push({ name: '', value: '' })
+    }
+  }
+}
+
+const removeSelectorOption = (key: string, index: number): void => {
+  if (currentElement.value && currentElement.value.options.layout[key]) {
+    currentElement.value.options.layout[key].splice(index, 1)
+  }
+}
+
 const deleteElement = (): void => {
   if (currentElement.value) {
     widgetStore.removeElementFromCustomWidget(widgetStore.elementToShowOnDrawer!.hash)
     widgetStore.elementToShowOnDrawer = undefined
+    deleteParameterFromDataLake()
   }
 }
 
-const buttonActionsToShow = computed(() =>
-  controllerStore.availableButtonActions.filter((a) => JSON.stringify(a) !== JSON.stringify(modifierKeyActions.regular))
-)
-
-const sortJoystickActions = (protocol: string): JoystickAction[] => {
-  return buttonActionsToShow.value.filter((action: JoystickAction) => action.protocol === protocol)
+const loadSavedActions = (): void => {
+  Object.assign(availableCockpitActions, getAllHttpRequestActionConfigs())
 }
+
+onMounted(() => {
+  if (currentElement.value?.options.actionParameter?.name) {
+    futureActionParameter.value = currentElement.value?.options.actionParameter
+  }
+  loadSavedActions()
+})
 </script>
 
 <style scoped>
diff --git a/src/components/ElementHugger.vue b/src/components/ElementHugger.vue
deleted file mode 100644
index 7f305a5a8..000000000
--- a/src/components/ElementHugger.vue
+++ /dev/null
@@ -1,274 +0,0 @@
-<template>
-  <div v-if="devStore.developmentMode" class="widgetOverlay dev-info">
-    <p>Position: {{ round(100 * element.position.x, 2) }} x {{ round(100 * element.position.y, 2) }} %</p>
-    <p>Size: {{ round(100 * element.size.width, 2) }} x {{ round(100 * element.size.height, 2) }} %</p>
-    <p>Position: {{ round(element.position.x * windowWidth) }} x {{ round(element.position.y * windowHeight) }} px</p>
-    <p>Size: {{ round(element.size.width * windowWidth) }} x {{ round(element.size.height * windowHeight) }} px</p>
-    <p>Client size: {{ innerElementRef?.clientWidth }} x {{ innerElementRef?.clientHeight }} px</p>
-    <p>Offset size: {{ innerElementRef?.offsetWidth }} x {{ innerElementRef?.offsetHeight }} px</p>
-    <p>Scroll size: {{ innerElementRef?.scrollWidth }} x {{ innerElementRef?.scrollHeight }} px</p>
-    <p v-for="[k, v] in Object.entries(element?.options)" :key="k">{{ k }} (option): {{ v }}</p>
-  </div>
-  <div ref="widgetOverlay" class="widgetOverlay" :class="{ allowMoving, draggingElement, hoveringElementOrOverlay }" />
-  <div ref="outerWidgetRef" class="outerWidget">
-    <div ref="innerElementRef" class="innerWidget">
-      <slot></slot>
-    </div>
-    <div class="resize-handle top-left" :class="{ hoveringElementOrOverlay, allowResizing }" />
-    <div class="resize-handle top-right" :class="{ hoveringElementOrOverlay, allowResizing }" />
-    <div class="resize-handle bottom-left" :class="{ hoveringElementOrOverlay, allowResizing }" />
-    <div class="resize-handle bottom-right" :class="{ hoveringElementOrOverlay, allowResizing }" />
-    <div class="resize-handle left" :class="{ hoveringElementOrOverlay, allowResizing }" />
-    <div class="resize-handle right" :class="{ hoveringElementOrOverlay, allowResizing }" />
-    <div class="resize-handle top" :class="{ hoveringElementOrOverlay, allowResizing }" />
-    <div class="resize-handle bottom" :class="{ hoveringElementOrOverlay, allowResizing }" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementHover, useWindowSize } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
-
-import { constrain, round } from '@/libs/utils'
-import { useDevelopmentStore } from '@/stores/development'
-
-type ElementType = {
-  /**
-   *
-   */
-  position: {
-    /**
-     *
-     */
-    x: number
-    /**
-     *
-     */
-    y: number
-  }
-  /**
-   *
-   */
-  size: {
-    /**
-     *
-     */
-    width: number
-    /**
-     *
-     */
-    height: number
-  }
-  /**
-   *
-   */
-  options: Record<string, unknown>
-}
-
-/**
- * Props for the elementHugger component
- */
-export interface Props {
-  /**
-   *
-   */
-  element: ElementType
-  /**
-   *
-   */
-  allowMoving?: boolean
-  /**
-   *
-   */
-  allowResizing?: boolean
-}
-
-const devStore = useDevelopmentStore()
-
-const props = withDefaults(defineProps<Props>(), {
-  allowMoving: true,
-  allowResizing: true,
-})
-
-const position = ref({ x: props.element.position.x, y: props.element.position.y })
-const size = ref({ width: props.element.size.width, height: props.element.size.height })
-const allowMoving = ref(props.allowMoving)
-const allowResizing = ref(props.allowResizing)
-const outerWidgetRef = ref<HTMLElement | undefined>()
-const innerElementRef = ref<HTMLElement | undefined>()
-const draggingElement = ref(false)
-const isResizing = ref(false)
-const initialMousePos = ref<{
-  /**
-   cccccccccccccccccccccccccccccc *
-cccccccccccccccccccccccccccccc
-   */
-  x: number
-  /**
-xxxxxxxxxxx *
-xxxxxxxxxxx
-   */
-  y: number
-} | null>(null)
-const initialElementPos = ref(position.value)
-const initialElementSize = ref(size.value)
-const resizeHandle = ref<string | null>(null)
-
-const elementContainer = ref<HTMLElement | null>(null)
-const elementOverlay = ref<HTMLElement | null>(null)
-
-const outerElementRef = ref<HTMLElement | undefined>()
-const { width: windowWidth, height: windowHeight } = useWindowSize()
-
-// Use hover to manage the hover state for the element and overlay
-const hoveringOverlay = useElementHover(elementOverlay)
-const hoveringElementItself = useElementHover(elementContainer)
-const hoveringElementOrOverlay = computed(() => hoveringOverlay.value || hoveringElementItself.value)
-
-const viewSize = computed(() => ({
-  width: elementContainer.value?.parentElement?.getBoundingClientRect().width || 1,
-  height: elementContainer.value?.parentElement?.getBoundingClientRect().height || 1,
-}))
-
-// Start dragging
-const handleDragStart = (event: MouseEvent): void => {
-  if (!allowMoving.value || isResizing.value) return
-  draggingElement.value = true
-  initialMousePos.value = { x: event.clientX, y: event.clientY }
-  initialElementPos.value = { ...position.value }
-
-  document.addEventListener('mousemove', handleDrag)
-  document.addEventListener('mouseup', handleEnd)
-}
-
-// Handle dragging
-const handleDrag = (event: MouseEvent): void => {
-  if (!draggingElement.value || !initialMousePos.value) return
-
-  const dx = (event.clientX - initialMousePos.value.x) / viewSize.value.width
-  const dy = (event.clientY - initialMousePos.value.y) / viewSize.value.height
-
-  position.value = {
-    x: constrain(initialElementPos.value.x + dx, 0, 1 - size.value.width),
-    y: constrain(initialElementPos.value.y + dy, 0, 1 - size.value.height),
-  }
-}
-
-// Start resizing
-const handleResizeStart = (event: MouseEvent, handle: string): void => {
-  if (!allowResizing.value || draggingElement.value) return
-  isResizing.value = true
-  resizeHandle.value = handle
-  initialMousePos.value = { x: event.clientX, y: event.clientY }
-  initialElementSize.value = { ...size.value }
-  initialElementPos.value = { ...position.value }
-
-  document.addEventListener('mousemove', handleResize)
-  document.addEventListener('mouseup', handleEnd)
-}
-
-// Handle resizing
-const handleResize = (event: MouseEvent): void => {
-  if (!isResizing.value || !initialMousePos.value) return
-
-  const dx = (event.clientX - initialMousePos.value.x) / viewSize.value.width
-  const dy = (event.clientY - initialMousePos.value.y) / viewSize.value.height
-
-  let newWidth = initialElementSize.value.width
-  let newHeight = initialElementSize.value.height
-  let newLeft = initialElementPos.value.x
-  let newTop = initialElementPos.value.y
-
-  switch (resizeHandle.value) {
-    case 'top-left':
-      newWidth -= dx
-      newHeight -= dy
-      newLeft += dx
-      newTop += dy
-      break
-    case 'top-right':
-      newWidth += dx
-      newHeight -= dy
-      newTop += dy
-      break
-    case 'bottom-left':
-      newWidth -= dx
-      newHeight += dy
-      newLeft += dx
-      break
-    case 'bottom-right':
-      newWidth += dx
-      newHeight += dy
-      break
-  }
-
-  // Constrain within parent boundaries
-  position.value = {
-    x: constrain(newLeft, 0, 1 - size.value.width),
-    y: constrain(newTop, 0, 1 - size.value.height),
-  }
-
-  size.value = {
-    width: constrain(newWidth, 0.05, 1),
-    height: constrain(newHeight, 0.05, 1),
-  }
-}
-
-// End dragging or resizing
-const handleEnd = (): void => {
-  draggingElement.value = false
-  isResizing.value = false
-  document.removeEventListener('mousemove', handleDrag)
-  document.removeEventListener('mousemove', handleResize)
-  document.removeEventListener('mouseup', handleEnd)
-}
-
-onMounted(() => {
-  elementContainer.value = document.querySelector('.elementContainer')
-})
-</script>
-
-<style scoped>
-.elementContainer {
-  position: absolute;
-  cursor: grab;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.innerElement {
-  width: 100%;
-  height: 100%;
-}
-
-.resize-handle {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: white;
-  border: 1px solid black;
-  z-index: 2;
-  cursor: nwse-resize;
-}
-
-.resize-handle.top-left {
-  top: -5px;
-  left: -5px;
-}
-
-.resize-handle.top-right {
-  top: -5px;
-  right: -5px;
-}
-
-.resize-handle.bottom-left {
-  bottom: -5px;
-  left: -5px;
-}
-
-.resize-handle.bottom-right {
-  bottom: -5px;
-  right: -5px;
-}
-</style>
diff --git a/src/components/WidgetHugger.vue b/src/components/WidgetHugger.vue
index 6f427f046..6b0186059 100644
--- a/src/components/WidgetHugger.vue
+++ b/src/components/WidgetHugger.vue
@@ -92,7 +92,7 @@ const hoveringWidgetOrOverlay = computed(() => hoveringOverlay.value || hovering
 
 // Put the widget into highlighted state when in edit-mode and hovering over it
 watch([hoveringWidgetOrOverlay, allowMoving], () => {
-  widgetStore.widgetManagerVars(widget.value.hash).highlighted = hoveringWidgetOrOverlay.value && allowMoving.value
+  widgetStore.widgetManagerVars(widget.value.hash).highlighted = hoveringWidgetOrOverlay.value
 })
 
 const draggingWidget = ref(false)
diff --git a/src/components/custom-widget-elements/Button.vue b/src/components/custom-widget-elements/Button.vue
index 458a57d16..07ed238a1 100644
--- a/src/components/custom-widget-elements/Button.vue
+++ b/src/components/custom-widget-elements/Button.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="flex items-center"
-    :style="{ justifyContent: element.options.align }"
+    :style="{ justifyContent: element.options.layout?.align }"
     :class="
       widgetStore.elementToShowOnDrawer?.hash === element.hash && widgetStore.editingMode
         ? 'bg-[#00000010] '
@@ -10,17 +10,18 @@
   >
     <div :class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'">
       <v-btn
-        :size="element.options.buttonSize"
-        :variant="element.options.variant"
+        :size="element.options.layout?.buttonSize"
+        :variant="element.options.layout?.variant"
         :style="{
-          color: element.options.textColor || '#FFFFFF',
+          color: element.options.layout?.textColor || '#FFFFFF',
           backgroundColor:
-            element.options.variant !== 'text' && element.options.variant !== 'outlined'
-              ? element.options.backgroundColor || '#FFFFFF33'
+            element.options.layout?.variant !== 'text' && element.options.layout?.variant !== 'outlined'
+              ? element.options.layout?.backgroundColor || '#FFFFFF33'
               : 'transparent',
         }"
+        @click="handleClick"
       >
-        {{ element.options.label || 'Button' }}
+        {{ element.options.layout?.label || 'Button' }}
       </v-btn>
     </div>
   </div>
@@ -29,6 +30,7 @@
 <script setup lang="ts">
 import { onMounted, toRefs } from 'vue'
 
+import { executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
 
@@ -43,15 +45,21 @@ const props = defineProps<{
 
 const element = toRefs(props).element
 
+const handleClick = (): void => {
+  executeActionCallback(`http-request-action (${element.value.options.cockpitAction.name})`)
+}
+
 onMounted(() => {
   if (!props.element.options || Object.keys(props.element.options).length === 0) {
     widgetStore.updateElementOptions(props.element.hash, {
-      align: element.value.options.align || 'center',
-      backgroundColor: element.value.options.backgroundColor || '#FFFFFF33',
-      label: element.value.options.label || 'Button',
-      buttonSize: element.value.options.buttonSize || 'small',
-      textColor: element.value.options.textColor || '#FFFFFF',
-      variant: element.value.options.variant || 'contained',
+      layout: {
+        align: element.value.options.layout?.align || 'center',
+        backgroundColor: element.value.options.layout?.backgroundColor || '#FFFFFF33',
+        label: element.value.options.layout?.label || 'Click Here',
+        buttonSize: element.value.options.layout?.buttonSize || 'default',
+        textColor: element.value.options.layout?.textColor || '#FFFFFF',
+        variant: element.value.options.layout?.variant || 'elevated',
+      },
       cockpitAction: element.value.options.cockpitAction || '',
     })
   }
diff --git a/src/components/custom-widget-elements/Checkbox.vue b/src/components/custom-widget-elements/Checkbox.vue
index b23e13c56..184e869c3 100644
--- a/src/components/custom-widget-elements/Checkbox.vue
+++ b/src/components/custom-widget-elements/Checkbox.vue
@@ -1,27 +1,37 @@
 <template>
   <div
     class="flex items-center h-[30px]"
-    :style="{ justifyContent: element.options.align }"
+    :style="{ justifyContent: element.options.layout?.align }"
     :class="
       widgetStore.elementToShowOnDrawer?.hash === element.hash && widgetStore.editingMode
         ? 'bg-[#00000010] '
         : 'border-0'
     "
   >
-    <p v-if="element.options.label !== ''" class="mr-3 mb-[3px] text-white">{{ element.options.label }}</p>
+    <p v-if="element.options.layout?.label !== ''" class="mr-3 mb-[3px] text-white">
+      {{ element.options.layout?.label }}
+    </p>
     <v-checkbox
-      v-model="element.options.checked"
+      v-model="element.checked"
       hide-details
-      :color="element.options.color"
+      :color="element.options.layout?.color"
       class="text-white"
+      :class="{ 'pointer-events-none': widgetStore.editingMode }"
       theme="dark"
+      @change="toggleActionFromCheckbox"
     ></v-checkbox>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, toRefs } from 'vue'
+import { onMounted, onUnmounted, toRefs } from 'vue'
 
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  setCockpitActionVariableData,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
 
@@ -36,17 +46,36 @@ const props = defineProps<{
 
 const element = toRefs(props).element
 
+const toggleActionFromCheckbox = (): void => {
+  setCockpitActionVariableData(element.value.options.actionParameter.name, element.value.checked)
+}
+
 onMounted(() => {
   if (!element.value.options || Object.keys(element.value.options).length === 0) {
     widgetStore.updateElementOptions(element.value.hash, {
-      label: '',
+      variableType: 'boolean',
+      actionParameter: undefined,
       checked: true,
-      align: 'center',
-      color: '#FFFFFF',
-      cockpitAction: element.value.options.cockpitAction || '',
+      layout: {
+        label: '',
+        align: 'center',
+        color: '#FFFFFF',
+      },
+    })
+  }
+  if (element.value.options.actionParameter) {
+    listenCockpitActionVariable(element.value.options.actionParameter.name, (value) => {
+      element.value.checked = value as boolean
     })
   }
 })
+
+onUnmounted(() => {
+  if (element.value.options.actionParameter) {
+    unlistenCockpitActionVariable(element.value.options.actionParameter.name)
+    deleteCockpitActionVariable(element.value.options.actionParameter.name)
+  }
+})
 </script>
 
 <style scoped></style>
diff --git a/src/components/custom-widget-elements/Dial.vue b/src/components/custom-widget-elements/Dial.vue
index 27a8cbcc0..83ddfa434 100644
--- a/src/components/custom-widget-elements/Dial.vue
+++ b/src/components/custom-widget-elements/Dial.vue
@@ -2,7 +2,7 @@
   <div
     id="dial"
     class="flex items-center w-auto"
-    :style="{ justifyContent: element.options.align }"
+    :style="{ justifyContent: element.options.layout?.align }"
     :class="
       widgetStore.elementToShowOnDrawer?.hash === element.hash && widgetStore.editingMode
         ? 'bg-[#00000010] '
@@ -19,7 +19,7 @@
       </div>
     </div>
     <div
-      v-if="element.options.showValue"
+      v-if="element.options.layout?.showValue"
       class="value-display bg-[#FFFFFF22] border-[#FFFFFF44] border-[1px] rounded-md p-[2px] min-w-9 text-center elevation-1"
     >
       {{ Math.round(potentiometerValue) }}
@@ -28,8 +28,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, toRefs } from 'vue'
-
+import { computed, onMounted, onUnmounted, ref, toRefs } from 'vue'
+
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  setCockpitActionVariableData,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
 
@@ -50,18 +56,30 @@ const rotationAngle = ref(-150)
 onMounted(() => {
   if (!element.value.options || Object.keys(element.value.options).length === 0) {
     widgetStore.updateElementOptions(element.value.hash, {
-      minValue: 0,
-      maxValue: 100,
-      size: 'small',
-      showValue: true,
-      cockpitAction: element.value.options.cockpitAction || '',
-      align: 'center',
+      variableType: 'number',
+      actionParameter: undefined,
+      layout: {
+        minValue: 0,
+        maxValue: 100,
+        size: 'medium',
+        showValue: true,
+        align: 'center',
+      },
+    })
+  }
+  if (element.value.options.actionParameter) {
+    listenCockpitActionVariable(element.value.options.actionParameter?.name, (value) => {
+      potentiometerValue.value = value as number
+      const rotationRange = 300
+      const valueRange = element.value.options.layout.maxValue - element.value.options.layout.minValue || 1
+      rotationAngle.value =
+        (((value as number) - element.value.options.layout?.minValue) / valueRange) * rotationRange - 150
     })
   }
 })
 
 const sizeClass = computed(() => {
-  switch (element.value.options.size) {
+  switch (element.value.options.layout?.size) {
     case 'medium':
       return 'potentiometer-medium'
     case 'large':
@@ -90,8 +108,12 @@ const startDrag = (event: MouseEvent): void => {
     rotationAngle.value = adjustedAngle
 
     const rotationRange = 300
-    const valueRange = element.value.options.maxValue - element.value.options.minValue
-    potentiometerValue.value = ((adjustedAngle + 150) / rotationRange) * valueRange + element.value.options.minValue
+    const valueRange = element.value.options.layout?.maxValue - element.value.options.layout?.minValue
+    potentiometerValue.value =
+      ((adjustedAngle + 150) / rotationRange) * valueRange + element.value.options.layout?.minValue
+    if (element.value.options.actionParameter) {
+      setCockpitActionVariableData(element.value.options.actionParameter.name, potentiometerValue.value.toFixed(1))
+    }
   }
 
   const stopDrag = (): void => {
@@ -102,6 +124,13 @@ const startDrag = (event: MouseEvent): void => {
   document.addEventListener('mousemove', handleDrag)
   document.addEventListener('mouseup', stopDrag)
 }
+
+onUnmounted(() => {
+  if (element.value.options.actionParameter) {
+    unlistenCockpitActionVariable(element.value.options.actionParameter.name)
+    deleteCockpitActionVariable(element.value.options.actionParameter.name)
+  }
+})
 </script>
 
 <style scoped>
diff --git a/src/components/custom-widget-elements/Dropdown.vue b/src/components/custom-widget-elements/Dropdown.vue
index fd35f99a6..f80b4eb71 100644
--- a/src/components/custom-widget-elements/Dropdown.vue
+++ b/src/components/custom-widget-elements/Dropdown.vue
@@ -1,30 +1,41 @@
 <template>
   <div
-    class="select-container"
+    class="flex w-full"
     :class="
       widgetStore.elementToShowOnDrawer?.hash === element.hash && widgetStore.editingMode
         ? 'bg-[#00000010] '
         : 'border-0'
     "
+    :style="{ width: '100%', justifyContent: element.options.layout?.align }"
   >
-    <v-select
-      v-model="selectedOption"
-      :items="options"
-      theme="dark"
-      density="compact"
-      variant="filled"
-      hide-details
-      class="text-white"
-      :class="{ 'pointer-events-none': widgetStore.editingMode }"
-      @change="handleSelection"
-    >
-    </v-select>
+    <div :style="{ width: element.options.layout?.width + 'px' }">
+      <v-select
+        v-model="selectedOption"
+        :items="options"
+        item-title="name"
+        item-value="value"
+        theme="dark"
+        density="compact"
+        variant="filled"
+        hide-details
+        class="text-white"
+        :class="{ 'pointer-events-none': widgetStore.editingMode }"
+        @change="handleSelection"
+      >
+      </v-select>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, toRefs, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
 
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  setCockpitActionVariableData,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
 
@@ -38,14 +49,23 @@ const props = defineProps<{
 }>()
 
 const element = toRefs(props).element
-const options = ref(element.value.options.options)
 const lastSelectedOption = ref()
 const selectedOption = ref()
 
+const options = computed(() => {
+  return (
+    element.value.options.layout?.selectorOptions.map((option) => ({
+      ...option,
+    })) || []
+  )
+})
+
 watch(
   () => element.value.options,
   (newValue) => {
-    options.value = newValue.options
+    if (newValue.layout?.selectorOptions) {
+      selectedOption.value = newValue.layout.selectorOptions.find((option) => option.value === selectedOption.value)
+    }
   },
   { deep: true, immediate: true }
 )
@@ -62,24 +82,43 @@ watch(
   }
 )
 
-const handleSelection = (value: any): void => {
-  console.log('🚀 ~ Selected value:', value)
+const handleSelection = (value: string | number | boolean): void => {
+  if (element.value.options.actionParameter?.id) {
+    setCockpitActionVariableData(element.value.options.actionParameter.id, value)
+  }
 }
 
 onMounted(() => {
-  if (!props.element.options || Object.keys(props.element.options).length === 0) {
-    widgetStore.updateElementOptions(props.element.hash, {
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      align: 'start',
-      cockpitActions: ['', '', ''],
+  if (!element.value.options || Object.keys(element.value.options).length === 0) {
+    widgetStore.updateElementOptions(element.value.hash, {
+      cockpitAction: undefined,
+      actionParameter: undefined,
+      layout: {
+        selectorOptions: [{ name: '', value: '' }],
+        align: 'start',
+        width: 200,
+      },
     })
   }
+  if (element.value.options.actionParameter) {
+    listenCockpitActionVariable(element.value.options.actionParameter.name, (value) => {
+      selectedOption.value = value
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (element.value.options.actionParameter) {
+    unlistenCockpitActionVariable(element.value.options.actionParameter.name)
+    deleteCockpitActionVariable(element.value.options.actionParameter.name)
+  }
 })
 </script>
 
 <style scoped>
 .select-container {
-  width: auto;
-  margin: auto;
+  width: 100%;
+  align-items: center;
+  flex-direction: row;
 }
 </style>
diff --git a/src/components/custom-widget-elements/Label.vue b/src/components/custom-widget-elements/Label.vue
index 5431accf0..f941b21bf 100644
--- a/src/components/custom-widget-elements/Label.vue
+++ b/src/components/custom-widget-elements/Label.vue
@@ -10,11 +10,11 @@
     <div
       :style="{
         width: '100%',
-        fontSize: `${element.options.textSize}px` || '35px',
-        fontWeight: element.options.weight,
-        textDecoration: element.options.decoration,
-        color: element.options.color || '#FFFFFF',
-        textAlign: element.options.align || 'center',
+        fontSize: `${element.options.layout?.textSize}px` || '35px',
+        fontWeight: element.options.layout?.weight,
+        textDecoration: element.options.layout?.decoration,
+        color: element.options.layout?.color || '#FFFFFF',
+        textAlign: element.options.layout?.align || 'center',
         margin: '1px',
       }"
     >
@@ -24,8 +24,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, toRefs } from 'vue'
+import { onMounted, onUnmounted, toRefs } from 'vue'
 
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
 
@@ -44,13 +49,29 @@ onMounted(() => {
   if (!props.element.options || Object.keys(props.element.options).length === 0) {
     widgetStore.updateElementOptions(props.element.hash, {
       text: 'Label',
-      textSize: 20,
-      weight: 'normal',
-      decoration: 'none',
-      color: '#FFFFFF',
-      align: 'center',
+      layout: {
+        textSize: 20,
+        weight: 'normal',
+        decoration: 'none',
+        color: '#FFFFFF',
+        align: 'center',
+      },
+      variableType: 'string',
+      actionParameter: undefined,
     })
   }
+  if (props.element.options.actionParameter) {
+    listenCockpitActionVariable(props.element.options.actionParameter?.name, (value) => {
+      element.value.options.text = value as string
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (props.element.options.actionParameter) {
+    unlistenCockpitActionVariable(props.element.options.actionParameter.name)
+    deleteCockpitActionVariable(props.element.options.actionParameter.name)
+  }
 })
 </script>
 
diff --git a/src/components/custom-widget-elements/Slider.vue b/src/components/custom-widget-elements/Slider.vue
index f6bdef828..779d4a16d 100644
--- a/src/components/custom-widget-elements/Slider.vue
+++ b/src/components/custom-widget-elements/Slider.vue
@@ -7,32 +7,45 @@
         : 'border-0'
     "
   >
-    <div :style="{ minWidth: element.options.labelWidth + 'px' }">
-      <p v-if="element.options.label !== ''" class="mr-3 mb-[3px]">
-        {{ element.options.label }}
+    <div :style="{ minWidth: element.options.layout?.labelWidth + 'px' }">
+      <p v-if="element.options.layout?.label !== ''" class="mr-3 mb-[3px]">
+        {{ element.options.layout?.label }}
       </p>
     </div>
     <v-slider
       v-model="sliderValue"
-      :min="element.options.minValue"
-      :max="element.options.maxValue"
-      :thumb-label="element.options.showValue"
+      :min="element.options.layout?.minValue"
+      :max="element.options.layout?.maxValue"
+      :thumb-label="element.options.layout?.showTooltip"
       hide-details
       class="min-w-20"
-      :color="element.options.color || 'white'"
+      :color="element.options.layout?.color || 'white'"
       :class="{
         'pointer-events-none': widgetStore.editingMode,
-        'scale-75': element.options.size === 'small',
-        'scale-125': element.options.size === 'large',
+        'scale-75': element.options.layout?.size === 'small',
+        'scale-125': element.options.layout?.size === 'large',
       }"
+      @change="
+        () => {
+          if (element.options.actionParameter) {
+            setCockpitActionVariableData(element.options.actionParameter.name, sliderValue.toFixed(1))
+          }
+        }
+      "
     ></v-slider>
   </div>
 </template>
 
 <script setup lang="ts">
 import { toRefs } from '@vueuse/core'
-import { onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  setCockpitActionVariableData,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
 
@@ -52,16 +65,30 @@ const sliderValue = ref(0)
 onMounted(() => {
   if (!element.value.options || Object.keys(element.value.options).length === 0) {
     widgetStore.updateElementOptions(element.value.hash, {
-      label: '',
-      minValue: 0,
-      maxValue: 100,
-      showValue: true,
-      color: '#FFFFFF',
-      size: 'medium',
-      cockpitAction: element.value.options.cockpitAction || '',
-      labelWidth: element.value.options.labelWidth || 0,
+      layout: {
+        label: '',
+        minValue: 0,
+        maxValue: 100,
+        showTooltip: true,
+        color: '#FFFFFF',
+        size: 'medium',
+        labelWidth: element.value.options.layout?.labelWidth || 0,
+      },
+      actionParameter: undefined,
     })
   }
+  if (element.value.options.actionParameter) {
+    listenCockpitActionVariable(element.value.options.actionParameter?.name, (value) => {
+      sliderValue.value = value as number
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (element.value.options.actionParameter) {
+    unlistenCockpitActionVariable(element.value.options.actionParameter.name)
+    deleteCockpitActionVariable(element.value.options.actionParameter.name)
+  }
 })
 </script>
 
diff --git a/src/components/custom-widget-elements/Switch.vue b/src/components/custom-widget-elements/Switch.vue
index f37b01725..c63d053da 100644
--- a/src/components/custom-widget-elements/Switch.vue
+++ b/src/components/custom-widget-elements/Switch.vue
@@ -10,17 +10,22 @@
     <v-switch
       v-model="switchValue"
       hide-details
-      :color="element.options.color || '#FFFFFF'"
-      :size="element.options.size"
+      :color="element.options.layout?.color || '#FFFFFF'"
+      :size="element.options.layout?.size"
       :class="{ 'pointer-events-none': widgetStore.editingMode }"
     />
-    <p v-if="element.options.label !== ''" class="ml-3 mb-[3px]">{{ element.options.label }}</p>
+    <p v-if="element.options.layout?.label !== ''" class="ml-3 mb-[3px]">{{ element.options.layout?.label }}</p>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, toRefs } from 'vue'
+import { onMounted, onUnmounted, ref, toRefs } from 'vue'
 
+import {
+  deleteCockpitActionVariable,
+  listenCockpitActionVariable,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
 
@@ -39,11 +44,27 @@ const switchValue = ref(true)
 onMounted(() => {
   if (!props.element.options || Object.keys(props.element.options).length === 0) {
     widgetStore.updateElementOptions(props.element.hash, {
-      color: element.value.options.color || '#FFFFFF',
-      cockpitAction: element.value.options.cockpitAction || '',
-      label: element.value.options.label || '',
+      layout: {
+        align: element.value.options.layout?.align || 'center',
+        size: element.value.options.layout?.size || 'medium',
+        color: element.value.options.layout?.color || '#FFFFFF',
+        label: element.value.options.layout?.label || '',
+      },
+      actionParameter: undefined,
     })
   }
+  if (element.value.options.actionParameter) {
+    listenCockpitActionVariable(element.value.options.actionParameter.name, (value) => {
+      switchValue.value = value as boolean
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (element.value.options.actionParameter) {
+    unlistenCockpitActionVariable(element.value.options.actionParameter.name)
+    deleteCockpitActionVariable(element.value.options.actionParameter.name)
+  }
 })
 </script>
 
diff --git a/src/components/widgets/CustomWidgetBase.vue b/src/components/widgets/CustomWidgetBase.vue
index c09b0cf5d..d4761609e 100644
--- a/src/components/widgets/CustomWidgetBase.vue
+++ b/src/components/widgets/CustomWidgetBase.vue
@@ -2,7 +2,11 @@
   <div
     ref="widgetBase"
     class="h-full rounded-lg overflow-hidden"
-    :class="isWrapped ? 'w-[40px] ml-auto' : 'w-full'"
+    :class="[
+      isWrapped ? 'w-[40px]' : 'w-full',
+      isWrapped && wrapDirection === 'left' ? 'ml-0 mr-auto' : '',
+      isWrapped && wrapDirection === 'right' ? 'mr-0 ml-auto' : '',
+    ]"
     :width="canvasSize.width"
     :height="canvasSize.height"
     :style="[
@@ -32,8 +36,8 @@
         </div>
         <div class="flex">
           <v-menu v-if="widgetStore.editingMode" theme="dark">
-            <template #activator="{ props }">
-              <v-btn size="20" icon="mdi-dots-vertical" variant="text" v-bind="props"></v-btn>
+            <template #activator="{ props: buttonProps }">
+              <v-btn size="20" icon="mdi-dots-vertical" variant="text" v-bind="buttonProps"></v-btn>
             </template>
 
             <v-list>
@@ -125,8 +129,8 @@
       <div />
       <v-btn
         v-if="!widgetStore.editingMode"
-        class="fixed bottom-[2px] left-[2px]"
-        :icon="isWrapped ? 'mdi-chevron-left' : 'mdi-chevron-right'"
+        :class="['fixed bottom-[2px]', wrapDirection === 'left' ? 'left-[2px]' : 'right-[2px]']"
+        :icon="wrapChevronIcon"
         variant="text"
         size="36"
         @click="isWrapped = !isWrapped"
@@ -192,7 +196,7 @@ const { showSnackbar } = useSnackbar()
 
 const props = defineProps<{
   /**
-   *
+   * Widget instance
    */
   widget: CustomWidget
 }>()
@@ -210,6 +214,29 @@ const leftColumnWidth = ref(props.widget.options.leftColumnWidth || 50)
 const isDragging = ref(false)
 const widgetBase = ref<HTMLElement | null>(null)
 const isWrapped = ref(false)
+const wrapDirection = ref<'left' | 'right'>('right')
+
+const updateWrapDirection = (): void => {
+  if (widgetBase.value) {
+    const widgetRect = widgetBase.value.getBoundingClientRect()
+    const screenWidth = window.innerWidth
+    const widgetCenterX = widgetRect.left + widgetRect.width / 2
+
+    if (widgetCenterX < screenWidth / 2) {
+      wrapDirection.value = 'left'
+    } else {
+      wrapDirection.value = 'right'
+    }
+  }
+}
+
+const wrapChevronIcon = computed(() => {
+  if (wrapDirection.value === 'left') {
+    return isWrapped.value ? 'mdi-chevron-right' : 'mdi-chevron-left'
+  } else {
+    return isWrapped.value ? 'mdi-chevron-left' : 'mdi-chevron-right'
+  }
+})
 
 const enableEditing = (): void => {
   editedName.value = props.widget.name
@@ -314,6 +341,7 @@ const enableMovingOnDrag = (): void => {
 }
 
 const disableMovingOnDrag = (): void => {
+  updateWrapDirection()
   widgetStore.allowMovingAndResizing(currentWidget.value.hash, false)
   window.removeEventListener('mouseup', disableMovingOnDrag)
   window.removeEventListener('dragend', disableMovingOnDrag)
@@ -339,7 +367,7 @@ const widgetAdded = (e: SortableEvent.SortableEvent, containerName: string): voi
   }
 }
 
-const { width: windowWidth, height: windowHeight } = useWindowSize()
+const { width: windowWidth } = useWindowSize()
 const canvasSize = computed(() => ({
   width: currentWidget.value.size.width * windowWidth.value,
   height: currentWidget.value.size.height * windowWidth.value,
@@ -369,7 +397,6 @@ const loadWidgetFromStore = (): void => {
 }
 
 onBeforeMount(() => {
-  console.log('🚀 ~ props.widget:', props.widget)
   props.widget.options.elementContainers.forEach((container: CustomWidgetElementContainer) => {
     lastKnownHashes.value.set(
       container.name,
@@ -379,6 +406,8 @@ onBeforeMount(() => {
 })
 
 onMounted(() => {
+  updateWrapDirection()
+  window.addEventListener('resize', updateWrapDirection)
   containerRef.value = document.querySelector('.main')
   loadWidgetFromStore()
   disableMovingOnDrag()
diff --git a/src/libs/actions/data-lake.ts b/src/libs/actions/data-lake.ts
index 0cc437574..acc570ec4 100644
--- a/src/libs/actions/data-lake.ts
+++ b/src/libs/actions/data-lake.ts
@@ -1,3 +1,5 @@
+import { useSnackbar } from '@/composables/snackbar'
+
 /**
  * A variable to be used on a Cockpit action
  * @param { string } id - The id of the variable
@@ -19,6 +21,8 @@ class CockpitActionVariable {
   }
 }
 
+const { showSnackbar } = useSnackbar()
+
 const cockpitActionVariableInfo: Record<string, CockpitActionVariable> = {}
 export const cockpitActionVariableData: Record<string, string | number | boolean> = {}
 const cockpitActionVariableListeners: Record<string, ((value: string | number | boolean) => void)[]> = {}
@@ -33,7 +37,13 @@ export const getCockpitActionVariableInfo = (id: string): CockpitActionVariable
 
 export const createCockpitActionVariable = (variable: CockpitActionVariable): void => {
   if (cockpitActionVariableInfo[variable.id]) {
-    throw new Error(`Cockpit action variable with id '${variable.id}' already exists. Update it instead.`)
+    console.log(`Cockpit action variable with id '${variable.id}' already exists. Renaming to ${variable.name}_new.`)
+    showSnackbar({
+      message: `Cockpit action variable with id '${variable.id}' already exists. Renaming to ${variable.name}_new.`,
+    })
+    variable.id = `${variable.id}_new`
+    variable.name = `${variable.name}_new`
+    cockpitActionVariableInfo[variable.id] = variable
   }
   cockpitActionVariableInfo[variable.id] = variable
 }
@@ -43,6 +53,9 @@ export const updateCockpitActionVariableInfo = (variable: CockpitActionVariable)
     throw new Error(`Cockpit action variable with id '${variable.id}' does not exist. Create it first.`)
   }
   cockpitActionVariableInfo[variable.id] = variable
+  if ((cockpitActionVariableInfo[variable.id] = variable)) {
+    showSnackbar({ message: 'Parameter successfully updated', variant: 'success' })
+  }
 }
 
 export const getCockpitActionVariableData = (id: string): string | number | boolean | undefined => {
@@ -57,6 +70,11 @@ export const setCockpitActionVariableData = (id: string, data: string | number |
 export const deleteCockpitActionVariable = (id: string): void => {
   delete cockpitActionVariableInfo[id]
   delete cockpitActionVariableData[id]
+  if (!cockpitActionVariableInfo[id]) {
+    showSnackbar({ message: 'Parameter successfully deleted', variant: 'success' })
+    return
+  }
+  showSnackbar({ message: 'Parameter could not be deleted', variant: 'error' })
 }
 
 export const listenCockpitActionVariable = (id: string, listener: (value: string | number | boolean) => void): void => {
diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
index 1553f06e7..4ee9a491f 100644
--- a/src/stores/widgetManager.ts
+++ b/src/stores/widgetManager.ts
@@ -88,7 +88,6 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   }
 
   const showElementPropsDrawer = (customWidgetElementHash: string): void => {
-    console.log('🚀 ~ customWidgetElementHash:', customWidgetElementHash)
     const customWidgetElement = getElementByHash(customWidgetElementHash)
     if (!customWidgetElement) {
       showSnackbar({ variant: 'error', message: 'Could not find element with the given hash.', duration: 3000 })
@@ -156,19 +155,47 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     }
 
     const currentPosition = currentViewWidgets[widgetIndex].position
-    const newWidgetHash = uuid4()
-    loadedWidget.hash = newWidgetHash
-    loadedWidget.position = currentPosition
 
+    reassignHashesToWidget(loadedWidget)
+
+    loadedWidget.position = currentPosition
     currentViewWidgets[widgetIndex] = loadedWidget
+
     showSnackbar({ variant: 'success', message: 'Widget loaded successfully with new hash.', duration: 3000 })
   }
 
+  const reassignHashesToWidget = (widget: Widget): void => {
+    const oldToNewHashMap = new Map<string, string>()
+
+    const oldWidgetHash = widget.hash
+    widget.hash = uuid4()
+    oldToNewHashMap.set(oldWidgetHash, widget.hash)
+
+    for (const container of widget.options.elementContainers) {
+      for (const element of container.elements) {
+        reassignHashesToElement(element, oldToNewHashMap)
+      }
+    }
+  }
+
+  const reassignHashesToElement = (element: CustomWidgetElement, hashMap: Map<string, string>): void => {
+    const oldHash = element.hash
+    element.hash = uuid4()
+    hashMap.set(oldHash, element.hash)
+
+    if (element.options && element.options.actionParameter) {
+      const actionParameter = element.options.actionParameter
+      actionParameter.id = `${actionParameter.id}_new`
+      actionParameter.name = `${actionParameter.name}_new`
+    }
+  }
+
   /**
    * Updates the options of a custom widget element by its hash.
    * @param {string} elementHash - The unique identifier of the element.
    * @param {Record<string, any>} newOptions - The new options to merge with the existing ones.
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const updateElementOptions = (elementHash: string, newOptions: Record<string, any>): void => {
     const element = getElementByHash(elementHash)
     if (element) {
@@ -176,8 +203,6 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
         ...element.options,
         ...newOptions,
       }
-    } else {
-      showSnackbar({ variant: 'error', message: 'Element not found.', duration: 3000 })
     }
   }
 
diff --git a/src/types/widgets.ts b/src/types/widgets.ts
index d842bf53c..bc9ecb638 100644
--- a/src/types/widgets.ts
+++ b/src/types/widgets.ts
@@ -59,7 +59,7 @@ export enum CustomWidgetElementType {
 }
 
 /**
- *
+ * Available variables to be used in the Custom Widget creator.
  */
 export enum CustomWidgetVarsType {
   Button = 'boolean',
@@ -72,7 +72,7 @@ export enum CustomWidgetVarsType {
 }
 
 /**
- *
+ * Available containers to be used in the Custom Widget creator.
  */
 export enum CustomWidgetElementContainers {
   Left0 = '0-left',
@@ -97,12 +97,34 @@ export enum CustomWidgetElementContainers {
   Right9 = '9-right',
 }
 
+/**
+ * Options for the Cockpit Actions parameters
+ */
+export interface CockpitActionParameter {
+  /**
+   * Parameter ID, equals to initial name of the parameter
+   */
+  id: string
+  /**
+   * Parameter name
+   */
+  name: string
+  /**
+   * Parameter type
+   */
+  type: 'string' | 'boolean' | 'number'
+  /**
+   * Parameter description
+   */
+  description?: string
+}
+
 /**
  * Options for the Custom Widgets inner elements
  */
 export type CustomWidgetElementOptions = {
   /**
-   *
+   * Custom widget element - Label
    */
   [CustomWidgetElementType.Label]: {
     /**
@@ -110,45 +132,54 @@ export type CustomWidgetElementOptions = {
      */
     hash: string
     /**
-     *
+     * Element name
      */
     name: string
     /**
-     *
+     * Element options
      */
     options: {
       /**
-       *
+       * Variable type
        */
-      cockpitAction: CockpitAction
+      variableType: string
       /**
-       * The label text
-       */
-      text: string
-      /**
-       * The size of the label's font (in pixels)
+       * Action parameter
        */
-      textSize: number
+      actionParameter: CockpitActionParameter
       /**
-       * Alignment of the element
-       */
-      align: 'start' | 'center' | 'end'
-      /**
-       * The weight of the label's font
-       */
-      weight: 'normal' | 'bold' | 'bolder' | 'lighter'
-      /**
-       * The decoration for the label's text
+       * The label text
        */
-      decoration: 'none' | 'underline' | 'line-through' | 'overline'
+      text: string
       /**
-       * The color of the label's text
-       */
-      color: string
+       * Layout options
+       */
+      layout: {
+        /**
+         * The size of the label's font (in pixels)
+         */
+        textSize: number
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The weight of the label's font
+         */
+        weight: 'normal' | 'bold' | 'bolder' | 'lighter'
+        /**
+         * The decoration for the label's text
+         */
+        decoration: 'none' | 'underline' | 'line-through' | 'overline'
+        /**
+         * The color of the label's text
+         */
+        color: string
+      }
     }
   }
   /**
-   *
+   * Custom widget element - Button
    */
   [CustomWidgetElementType.Button]: {
     /**
@@ -156,45 +187,54 @@ export type CustomWidgetElementOptions = {
      */
     hash: string
     /**
-     *
+     * Element name
      */
     name: string
     /**
-     *
+     * Element options
      */
     options: {
       /**
-       *
-       */
-      cockpitAction: CockpitAction
-      /**
-       * Alignment of the element
-       */
-      align: 'start' | 'center' | 'end'
-      /**
-       *
-       */
-      label: string
-      /**
-       *
-       */
-      buttonSize: 'small' | 'default' | 'large'
-      /**
-       *
+       * Variable type
        */
-      backgroundColor: string
+      variableType: string
       /**
-       *
+       * Action parameter
        */
-      textColor: string
+      cockpitAction: CockpitAction
       /**
-       *
-       */
-      variant: 'text' | 'outlined' | 'flat' | 'elevated' | 'tonal' | 'plain'
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The label of the button
+         */
+        label: string
+        /**
+         * The size of the button
+         */
+        buttonSize: 'small' | 'default' | 'large'
+        /**
+         * The color of the button
+         */
+        backgroundColor: string
+        /**
+         * The color of the button's text
+         */
+        textColor: string
+        /**
+         * The variant of the button
+         */
+        variant: 'text' | 'outlined' | 'flat' | 'elevated' | 'tonal' | 'plain'
+      }
     }
   }
   /**
-   *
+   * Custom widget element - Checkbox
    */
   [CustomWidgetElementType.Checkbox]: {
     /**
@@ -202,37 +242,46 @@ export type CustomWidgetElementOptions = {
      */
     hash: string
     /**
-     *
+     * Element name
      */
     name: string
     /**
-     *
+     * Element value
+     */
+    checked: boolean
+    /**
+     * Element options
      */
     options: {
       /**
-       *
+       * Variable type
        */
-      cockpitAction: CockpitAction
+      variableType: string
       /**
-       * Alignment of the element
+       * Action parameter
        */
-      align: 'start' | 'center' | 'end'
+      actionParameter: CockpitActionParameter
       /**
-       *
+       * Layout props for the element
        */
-      checked: boolean
-      /**
-       *
-       */
-      color: string
-      /**
-       *
-       */
-      label: string
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The size of the checkbox
+         */
+        color: string
+        /**
+         * The label of the checkbox
+         */
+        label: string
+      }
     }
   }
   /**
-   *
+   * Custom widget element - Dial
    */
   [CustomWidgetElementType.Dial]: {
     /**
@@ -240,45 +289,54 @@ export type CustomWidgetElementOptions = {
      */
     hash: string
     /**
-     *
+     * Element name
      */
     name: string
     /**
-     *
+     * Element options
      */
     options: {
       /**
-       *
-       */
-      cockpitAction: CockpitAction
-      /**
-       * Alignment of the element
-       */
-      align: 'start' | 'center' | 'end'
-      /**
-       *
-       */
-      size: 'small' | 'medium' | 'large'
-      /**
-       *
-       */
-      color: string
-      /**
-       *
-       */
-      minValue: number
-      /**
-       *
-       */
-      maxValue: number
-      /**
-       *
-       */
-      showValue: boolean
+       * Variable type
+       */
+      variableType: string
+      /**
+       * Action parameter
+       */
+      actionParameter: CockpitActionParameter
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The size of the dial
+         */
+        size: 'small' | 'medium' | 'large'
+        /**
+         * The color of the dial
+         */
+        color: string
+        /**
+         * The minimum value of the dial
+         */
+        minValue: number
+        /**
+         * The maximum value of the dial
+         */
+        maxValue: number
+        /**
+         * The step value of the dial
+         */
+        showValue: boolean
+      }
     }
   }
   /**
-   *
+   * Custom widget element - Dropdown
    */
   [CustomWidgetElementType.Dropdown]: {
     /**
@@ -286,29 +344,53 @@ export type CustomWidgetElementOptions = {
      */
     hash: string
     /**
-     *
+     * Element name
      */
     name: string
     /**
-     *
+     * Element options
      */
     options: {
       /**
-       *
-       */
-      cockpitAction: CockpitAction
-      /**
-       * Alignment of the element
-       */
-      align: 'start' | 'center' | 'end'
-      /**
-       *
-       */
-      options: string[]
+       * Variable type
+       */
+      variableType: string
+      /**
+       * Action parameter
+       */
+      actionParameter: CockpitActionParameter
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        selectorOptions: [
+          {
+            /**
+             * The name of the option
+             */
+            name: string
+            /**
+             * The value of the option
+             */
+            value: string
+          }
+        ]
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         *  The size of the dropdown
+         */
+        width: number
+      }
     }
   }
   /**
-   *
+   * Custom widget element - Slider
    */
   [CustomWidgetElementType.Slider]: {
     /**
@@ -316,53 +398,62 @@ export type CustomWidgetElementOptions = {
      */
     hash: string
     /**
-     *
+     * Element name
      */
     name: string
     /**
-     *
+     * Element options
      */
     options: {
       /**
-       *
-       */
-      cockpitAction: CockpitAction
-      /**
-       * Alignment of the element
-       */
-      align: 'start' | 'center' | 'end'
-      /**
-       *
-       */
-      size: 'small' | 'medium' | 'large'
-      /**
-       *
-       */
-      color: string
-      /**
-       *
-       */
-      minValue: number
-      /**
-       *
-       */
-      maxValue: number
-      /**
-       *
-       */
-      showValue: boolean
-      /**
-       *
-       */
-      label: string
-      /**
-       *
-       */
-      labelWidth: number
+       * Variable type
+       */
+      variableType: string
+      /**
+       * Action parameter
+       */
+      actionParameter: CockpitActionParameter
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The size of the slider
+         */
+        size: 'small' | 'medium' | 'large'
+        /**
+         * The color of the slider
+         */
+        color: string
+        /**
+         * The minimum value of the slider
+         */
+        minValue: number
+        /**
+         * The maximum value of the slider
+         */
+        maxValue: number
+        /**
+         * The step value of the slider
+         */
+        showTooltip: boolean
+        /**
+         * The label of the slider
+         */
+        label: string
+        /**
+         * The width of the label
+         */
+        labelWidth: number
+      }
     }
   }
   /**
-   *
+   * Custom widget element - Switch
    */
   [CustomWidgetElementType.Switch]: {
     /**
@@ -370,33 +461,42 @@ export type CustomWidgetElementOptions = {
      */
     hash: string
     /**
-     *
+     * Element name
      */
     name: string
     /**
-     *
+     * Element options
      */
     options: {
       /**
-       *
-       */
-      cockpitAction: CockpitAction
-      /**
-       * Alignment of the element
-       */
-      align: 'start' | 'center' | 'end'
-      /**
-       *
-       */
-      size: 'small' | 'medium' | 'large'
-      /**
-       *
-       */
-      color: string
-      /**
-       *
-       */
-      label: string
+       * Variable type
+       */
+      variableType: string
+      /**
+       * Action parameter
+       */
+      actionParameter: CockpitActionParameter
+      /**
+       * Layout options
+       */
+      layout: {
+        /**
+         * Alignment of the element
+         */
+        align: 'start' | 'center' | 'end'
+        /**
+         * The size of the switch
+         */
+        size: 'small' | 'medium' | 'large'
+        /**
+         * The color of the switch
+         */
+        color: string
+        /**
+         * The label of the switch
+         */
+        label: string
+      }
     }
   }
 }
@@ -535,42 +635,42 @@ export type MiniWidget = {
 
 export type CustomWidget = {
   /**
-   *
+   * Unique identifier for the widget
    */
   hash: string
   /**
-   *
+   * Component type of the widget
    */
   component: WidgetType
   /**
-   *
+   * 2D position of the widget (top-left corner)
    */
   position: Point2D
   /**
-   *
+   * Size of the widget box
    */
   size: SizeRect2D
   /**
-   *
+   * Editable name for the widget
    */
   name: string
   /**
-   *
+   * Internal options of the widget
    */
   elementContainers: Array<{
     /**
-     *
+     * Editable name for the container
      */
     name: CustomWidgetElementContainers
     /**
-     *
+     * Array of elements that are stored in the container
      */
     elements: CustomWidgetElement[]
   }>
   /**
-   *
+   * Internal options of the widget
    */
-  options: Record<string, any>
+  options: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 export type CustomWidgetElement = {
@@ -586,6 +686,10 @@ export type CustomWidgetElement = {
    * Component type of the element
    */
   component: CustomWidgetElementType
+  /**
+   * If the element is a boolean input or not
+   */
+  isBoolean: boolean
   /**
    * Internal options of the widget
    */
diff --git a/src/views/ConfigurationActionsView.vue b/src/views/ConfigurationActionsView.vue
index 171fea4f7..28407384a 100644
--- a/src/views/ConfigurationActionsView.vue
+++ b/src/views/ConfigurationActionsView.vue
@@ -312,7 +312,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
 import { openSnackbar } from '@/composables/snackbar'
@@ -665,6 +665,7 @@ const saveUrlParameter = (): void => {
 
 onMounted(() => {
   loadSavedActions()
+  console.log('🚀 ~ allSavedActionConfigs:', allSavedActionConfigs.value)
 })
 </script>