frontend: autopilot: disable mavlink endpoint creation if autopilot is not running

Author: nicoschmdt

core/frontend/src/components/autopilot/EndpointManager.vue

@@ -65,14 +65,36 @@
         subtitle="Fetching available endpoints..."
       />
     </v-container>
-    <v-card
+    <v-container
       v-else
       class="d-flex align-center justify-center pa-6"
     >
-      <p class="text-h6">
-        No endpoints available.
-      </p>
-    </v-card>
+      <v-card
+        v-if="!autopilot_board_is_running"
+        class="d-flex align-center justify-center pa-6"
+      >
+        <div class="d-flex flex-column align-center justify-center">
+          <p class="mb-2">
+            Autopilot must be running to create endpoints.
+          </p>
+          <p class="mb-0">
+            You can start it in the
+            <router-link to="autopilot">
+              Autopilot Firmware
+            </router-link>
+            tab.
+          </p>
+        </div>
+      </v-card>
+      <v-card
+        v-else
+        class="d-flex align-center justify-center pa-6"
+      >
+        <p class="text-h6">
+          No endpoints available.
+        </p>
+      </v-card>
+    </v-container>
 
     <v-fab-transition>
       <v-btn
@@ -85,6 +107,7 @@
         bottom
         right
         class="v-btn--example"
+        :disabled="!autopilot_board_is_running"
         @click="openCreationDialog"
       >
         <v-icon>mdi-plus</v-icon>
@@ -109,9 +132,10 @@ import { autopilot_service } from '@/types/frontend_services'
 import back_axios from '@/utils/api'
 
 import SpinningLogo from '../common/SpinningLogo.vue'
-import { fetchAvailableEndpoints } from './AutopilotManagerUpdater'
+import { fetchAvailableEndpoints, fetchCurrentBoard } from './AutopilotManagerUpdater'
 import EndpointCard from './EndpointCard.vue'
 import CreationDialog from './EndpointCreationDialog.vue'
+import autopilot_data from '@/store/autopilot'
 
 const notifier = new Notifier(autopilot_service)
 
@@ -129,6 +153,7 @@ export default Vue.extend({
       available_routers: [] as string[],
       updating_router: false,
       fetch_available_endpoints_task: new OneMoreTime({ delay: 5000, disposeWith: this }),
+      fetch_current_board_task: new OneMoreTime({ delay: 5000, disposeWith: this }),
     }
   },
   computed: {
@@ -141,9 +166,13 @@ export default Vue.extend({
     are_endpoints_available(): boolean {
       return !this.available_endpoints.isEmpty()
     },
+    autopilot_board_is_running(): boolean {
+      return autopilot.current_board !== null && this.heartbeat_age() < 3000
+    },
   },
   mounted() {
     this.fetch_available_endpoints_task.setAction(fetchAvailableEndpoints)
+    this.fetch_current_board_task.setAction(fetchCurrentBoard)
     this.fetchAvailableRouters()
     this.fetchCurrentRouter()
   },
@@ -206,6 +235,9 @@ export default Vue.extend({
           notifier.pushBackError('AUTOPILOT_ENDPOINT_CREATE_FAIL', error, true)
         })
     },
+    heartbeat_age(): number {
+      return new Date().valueOf() - autopilot_data.last_heartbeat_date.getTime()
+    },
   },
 })
 </script>

core/frontend/src/store/autopilot.ts

@@ -174,6 +174,11 @@ class AutopilotStore extends VuexModule {
   setVehicleArmed(armed: boolean): void {
     this.verhicle_armed = armed
   }
+
+  @Mutation
+  setLastHeartbeatDate(date: Date): void {
+    this.last_heartbeat_date = date
+  }
 }
 
 export { AutopilotStore }