Views: Mission-planning: Add context menu and mission editing

Signed-off-by: Arturo Manzoli <[email protected]>

src/components/widgets/Map.vue

@@ -571,7 +571,7 @@ const topProgressBarDisplacement = computed(() => {
 })
 </script>
 
-<style>
+<style scoped>
 .page-base {
   min-height: 100vh;
   display: flex;

src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 
 import AboutViewVue from '../views/AboutView.vue'
-import MissionPlanningView from '../views/MissionPlanningView.vue'
+import MissionPlanningView from '../views/MissionPlanning/MissionPlanningView.vue'
 import WidgetsView from '../views/WidgetsView.vue'
 
 const router = createRouter({

src/stores/mission.ts

@@ -1,4 +1,5 @@
 import { useStorage } from '@vueuse/core'
+import { Path } from 'leaflet'
 import { defineStore } from 'pinia'
 import { reactive, ref, watch } from 'vue'
 
@@ -7,7 +8,7 @@ import { useBlueOsStorage } from '@/composables/settingsSyncer'
 import { askForUsername } from '@/composables/usernamePrompDialog'
 import { eventCategoriesDefaultMapping } from '@/libs/slide-to-confirm'
 import { reloadCockpit } from '@/libs/utils'
-import type { Waypoint, WaypointCoordinates } from '@/types/mission'
+import type { Survey, Waypoint, WaypointCoordinates } from '@/types/mission'
 
 import { useMainVehicleStore } from './mainVehicle'
 
@@ -30,6 +31,28 @@ export const useMissionStore = defineStore('mission', () => {
 
   const currentPlanningWaypoints = reactive<Waypoint[]>([])
 
+  const surveys = reactive<Survey[]>([])
+
+  const paths = reactive<Path[]>([])
+
+  const addSurvey = (survey: Survey): void => {
+    surveys.push(survey)
+  }
+
+  const updateSurvey = (id: string, updatedSurvey: Partial<Survey>): void => {
+    const index = surveys.findIndex((s) => s.id === id)
+    if (index !== -1) {
+      surveys[index] = { ...surveys[index], ...updatedSurvey }
+    }
+  }
+
+  const removeSurvey = (id: string): void => {
+    const index = surveys.findIndex((s) => s.id === id)
+    if (index !== -1) {
+      surveys.splice(index, 1)
+    }
+  }
+
   const moveWaypoint = (id: string, newCoordinates: WaypointCoordinates): void => {
     const waypoint = currentPlanningWaypoints.find((w) => w.id === id)
     if (waypoint === undefined) {
@@ -89,6 +112,14 @@ export const useMissionStore = defineStore('mission', () => {
     { immediate: true }
   )
 
+  const clearWaypoints = (): void => {
+    currentPlanningWaypoints.splice(0)
+  }
+
+  const clearPaths = (): void => {
+    paths.splice(0)
+  }
+
   return {
     username,
     lastConnectedUser,
@@ -101,5 +132,11 @@ export const useMissionStore = defineStore('mission', () => {
     slideEventsCategoriesRequired,
     moveWaypoint,
     clearMission,
+    surveys,
+    addSurvey,
+    updateSurvey,
+    removeSurvey,
+    clearWaypoints,
+    clearPaths,
   }
 })

src/types/mission.ts

@@ -21,6 +21,7 @@ export type Waypoint = {
    * Unique identification for the waypoint.
    */
   id: string
+
   /**
    * Geographical coordinates of the waypoint in the following format: [latitude, longitude].
    */
@@ -79,6 +80,77 @@ export type CockpitMission = {
   waypoints: Waypoint[]
 }
 
+/**
+ * Survey object that contains the information about the survey to be performed.
+ */
+export interface Survey {
+  /**
+   * Unique identification for the survey.
+   */
+  id: string
+  /**
+   * Coordinates of the polygon that will be surveyed.
+   */
+  polygonCoordinates: WaypointCoordinates[]
+  /**
+   * Density of the scan.
+   */
+  distanceBetweenLines: number
+  /**
+   * Angle of the survey lines.
+   */
+  surveyLinesAngle: number
+  /**
+   * Executable mission waypoints.
+   */
+  waypoints: Waypoint[]
+}
+
+/**
+ * Last state of the survey.
+ */
+export interface SurveyState {
+  /**
+   * Coordinates of the waypoints
+   */
+  polygonCoordinates: WaypointCoordinates[]
+  /**
+   * Waypoints of the survey.
+   */
+  waypoints: Waypoint[]
+  /**
+   * Density of the scan.
+   */
+  distanceBetweenLines: number
+  /**
+   *  Angle of the survey lines.
+   */
+  surveyLinesAngle: number
+}
+
+export type SurveyPolygon = {
+  /**
+   * The coordinates of the polygon that will be surveyed.
+   */
+  polygonPositions: L.LatLng[]
+  /**
+   * The markers that represent the polygon vertices.
+   */
+  polygonMarkers: L.Marker[]
+  /**
+   * The markers that represent the polygon edges.
+   */
+  edgeMarkers: L.Marker[]
+  /**
+   * Density of the scan.
+   */
+  distanceBetweenLines: number
+  /**
+   * Angle of the survey lines.
+   */
+  surveyLinesAngle: number
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const instanceOfCockpitMission = (maybeMission: any): maybeMission is CockpitMission => {
   const requiredKeys = ['version', 'settings', 'waypoints']