diff --git a/src/App.vue b/src/App.vue index e6c8a0bb5..fdb2b2c87 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,18 +2,32 @@ -
+
-
+
-
+
- - - - - - + @click="toggleConfigComponent(menuitem.component)" + >
- +
@@ -173,7 +152,9 @@ - + @@ -270,9 +251,10 @@ import { onClickOutside, useDebounceFn, useFullscreen, useTimestamp } from '@vueuse/core' import { format } from 'date-fns' import Swal from 'sweetalert2' -import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue' +import { computed, DefineComponent, markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue' import { useRoute } from 'vue-router' +import GlassModal from '@/components/GlassModal.vue' import { useInteractionDialog } from '@/composables/interactionDialog' import { coolMissionNames } from '@/libs/funny-name/words' import { @@ -292,19 +274,109 @@ import { datalogger } from './libs/sensors-logging' import { useAppInterfaceStore } from './stores/appInterface' import { useMainVehicleStore } from './stores/mainVehicle' import { useWidgetManagerStore } from './stores/widgetManager' +import ConfigurationAlertsView from './views/ConfigurationAlertsView.vue' +import ConfigurationDevelopmentView from './views/ConfigurationDevelopmentView.vue' +import ConfigurationGeneralView from './views/ConfigurationGeneralView.vue' +import ConfigurationJoystickView from './views/ConfigurationJoystickView.vue' +import ConfigurationTelemetryView from './views/ConfigurationLogsView.vue' +import ConfigurationMissionView from './views/ConfigurationMissionView.vue' +import ConfigurationVideoView from './views/ConfigurationVideoView.vue' + const { showDialog, closeDialog } = useInteractionDialog() const widgetStore = useWidgetManagerStore() const vehicleStore = useMainVehicleStore() -const responsiveStore = useAppInterfaceStore() +const interfaceStore = useAppInterfaceStore() const showConfigurationMenu = ref(false) +type ConfigComponent = DefineComponent, Record, unknown> | null +const currentConfigMenuComponent = ref(null) // Main menu const showMainMenu = ref(false) const isMenuOpen = ref(false) const isSlidingOut = ref(false) const mainMenuStep = ref(1) +const simplifiedMainMenu = ref(false) +const windowHeight = ref(window.innerHeight) + +const configMenu = [ + { + icon: 'mdi-view-dashboard-variant', + title: 'General', + component: markRaw(ConfigurationGeneralView) as ConfigComponent, + }, + { + icon: 'mdi-controller', + title: 'Joystick', + component: markRaw(ConfigurationJoystickView) as ConfigComponent, + }, + { + icon: 'mdi-video', + title: 'Video', + component: markRaw(ConfigurationVideoView) as ConfigComponent, + }, + { + icon: 'mdi-subtitles-outline', + title: 'Telemetry', + component: markRaw(ConfigurationTelemetryView) as ConfigComponent, + }, + { + icon: 'mdi-alert-rhombus-outline', + title: 'Alerts', + component: markRaw(ConfigurationAlertsView) as ConfigComponent, + }, + { + icon: 'mdi-dev-to', + title: 'Dev', + component: markRaw(ConfigurationDevelopmentView) as ConfigComponent, + }, + { + icon: 'mdi-map-marker-path', + title: 'Mission', + component: markRaw(ConfigurationMissionView) as ConfigComponent, + }, +] + +const toggleConfigComponent = (component: ConfigComponent): void => { + if (currentConfigMenuComponent.value === null) { + currentConfigMenuComponent.value = component + return + } + if (currentConfigMenuComponent.value === component) { + currentConfigMenuComponent.value = null + return + } + currentConfigMenuComponent.value = component +} + +watch( + () => windowHeight.value < 450, + (isSmall: boolean) => { + simplifiedMainMenu.value = isSmall + } +) + +const updateWindowHeight = (): void => { + windowHeight.value = window.innerHeight +} + +onMounted(() => { + window.addEventListener('resize', updateWindowHeight) + if (windowHeight.value < 450) { + simplifiedMainMenu.value = true + } +}) + +onBeforeUnmount(() => { + window.removeEventListener('resize', updateWindowHeight) +}) + +const mainMenuWidth = computed(() => { + const width = + interfaceStore.isOnSmallScreen && mainMenuStep.value === 2 ? '60px' : `${interfaceStore.mainMenuWidth}px` + return { width } +}) let requestDisarmConfirmationPopup = false @@ -322,7 +394,7 @@ const openMainMenu = (): void => { if (vehicleStore.isArmed) { showDialog({ title: 'Be careful', - maxWidth: 650, + maxWidth: '650px', message: 'The vehicle is currently armed and it is not recommended to open the main menu.', actions: [ { @@ -367,6 +439,7 @@ const closeMainMenu = (): void => { isSlidingOut.value = false isMenuOpen.value = false mainMenuStep.value = 1 + currentConfigMenuComponent.value = null }, 20) } @@ -392,20 +465,23 @@ onBeforeUnmount(() => { }) 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 + if (interfaceStore.is2xl) return 60 + if (interfaceStore.isXl) return 55 + if (interfaceStore.isLg) return 50 + if (interfaceStore.isMd) return 45 + if (interfaceStore.isSm && windowHeight.value > 700) return 50 + if (interfaceStore.isSm && windowHeight.value < 700) return 40 + if (interfaceStore.isXs && windowHeight.value >= 700) return 50 + return 40 }) 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]' + if (interfaceStore.is2xl) return 'text-[15px]' + if (interfaceStore.isXl) return 'text-[14px]' + if (interfaceStore.isLg) return 'text-[13px]' + if (interfaceStore.isMd) return 'text-[12px]' + if (interfaceStore.isSm) return 'text-[10px]' + if (interfaceStore.isXs && windowHeight.value >= 700) return 'text-[12px]' return 'text-[10px]' }) @@ -418,7 +494,9 @@ watch(isVehicleArmed, (isArmed) => { const mainMenu = ref() onClickOutside(mainMenu, () => { - closeMainMenu() + if (mainMenuStep.value === 1) { + closeMainMenu() + } }) const route = useRoute() @@ -496,8 +574,6 @@ body.hide-cursor { 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; @@ -506,7 +582,7 @@ body.hide-cursor { transform: translateY(-50%); background-color: #4f4f4f33; backdrop-filter: blur(15px); - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15); z-index: 1000; }