mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-22 01:11:40 +00:00
306677e56f
Exposes NetworkManager interface name and more robustly handles device/interface names internally. --------- Co-authored-by: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
123 lines
4.8 KiB
Vue
123 lines
4.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed, getCurrentInstance } from "vue";
|
|
import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
|
|
import { useStateStore } from "@/stores/StateStore";
|
|
|
|
const compact = computed<boolean>({
|
|
get: () => {
|
|
return useStateStore().sidebarFolded;
|
|
},
|
|
set: (val) => {
|
|
useStateStore().setSidebarFolded(val);
|
|
}
|
|
});
|
|
|
|
// Vuetify2 doesn't yet support the useDisplay API so this is required to access the prop when using the Composition API
|
|
const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndUp || false);
|
|
</script>
|
|
|
|
<template>
|
|
<v-navigation-drawer dark app permanent :mini-variant="compact || !mdAndUp" color="primary">
|
|
<v-list>
|
|
<!-- List item for the heading; note that there are some tricks in setting padding and image width make things look right -->
|
|
<v-list-item :class="compact || !mdAndUp ? 'pr-0 pl-0' : ''" style="display: flex; justify-content: center">
|
|
<v-list-item-icon class="mr-0">
|
|
<img v-if="!(compact || !mdAndUp)" class="logo" src="@/assets/images/logoLarge.svg" alt="large logo" />
|
|
<img v-else class="logo" src="@/assets/images/logoSmall.svg" alt="small logo" />
|
|
</v-list-item-icon>
|
|
</v-list-item>
|
|
|
|
<v-list-item link to="/dashboard">
|
|
<v-list-item-icon>
|
|
<v-icon>mdi-view-dashboard</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Dashboard</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item ref="camerasTabOpener" link to="/cameras">
|
|
<v-list-item-icon>
|
|
<v-icon>mdi-camera</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Cameras</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item link to="/settings">
|
|
<v-list-item-icon>
|
|
<v-icon>mdi-cog</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Settings</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item link to="/docs">
|
|
<v-list-item-icon>
|
|
<v-icon>mdi-bookshelf</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Documentation</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item v-if="mdAndUp" link @click="() => (compact = !compact)">
|
|
<v-list-item-icon>
|
|
<v-icon v-if="compact || !mdAndUp"> mdi-chevron-right </v-icon>
|
|
<v-icon v-else> mdi-chevron-left </v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Compact Mode</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<div style="position: absolute; bottom: 0; left: 0">
|
|
<v-list-item>
|
|
<v-list-item-icon>
|
|
<v-icon v-if="useSettingsStore().network.runNTServer"> mdi-server </v-icon>
|
|
<v-icon v-else-if="useStateStore().ntConnectionStatus.connected"> mdi-robot </v-icon>
|
|
<v-icon v-else style="border-radius: 100%"> mdi-robot-off </v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title v-if="useSettingsStore().network.runNTServer" class="text-wrap">
|
|
NetworkTables server running for
|
|
<span class="accent--text">{{ useStateStore().ntConnectionStatus.clients || 0 }}</span> clients
|
|
</v-list-item-title>
|
|
<v-list-item-title
|
|
v-else-if="useStateStore().ntConnectionStatus.connected && useStateStore().backendConnected"
|
|
class="text-wrap"
|
|
style="flex-direction: column; display: flex"
|
|
>
|
|
NetworkTables Server Connected!
|
|
<span class="accent--text">
|
|
{{ useStateStore().ntConnectionStatus.address }}
|
|
</span>
|
|
</v-list-item-title>
|
|
<v-list-item-title v-else class="text-wrap" style="flex-direction: column; display: flex">
|
|
Not connected to NetworkTables Server!
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item>
|
|
<v-list-item-icon>
|
|
<v-icon v-if="useStateStore().backendConnected"> mdi-server-network </v-icon>
|
|
<v-icon v-else style="border-radius: 100%"> mdi-server-network-off </v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title class="text-wrap">
|
|
{{ useStateStore().backendConnected ? "Backend connected" : "Trying to connect to backend" }}
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</div>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.logo {
|
|
width: 100%;
|
|
height: 70px;
|
|
object-fit: contain;
|
|
}
|
|
</style>
|