Mini-widgets: Armer-button: Disable button on edit mode

Signed-off-by: Arturo Manzoli <[email protected]>

src/components/mini-widgets/ArmerButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     class="relative flex items-center justify-center w-32 p-1 rounded-md shadow-inner h-9 bg-slate-800/60"
-    @click="vehicleStore.isArmed ? disarm() : arm()"
+    @click="!widgetStore.editingMode && (vehicleStore.isArmed ? disarm() : arm())"
   >
     <div
       class="absolute top-auto flex items-center px-1 rounded-[4px] shadow transition-all w-[70%] h-[80%]"
@@ -24,8 +24,10 @@
 import { canByPassCategory, EventCategory, slideToConfirm } from '@/libs/slide-to-confirm'
 import { tryOrAlert } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
 
 const vehicleStore = useMainVehicleStore()
+const widgetStore = useWidgetManagerStore()
 
 const arm = (): void => {
   const tryToArm = async (): Promise<void> => tryOrAlert(vehicleStore.arm)

src/components/widgets/CustomWidgetBase.vue

@@ -184,6 +184,7 @@
 
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
+import saveAs from 'file-saver'
 import type SortableEvent from 'sortablejs'
 import { v4 as uuid } from 'uuid'
 import { computed, nextTick, onBeforeMount, onMounted, ref, toRefs, watch } from 'vue'
@@ -264,7 +265,7 @@ const saveName = (): void => {
   }
 }
 
-const loadWidgetFromBrw = (event: Event): void => {
+const loadWidget = (event: Event): void => {
   const file = (event.target as HTMLInputElement).files?.[0]
   if (!file) {
     showSnackbar({ variant: 'error', message: 'No file selected.', duration: 3000 })
@@ -290,20 +291,26 @@ const handleOptionClick = (option: string): void => {
   if (option === 'options') {
     widgetStore.widgetManagerVars(currentWidget.value.hash).configMenuOpen = true
   } else if (option === 'save') {
-    widgetStore.downloadWidgetAsBrw(currentWidget.value)
+    downloadWidget()
   } else if (option === 'load') {
     const input = document.createElement('input')
     input.type = 'file'
-    input.accept = '.brw'
+    input.accept = '.widget'
 
     input.addEventListener('change', (event: Event) => {
-      loadWidgetFromBrw(event)
+      loadWidget(event)
     })
 
     input.click()
   }
 }
 
+const downloadWidget = (): void => {
+  const blob = new Blob([JSON.stringify(widget.value)], { type: 'application/json;charset=utf-8' })
+  const fileName = `${widget.value.name}.widget`
+  saveAs(blob, fileName)
+}
+
 const startResize = (event: MouseEvent): void => {
   if (!widgetStore.editingMode) return
 

src/stores/widgetManager.ts

@@ -150,12 +150,6 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     )
   }
 
-  const downloadWidgetAsBrw = (widget: Widget): void => {
-    const blob = new Blob([JSON.stringify(widget)], { type: 'application/json;charset=utf-8' })
-    const fileName = `${widget.name}.brw`
-    saveAs(blob, fileName)
-  }
-
   const loadWidgetFromFile = (widgetHash: string, loadedWidget: Widget): void => {
     const currentViewWidgets = currentProfile.value.views[currentViewIndex.value].widgets
     const widgetIndex = currentViewWidgets.findIndex((widget) => widget.hash === widgetHash)
@@ -909,7 +903,6 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     elementToShowOnDrawer,
     updateElementOptions,
     removeElementFromCustomWidget,
-    downloadWidgetAsBrw,
     loadWidgetFromFile,
     widgetToEdit,
     editWidgetByHash,