Use new configMenuOpen variable on widgets to toggle config menu

bluerobotics · Sep 6, 2023 · c76aaa4 · c76aaa4
1 parent 9110569
commit c76aaa4
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 78 deletions.
diff --git a/src/components/widgets/Attitude.vue b/src/components/widgets/Attitude.vue
@@ -1,16 +1,8 @@
 <template>
   <div class="main">
     <canvas ref="canvasRef" :width="canvasSize.width" :height="canvasSize.height" />
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
   </div>
-  <v-dialog v-model="showOptionsDialog" min-width="400" max-width="35%">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
     <v-card class="pa-2">
       <v-card-title>Attitude widget config</v-card-title>
       <v-card-text>
@@ -99,7 +91,6 @@ type RenderVariables = {
   pitchLinesHeights: { [angle: string]: number }
 }
 
-const showOptionsDialog = ref(false)
 const rollAngleDeg = ref(0)
 const pitchAngleDeg = ref(0)
 

diff --git a/src/components/widgets/Compass.vue b/src/components/widgets/Compass.vue
@@ -13,7 +13,7 @@
       draggable="false"
     />
   </div>
-  <Dialog v-model:show="showConfigurationMenu" class="w-72">
+  <Dialog v-model:show="widget.managerVars.configMenuOpen" class="w-72">
     <div class="w-full h-full">
       <div class="flex flex-col items-center justify-around">
         <div class="flex items-center justify-between w-full my-1">
@@ -23,11 +23,10 @@
       </div>
     </div>
   </Dialog>
-  <span class="options-btn mdi mdi-dots-vertical" @click="showConfigurationMenu = !showConfigurationMenu" />
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, toRefs } from 'vue'
+import { computed, onBeforeMount, toRefs } from 'vue'
 
 import Dialog from '@/components/Dialog.vue'
 import Dropdown from '@/components/Dropdown.vue'
@@ -49,7 +48,6 @@ enum HeadingStyle {
 }
 const headingOptions = Object.values(HeadingStyle)
 
