Fix mission planning UI issues

src/components/widgets/Map.vue

@@ -81,7 +81,15 @@
     absolute
     bottom
     color="white"
+    :style="`top: ${topProgressBarDisplacement}`"
   />
+  <p
+    v-if="fetchingMission"
+    :style="{ top: topProgressBarDisplacement }"
+    class="absolute left-[7px] mt-4 flex text-md font-bold text-white z-30 drop-shadow-md"
+  >
+    Loading mission...
+  </p>
 </template>
 
 <script setup lang="ts">
@@ -557,6 +565,10 @@ const widgetStore = useWidgetManagerStore()
 const bottomButtonsDisplacement = computed(() => {
   return `${Math.max(-widgetStore.widgetClearanceForVisibleArea(widget.value).bottom, 0)}px`
 })
+
+const topProgressBarDisplacement = computed(() => {
+  return `${Math.max(-widgetStore.widgetClearanceForVisibleArea(widget.value).top, 0)}px`
+})
 </script>
 
 <style>

src/composables/settingsSyncer.ts

@@ -136,11 +136,11 @@ export function useBlueOsStorage<T>(key: string, defaultValue: MaybeRef<T>): Rem
       try {
         await setKeyDataOnCockpitVehicleStorage(vehicleAddress, `settings/${username}/${key}`, newValue)
         const message = `Success updating '${key}' on BlueOS.`
-        openSnackbar({ message, duration: 3000, variant: 'success' })
+        openSnackbar({ message, duration: 3000, variant: 'success', closeButton: true })
         console.info(message)
       } catch (fetchError) {
         const message = `Failed updating '${key}' on BlueOS. Will keep trying.`
-        openSnackbar({ message, duration: 3000, variant: 'error' })
+        openSnackbar({ message, duration: 3000, variant: 'error', closeButton: true })
         console.error(message)
         console.error(fetchError)
 

src/libs/vehicle/ardupilot/ardupilot.ts

@@ -1149,7 +1149,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     let lastSeqRequested = -1
     while (missionAck === undefined && !timeoutReachedUpload) {
       await sleep(10)
-      timeoutReachedUpload = new Date().getTime() - initTimeUpload > 10000
+      timeoutReachedUpload = new Date().getTime() - initTimeUpload > 50000
       const lastMissionItemRequestMessage =
         this._messages.get(MAVLinkType.MISSION_REQUEST) || this._messages.get(MAVLinkType.MISSION_REQUEST_INT)
       if (lastMissionItemRequestMessage === undefined) continue

src/views/MissionPlanningView.vue

@@ -227,8 +227,15 @@
       absolute
       bottom
       height="10"
-      color="rgba(0, 110, 255, 0.8)"
+      color="white"
+      :style="`top: ${widgetStore.currentTopBarHeightPixels}px`"
     />
+    <p
+      v-if="uploadingMission"
+      class="fixed top-[58px] left-[7px] flex text-md font-bold text-white z-30 drop-shadow-md"
+    >
+      Uploading mission to vehicle...
+    </p>
   </div>
 </template>
 
@@ -283,6 +290,9 @@ const uploadMissionToVehicle = async (): Promise<void> => {
     missionUploadProgress.value = loadingPerc
   }
   try {
+    if (!vehicleStore.isVehicleOnline) {
+      throw 'Vehicle is not online.'
+    }
     await vehicleStore.uploadMission(missionStore.currentPlanningWaypoints, loadingCallback)
     const message = `Mission upload succeed! Open the Map widget in Flight Mode and click the "play" button to start the mission.`
     showDialog({ variant: 'success', message, timer: 6000 })
@@ -729,7 +739,7 @@ const generateWaypointsFromSurvey = (): void => {
   clearSurveyPath()
   isCreatingSurvey.value = false
 
-  showDialog({ variant: 'success', message: 'Waypoints generated from survey path.', timer: 3000 })
+  showDialog({ variant: 'success', message: 'Waypoints generated from survey path.', timer: 1000 })
 }
 
 // Helper function to connect two waypoints with a polyline