core: frontend: Add menu items to home

bluerobotics · Mar 23, 2022 · bbb949e · bbb949e
1 parent f9f5391
commit bbb949e
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 103 deletions.
diff --git a/core/frontend/src/App.vue b/core/frontend/src/App.vue
@@ -180,6 +180,7 @@ import NotificationTrayButton from './components/notifications/TrayButton.vue'
 import ServicesScanner from './components/scanner/servicesScanner.vue'
 import WifiTrayMenu from './components/wifi/WifiTrayMenu.vue'
 import WifiUpdater from './components/wifi/WifiUpdater.vue'
+import menus from './menus'
 
 export default Vue.extend({
   name: 'App',
@@ -208,109 +209,7 @@ export default Vue.extend({
     drawer: false,
     drawer_running_tour: false,
     backend_offline: false,
-    menus: [
-      {
-        title: 'Main',
-        icon: 'mdi-home',
-        route: '/',
-      },
-      {
-        title: 'Vehicle',
-        icon: 'mdi-submarine',
-        submenus: [
-          {
-            title: 'General',
-            icon: 'mdi-image-filter-center-focus-strong',
-            route: '/autopilot/general',
-            advanced: false,
-          },
-          {
-            title: 'Firmware',
-            icon: 'mdi-chip',
-            route: '/autopilot/firmware',
-            advanced: false,
-          },
-          {
-            title: 'Log Browser',
-            icon: 'mdi-file-multiple',
-            route: '/autopilot/logs',
-            advanced: false,
-          },
-          {
-            title: 'Endpoints',
-            icon: 'mdi-arrow-decision',
-            route: '/autopilot/endpoints',
-            advanced: true,
-          },
-          {
-            title: 'Video',
-            icon: 'mdi-video-vintage',
-            route: '/autopilot/video-manager',
-            advanced: false,
-          },
-        ],
-      },
-      {
-        title: 'Tools',
-        icon: 'mdi-hammer-screwdriver',
-        submenus: [
-          {
-            title: 'Available Services',
-            icon: 'mdi-account-hard-hat',
-            route: '/tools/available-services',
-            advanced: true,
-          },
-          {
-            title: 'Bridges',
-            icon: 'mdi-bridge',
-            route: '/tools/bridges',
-            advanced: true,
-          },
-          {
-            title: 'File Browser',
-            icon: 'mdi-file-tree',
-            route: '/tools/file-browser',
-            advanced: true,
-          },
-          {
-            title: 'NMEA Injector',
-            icon: 'mdi-map-marker',
-            route: '/tools/nmea-injector',
-            advanced: true,
-          },
-          {
-            title: 'System information',
-            icon: 'mdi-chart-pie',
-            route: '/tools/system-information',
-            advanced: false,
-          },
-          {
-            title: 'Network test',
-            icon: 'mdi-speedometer',
-            route: '/tools/network-test',
-            show: true,
-          },
-          {
-            title: 'Terminal',
-            icon: 'mdi-console',
-            route: '/tools/web-terminal',
-            advanced: true,
-          },
-          {
-            title: 'MAVLink Inspector',
-            icon: 'mdi-chart-areaspline',
-            route: '/tools/mavlink-inspector',
-            advanced: true,
-          },
-          {
-            title: 'Version-chooser',
-            icon: 'mdi-cellphone-arrow-down',
-            route: '/tools/version-chooser',
-            advanced: false,
-          },
-        ],
-      },
-    ],
+    menus,
   }),
   computed: {
     steps() {

diff --git a/core/frontend/src/menus.ts b/core/frontend/src/menus.ts
@@ -0,0 +1,134 @@
+const menus = [
+  {
+    title: 'Main',
+    icon: 'mdi-home',
+    route: '/',
+  },
+  {
+    title: 'Vehicle',
+    icon: 'mdi-submarine',
+    submenus: [
+      {
+        title: 'General',
+        icon: 'mdi-image-filter-center-focus-strong',
+        route: '/autopilot/general',
+        advanced: false,
+        text: 'General Autopilot settings, allow you to start/stop Ardupilot if using Navigator or SITL, and switch'
+              + ' boards if more than one is present',
+      },
+      {
+        title: 'Firmware',
+        icon: 'mdi-chip',
+        route: '/autopilot/firmware',
+        advanced: false,
+        text: 'Used to download and flash new firmware to your board',
+      },
+      {
+        title: 'Log Browser',
+        icon: 'mdi-file-multiple',
+        route: '/autopilot/logs',
+        advanced: false,
+        text: 'Allow browsing the Telemetry (.tlog) and Binary (.bin) logs generated by your vehicle. Bin logs are'
+              + ' currently only supported for Navigator boards',
+      },
+      {
+        title: 'Endpoints',
+        icon: 'mdi-arrow-decision',
+        route: '/autopilot/endpoints',
+        advanced: true,
+        text: 'Manage Mavlink endpoints for internal/external systems. Used this if you need to connect additional'
+              + ' mavlink systems to your vehicle',
+      },
+      {
+        title: 'Video',
+        icon: 'mdi-video-vintage',
+        route: '/autopilot/video-manager',
+        advanced: false,
+        text: 'Manage your video devices and video streams',
+      },
+    ],
+  },
+  {
+    title: 'Tools',
+    icon: 'mdi-hammer-screwdriver',
+    submenus: [
+      {
+        title: 'Available Services',
+        icon: 'mdi-account-hard-hat',
+        route: '/tools/available-services',
+        advanced: true,
+        text: 'List all available services found in BlueOS serving http interfaces, and their'
+              + ' respective API documentations',
+      },
+      {
+        title: 'Bridges',
+        icon: 'mdi-bridge',
+        route: '/tools/bridges',
+        advanced: true,
+        text: 'Allows creating UDP/TCP to Serial bridges, used for communication to serial'
+              + ' devices from your topside computer',
+      },
+      {
+        title: 'File Browser',
+        icon: 'mdi-file-tree',
+        route: '/tools/file-browser',
+        advanced: true,
+        text: 'Browse all the files in BlueOS, useful for fetching logs,'
+              + ' tweaking configurations, and development',
+      },
+      {
+        title: 'NMEA Injector',
+        icon: 'mdi-map-marker',
+        route: '/tools/nmea-injector',
+        advanced: true,
+        text: 'Used for forwarding UDP NMEA stream into Ardupilot',
+      },
+      {
+        title: 'System information',
+        icon: 'mdi-chart-pie',
+        route: '/tools/system-information',
+        advanced: false,
+        text: 'Detailed system status information, CPU, memory, disk, and ethernet status',
+      },
+      {
+        title: 'Network test',
+        icon: 'mdi-speedometer',
+        route: '/tools/network-test',
+        show: true,
+        text: 'Test link speed between topside computer and your vehicle',
+      },
+      {
+        title: 'Terminal',
+        icon: 'mdi-console',
+        route: '/tools/web-terminal',
+        advanced: true,
+        text: 'A web-based console. Used mainly for debugging and developlment',
+      },
+      {
+        title: 'MAVLink Inspector',
+        icon: 'mdi-chart-areaspline',
+        route: '/tools/mavlink-inspector',
+        advanced: true,
+        text: 'View detailed MAVLink traffic coming from your vehicle',
+      },
+      {
+        title: 'Version-chooser',
+        icon: 'mdi-cellphone-arrow-down',
+        route: '/tools/version-chooser',
+        advanced: false,
+        text: 'Manage versions and update to latest available',
+      },
+    ],
+  },
+]
+
+export interface menuItem {
+  title: string
+  icon: string
+  route?: string
+  submenus?: menuItem[]
+  advanced?: boolean
+  text?: string
+}
+
+export default menus
diff --git a/core/frontend/src/views/MainView.vue b/core/frontend/src/views/MainView.vue
@@ -18,13 +18,76 @@
         <v-card-text />
       </v-card-text>
     </v-card>
+
+    <v-row>
+      <v-col
+        v-for="({ icon, title, text, route}, i) in apps"
+        :key="i"
+        cols="12"
+        md="3"
+        class="mt-10"
+      >
+        <v-card
+          class="py-4 px-4"
+          style="min-height: 100%"
+          :href="route"
+        >
+          <v-theme-provider dark>
+            <div>
+              <v-avatar
+                color="primary"
+                size="88"
+              >
+                <v-icon
+                  large
+                  v-text="icon"
+                />
+              </v-avatar>
+            </div>
+          </v-theme-provider>
+
+          <v-card-title
+            class="justify-center font-weight-black text-uppercase mt-0"
+            v-text="title"
+          />
+
+          <v-card-text
+            class="subtitle-1 text-justify"
+            v-text="text"
+          />
+        </v-card>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 
+import settings from '@/libs/settings'
+
+import menus, { menuItem } from '../menus'
+
 export default Vue.extend({
   name: 'Main',
+  data: () => ({
+    menus,
+    settings,
+  }),
+  computed: {
+    apps() {
+      const items: menuItem[] = []
+      for (const item of this.menus) {
+        if (item.submenus !== undefined) {
+          for (const subitem of item.submenus) {
+            if (!subitem.advanced || this.settings.is_pirate_mode) {
+              items.push(subitem)
+            }
+          }
+        }
+      }
+      return items
+    },
+  },
 })
 </script>