layout changes, status bar addition, drawer, and leaflet store

src/components/MenuBar.vue

@@ -2,6 +2,13 @@
 import { useLeafletStore } from 'stores/leaflet';
 import type { coords } from 'src/types';
 import { storeToRefs } from 'pinia';
+import { socket } from 'boot/socket';
+import ConfirmCommandDialog from 'components/ConfirmCommandDiaglog.vue';
+import { useQuasar } from 'quasar';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const $q = useQuasar();
 
 const leafletStore = useLeafletStore();
 const { center, markerLatLng } = storeToRefs(leafletStore);
@@ -15,6 +22,38 @@ const home = {
   icon: 'home',
 };
 
+interface Control {
+  id: number;
+  name: string;
+  cmd: string;
+  icon: string;
+  confirm: boolean;
+}
+
+const controls: Control[] = [
+  {
+    id: 1,
+    name: 'Start Location Sim',
+    cmd: 'start_location_simulation',
+    icon: 'play_arrow',
+    confirm: false,
+  },
+  {
+    id: 3,
+    name: 'End Location Sim',
+    cmd: 'end_location_simulation',
+    icon: 'stop',
+    confirm: true,
+  },
+  {
+    id: 3,
+    name: 'Shutdown',
+    cmd: 'shutdown',
+    icon: 'power_settings_new',
+    confirm: true,
+  },
+];
+
 const favorites = [
   {
     id: 1,
@@ -49,17 +88,47 @@ function handleFavClick(coords: coords) {
   center.value = [coords.lat, coords.lng];
   markerLatLng.value = [coords.lat, coords.lng];
 }
+
+function handleControlClick(ctrl: Control) {
+  if (ctrl.confirm) {
+    $q.dialog({
+      component: ConfirmCommandDialog,
+      componentProps: {
+        name: ctrl.name,
+      },
+    })
+      .onOk(() => {
+        socket.emit('command', ctrl.cmd, (response) => {
+          console.log(response.status);
+        });
+      })
+      .onCancel(() => {
+        console.log('Dialog cancelled');
+      })
+      .onDismiss(() => {
+        console.log('Dialog dismissed');
+      });
+  } else {
+    socket.emit('command', ctrl.cmd, (response) => {
+      console.log(response.status);
+    });
+  }
+}
 </script>
 
 <template>
   <q-toolbar class="bg-primary text-white">
-    <q-btn flat round dense icon="menu" class="q-mr-sm" />
+    <q-btn @click="$emit('drawer')" flat round dense icon="menu" class="q-mr-sm" />
     <q-separator dark vertical inset />
-    <q-btn stretch flat :icon="home.icon" @click="handleFavClick(home.coords)" />
-
     <q-space />
-
-    <q-btn-dropdown stretch flat label="Favorites">
+    <q-btn
+      stretch
+      flat
+      :icon="home.icon"
+      @click="handleFavClick(home.coords)"
+      v-if="route.name === 'Leaflet'"
+    />
+    <q-btn-dropdown stretch flat label="Favorites" v-if="route.name === 'Leaflet'">
       <q-list>
         <q-item
           v-for="fav in favorites"
@@ -78,6 +147,25 @@ function handleFavClick(coords: coords) {
         </q-item>
       </q-list>
     </q-btn-dropdown>
+    <q-btn-dropdown stretch flat label="Controls">
+      <q-list>
+        <q-item
+          v-for="ctrl in controls"
+          :key="ctrl.id"
+          clickable
+          v-ripple
+          v-close-popup
+          @click="handleControlClick(ctrl)"
+        >
+          <q-item-section avatar>
+            <q-avatar :icon="ctrl.icon" color="primary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>{{ ctrl.name }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
   </q-toolbar>
 </template>