Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core: frontend: Add menu items to home #899

Merged
merged 2 commits into from
Mar 23, 2022
Merged

core: frontend: Add menu items to home #899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22a7742
core: frontend: Add menu items to home
Williangalvani Mar 23, 2022
c0a0d40
core: frontend: home: add pirate flag in pirate features
Williangalvani Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 2 additions & 103 deletions core/frontend/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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() {
Expand Down
133 changes: 133 additions & 0 deletions core/frontend/src/menus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
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, 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 current flight controller',
},
{
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. Use 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 streams 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',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this for sub, although I'm assuming drone users don't refer to the GCS as a "topside" computer? Not sure what our preference is here (do we want default sub terminology, or actively keep things general to ArduPilot vehicles?)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we're currently walking the line... I don't want to be in any sides too much 😅
see my previous comment about "flight controller"

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can just remove the "topside" reference

},
{
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 BlueOS versions and update to the latest available',
},
],
},
]

export interface menuItem {
title: string
icon: string
route?: string
submenus?: menuItem[]
advanced?: boolean
text?: string
}

export default menus
93 changes: 93 additions & 0 deletions core/frontend/src/views/MainView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,106 @@
<v-card-text />
</v-card-text>
</v-card>

<v-row>
<v-col
v-for="({ icon, title, text, route, advanced}, 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-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"
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) {
for (const subitem of item.submenus || []) {
if (!subitem.advanced || this.settings.is_pirate_mode) {
items.push(subitem)
}
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you just do:

Suggested change
}
for (const item of this.menus) {
for (const subitem of item.submenus) {
if (!subitem?.advanced || this.settings.is_pirate_mode) {
items.push(subitem)
}
}
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not all of them have submenus defined, typescript complains about it without the check. I did something else you may like, tho...

return items
},
},
})
</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>