From 6c582e821258cfb383a9625d6990a42dc88b6641 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Tue, 4 Jun 2024 13:49:34 -0300
Subject: [PATCH] App: Implement main menu for new glass UI

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/App.vue | 422 ++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 343 insertions(+), 79 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6a7e549c9..7e9625868 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,52 +1,193 @@
 <template>
   <v-app>
     <v-main>
-      <Dialog v-model:show="showMainMenu">
-        <div class="flex flex-col items-center justify-around">
-          <v-btn
-            v-if="route.name === 'widgets-view'"
-            prepend-icon="mdi-pencil"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            @click="widgetStore.editingMode = !widgetStore.editingMode"
-          >
-            Edit mode
-          </v-btn>
-          <v-btn
-            v-if="route.name !== 'widgets-view'"
-            prepend-icon="mdi-send"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            to="/"
-          >
-            Flight
-          </v-btn>
-          <v-btn
-            v-if="route.name !== 'Mission planning'"
-            prepend-icon="mdi-map-marker-radius"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            to="/mission-planning"
-          >
-            Mission planning
-          </v-btn>
-          <v-btn
-            prepend-icon="mdi-cog"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            @click="showConfigurationMenu = true"
-          >
-            Configuration
-          </v-btn>
-          <v-btn
-            :prepend-icon="fullScreenToggleIcon"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            @click="toggleFullscreen"
-          >
-            {{ isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen' }}
-          </v-btn>
+      <transition name="slide-in-left">
+        <div v-if="showMainMenu" ref="mainMenu" class="left-menu slide-in">
+          <v-window v-model="mainMenuStep" class="h-full w-full">
+            <v-window-item :value="1" class="h-full">
+              <div class="flex flex-col pt-5 pb-6 h-full justify-between gap-y-10">
+                <GlassButton
+                  v-if="route.name === 'widgets-view'"
+                  label="Edit Mode"
+                  :selected="widgetStore.editingMode"
+                  :label-class="menuLabelSize"
+                  variant="round"
+                  :width="buttonSize"
+                  icon="mdi-pencil"
+                  icon-class="2xl:ml-[3px] xl:ml-[2px] lg:ml-[1px] md:ml-[1px] sm:ml-[1px] ml-[1px]"
+                  :disabled="false"
+                  @click="
+                    () => {
+                      widgetStore.editingMode = !widgetStore.editingMode
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  v-if="route.name !== 'widgets-view'"
+                  label="Flight"
+                  :label-class="menuLabelSize"
+                  variant="round"
+                  :width="buttonSize"
+                  icon="mdi-send"
+                  icon-class="2xl:mt-[1px] 2xl:ml-[5px] xl:mt-[1px] xl:ml-[4px] lg:mt-[2px] lg:ml-[3px] md:mt-[1px] md:ml-[5px] sm:mt-[1px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                  :disabled="false"
+                  :selected="$route.name === 'Flight'"
+                  @click="
+                    () => {
+                      $router.push('/')
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  v-if="route.name !== 'Mission planning'"
+                  label="Mission Planning"
+                  :label-class="menuLabelSize"
+                  variant="round"
+                  icon="mdi-map-marker-radius"
+                  icon-class="2xl:ml-[3px] xl:ml-[2px] lg:ml-[2.5px] md:ml-[1px] sm:ml-[1px] ml-[1px]"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="$route.name === 'Mission planning'"
+                  @click="
+                    () => {
+                      $router.push('/mission-planning')
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  label="Configuration"
+                  :label-class="menuLabelSize"
+                  icon="mdi-cog"
+                  icon-class="2xl:mt-[2px] 2xl:ml-[2px] xl:mt-[1.5px] xl:ml-[1px] lg:mt-[2px] lg:ml-[2px] md:mt-[1px] md:ml-[1px] sm:mt-[0.5px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                  variant="round"
+                  button-class="-mt-1"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="showConfigurationMenu"
+                  @click="mainMenuStep = 2"
+                />
+                <GlassButton
+                  :label="isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"
+                  :label-class="menuLabelSize"
+                  :icon="fullScreenToggleIcon"
+                  icon-class="2xl:mt-[1px] 2xl:ml-[3px] xl:mt-[1px] xl:ml-[2px] lg:mt-[2px] lg:ml-[3px] md:mt-[1px] md:ml-[2px] sm:mt-[1px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                  variant="round"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="false"
+                  @click="
+                    () => {
+                      toggleFullscreen()
+                      closeMainMenu()
+                    }
+                  "
+                />
+              </div>
+            </v-window-item>
+            <v-window-item :value="2" class="h-full w-full">
+              <div class="flex flex-col pb-2 w-full h-full justify-between gap-y-1">
+                <GlassButton
+                  label="General"
+                  :label-class="menuLabelSize"
+                  icon="mdi-view-dashboard-variant"
+                  icon-class="-mb-3 2xl:mt-[2px] 2xl:ml-[2px] xl:mt-[1.5px] xl:ml-[1px] lg:mt-[2px] lg:ml-[2px] md:mt-[1px] md:ml-[1px] sm:mt-[0.5px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                  @click="showConfigurationMenu = true"
+                />
+                <GlassButton
+                  label="Joystick"
+                  :label-class="menuLabelSize"
+                  icon="mdi-controller"
+                  icon-class="-mb-3 2xl:mt-[2px] 2xl:ml-[2px] xl:mt-[1.5px] xl:ml-[1px] lg:mt-[2px] lg:ml-[2px] md:mt-[1px] md:ml-[1px] sm:mt-[0.5px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Video"
+                  :label-class="menuLabelSize"
+                  icon="mdi-video"
+                  icon-class="-mb-3 2xl:mt-[2px] 2xl:ml-[2px] xl:mt-[1.5px] xl:ml-[1px] lg:mt-[2px] lg:ml-[2px] md:mt-[1px] md:ml-[1px] sm:mt-[0.5px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Telemetry"
+                  :label-class="menuLabelSize"
+                  icon="mdi-subtitles-outline"
+                  icon-class="-mb-3 2xl:mt-[2px] 2xl:ml-[2px] xl:mt-[1.5px] xl:ml-[1px] lg:mt-[2px] lg:ml-[2px] md:mt-[1px] md:ml-[1px] sm:mt-[0.5px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Alerts"
+                  :label-class="menuLabelSize"
+                  icon="mdi-alert-rhombus-outline"
+                  icon-class="-mb-3 2xl:mt-[2px] 2xl:ml-[2px] xl:mt-[1.5px] xl:ml-[1px] lg:mt-[2px] lg:ml-[2px] md:mt-[1px] md:ml-[1px] sm:mt-[0.5px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Dev"
+                  :label-class="menuLabelSize"
+                  icon="mdi-dev-to"
+                  icon-class="-mb-3 2xl:mt-[2px] 2xl:ml-[2px] xl:mt-[1.5px] xl:ml-[1px] lg:mt-[2px] lg:ml-[2px] md:mt-[1px] md:ml-[1px] sm:mt-[0.5px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Mission"
+                  :label-class="menuLabelSize"
+                  icon="mdi-map-marker-path"
+                  icon-class="-mb-2 2xl:mt-[2px] 2xl:ml-[2px] xl:mt-[1.5px] xl:ml-[1px] lg:mt-[2px] lg:ml-[2px] md:mt-[1px] md:ml-[1px] sm:mt-[0.5px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <div class="flex flex-col justify-center align-center">
+                  <v-divider width="70%" class="mb-4" />
+                  <GlassButton
+                    :label-class="menuLabelSize"
+                    icon="mdi-arrow-left"
+                    icon-class="xl:mt-[2px] xl:ml-[1px] lg:mt-[2px] lg:ml-[1px] md:mt-[1px] md:ml-[1px] sm:mt-[0.5px] sm:ml-[1px] mt-[1px] ml-[1px]"
+                    variant="round"
+                    :width="buttonSize / 2.4"
+                    :disabled="false"
+                    :selected="false"
+                    @click="mainMenuStep = 1"
+                  />
+                </div>
+              </div>
+            </v-window-item>
+          </v-window>
         </div>
-      </Dialog>
+      </transition>
+
       <teleport to="body">
-        <v-dialog v-model="showConfigurationMenu" transition="dialog-bottom-transition" width="100%" height="100%">
-          <ConfigurationMenu />
-        </v-dialog>
+        <GlassModal :is-visible="showConfigurationMenu"><ConfigurationGeneralView /></GlassModal>
       </teleport>
 
       <teleport to="body">
@@ -72,7 +213,7 @@
           <div id="mainTopBar" class="bar top-bar">
             <button
               class="flex items-center justify-center h-full aspect-square top-bar-hamburger"
-              @click="openMainMenu()"
+              @click="toggleMainMenu"
             >
               <span class="text-3xl transition-all mdi mdi-menu text-slate-300 hover:text-slate-50" />
             </button>
@@ -143,17 +284,11 @@
 import { onClickOutside, useDebounceFn, useFullscreen, useTimestamp } from '@vueuse/core'
 import { format } from 'date-fns'
 import Swal from 'sweetalert2'
-import {
-  // type AsyncComponentLoader,
-  computed,
-  onBeforeUnmount,
-  // defineAsyncComponent,
-  ref,
-  watch,
-} from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 import ConfigurationMenu from '@/components/ConfigurationMenu.vue'
+import { useInteractionDialog } from '@/composables/interactionDialog'
 import { coolMissionNames } from '@/libs/funny-name/words'
 import {
   availableCockpitActions,
@@ -163,54 +298,130 @@ import {
 import { useMissionStore } from '@/stores/mission'
 
 import AltitudeSlider from './components/AltitudeSlider.vue'
-import Dialog from './components/Dialog.vue'
 import EditMenu from './components/EditMenu.vue'
+import GlassButton from './components/GlassButton.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'
 import SlideToConfirm from './components/SlideToConfirm.vue'
 import Alerter from './components/widgets/Alerter.vue'
 import { datalogger } from './libs/sensors-logging'
+import { useAppInterfaceStore } from './stores/appInterface'
 import { useMainVehicleStore } from './stores/mainVehicle'
 import { useWidgetManagerStore } from './stores/widgetManager'
+const { showDialog, closeDialog } = useInteractionDialog()
 
 const widgetStore = useWidgetManagerStore()
 const vehicleStore = useMainVehicleStore()
+const responsiveStore = useAppInterfaceStore()
 
 const showConfigurationMenu = ref(false)
 
 // Main menu
 const showMainMenu = ref(false)
+const isMenuOpen = ref(false)
+const isSlidingOut = ref(false)
+const mainMenuStep = ref(1)
+
+let requestDisarmConfirmationPopup = false
+
+const toggleMainMenu = (): void => {
+  if (isMenuOpen.value === true) {
+    closeMainMenu()
+  } else {
+    openMainMenu()
+  }
+}
 
 // When a isVehicleArmed change its value a watcher call Swal.close, this flag is
 // used to avoid closing others Swal instances instead of the one intended
-let requestDisarmConfirmationPopup = false
 const openMainMenu = (): void => {
-  if (!vehicleStore.isArmed) {
+  if (vehicleStore.isArmed) {
+    showDialog({
+      title: 'Be careful',
+      maxWidth: 650,
+      message: 'The vehicle is currently armed and it is not recommended to open the main menu.',
+      actions: [
+        {
+          text: 'Continue anyway',
+          action: () => {
+            showMainMenu.value = true
+            closeDialog()
+          },
+        },
+        {
+          text: 'Disarm vehicle',
+          action: () => {
+            disarmVehicle()
+          },
+        },
+      ],
+      variant: 'warning',
+    }).then((result) => {
+      if (result.isConfirmed && vehicleStore.isArmed) {
+        vehicleStore.disarm().then(() => {
+          showMainMenu.value = true
+        })
+      } else if (result.dismiss) {
+        showMainMenu.value = true
+        isMenuOpen.value = true
+      }
+      requestDisarmConfirmationPopup = false
+    })
+  } else {
     showMainMenu.value = true
-    return
+    isMenuOpen.value = true
   }
+}
 
-  requestDisarmConfirmationPopup = true
-  Swal.fire({
-    title: 'Be careful',
-    text: 'The vehicle is currently armed, it is not recommended to open the main menu.',
-    icon: 'warning',
-    showCancelButton: true,
-    showConfirmButton: true,
-    cancelButtonText: 'Continue anyway',
-    confirmButtonText: 'Disarm vehicle',
-  }).then((result) => {
-    // Opens the main menu only after disarming by the slider is confirmed
-    if (result.isConfirmed && vehicleStore.isArmed) {
-      vehicleStore.disarm().then(() => {
-        showMainMenu.value = true
-      })
-    } else if (result.dismiss === Swal.DismissReason.cancel) {
-      showMainMenu.value = true
-    }
-    requestDisarmConfirmationPopup = false
+// Close Main Menu Logic
+const closeMainMenu = (): void => {
+  isSlidingOut.value = true
+  setTimeout(() => {
+    showMainMenu.value = false
+    isSlidingOut.value = false
+    isMenuOpen.value = false
+    mainMenuStep.value = 1
+  }, 20)
+}
+
+const disarmVehicle = (): void => {
+  vehicleStore.disarm().then(() => {
+    showMainMenu.value = true
   })
+  closeDialog()
+}
+
+const handleEscKey = (event: KeyboardEvent): void => {
+  if (event.key === 'Escape' && showMainMenu.value) {
+    closeMainMenu()
+  }
 }
 
+onMounted(() => {
+  window.addEventListener('keydown', handleEscKey)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleEscKey)
+})
+
+const buttonSize = computed(() => {
+  if (responsiveStore.is2xl) return 60
+  if (responsiveStore.isXl) return 55
+  if (responsiveStore.isLg) return 50
+  if (responsiveStore.isMd) return 45
+  if (responsiveStore.isSm) return 30
+  return 25
+})
+
+const menuLabelSize = computed(() => {
+  if (responsiveStore.is2xl) return 'text-[16px]'
+  if (responsiveStore.isXl) return 'text-[15px]'
+  if (responsiveStore.isLg) return 'text-[13px]'
+  if (responsiveStore.isMd) return 'text-[12px]'
+  if (responsiveStore.isSm) return 'text-[10px]'
+  return 'text-[10px]'
+})
+
 const isVehicleArmed = computed(() => vehicleStore.isArmed)
 watch(isVehicleArmed, (isArmed) => {
   if (requestDisarmConfirmationPopup && !isArmed) {
@@ -219,7 +430,9 @@ watch(isVehicleArmed, (isArmed) => {
 })
 
 const mainMenu = ref()
-onClickOutside(mainMenu, () => (showMainMenu.value = false))
+onClickOutside(mainMenu, () => {
+  closeMainMenu()
+})
 
 const route = useRoute()
 const routerSection = ref()
@@ -276,7 +489,6 @@ onBeforeUnmount(() => unregisterActionCallback(bottomBarToggleCallbackId))
 datalogger.startLogging()
 
 // Dynamic styles
-
 const currentTopBarHeightPixels = computed(() => `${widgetStore.currentTopBarHeightPixels}px`)
 const currentBottomBarHeightPixels = computed(() => `${widgetStore.currentBottomBarHeightPixels}px`)
 </script>
@@ -287,14 +499,62 @@ body {
   /* Removes the scrollbar */
   overflow: hidden !important;
 }
+
 body.hide-cursor {
   cursor: none;
 }
+
+.left-menu {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  @apply 2xl:w-[130px] 2xl:h-auto xl:w-[121px] xl:h-auto lg:w-[102px] lg:h-auto md:w-[95px] md:h-auto sm:w-[78px] sm:h-auto;
+  padding-top: 5px;
+  border-radius: 0 20px 20px 0;
+  border: 1px #cbcbcb33 solid;
+  border-left: none;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  background-color: #4f4f4f33;
+  backdrop-filter: blur(15px);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%) translateY(-50%);
+  }
+  to {
+    transform: translateX(0) translateY(-50%);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0) translateY(-50%);
+  }
+  to {
+    transform: translateX(-100%) translateY(-50%);
+  }
+}
+
+.slide-in-left-enter-active {
+  animation: slideInLeft 300ms ease forwards;
+}
+
+.slide-in-left-leave-active {
+  animation: slideOutLeft 300ms ease forwards;
+}
+
 .router-view {
   width: 100%;
   height: 100%;
   position: relative;
 }
+
 .main-view {
   transition: all 0.2s;
   width: 100%;
@@ -303,11 +563,13 @@ body.hide-cursor {
   right: 0%;
   top: 0%;
 }
+
 .main-view.edit-mode {
   transform: scale(0.8);
   right: -10%;
   top: -10%;
 }
+
 .swal2-container {
   z-index: 10000;
 }
@@ -316,11 +578,13 @@ body.hide-cursor {
 .fade-leave-active {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
   transform: translate(0, 100px);
 }
+
 .bottom-container {
   position: absolute;
   bottom: v-bind('currentBottomBarHeightPixels');
@@ -328,7 +592,7 @@ body.hide-cursor {
   display: flex;
   flex-direction: column;
   align-items: center;
-  z-index: 60; /* Adjust z-index as needed */
+  z-index: 60;
 }
 
 .bar {