Working. Lacks commiting.

bluerobotics · Jul 27, 2023 · 43b080e · 43b080e
1 parent 1b77a1c
commit 43b080e
Show file tree

Hide file tree

Showing 8 changed files with 699 additions and 611 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,52 +1,6 @@
 <template>
   <v-app>
     <v-main>
-      <div id="mainTopBar" class="z-[60] w-full h-12 bg-slate-600/50 absolute flex backdrop-blur-[2px]">
-        <button class="flex items-center justify-center h-full aspect-square" @click="showMainMenu = true">
-          <img class="main-menu-button-image" src="@/assets/blue-robotics-logo.svg" />
-        </button>
-        <div class="flex flex-col items-center justify-center h-full ml-3 mr-1">
-          <p
-            class="overflow-hidden text-lg font-medium leading-none text-white cursor-pointer select-none max-h-9"
-            @click="showMissionOptionsDialog = true"
-          >
-            {{ store.missionName }}
-          </p>
-        </div>
-        <div class="grow" />
-        <Alerter class="max-w-sm min-w-fit" />
-        <div class="flex-1">
-          <MiniWidgetContainer
-            :container="widgetStore.currentMiniWidgetsProfile.containers[0]"
-            :allow-editing="widgetStore.editingMode"
-            align="end"
-          />
-        </div>
-        <div
-          class="flex items-center justify-center m-2 text-sm font-bold text-center text-white select-none min-w-[80px]"
-        >
-          {{ format(timeNow, 'E LLL do HH:mm') }}
-        </div>
-      </div>
-      <div class="z-[60] w-full h-12 bg-slate-600/50 absolute flex bottom-0 backdrop-blur-[2px] justify-between">
-        <MiniWidgetContainer
-          :container="widgetStore.currentMiniWidgetsProfile.containers[1]"
-          :allow-editing="widgetStore.editingMode"
-          align="start"
-        />
-        <div />
-        <MiniWidgetContainer
-          :container="widgetStore.currentMiniWidgetsProfile.containers[2]"
-          :allow-editing="widgetStore.editingMode"
-          align="center"
-        />
-        <div />
-        <MiniWidgetContainer
-          :container="widgetStore.currentMiniWidgetsProfile.containers[3]"
-          :allow-editing="widgetStore.editingMode"
-          align="end"
-        />
-      </div>
       <Dialog v-model:show="showMainMenu">
         <div class="flex flex-col items-center justify-around">
           <v-btn
@@ -106,8 +60,57 @@
         </v-dialog>
       </teleport>
 
-      <div ref="routerSection">
-        <router-view />
+      <div ref="routerSection" class="router-view">
+        <div class="main-view" :class="{ 'edit-mode': widgetStore.editingMode }">
+          <div id="mainTopBar" class="z-[60] w-full h-12 bg-slate-600/50 absolute flex backdrop-blur-[2px]">
+            <button class="flex items-center justify-center h-full aspect-square" @click="showMainMenu = true">
+              <img class="main-menu-button-image" src="@/assets/blue-robotics-logo.svg" />
+            </button>
+            <div class="flex flex-col items-center justify-center h-full ml-3 mr-1">
+              <p
+                class="overflow-hidden text-lg font-medium leading-none text-white cursor-pointer select-none max-h-9"
+                @click="showMissionOptionsDialog = true"
+              >
+                {{ store.missionName }}
+              </p>
+            </div>
+            <div class="grow" />
+            <Alerter class="max-w-sm min-w-fit" />
+            <div class="flex-1">
+              <MiniWidgetContainer
+                :container="widgetStore.currentMiniWidgetsProfile.containers[0]"
+                :allow-editing="widgetStore.editingMode"
+                align="end"
+              />
+            </div>
+            <div
+              class="flex items-center justify-center m-2 text-sm font-bold text-center text-white select-none min-w-[80px]"
+            >
+              {{ format(timeNow, 'E LLL do HH:mm') }}
+            </div>
+          </div>
+          <div class="z-[60] w-full h-12 bg-slate-600/50 absolute flex bottom-0 backdrop-blur-[2px] justify-between">
+            <MiniWidgetContainer
+              :container="widgetStore.currentMiniWidgetsProfile.containers[1]"
+              :allow-editing="widgetStore.editingMode"
+              align="start"
+            />
+            <div />
+            <MiniWidgetContainer
+              :container="widgetStore.currentMiniWidgetsProfile.containers[2]"
+              :allow-editing="widgetStore.editingMode"
+              align="center"
+            />
+            <div />
+            <MiniWidgetContainer
+              :container="widgetStore.currentMiniWidgetsProfile.containers[3]"
+              :allow-editing="widgetStore.editingMode"
+              align="end"
+            />
+          </div>
+          <router-view />
+        </div>
+        <EditMenu v-model:edit-mode="widgetStore.editingMode" v-model:show-grid="widgetStore.showGrid" />
       </div>
     </v-main>
   </v-app>