-const showConfigurationMenu = ref(false)
 const props = defineProps<{
   /**
    * Widget reference

diff --git a/src/components/widgets/CompassHUD.vue b/src/components/widgets/CompassHUD.vue
@@ -1,16 +1,8 @@
 <template>
   <div class="main">
     <canvas ref="canvasRef" :width="canvasSize.width" :height="canvasSize.height" />
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
   </div>
-  <v-dialog v-model="showOptionsDialog" min-width="400" max-width="35%">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
     <v-card class="pa-2">
       <v-card-title>HUD Compass widget config</v-card-title>
       <v-card-text>
@@ -56,7 +48,6 @@ const widget = toRefs(props).widget
 
 // Pre-defined HUD colors
 const colorSwatches = ref([['#FFFFFF'], ['#FF2D2D'], ['#0ADB0ACC']])
-const showOptionsDialog = ref(false)
 
 // prettier-ignore
 const angleRender = (angle: number): string => {

diff --git a/src/components/widgets/DepthHUD.vue b/src/components/widgets/DepthHUD.vue
@@ -1,16 +1,8 @@
 <template>
   <div class="main">
     <canvas ref="canvasRef" :width="canvasSize.width" :height="canvasSize.height" />
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
   </div>
-  <v-dialog v-model="showOptionsDialog" min-width="400" max-width="35%">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
     <v-card class="pa-2">
       <v-card-title>Depth HUD config</v-card-title>
       <v-card-text>
@@ -56,7 +48,6 @@ const widget = toRefs(props).widget
 
 // Pre-defined HUD colors
 const colorSwatches = ref([['#FF2D2D'], ['#0ADB0ACC'], ['#FFFFFF']])
-const showOptionsDialog = ref(false)
 
 type RenderVariables = {
   /**

diff --git a/src/components/widgets/ImageView.vue b/src/components/widgets/ImageView.vue
@@ -1,15 +1,7 @@
 <template>
   <div class="w-full h-full">
     <img :src="src" draggable="false" />
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
-    <v-dialog v-model="showOptionsDialog" min-width="400" max-width="35%">
+    <v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
       <v-card class="pa-2">
         <v-card-title>Image URL</v-card-title>
         <v-card-text>
@@ -25,21 +17,20 @@
           </div>
         </v-card-text>
         <v-card-actions>
-          <v-btn color="primary" text @click="showOptionsDialog = false">Close</v-btn>
+          <v-btn color="primary" text @click="widget.managerVars.configMenuOpen = false">Close</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, toRefs } from 'vue'
+import { computed, onBeforeMount, toRefs } from 'vue'
 
 import type { Widget } from '@/types/widgets'
 
 import Dropdown from '../Dropdown.vue'
 
-const showOptionsDialog = ref(false)
 const props = defineProps<{
   /**
    * Widget reference

diff --git a/src/components/widgets/Indicators.vue b/src/components/widgets/Indicators.vue
@@ -1,13 +1,5 @@
 <template>
   <v-sheet rounded color="rgba(255, 255, 255, 0.9)" class="indications">
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
     <template v-if="widget.options.showDebugInfo">
       <p class="font-weight-bold text-body-1">Vehicle online?</p>
       <p class="text-body-1">{{ store.isVehicleOnline }}</p>
@@ -41,7 +33,7 @@
       </p>
     </template>
   </v-sheet>
-  <v-dialog v-model="showOptionsDialog" width="auto">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" width="auto">
     <v-card class="pa-2">
       <v-card-title>Indicators widget config</v-card-title>
       <v-card-text>
@@ -55,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref, toRefs } from 'vue'
+import { onBeforeMount, toRefs } from 'vue'
 
 import { degrees } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
@@ -70,7 +62,6 @@ const props = defineProps<{
 }>()
 
 const widget = toRefs(props).widget
-const showOptionsDialog = ref(false)
 
 onBeforeMount(() => {
   // Set initial widget options if they don't exist

diff --git a/src/components/widgets/Map.vue b/src/components/widgets/Map.vue
@@ -9,14 +9,6 @@
     class="map"
     @ready="onLeafletReady"
   >
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
     <v-btn
       class="absolute left-0 m-3 bottom-12 bg-slate-50"
       elevation="2"
@@ -90,7 +82,7 @@
     <l-polyline v-if="widget.options.showVehiclePath" :lat-lngs="vehicleLatLongHistory" />
     <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
   </l-map>
-  <v-dialog v-model="showOptionsDialog" width="auto">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" width="auto">
     <v-card class="pa-2">
       <v-card-title>Map widget settings</v-card-title>
       <v-card-text>
@@ -271,8 +263,6 @@ onBeforeMount(() => {
 onBeforeUnmount(() => {
   clearInterval(followInterval)
 })
-
-const showOptionsDialog = ref(false)
 </script>
 
 <style>

diff --git a/src/components/widgets/VideoPlayer.vue b/src/components/widgets/VideoPlayer.vue
@@ -6,16 +6,8 @@
     <video ref="videoElement" muted autoplay playsinline disablePictureInPicture>
       Your browser does not support the video tag.
     </video>
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
   </div>
-  <v-dialog v-model="showOptionsDialog" width="auto">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" width="auto">
     <v-card class="pa-2">
       <v-card-title>Video widget config</v-card-title>
       <v-card-text>
@@ -88,7 +80,6 @@ const props = defineProps<{
 const widget = toRefs(props).widget
 
 const selectedStream = ref<Stream | undefined>()
-const showOptionsDialog = ref(false)
 const videoElement = ref<HTMLVideoElement | undefined>()
 const webRTCManager = new WebRTCManager(webRTCSignallingURI.val, rtcConfiguration)
 const { availableStreams, mediaStream, signallerStatus, streamStatus } = webRTCManager.startStream(selectedStream)