From 22a7742d9898707e21aeb08e81eda1d69eba1c2f Mon Sep 17 00:00:00 2001
From: Willian Galvani <williangalvani@gmail.com>
Date: Wed, 23 Mar 2022 15:42:07 -0300
Subject: [PATCH 1/2] core: frontend: Add menu items to home

---
 core/frontend/src/App.vue            | 105 +--------------------
 core/frontend/src/menus.ts           | 134 +++++++++++++++++++++++++++
 core/frontend/src/views/MainView.vue |  63 +++++++++++++
 3 files changed, 199 insertions(+), 103 deletions(-)
 create mode 100644 core/frontend/src/menus.ts

diff --git a/core/frontend/src/App.vue b/core/frontend/src/App.vue
index b31716fe77..28ec445a30 100644
--- 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
new file mode 100644
index 0000000000..cd69f63e64
--- /dev/null
+++ 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
index 606581d2eb..41863a64cc 100644
--- 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>

From c0a0d40db63f928ffcac00f29252e1c24057a1d4 Mon Sep 17 00:00:00 2001
From: Willian Galvani <williangalvani@gmail.com>
Date: Wed, 23 Mar 2022 16:23:18 -0300
Subject: [PATCH 2/2] core: frontend: home: add pirate flag in pirate features

---
 core/frontend/src/menus.ts           | 19 ++++++-------
 core/frontend/src/views/MainView.vue | 42 ++++++++++++++++++++++++----
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/core/frontend/src/menus.ts b/core/frontend/src/menus.ts
index cd69f63e64..94bb21c60f 100644
--- a/core/frontend/src/menus.ts
+++ b/core/frontend/src/menus.ts
@@ -13,15 +13,14 @@ const menus = [
         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',
+        text: 'General Autopilot settings, allows you to start/stop Ardupilot if using Navigator or SITL',
       },
       {
         title: 'Firmware',
         icon: 'mdi-chip',
         route: '/autopilot/firmware',
         advanced: false,
-        text: 'Used to download and flash new firmware to your board',
+        text: 'Used to download and flash new firmware to your current flight controller',
       },
       {
         title: 'Log Browser',
@@ -36,8 +35,8 @@ const menus = [
         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',
+        text: 'Manage MAVLink endpoints for internal/external systems. Use this if you need to connect additional'
+              + ' MAVLink systems to your vehicle',
       },
       {
         title: 'Video',
@@ -81,17 +80,17 @@ const menus = [
         icon: 'mdi-map-marker',
         route: '/tools/nmea-injector',
         advanced: true,
-        text: 'Used for forwarding UDP NMEA stream into Ardupilot',
+        text: 'Used for forwarding UDP NMEA streams into Ardupilot',
       },
       {
-        title: 'System information',
+        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',
+        title: 'Network Test',
         icon: 'mdi-speedometer',
         route: '/tools/network-test',
         show: true,
@@ -112,11 +111,11 @@ const menus = [
         text: 'View detailed MAVLink traffic coming from your vehicle',
       },
       {
-        title: 'Version-chooser',
+        title: 'Version Chooser',
         icon: 'mdi-cellphone-arrow-down',
         route: '/tools/version-chooser',
         advanced: false,
-        text: 'Manage versions and update to latest available',
+        text: 'Manage BlueOS versions and update to the latest available',
       },
     ],
   },
diff --git a/core/frontend/src/views/MainView.vue b/core/frontend/src/views/MainView.vue
index 41863a64cc..cee8b7c5ba 100644
--- a/core/frontend/src/views/MainView.vue
+++ b/core/frontend/src/views/MainView.vue
@@ -21,7 +21,7 @@
 
     <v-row>
       <v-col
-        v-for="({ icon, title, text, route}, i) in apps"
+        v-for="({ icon, title, text, route, advanced}, i) in apps"
         :key="i"
         cols="12"
         md="3"
@@ -45,6 +45,22 @@
               </v-avatar>
             </div>
           </v-theme-provider>
+          <v-theme-provider dark>
+            <div
+              v-if="advanced"
+              v-tooltip="'This is an advanced feature'"
+              class="pirate-marker"
+            >
+              <v-avatar
+                color="error"
+                size="35"
+              >
+                <v-icon
+                  v-text="'mdi-skull-crossbones'"
+                />
+              </v-avatar>
+            </div>
+          </v-theme-provider>
 
           <v-card-title
             class="justify-center font-weight-black text-uppercase mt-0"
@@ -78,11 +94,9 @@ export default Vue.extend({
     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)
-            }
+        for (const subitem of item.submenus || []) {
+          if (!subitem.advanced || this.settings.is_pirate_mode) {
+            items.push(subitem)
           }
         }
       }
@@ -91,3 +105,19 @@ export default Vue.extend({
   },
 })
 </script>
+
+<style>
+
+div.pirate-marker {
+  position: absolute;
+  width: 35px;
+  right: 0;
+  top: 0px;
+  opacity: 0.7;
+}
+
+div.pirate-marker.v-icon {
+    font-size: 10px;
+}
+
+</style>