WIP

bluerobotics · Sep 19, 2023 · 1b57691 · 1b57691
1 parent f423d0e
commit 1b57691
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 91 deletions.
diff --git a/src/assets/defaults.ts b/src/assets/defaults.ts
@@ -1,7 +1,7 @@
 import { type MiniWidgetProfile, MiniWidgetType } from '@/types/miniWidgets'
 import { type Profile, WidgetType } from '@/types/widgets'
 
-const defaultManagerVars = {
+const defaultWidgetManagerVars = {
   timesMounted: 0,
   configMenuOpen: false,
   allowMoving: false,
@@ -11,6 +11,11 @@ const defaultManagerVars = {
   lastNonMaximizedHeight: 0.36,
 }
 
+const defaultMiniWidgetManagerVars = {
+  timesMounted: 0,
+  configMenuOpen: false,
+}
+
 export const defaultGlobalAddress = process.env.NODE_ENV === 'development' ? 'blueos.local' : window.location.hostname
 export const widgetProfiles: { [key: string]: Profile } = {
   'c2bcf04d-048f-496f-9d78-fc4002608028': {
@@ -26,7 +31,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.DepthHUD,
             position: { x: 0.89, y: 0.23 },
             size: { width: 0.09, height: 0.62 },
-            managerVars: defaultManagerVars,
+            managerVars: defaultWidgetManagerVars,
             options: {
               showDepthValue: true,
               hudColor: '#FFFFFF',
@@ -38,7 +43,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.Attitude,
             position: { x: 0.14, y: 0.2 },
             size: { width: 0.72, height: 0.6 },
-            managerVars: defaultManagerVars,
+            managerVars: defaultWidgetManagerVars,
             options: {
               showCenterAim: true,
               showPitchLines: true,
@@ -54,7 +59,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.CompassHUD,
             position: { x: 0.15, y: 0.84 },
             size: { width: 0.7, height: 0.065 },
-            managerVars: defaultManagerVars,
+            managerVars: defaultWidgetManagerVars,
             options: {
               showYawValue: true,
               hudColor: '#FFF',
@@ -66,7 +71,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.VideoPlayer,
             position: { x: 0, y: 0 },
             size: { width: 1, height: 1 },
-            managerVars: defaultManagerVars,
+            managerVars: defaultWidgetManagerVars,
             options: {
               videoFitStyle: 'cover',
               flipHorizontally: false,
@@ -81,6 +86,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
               {
                 hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
                 component: MiniWidgetType.ViewSelector,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
             ],
@@ -91,6 +97,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
               {
                 hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
                 component: MiniWidgetType.DepthIndicator,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
             ],
@@ -101,16 +108,19 @@ export const widgetProfiles: { [key: string]: Profile } = {
               {
                 hash: '837a6722-1e54-4ace-9a92-d9c5af059d16',
                 component: MiniWidgetType.ArmerButton,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
               {
                 hash: 'c6301929-cdfc-48af-9fdd-c87ce65d7395',
                 component: MiniWidgetType.ModeSelector,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
               {
                 hash: 'a4d0d6ce-9978-40f2-89ab-958f91137177',
                 component: MiniWidgetType.MiniVideoRecorder,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
             ],
@@ -127,7 +137,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.Map,
             position: { x: 0, y: 0 },
             size: { width: 1, height: 1 },
-            managerVars: defaultManagerVars,
+            managerVars: defaultWidgetManagerVars,
             options: {},
           },
         ],
@@ -138,6 +148,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
               {
                 hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
                 component: MiniWidgetType.ViewSelector,
+                managerVars: defaultMiniWidgetManagerVars,
                 options: {},
               },
             ],
@@ -161,16 +172,19 @@ export const miniWidgetsProfiles: MiniWidgetProfile[] = [
           {
             hash: '5b21cf5b-5849-413a-8bee-f1c4b42522f8',
             component: MiniWidgetType.BaseCommIndicator,
+            managerVars: defaultMiniWidgetManagerVars,
             options: {},
           },
           {
             hash: '41354445-2057-4574-80f5-bdc6d394dfe7',
             component: MiniWidgetType.JoystickCommIndicator,
+            managerVars: defaultMiniWidgetManagerVars,
             options: {},
           },
           {
             hash: '7b31c4c4-e273-4f75-b0b7-d56263c4177d',
             component: MiniWidgetType.BatteryIndicator,
+            managerVars: defaultMiniWidgetManagerVars,
             options: {},
           },
         ],

diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
@@ -58,7 +58,7 @@
     </div>
     <div class="w-full h-px my-2 sm bg-slate-800/40" />
     <div
-      ref="currentWidgetsContainer"
+      v-show="widgetMode === WidgetMode.RegularWidgets"
       class="flex flex-col items-center justify-between w-full overflow-y-clip h-[35%]"
     >
       <p class="text-lg font-semibold select-none">Current widgets</p>
@@ -96,6 +96,44 @@
       </VueDraggable>
       <div class="grow" />
     </div>
+    <div
+      v-show="widgetMode === WidgetMode.MiniWidgets"
+      class="flex flex-col items-center justify-between w-full overflow-y-auto h-[35%]"
+    >
+      <p class="text-lg font-semibold select-none">Current mini-widgets</p>
+      <div class="grow" />
+      <div
+        v-for="miniWidgetContainer in store.currentView.miniWidgetContainers"
+        :key="miniWidgetContainer.name"
+        class="w-full"
+      >
+        <span class="w-full text-sm text-left select-none text-slate-400">{{ miniWidgetContainer.name }}</span>
+        <div class="flex flex-col items-center w-full px-2 overflow-x-hidden grow">
+          <TransitionGroup name="fade">
+            <div v-if="miniWidgetContainer.widgets.isEmpty()" class="flex items-center justify-between w-full my-1">
+              ---
+            </div>
+            <div
+              v-for="widget in miniWidgetContainer.widgets"
+              :key="widget.hash"
+              class="flex items-center justify-between w-full my-1"
+            >
+              <div class="flex items-center justify-start w-full overflow-auto">
+                <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap">{{ widget.component }}</p>
+              </div>
+              <div
+                class="flex items-center justify-center w-8 ml-1 text-xs transition-all rounded-sm bg-slate-700 aspect-square mdi mdi-trash-can hover:bg-slate-500"
+              />
+              <div
+                class="flex items-center justify-center w-8 ml-1 text-xs transition-all rounded-sm bg-slate-700 aspect-square mdi mdi-pencil hover:bg-slate-500"
+                @click="widget.managerVars.configMenuOpen = true"
+              />
+            </div>
+          </TransitionGroup>
+        </div>
+      </div>
+      <div class="grow" />
+    </div>
     <div class="w-full h-px mt-4 bg-slate-800/40" />
   </div>
   <div
@@ -142,13 +180,13 @@
       class="flex items-center w-full h-full gap-2 overflow-auto"
     >
       <div
-        v-for="item in availableMiniWidgetTypes"
-        :key="item.hash"
+        v-for="miniWidget in availableMiniWidgetTypes"
+        :key="miniWidget.hash"
         class="flex flex-col items-center justify-center p-2 mx-3 transition-all rounded-md h-5/6 w-fit text-slate-100 cursor-grab"
         :class="{ 'hover:bg-slate-400': !mousePressed }"
       >
         <div class="m-2 pointer-events-none select-none">
-          <MiniWidgetInstantiator :widget-type="item.component" :options="item.options" />
+          <MiniWidgetInstantiator :mini-widget="miniWidget" />
         </div>
       </div>
     </div>
@@ -201,7 +239,15 @@ const emit = defineEmits<{
 
 const availableWidgetTypes = computed(() => Object.values(WidgetType))
 const availableMiniWidgetTypes = computed(() =>
-  Object.values(MiniWidgetType).map((widgetType) => ({ component: widgetType, options: {}, hash: uuid() }))
+  Object.values(MiniWidgetType).map((widgetType) => ({
+    component: widgetType,
+    options: {},
+    hash: uuid(),
+    managerVars: {
+      timesMounted: 0,
+      configMenuOpen: false,
+    },
+  }))
 )
 
 const widgetAddMenuGroupOptions = {

diff --git a/src/components/MiniWidgetContainer.vue b/src/components/MiniWidgetContainer.vue
@@ -14,13 +14,13 @@
       @unchoose="(event) => emit('unchooseMiniWidget', event)"
     >
       <div
-        v-for="item in container.widgets"
-        :key="item.hash"
+        v-for="miniWidget in container.widgets"
+        :key="miniWidget.hash"
         class="rounded-md"
         :class="{ 'cursor-grab': allowEditing, 'hover:bg-slate-400': allowEditing && !mousePressed }"
       >
         <div :class="{ 'select-none pointer-events-none': allowEditing }">
-          <MiniWidgetInstantiator :widget-type="item.component" :options="item.options" />
+          <MiniWidgetInstantiator :mini-widget="miniWidget" />
         </div>
       </div>
     </VueDraggable>
@@ -44,9 +44,9 @@
             class="flex flex-wrap items-center justify-center w-full h-full gap-2"
             @add="trashList = []"
           >
-            <div v-for="item in trashList" :key="item.hash">
+            <div v-for="miniWidget in trashList" :key="miniWidget.hash">
               <div class="pointer-events-none select-none">
-                <MiniWidgetInstantiator :widget-type="item.component" :options="item.options" />
+                <MiniWidgetInstantiator :mini-widget="miniWidget" />
               </div>
             </div>
           </VueDraggable>

diff --git a/src/components/MiniWidgetInstantiator.vue b/src/components/MiniWidgetInstantiator.vue
@@ -1,40 +1,40 @@
 <template>
-  <template v-if="widgetType === MiniWidgetType.ArmerButton">
-    <ArmerButton :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.ArmerButton">
+    <ArmerButton :options="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.BaseCommIndicator">
-    <BaseCommIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.BaseCommIndicator">
+    <BaseCommIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.BatteryIndicator">
-    <BatteryIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.BatteryIndicator">
+    <BatteryIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.DepthIndicator">
-    <DepthIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.DepthIndicator">
+    <DepthIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.VeryGenericIndicator">
-    <VeryGenericIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.VeryGenericIndicator">
+    <VeryGenericIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.JoystickCommIndicator">
-    <JoystickCommIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.JoystickCommIndicator">
+    <JoystickCommIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.MiniVideoRecorder">
-    <MiniVideoRecorder :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.MiniVideoRecorder">
+    <MiniVideoRecorder :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.ModeSelector">
-    <ModeSelector :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.ModeSelector">
+    <ModeSelector :options="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.SatelliteIndicator">
-    <SatelliteIndicator :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.SatelliteIndicator">
+    <SatelliteIndicator :mini-widget="miniWidget" />
   </template>
-  <template v-if="widgetType === MiniWidgetType.ViewSelector">
-    <ViewSelector :options="options" />
+  <template v-if="miniWidget.component === MiniWidgetType.ViewSelector">
+    <ViewSelector :options="miniWidget" />
   </template>
 </template>
 
 <script setup lang="ts">
 import { toRefs } from 'vue'
 
-import { MiniWidgetType } from '@/types/miniWidgets'
+import { type MiniWidget, MiniWidgetType } from '@/types/miniWidgets'
 
 import ArmerButton from './mini-widgets/ArmerButton.vue'
 import BaseCommIndicator from './mini-widgets/BaseCommIndicator.vue'
@@ -49,15 +49,10 @@ import ViewSelector from './mini-widgets/ViewSelector.vue'
 
 const props = defineProps<{
   /**
-   * Type of mini-widget to return
+   * Mini-widget instance
    */
-  widgetType: MiniWidgetType
-  /**
-   * Options to pass to mini-widget
-   */
-  options: Record<string, unknown>
+  miniWidget: MiniWidget
 }>()
 
-const widgetType = toRefs(props).widgetType
-const options = toRefs(props).options
+const miniWidget = toRefs(props).miniWidget
 </script>
diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -65,6 +65,7 @@ import { WebRTCManager } from '@/composables/webRTC'
 import type { Stream } from '@/libs/webrtc/signalling_protocol'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
+import type { MiniWidget } from '@/types/miniWidgets'
 
 const { rtcConfiguration, webRTCSignallingURI } = useMainVehicleStore()
 const { missionName } = useMissionStore()
@@ -73,12 +74,11 @@ console.debug('[WebRTC] Using webrtc-adapter for', adapter.browserDetails)
 
 const props = defineProps<{
   /**
-   * Mini-widget options
+   * Configuration of the widget
    */
-  options: Record<string, unknown>
+  miniWidget: MiniWidget
 }>()
-
-const options = toRefs(props).options
+const miniWidget = toRefs(props).miniWidget
 
 const selectedStream = ref<Stream | undefined>()
 const webRTCManager = new WebRTCManager(webRTCSignallingURI.val, rtcConfiguration)
@@ -98,8 +98,8 @@ const isRecording = computed(() => {
 
 onBeforeMount(async () => {
   // Set initial widget options if they don't exist
-  if (Object.keys(options.value).length === 0) {
-    options.value = {
+  if (Object.keys(miniWidget.value.options).length === 0) {
+    miniWidget.value.options = {
       streamName: undefined as string | undefined,
     }
   }
@@ -227,11 +227,11 @@ const updateCurrentStream = async (stream: Stream | undefined): Promise<SweetAle
       return Swal.fire({ text: 'Could not load media stream.', icon: 'error' })
     }
   }
-  options.value.streamName = selectedStream.value?.name
+  miniWidget.value.options.streamName = selectedStream.value?.name
 }
 
 watch(externalStreams, () => {
-  const savedStreamName: string | undefined = options.value.streamName as string
+  const savedStreamName: string | undefined = miniWidget.value.options.streamName as string
   availableStreams.value = externalStreams.value
   if (!availableStreams.value.find((stream) => stream.id === 'screenStream')) {
     addScreenStream()