fixes

package-lock.json

@@ -25,6 +25,7 @@
         "quasar": "^2.19.3",
         "socket.io-client": "^4.8.3",
         "vue": "^3.5.22",
+        "vue-draggable-plus": "^0.6.1",
         "vue-router": "^5.0.0"
       },
       "devDependencies": {
@@ -2852,6 +2853,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.9.tgz",
+      "integrity": "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.56.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.1.tgz",
@@ -9570,6 +9577,23 @@
         }
       }
     },
+    "node_modules/vue-draggable-plus": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/vue-draggable-plus/-/vue-draggable-plus-0.6.1.tgz",
+      "integrity": "sha512-FbtQ/fuoixiOfTZzG3yoPl4JAo9HJXRHmBQZFB9x2NYCh6pq0TomHf7g5MUmpaDYv+LU2n6BPq2YN9sBO+FbIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/sortablejs": "^1.15.8"
+      },
+      "peerDependencies": {
+        "@types/sortablejs": "^1.15.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.4.0.tgz",

package.json

@@ -31,6 +31,7 @@
     "quasar": "^2.19.3",
     "socket.io-client": "^4.8.3",
     "vue": "^3.5.22",
+    "vue-draggable-plus": "^0.6.1",
     "vue-router": "^5.0.0"
   },
   "devDependencies": {

src/components/ConfirmCommandDiaglog.vue

@@ -1,15 +1,17 @@
 <template>
   <q-dialog ref="dlgRef" persistent>
-    <q-card>
+    <q-card class="bg-dark text-grey-1 add-loc-card q-pa-sm">
-      <q-card-section class="row items-center">
+      <q-toolbar>
-        <q-avatar icon="add_location" color="primary" text-color="white" />
+        <q-avatar :icon="icon" color="secondary" text-color="black" />
-        <span class="q-ml-sm">
+        <q-toolbar-title>Command Control</q-toolbar-title>
-          Are you sure you want to {{ name }} ?
+      </q-toolbar>
-        </span>
+      <q-card-section class="q-ml-lg">
+        <div class="q-mb-sm">Are you sure you want to {{ name }} ? </div>
       </q-card-section>
+      <q-separator />
       <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" @click="onOkClick" />
+        <q-btn flat label="OK" @click="onOkClick" />
-        <q-btn flat label="Cancel" color="primary" @click="onDialogCancel" />
+        <q-btn flat label="Cancel" @click="onDialogCancel" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -20,6 +22,7 @@ import { useDialogPluginComponent } from 'quasar';
 
 defineProps({
   name: { type: String, required: true },
+  icon: { type: String, required: true },
 });
 
 defineEmits([...useDialogPluginComponent.emits]);

src/components/FormattedAddress.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="white-space: pre-line">
     {{ formattedAddressLine1 }}
     <q-inner-loading v-if="loading">
       <q-spinner-dots color="primary" />
@@ -25,8 +25,9 @@ const loading = ref(false);
 
 const formattedAddressLine1 = computed(() => {
   if (!loading.value && props.address) {
-    const formAddress: string = props.address.house_number + ' ' + props.address.road;
+    const place = [props.address.leisure, props.address.shop].filter(Boolean);
-    return formAddress;
+    const addy = [props.address.house_number, props.address.road].filter(Boolean).join(' ');
+    return  [place, addy].filter(Boolean).join('\n');
   } else {
     return '';
   }

src/components/LeafletTest.vue

@@ -6,7 +6,11 @@
       style="height: 600px; max-width: 800px; width: 100vw"
       class="rounded-borders"
     >
-      <q-footer  :class="$q.dark.isActive ? 'bg-primary' : 'bg-black'" class="z-top" style="height: 48px">
+      <q-footer
+        :class="$q.dark.isActive ? 'bg-primary' : 'bg-black'"
+        class="z-top"
+        style="height: 48px"
+      >
         <q-toolbar>
           <q-btn
             class="q-mr-sm"
@@ -61,11 +65,19 @@
         <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '50' }">
           <q-list padding>
             <q-item-label header
+ set service dns forwarding options cname=qbittorrent.famor.org,docker.famor.org
               ><span class="bold">Location Queue: </span> {{ simulationState }}</q-item-label
             >
             <q-separator />
+            <VueDraggable
+            ref="el"
+            v-model="locationQueueOrderFiltered"
+            handle=".drag-handle"
+            filter=".undraggable"
+            >
               <div
                 v-for="(key, index) in locationQueueOrderFiltered"
+                :class="isDraggable(key)"
                 :key="key"
                 @contextmenu.prevent="onDrawerContextMenu($event, key)"
               >
@@ -91,6 +103,7 @@
                   @item-clicked="zoomToCoords"
                 />
               </div>
+            </VueDraggable>
           </q-list>
         </q-scroll-area>
         <q-menu ref="contextMenu" context-menu touch-position>
@@ -222,6 +235,9 @@
 import { useQuasar } from 'quasar';
 import { computed, markRaw, onMounted, onUnmounted, reactive, ref } from 'vue';
 
+// Draggable imports
+import { VueDraggable } from 'vue-draggable-plus';
+
 // Leaflet imports
 import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
 import 'leaflet-routing-machine/dist/leaflet-routing-machine.css';
@@ -363,7 +379,8 @@ type RoutingWaypoint = {
   latLng: LeafLet.LatLng;
 };
 
-const locationQueueOrderFiltered = computed(() => {
+const locationQueueOrderFiltered = computed({
+  get: () => {
     if (locationQueueOrder.value) {
       return locationQueueOrder.value.filter(
         (loc_id) => locationQueueData.value[loc_id]?.status !== 'deleted',
@@ -371,25 +388,40 @@ const locationQueueOrderFiltered = computed(() => {
     } else {
       return [];
     }
+  },
+  set: (val) => {
+    socketStore.updateLocationQueueOrder(val);
+  },
 });
 
+const isDraggable = (locid: string) => {
+  const currentIndex = currentLocation.value ? locationQueueOrder.value.indexOf(currentLocation.loc_id) : 0;
+  const myIndex = locationQueueOrder.value.indexOf(locid);
+  const myUpdatedIndex = myIndex - currentIndex;
+  if ( myUpdatedIndex > 0 ) {
+    return 'draggable';
+  } else {
+    return 'undraggable';
+  }
+}
+
 const getCustomIcon = (locid: string) => {
   const currentIndex = currentLocation.value
     ? locationQueueOrderFiltered.value.indexOf(currentLocation.value.loc_id)
     : 0;
   const locationIndex = locationQueueOrderFiltered.value.indexOf(locid);
-  const updatedIndex = (locationIndex - currentIndex);
+  const updatedIndex = locationIndex - currentIndex;
   if (currentLocation.value && currentLocation.value.loc_id === locid) {
     return new Icon({
       color: 'pink',
       accentColor: 'black',
       content: '*',
       contentColor: 'black',
-      scale: 1.5,
+      scale: 1,
       svg: PinStarPanel,
     });
   }
-  if(updatedIndex > 0) {
+  if (updatedIndex > 0) {
     return new Icon({
       color: 'blue',
       accentColor: 'firebrick',
@@ -538,7 +570,20 @@ function handleDrawerContextMenu(command: string) {
       break;
     case 'delete':
       try {
-        const ack = socketStore.simulationControl('delete', 0, selectedItem.value);
+        const ack = socketStore.simulationControl({
+          command: 'delete',
+          latitude: 0,
+          longitude: 0,
+          loc_id: selectedItem.value,
+          delay: 0,
+          address: '',
+        });
+        if (ack.sts === 'error') {
+          notType = 'negative';
+        }
+        if (ack.msg) {
+          notMsg = ack.msg;
+        }
         if (ack.sts === 'error') {
           notType = 'negative';
         }
@@ -620,14 +665,14 @@ async function addLocation(coords: coords, delay: number, address?: string) {
   return new Promise((resolve, reject) => {
     let notType: string = 'positive';
     try {
-      const setCmdRsp = socketStore.simulationControl(
+      const setCmdRsp = socketStore.simulationControl({
-        'add',
+        command: 'add',
-        coords.lat,
+        latitude: coords.lat,
-        coords.lng,
+        longitude: coords.lng,
-        '',
+        loc_id: '',
-        delay,
+        delay: delay,
-        address,
+        address: address,
-      );
+      });
       if (setCmdRsp.msg) {
         responseMessage.value = setCmdRsp.msg;
       }
@@ -672,13 +717,15 @@ const findMyTimePast = computed(() => {
     const days = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
 
     if (days > 1) {
-      return days + ' days, ' + hours + ' hours, ' + minutes + 'minutes, ' + seconds + 'seconds ago'
+      return (
+        days + ' days, ' + hours + ' hours, ' + minutes + 'minutes, ' + seconds + 'seconds ago'
+      );
     } else if (hours > 1) {
-      return hours + ' hours, ' + minutes + 'minutes, ' + seconds + 'seconds ago'
+      return hours + ' hours, ' + minutes + 'minutes, ' + seconds + 'seconds ago';
     } else if (minutes > 1) {
       return minutes + ' minutes, ' + seconds + ' seconds ago';
     } else {
-      return seconds + ' seconds ago'
+      return seconds + ' seconds ago';
     }
   } else {
     return 'Find My Location not available';

src/components/LocationItem.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia';
 import { useSocketioStore } from 'stores/socketio';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import type { NominatimResponse } from 'components/models';
-import { Icon, PinCirclePanel } from 'leaflet-extra-markers';
+import { Icon, PinCirclePanel, PinStarPanel } from 'leaflet-extra-markers';
 
 import FormattedAddress from 'components/FormattedAddress.vue';
 
@@ -170,6 +170,7 @@ const humanReadableDateTime = (iso: string) => {
     //    day: 'numeric',
     hour: '2-digit',
     minute: '2-digit',
+    second: '2-digit',
   });
 };
 /*
@@ -279,7 +280,7 @@ const customIcon = computed(() => {
       scale: 1,
       svg: PinCirclePanel,
     });
-  } else {
+  } else if (myUpdatedIndex.value < 0) {
     return new Icon({
       color: 'black',
       accentColor: 'grey',
@@ -288,6 +289,15 @@ const customIcon = computed(() => {
       scale: 1,
       svg: PinCirclePanel,
     });
+  } else {
+    return new Icon({
+      color: 'pink',
+      accentColor: 'black',
+      content: '*',
+      contentColor: 'black',
+      scale: 1,
+      svg: PinStarPanel,
+    });
   }
 });
 
@@ -390,7 +400,7 @@ onUnmounted(() => {
         align-items: center;
       "
     >
-      <q-icon v-html="iconElement.outerHTML" />
+      <q-icon class="drag-handle" v-html="iconElement.outerHTML" />
       <q-item-label caption lines="1" v-if="simulationRunning">
         {{ calculateDeltaTime }}
       </q-item-label>

src/components/MenuBar.vue

@@ -67,14 +67,26 @@ function handleFavClick(coords: coords) {
 }
 
 function handleTestToggle() {
-  const response = socketStore.simulationControl('test-mode');
+  const response = socketStore.simulationControl({
+    command: 'test-mode',
+    latitude: null,
+    longitude: null,
+    loc_id: null,
+    delay: 0,
+    address: null,
+  });
   if (response.sts === 'error') {
     $q.notify({ type: 'negative', message: response.msg ?? 'Failed to toggle test mode' });
   }
 }
 
 function handleGpsNoiseToggle() {
-  const response = socketStore.simulationControl('gps-noise');
+  const response = socketStore.simulationControl({command: 'gps-noise', latitude: null,
+    longitude: null,
+    loc_id: null,
+    delay: 0,
+    address: null,
+});
   if (response.sts === 'error') {
     $q.notify({ type: 'negative', message: response.msg ?? 'Failed to toggle test mode' });
   }
@@ -86,6 +98,7 @@ function handleControlClick(cmdAttr: ControlAction) {
       component: ConfirmCommandDialog,
       componentProps: {
         name: cmdAttr.name,
+        icon: cmdAttr.icon,
       },
     })
       .onOk(() => {
@@ -93,7 +106,7 @@ function handleControlClick(cmdAttr: ControlAction) {
           let notType: string = 'positive';
           let notMsg: string = '';
           try {
-            const ack = socketStore.simulationControl(cmdAttr['cmd'], cmdAttr.delay);
+            const ack = socketStore.simulationControl({ command: cmdAttr['cmd'], latitude: null, longitude: null, loc_id: null, delay: cmdAttr.delay, address: null });
             if (ack.sts === 'error') {
               notType = 'negative';
             }
@@ -119,7 +132,7 @@ function handleControlClick(cmdAttr: ControlAction) {
             'device_control',
             { command: cmdAttr.cmd as DeviceCommands, delay: 0 },
             (response) => {
-              console.log(response.status, response.command);
+              console.log(response.command_status, response.command);
             },
           );
         }
@@ -135,7 +148,14 @@ function handleControlClick(cmdAttr: ControlAction) {
       let notType: string = 'positive';
       let notMsg: string = '';
       try {
-        const ack = socketStore.simulationControl(cmdAttr.cmd, cmdAttr.delay);
+        const ack = socketStore.simulationControl({
+          command: cmdAttr.cmd,
+          latitude: null,
+          longitude: null,
+          loc_id: null,
+          delay: cmdAttr.delay,
+          address: null,
+        });
         if (ack.sts === 'error') {
           notType = 'negative';
         }
@@ -185,7 +205,7 @@ function handleControlClick(cmdAttr: ControlAction) {
         'device_control',
         { command: cmdAttr.cmd as DeviceCommands, delay: 0 },
         (response) => {
-          console.log(response.status, response.command);
+          console.log(response.command_status, response.command);
         },
       );
     }
@@ -258,7 +278,12 @@ function handleControlClick(cmdAttr: ControlAction) {
                     @click="handleFavClick(favSubObj.coords)"
                   >
                     <q-item-section avatar>
-                      <q-avatar :icon="favSubObj.icon" color="secondary" size="sm" text-color="black" />
+                      <q-avatar
+                        :icon="favSubObj.icon"
+                        color="secondary"
+                        size="sm"
+                        text-color="black"
+                      />
                     </q-item-section>
                     <q-item-section>
                       <q-item-label>{{ favSubObj.name }}</q-item-label>
@@ -316,8 +341,8 @@ function handleControlClick(cmdAttr: ControlAction) {
           <q-item-section avatar>
             <q-avatar
               :icon="controls.simulation.start.icon"
-              color="primary"
+              color="secondary"
-              text-color="white"
+              text-color="black"
               size="sm"
             />
           </q-item-section>
@@ -337,8 +362,8 @@ function handleControlClick(cmdAttr: ControlAction) {
           <q-item-section avatar>
             <q-avatar
               :icon="controls.simulation.pause.icon"
-              color="primary"
+              color="secondary"
-              text-color="white"
+              text-color="black"
               size="sm"
             />
           </q-item-section>
@@ -358,8 +383,8 @@ function handleControlClick(cmdAttr: ControlAction) {
           <q-item-section avatar>
             <q-avatar
               :icon="controls.simulation.resume.icon"
-              color="primary"
+              color="secondary"
-              text-color="white"
+              text-color="black"
               size="sm"
             />
           </q-item-section>
@@ -379,8 +404,8 @@ function handleControlClick(cmdAttr: ControlAction) {
           <q-item-section avatar>
             <q-avatar
               :icon="controls.simulation.clear.icon"
-              color="primary"
+              color="secondary"
-              text-color="white"
+              text-color="black"
               size="sm"
             />
           </q-item-section>
@@ -400,8 +425,8 @@ function handleControlClick(cmdAttr: ControlAction) {
           <q-item-section avatar>
             <q-avatar
               :icon="controls.simulation.end.icon"
-              color="primary"
+              color="secondary"
-              text-color="white"
+              text-color="black"
               size="sm"
             />
           </q-item-section>
@@ -423,8 +448,8 @@ function handleControlClick(cmdAttr: ControlAction) {
           <q-item-section avatar>
             <q-avatar
               :icon="controls.icloudmonitor.start.icon"
-              color="primary"
+              color="secondary"
-              text-color="white"
+              text-color="black"
               size="sm"
             />
           </q-item-section>
@@ -445,8 +470,8 @@ function handleControlClick(cmdAttr: ControlAction) {
           <q-item-section avatar>
             <q-avatar
               :icon="controls.icloudmonitor.stop.icon"
-              color="primary"
+              color="secondary"
-              text-color="white"
+              text-color="black"
               size="sm"
             />
           </q-item-section>
@@ -467,8 +492,8 @@ function handleControlClick(cmdAttr: ControlAction) {
           <q-item-section avatar>
             <q-avatar
               :icon="controls.device.reboot.icon"
-              color="primary"
+              color="secondary"
-              text-color="white"
+              text-color="black"
               size="sm"
             />
           </q-item-section>
@@ -487,8 +512,8 @@ function handleControlClick(cmdAttr: ControlAction) {
           <q-item-section avatar>
             <q-avatar
               :icon="controls.device.shutdown.icon"
-              color="primary"
+              color="secondary"
-              text-color="white"
+              text-color="black"
               size="sm"
             />
           </q-item-section>

src/components/StatusBar.vue

@@ -3,13 +3,16 @@ import { useSocketioStore } from 'stores/socketio';
 import { storeToRefs } from 'pinia';
 
 const socketioStore = useSocketioStore();
-const { sockConnected, deviceConnected, tunnelConnected, simulationRunning, icloudMonitor, testMode } =
+const { sockConnected, deviceConnected, tunnelConnected, simulationState, icloudMonitor, testMode } =
   storeToRefs(socketioStore);
-function statusDevColor(state: string | boolean): string {
+function statusDevColor(state: string | boolean | null | undefined): string {
+  if (state === null || state === undefined) {
+    return 'grey';
+  }
   if (typeof state === 'boolean') {
     return state ? 'green' : 'red';
   } else {
-    switch (state) {
+    switch (state.toLowerCase()) {
       case 'paused':
         return 'yellow';
       case 'running':
@@ -66,7 +69,7 @@ function statusDevColor(state: string | boolean): string {
           class="q-mr-sm"
           @click="socketioStore.requestUpdate()"
         >
-          <q-badge :color="statusDevColor(simulationRunning)" rounded floating class="q-mr-sm" />
+          <q-badge :color="statusDevColor(simulationState)" rounded floating class="q-mr-sm" />
         </q-btn>
         <q-btn
           rounded

src/components/models.ts

@@ -1,30 +1,12 @@
+/*
+export interface Meta {
+  totalCount: number;
+}
+
 export interface CtrlAttrs {
   [key: string]: CtrlAttr;
 }
 
-export type SimulationCommands =
-  | 'start'
-  | 'pause'
-  | 'resume'
-  | 'clear'
-  | 'end'
-  | 'add'
-  | 'test-mode'
-  | 'delete'
-  | 'next'
-  | 'gps-noise';
-
-export type DeviceCommands = 'start_tunnel' | 'stop_tunnel' | 'shutdown' | 'reboot';
-
-export type TunnelCommands =
-  | 'start'
-  | 'start-watcher'
-  | 'end-watcher'
-  | 'shutdown'
-  | 'restart'
-  | 'clear'
-  | 'cancel';
-
 export interface CtrlAttr {
   name: string;
   cmd: string;
@@ -42,17 +24,52 @@ export interface DevCtrlAttr {
   cnfrm: boolean;
   delay: number;
 }
+*/
+
+export type SimulationCommands =
+  'restart'
+  | 'start'
+  | 'pause'
+  | 'resume'
+  | 'clear'
+  | 'end'
+  | 'add'
+  | 'test-mode'
+  | 'delete'
+  | 'next'
+  | 'gps-noise';
+
+export type DeviceCommands = 'shutdown' | 'reboot';
+
+export type TunnelCommands =
+  | 'start'
+  | 'start-watcher'
+  | 'end-watcher'
+  | 'shutdown'
+  | 'restart'
+  | 'clear'
+  | 'cancel';
 
 export interface LocationQueue {
   [key: string]: LocationMark;
 }
+
 export interface LocationMarkUpdateResponse {
   command_status: string;
   command: string;
+  command_class: string;
   message: string;
   data: LocationMark;
 }
 
+export interface QueueOrderUpdateResponse {
+  command_status: string;
+  command: string;
+  command_class: string;
+  message: string;
+  data: string[];
+}
+
 export interface LocationMark {
   loc_id: string;
   latitude: number | undefined | null;
@@ -67,20 +84,38 @@ export interface LocationMark {
 // SERVER TO CLIENT
 
 export interface ServerToClientEvents {
+  // built-in
   noArg: () => void;
   withAck: (a: string, callback: (b: number) => void) => void;
-  test_prompt: (callback: (s: string) => void) => void;
-  simulation_status: (c: SimulationStatus) => void;
-  status: (d: StatusUpdate) => void;
-  device_status: (d: DeviceStatus) => void;
-  error: (data: ErrorFull) => void;
   message: (e: string) => void;
+  error: (data: ErrorFull) => void;
+  // testing
+  test_prompt: (callback: (s: string) => void) => void;
+  // deprecated
+  simulation_status: (c: SimulationStatus) => void;
+  // future
+  device_status: (d: DeviceStatus) => void;
+  // in-use
+  status: (d: StatusUpdate) => void;
+  app_error: (data: AppError) => void;
   icloud_2fa_request: (callback: (e: number) => void) => void;
   fmf_update: (d: FindMyUpdate) => void;
   queue_data_update: (d: QueueData) => void;
   location_item_update: (d: LocationItemUpdate) => void;
 }
 
+export interface AppError {
+  type: string;
+  message: string;
+  error: string;
+  data: {
+    udids?: string | null | undefined;
+    udid?: string | null | undefined;
+    disconnected_udids?: string | null | undefined;
+    tunnel_timeout_seconds?: string | null | undefined;
+    dvt_timeout_seconds?: string | null | undefined;
+  };
+}
 
 export interface LocationItemUpdate {
   loc_id: string;
@@ -89,22 +124,19 @@ export interface LocationItemUpdate {
 
 export interface SimulationStatus {
   loc_id: string;
-  status: boolean;
   latitude: number;
   longitude: number;
-  start: string;
-  end?: string;
-  next_move?: number;
 }
 
 export interface QueueData {
-  simulation_queue: {
     active: boolean;
     data: LocationQueue;
     order: string[];
+    deleted_items: string[];
     state: string | undefined | null;
     worker_task: string | undefined | null;
-  }
+    gps_noise: boolean;
+    test_mode: boolean;
 }
 
 export interface StatusUpdate {
@@ -126,17 +158,7 @@ export interface StatusUpdate {
   };
   next_move?: number | undefined | null;
   set_location_enabled: boolean;
-  simulation_queue: {
+  simulation_queue: QueueData
-    active: boolean;
-    data: {
-      [key: string]: LocationMark;
-    };
-    order: string[];
-    gps_noise: boolean;
-    state: string | undefined | null;
-    worker_task: string | undefined | null;
-  };
-  test_mode: boolean;
   tunnel: string | undefined | null;
   tunnel_watcher_running: boolean;
   device_count?: number | undefined | null;
@@ -195,9 +217,13 @@ export interface FindMyUpdate {
 // CLIENT TO SERVER
 
 export interface ClientToServerEvents {
+  // built-in
   message: (e: string, callback: (b: boolean, r: string) => void) => void;
-  request_update: (callback: (response: StatusUpdate) => void) => void;
+  // testing
   send_test_prompt: (p: string, callback: (response: string) => void) => void;
+  // status
+  request_update: (callback: (response: StatusUpdate) => void) => void;
+  // control
   simulation_control: (
     args: {
       command: SimulationCommands;
@@ -229,6 +255,7 @@ export interface ClientToServerEvents {
     },
     callback?: (response: iCloudMonitorResponse) => void,
   ) => void;
+  // data updates
   location_item_update: (
     args: {
       loc_id: string;
@@ -237,6 +264,13 @@ export interface ClientToServerEvents {
     },
     callback?: (response: LocationMarkUpdateResponse) => void,
   ) => void;
+  queue_order_update: (
+    args: {
+      newOrder: string[];
+    },
+    callback?: (response: QueueOrderUpdateResponse) => void,
+  ) => void;
+  // data requests
   reverse_geocode: (
     args: {
       latitude: number;
@@ -251,31 +285,20 @@ export interface SimulationControlResponse {
   command: SimulationCommands;
   command_class: string;
   data?: SimulationControlResponseData | undefined | null;
-  simulation_noise?: boolean;
   message?: string | undefined;
 
 }
 
 interface SimulationControlResponseData {
-  simulation_active?: boolean;
+  simulation_queue?: QueueData;
-  simulation_queue_state?: string;
+  location_item?: LocationMark;
-  loc_id?: string;
-  latitude?: number | undefined | null;
-  longitude?: number | undefined | null;
-  delay?: number | undefined | null;
-  start_time?: string | undefined | null;
-  end_time?: string | undefined | null;
-  status?: string | undefined | null;
-  next_move?: number | undefined | null;
-  address?: string | undefined | null;
-  simulation_noise?: boolean;
-  test_mode?: boolean;
 }
 
 interface DeviceControlResponse {
-  status: string;
+  command_status: string;
+  command_class: string;
   command: DeviceCommands;
-  delay?: number;
+  message?: string;
 }
 
 export interface iCloudMonitorResponse {
@@ -290,10 +313,6 @@ export interface iCloudMonitorResponse {
 
 // END CLIENT TO SERVER
 
-export interface Meta {
-  totalCount: number;
-}
-
 export interface coords {
   lat: number;
   lng: number;
@@ -331,6 +350,7 @@ export interface NextLocation {
   time_at_location?: number | null;
 }
 
+/*
 export interface NominatimReverseResponse {
   place_id: number;
   licence: string;
@@ -361,6 +381,7 @@ export interface NominatimAddress {
   country: string;
   country_code: string;
 }
+*/
 
 export interface routeSegments {
   fromWaypoint: number;
@@ -396,6 +417,8 @@ export interface RouteSet {
 
 // TypeScript Interface for Reverse Geocoding Response
 export interface NominatimResponse {
+  shop?: string | null | undefined;
+  leisure?: string | null | undefined;
   house_number?: string | null | undefined;
   road: string;
   neighbourhood?: string | null | undefined;

src/constants/favorites.ts

@@ -13,7 +13,7 @@ export const favorites = {
     subitems: {
       jeong: {
         name: 'Jeong',
-        icon: 'language_korean_latin',
+        icon: 'dermatology',
         coords: {
           lat: 40.76624975651346,
           lng: -73.81444335286128,
@@ -22,7 +22,7 @@ export const favorites = {
       },
       santos: {
         name: 'Santos',
-        icon: 'rice_bowl',
+        icon: 'syringe',
         coords: {
           lat: 40.74504671877868,
           lng: -73.8880099638491,
@@ -31,7 +31,7 @@ export const favorites = {
       },
       natalya_qns: {
         name: 'Natalya (Qns)',
-        icon: 'currency_ruble',
+        icon: 'healing',
         coords: {
           lat: 40.69644966409178,
           lng: -73.837453217826,
@@ -40,7 +40,7 @@ export const favorites = {
       },
       natalya_bx: {
         name: 'Natalya (Bronx)',
-        icon: 'currency_ruble',
+        icon: 'healing',
         coords: {
           lat: 40.85384419116598,
           lng: -73.86314767911834,
@@ -49,7 +49,7 @@ export const favorites = {
       },
       office: {
         name: 'Linwood Plaza',
-        icon: 'dermatology',
+        icon: 'allergy',
         coords: {
           lat: 40.86141832913106,
           lng: -73.96997583196286,

src/stores/socketio.ts

@@ -16,6 +16,8 @@ import type {
   LocationItemUpdate,
   NominatimResponse,
   NominatimRequest,
+  AppError,
+  QueueData,
 } from 'components/models';
 
 const $q = useQuasar();
@@ -30,7 +32,7 @@ export const useSocketioStore = defineStore('socketio', {
       gpsNoise: null as boolean | undefined | null,
       deviceConnected: false as boolean,
       tunnelConnected: false as boolean,
-      simulationRunning: false as boolean | string,
+      simulationRunning: false as boolean | undefined | null,
       simulationState: null as string | null | undefined,
       simulationQueueLength: 0 as number | null | undefined,
       currentLocation: null as CurrentLocation | null | undefined,
@@ -39,6 +41,7 @@ export const useSocketioStore = defineStore('socketio', {
       errorList: [] as ErrorFull[],
       locationQueueData: {} as LocationQueue,
       locationQueueOrder: [] as string[],
+      locationQueueDeletedItems: [] as string[],
       leafletZoom: 10 as number,
       icloudMonitor: false as boolean,
       findMyUpdate: null as FindMyUpdate | null | undefined,
@@ -68,7 +71,10 @@ export const useSocketioStore = defineStore('socketio', {
       this.socketID = socket.id;
     },
     bindEvents() {
+
       this.setSockStatus();
+
+      // connect
       socket.on('connect', () => {
         this.setSockStatus();
         socket.emit('message', 'Hello from client', (e: boolean) => {
@@ -81,11 +87,13 @@ export const useSocketioStore = defineStore('socketio', {
         }
       });
 
+      // disconnect
       socket.on('disconnect', () => {
         this.setSockStatus();
         console.log('Disconnected from server');
       });
 
+      // message
       socket.on('message', (e: string) => {
         this.setSockStatus();
         this.messageList.push(e);
@@ -94,6 +102,7 @@ export const useSocketioStore = defineStore('socketio', {
         }
       });
 
+      // error
       socket.on('error', (data: ErrorFull) => {
         this.setSockStatus();
         const errorFull = { type: data.type, error: data.error };
@@ -101,6 +110,15 @@ export const useSocketioStore = defineStore('socketio', {
         console.error('Error Received: ', data);
       });
 
+      // app_error
+      socket.on('app_error', (data: AppError) => {
+        this.setSockStatus();
+        const errorFull = { type: data.type, error: data.error, message: data.message, data: data.data };
+        this.errorList.push(errorFull);
+        console.error('Error Received: ', data);
+      });
+
+      // status
       socket.on('status', (data: StatusUpdate): void => {
         if (debugLog) {
           console.log('StatusUpdate received: ', data);
@@ -108,6 +126,7 @@ export const useSocketioStore = defineStore('socketio', {
         this.digestUpdate(data);
       });
 
+      // fmf_update
       socket.on('fmf_update', (data: FindMyUpdate): void => {
         if (debugLog) {
           console.log('event: fmf_update received: ', data);
@@ -115,6 +134,7 @@ export const useSocketioStore = defineStore('socketio', {
         this.findMyUpdate = data;
       });
 
+      // simulation_status
       socket.on('simulation_status', (data: SimulationStatus): void => {
         if (debugLog) {
           console.log('event: simulation_status received: ', data);
@@ -123,17 +143,11 @@ export const useSocketioStore = defineStore('socketio', {
         this.currentLocation = {
           loc_id: data.loc_id,
           latitude: data.latitude,
-          longitude: data.longitude,
+          longitude: data.longitude
-          next_move: data.next_move,
         };
-        if (data.start) {
-          const queueItem = this.locationQueueData[data.loc_id];
-          if (queueItem) {
-            queueItem.start = data.start;
-          }
-        }
       });
 
+      // icloud_2fa_request
       socket.on('icloud_2fa_request', (callback) => {
         if (debugLog) {
           console.log('iCloud 2FA Request');
@@ -157,6 +171,15 @@ export const useSocketioStore = defineStore('socketio', {
             }
           });
       });
+
+      // queue_data_update
+      socket.on('queue_data_update', (inData: QueueData): void => {
+        if (debugLog) {
+          console.log('QueueUpdate received: ', inData);
+        }
+        this.digestQueueUpdate(inData);
+      });
+      // location_item_update
       socket.on('location_item_update', (inData: LocationItemUpdate): void => {
         console.log('Location item update received, data: ', inData);
         this.locationQueueData[inData.loc_id] = inData.data;
@@ -348,14 +371,21 @@ export const useSocketioStore = defineStore('socketio', {
       }
       return fnctRtn;
     },
-    simulationControl(
+    simulationControl({
-      command: string,
+      command,
-      latitude?: number | null,
+      latitude,
-      longitude?: number | null,
+      longitude,
-      loc_id?: string | null,
+      loc_id,
-      delay?: number,
+      delay,
-      address?: string | null,
+      address,
-    ) {
+    }: {
+      command: string;
+      latitude?: number | null | undefined;
+      longitude?: number | null | undefined;
+      loc_id?: string | null | undefined;
+      delay?: number | null | undefined;
+      address?: string | null | undefined;
+    }) {
       let fnctRtn: { sts: string; msg?: string | undefined } = { sts: '', msg: '' };
       this.setSockStatus();
       switch (command) {
@@ -381,9 +411,14 @@ export const useSocketioStore = defineStore('socketio', {
               if (response.command_status == 'ERROR') {
                 fnctRtn = { sts: 'error', msg: response.message?.toString() };
                 throw new Error(response.message);
+              } else {
+                if (!response.data?.simulation_queue) {
+                  fnctRtn = { sts: 'error', msg: "Simulation queue data missing"};
+                  throw new Error(response.message);
                 } else {
                   fnctRtn = { sts: 'OK', msg: response.message?.toString() };
-                this.simulationState = response.data?.simulation_queue_state;
+                  this.digestQueueUpdate(response.data.simulation_queue);
+                }
                 if (debugLog) {
                   console.log('response from simulate_control_start: ', response);
                 }
@@ -400,7 +435,13 @@ export const useSocketioStore = defineStore('socketio', {
               if (response.command_status === 'ERROR') {
                 throw new Error(response.message);
               } else {
-                this.simulationState = response.data?.simulation_queue_state;
+                if (!response.data?.simulation_queue) {
+                  fnctRtn = { sts: 'error', msg: 'Simulation queue data missing' };
+                  throw new Error(response.message);
+                } else {
+                  fnctRtn = { sts: 'OK', msg: response.message?.toString() };
+                  this.digestQueueUpdate(response.data.simulation_queue);
+                }
                 if (debugLog) {
                   console.log('response from simulate_control_test-mode: ', response);
                 }
@@ -417,7 +458,13 @@ export const useSocketioStore = defineStore('socketio', {
               if (response.command_status === 'ERROR') {
                 throw new Error(response.message);
               } else {
-                this.gpsNoise = response.simulation_noise;
+                if (!response.data?.simulation_queue) {
+                  fnctRtn = { sts: 'error', msg: 'Simulation queue data missing' };
+                  throw new Error(response.message);
+                } else {
+                  fnctRtn = { sts: 'OK', msg: response.message?.toString() };
+                  this.digestQueueUpdate(response.data.simulation_queue);
+                }
                 if (debugLog) {
                   console.log('response from simulate_control_gps-noise: ', response);
                 }
@@ -437,7 +484,13 @@ export const useSocketioStore = defineStore('socketio', {
               if (response.command_status === 'ERROR') {
                 throw new Error(response.message);
               } else {
-                this.simulationState = response.data?.simulation_queue_state;
+                if (!response.data?.simulation_queue) {
+                  fnctRtn = { sts: 'error', msg: 'Simulation queue data missing' };
+                  throw new Error(response.message);
+                } else {
+                  fnctRtn = { sts: 'OK', msg: response.message?.toString() };
+                  this.digestQueueUpdate(response.data.simulation_queue);
+                }
                 if (debugLog) {
                   console.log('response from simulate_control_pause: ', response);
                 }
@@ -454,7 +507,13 @@ export const useSocketioStore = defineStore('socketio', {
             if (response.command_status == 'ERROR') {
               throw new Error(response.message);
             } else {
-              this.simulationState = response.data?.simulation_queue_state;
+              if (!response.data?.simulation_queue) {
+                fnctRtn = { sts: 'error', msg: 'Simulation queue data missing' };
+                throw new Error(response.message);
+              } else {
+                fnctRtn = { sts: 'OK', msg: response.message?.toString() };
+                this.digestQueueUpdate(response.data.simulation_queue);
+              }
               if (debugLog) {
                 console.log('response from simulate_control_resume: ', response);
               }
@@ -470,7 +529,13 @@ export const useSocketioStore = defineStore('socketio', {
             if (response.command_status == 'ERROR') {
               throw new Error(response.message);
             } else {
-              this.simulationState = response.data?.simulation_queue_state;
+              if (!response.data?.simulation_queue) {
+                fnctRtn = { sts: 'error', msg: 'Simulation queue data missing' };
+                throw new Error(response.message);
+              } else {
+                fnctRtn = { sts: 'OK', msg: response.message?.toString() };
+                this.digestQueueUpdate(response.data.simulation_queue);
+              }
               if (debugLog) {
                 console.log('response from simulate_control_clear: ', response);
               }
@@ -486,7 +551,13 @@ export const useSocketioStore = defineStore('socketio', {
             if (response.command_status == 'ERROR') {
               throw new Error(response.message);
             } else {
-              this.simulationState = response.data?.simulation_queue_state;
+              if (!response.data?.simulation_queue) {
+                fnctRtn = { sts: 'error', msg: 'Simulation queue data missing' };
+                throw new Error(response.message);
+              } else {
+                fnctRtn = { sts: 'OK', msg: response.message?.toString() };
+                this.digestQueueUpdate(response.data.simulation_queue);
+              }
               if (debugLog) {
                 console.log('response from simulate_control_end: ', response);
               }
@@ -514,7 +585,13 @@ export const useSocketioStore = defineStore('socketio', {
               if (response.command_status == 'ERROR') {
                 throw new Error(response.message);
               } else {
-                this.simulationState = response.data?.simulation_queue_state;
+                if (!response.data?.simulation_queue) {
+                  fnctRtn = { sts: 'error', msg: 'Simulation queue data missing' };
+                  throw new Error(response.message);
+                } else {
+                  fnctRtn = { sts: 'OK', msg: response.message?.toString() };
+                  this.digestQueueUpdate(response.data.simulation_queue);
+                }
                 if (debugLog) {
                   console.log('response from simulate_control_add: ', response);
                 }
@@ -531,20 +608,27 @@ export const useSocketioStore = defineStore('socketio', {
             if (response.command_status == 'ERROR') {
               throw new Error(response.message);
             } else {
-              this.simulationState = response.data?.simulation_queue_state;
+              if (!response.data?.simulation_queue) {
+                fnctRtn = { sts: 'error', msg: 'Simulation queue data missing' };
+                throw new Error(response.message);
+              } else {
+                fnctRtn = { sts: 'OK', msg: response.message?.toString() };
+                this.digestQueueUpdate(response.data.simulation_queue);
+              }
               if (debugLog) {
                 console.log('response from simulate_control_delete: ', response);
               }
               return response.message;
             }
           });
+          this.updateLocationMark(loc_id, 'status', 'deleted');
           break;
         case 'next':
           socket.emit('simulation_control', { command: 'next' }, (response) => {
             if (response.command_status == 'ERROR') {
               throw new Error(response.message);
             } else {
-              this.simulationState = response.data?.simulation_queue_state;
+              this.simulationState = response.data?.simulation_queue?.state;
               if (debugLog) {
                 console.log('response from simulate_control_next: ', response);
               }
@@ -563,13 +647,23 @@ export const useSocketioStore = defineStore('socketio', {
         this.digestUpdate(response);
       });
     },
-    digestUpdate(data: StatusUpdate): void {
+    digestQueueUpdate(data: QueueData): void {
-      this.deviceConnected = !!(data.udid && data.tunnel);
+      console.log("digesting QueueUpdate: ", data)
+      this.simulationRunning = data.active;
+      console.log("Setting SimulationState to %s", data.state)
+      this.simulationState = data.state;
+      this.simulationQueueLength = data.order.length;
+      this.locationQueueData = data.data;
+      this.locationQueueOrder = data.order;
+      this.locationQueueDeletedItems = data.deleted_items;
       this.testMode = data.test_mode;
-      this.gpsNoise = data.simulation_queue.gps_noise;
+      this.gpsNoise = data.gps_noise;
-      this.simulationRunning = data.simulation_queue.active;
+    },
-      this.simulationState = data.simulation_queue.state;
+    digestUpdate(data: StatusUpdate): void {
-      this.simulationQueueLength = data.simulation_queue.order.length;
+      if (data.simulation_queue) {
+        this.digestQueueUpdate(data.simulation_queue)
+      }
+      this.deviceConnected = !!(data.udid && data.tunnel);
       this.tunnelConnected = !!data.tunnel;
       this.icloudMonitor = data.icloud.monitor_enabled;
       this.currentLocation = {
@@ -578,8 +672,6 @@ export const useSocketioStore = defineStore('socketio', {
         longitude: data.current_location.longitude,
         next_move: data.next_move,
       };
-      this.locationQueueData = data.simulation_queue.data;
-      this.locationQueueOrder = data.simulation_queue.order;
       this.findMyUpdate = data.fmf_location;
     },
     setDeviceState(state: boolean) {
@@ -587,16 +679,17 @@ export const useSocketioStore = defineStore('socketio', {
     },
     revGeoCode(nomRequest: NominatimRequest): Promise<NominatimResponse> {
       return new Promise((resolve) => {
-        socket.emit('reverse_geocode', { latitude: nomRequest.latitude, longitude: nomRequest.longitude }, (response) => {
+        socket.emit(
+          'reverse_geocode',
+          { latitude: nomRequest.latitude, longitude: nomRequest.longitude },
+          (response) => {
             resolve(response);
-        });
+          },
+        );
       });
     },
     updateLocationMark(loc_id: string, key: string, value: string | number) {
-      let fnctRtn: { command_status: string; message: string } = {
+      let fnctRtn: { command_status: string; message: string };
-        command_status: '',
-        message: '',
-      };
       if (debugLog) {
         console.log(
           'socketStore: Update LocationMark request, loc_id: %s, key: %s, new value: %s',
@@ -629,9 +722,28 @@ export const useSocketioStore = defineStore('socketio', {
             }
             this.locationQueueData[loc_id] = response.data;
           }
+          return fnctRtn;
         },
       );
+    },
+    updateLocationQueueOrder(newOrder: string[]) {
+      let fnctRtn: { command_status: string; message: string };
+      if (debugLog) {
+        console.log('socketStore: Update Location Queue Order, new order: %s', newOrder);
+      }
+      socket.emit('queue_order_update', { newOrder: newOrder }, (response) => {
+        if (response.command_status == 'ERROR') {
+          fnctRtn = { command_status: 'error', message: response.message?.toString() };
+          throw new Error(response.message);
+        } else {
+          fnctRtn = { command_status: 'OK', message: response.message?.toString() };
+          if (debugLog) {
+            console.log('response from queue_order_update: ', response);
+          }
+          this.locationQueueOrder = response.data;
+        }
         return fnctRtn;
+      });
     },
   },
 });