@@ -130,6 +133,7 @@ import { CockpitAction, registerActionCallback, unregisterActionCallback } from
 import { useMissionStore } from '@/stores/mission'
 
 import Dialog from './components/Dialog.vue'
+import EditMenu from './components/EditMenu.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'
 import Alerter from './components/widgets/Alerter.vue'
 import { useWidgetManagerStore } from './stores/widgetManager'
@@ -178,4 +182,22 @@ body {
 .main-menu-button-image:hover {
   filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(90%);
 }
+.router-view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.main-view {
+  transition: all 0.2s;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  right: 0%;
+  top: 0%;
+}
+.main-view.edit-mode {
+  transform: scale(0.8);
+  right: -10%;
+  top: -10%;
+}
 </style>
diff --git a/src/assets/defaults.ts b/src/assets/defaults.ts
@@ -8,27 +8,39 @@ export const widgetProfiles: { [key: string]: Profile } = {
     layers: [
       {
         hash: 'eddd8e53-88c3-46a9-9e50-909227661f38',
-        name: 'Layer dragonfly',
+        name: 'Video view',
         widgets: [
           {
             hash: '8b1448f5-3f07-4bfc-8a0e-5d491993f858',
-            name: 'Depth HUD widget',
+            name: 'Depth HUD',
             component: WidgetType.DepthHUD,
             position: { x: 0.88, y: 0.23 },
             size: { width: 0.1, height: 0.62 },
-            managerVars: { timesMounted: 0 },
+            managerVars: {
+              timesMounted: 0,
+              lastNonMaximizedX: 0.4,
+              lastNonMaximizedY: 0.32,
+              lastNonMaximizedWidth: 0.2,
+              lastNonMaximizedHeight: 0.36,
+            },
             options: {
               showDepthValue: true,
               hudColor: '#FFFFFF',
             },
           },
           {
             hash: '0230b90e-0c6d-45ba-94e1-994a074b76c7',
-            name: 'Attitude widget',
+            name: 'Attitude HUD',
             component: WidgetType.Attitude,
             position: { x: 0.14, y: 0.2 },
             size: { width: 0.72, height: 0.6 },
-            managerVars: { timesMounted: 0 },
+            managerVars: {
+              timesMounted: 0,
+              lastNonMaximizedX: 0.4,
+              lastNonMaximizedY: 0.32,
+              lastNonMaximizedWidth: 0.2,
+              lastNonMaximizedHeight: 0.36,
+            },
             options: {
               showCenterAim: true,
               showPitchLines: true,
@@ -40,29 +52,35 @@ export const widgetProfiles: { [key: string]: Profile } = {
           },
           {
             hash: '6920ce40-5121-4031-b628-678c5449d94a',
-            name: 'HUD Compass widget',
+            name: 'HUD Compass',
             component: WidgetType.HudCompass,
             position: { x: 0.15, y: 0.84 },
             size: { width: 0.7, height: 0.065 },
-            managerVars: { timesMounted: 0 },
+            managerVars: {
+              timesMounted: 0,
+              lastNonMaximizedX: 0.4,
+              lastNonMaximizedY: 0.32,
+              lastNonMaximizedWidth: 0.2,
+              lastNonMaximizedHeight: 0.36,
+            },
             options: {
               showYawValue: true,
               hudColor: '#FFF',
             },
           },
-        ],
-      },
-      {
-        hash: 'ba3ab6ab-7f34-49be-90e1-63e5b2c3845a',
-        name: 'Main video layer',
-        widgets: [
           {
             hash: '6439e791-3031-4928-aff2-8bd9af713798',
-            name: 'Main video widget',
+            name: 'Video player',
             component: WidgetType.VideoPlayer,
             position: { x: 0, y: 0 },
             size: { width: 1, height: 1 },
-            managerVars: { timesMounted: 0 },
+            managerVars: {
+              timesMounted: 0,
+              lastNonMaximizedX: 0.4,
+              lastNonMaximizedY: 0.32,
+              lastNonMaximizedWidth: 0.2,
+              lastNonMaximizedHeight: 0.36,
+            },
             options: {
               videoFitStyle: 'cover',
               flipHorizontally: false,
@@ -71,6 +89,27 @@ export const widgetProfiles: { [key: string]: Profile } = {
           },
         ],
       },
+      {
+        hash: 'f8a76470-9122-44f7-97f7-4555a59ee9c4',
+        name: 'Map view',
+        widgets: [
+          {
+            hash: '6439e791-3031-4928-aff2-8bd9af713798',
+            name: 'Main Map',
+            component: WidgetType.Map,
+            position: { x: 0, y: 0 },
+            size: { width: 1, height: 1 },
+            managerVars: {
+              timesMounted: 0,
+              lastNonMaximizedX: 0.4,
+              lastNonMaximizedY: 0.32,
+              lastNonMaximizedWidth: 0.2,
+              lastNonMaximizedHeight: 0.36,
+            },
+            options: {},
+          },
+        ],
+      },
     ],
   },
 }