fixes

2026-04-22 11:32:47 -04:00
parent d72550b3c1
commit 52f05550e0
11 changed files with 457 additions and 208 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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": {
--- a/src/components/ConfirmCommandDiaglog.vue
+++ b/src/components/ConfirmCommandDiaglog.vue
@@ -1,15 +1,17 @@
 <template>
  <q-dialog ref="dlgRef" persistent>
-    <q-card>
-      <q-card-section class="row items-center">
-        <q-avatar icon="add_location" color="primary" text-color="white" />
-        <span class="q-ml-sm">
-          Are you sure you want to {{ name }} ?
-        </span>
+    <q-card class="bg-dark text-grey-1 add-loc-card q-pa-sm">
+      <q-toolbar>
+        <q-avatar :icon="icon" color="secondary" text-color="black" />
+        <q-toolbar-title>Command Control</q-toolbar-title>
+      </q-toolbar>
+      <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="Cancel" color="primary" @click="onDialogCancel" />
+        <q-btn flat label="OK" @click="onOkClick" />
+        <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]);
--- a/src/components/FormattedAddress.vue
+++ b/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;
-    return formAddress;
+    const place = [props.address.leisure, props.address.shop].filter(Boolean);
+    const addy = [props.address.house_number, props.address.road].filter(Boolean).join(' ');
+    return  [place, addy].filter(Boolean).join('\n');
  } else {
    return '';
  }
--- a/src/components/LeafletTest.vue
+++ b/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,21 +388,36 @@ 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,
    });
  }
@@ -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(
-        'add',
-        coords.lat,
-        coords.lng,
-        '',
-        delay,
-        address,
-      );
+      const setCmdRsp = socketStore.simulationControl({
+        command: 'add',
+        latitude: coords.lat,
+        longitude: coords.lng,
+        loc_id: '',
+        delay: delay,
+        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';
--- a/src/components/LocationItem.vue
+++ b/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>
--- a/src/components/MenuBar.vue
+++ b/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"
-              text-color="white"
+              color="secondary"
+              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"
-              text-color="white"
+              color="secondary"
+              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"
-              text-color="white"
+              color="secondary"
+              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"
-              text-color="white"
+              color="secondary"
+              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"
-              text-color="white"
+              color="secondary"
+              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"
-              text-color="white"
+              color="secondary"
+              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"
-              text-color="white"
+              color="secondary"
+              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"
-              text-color="white"
+              color="secondary"
+              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"
-              text-color="white"
+              color="secondary"
+              text-color="black"
              size="sm"
            />
          </q-item-section>
--- a/src/components/StatusBar.vue
+++ b/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
--- a/src/components/models.ts
+++ b/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: {
-    active: boolean;
-    data: {
-      [key: string]: LocationMark;
-    };
-    order: string[];
-    gps_noise: boolean;
-    state: string | undefined | null;
-    worker_task: string | undefined | null;
-  };
-  test_mode: boolean;
+  simulation_queue: QueueData
  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_state?: string;
-  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;
+  simulation_queue?: QueueData;
+  location_item?: LocationMark;
 }

 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;
--- a/src/constants/favorites.ts
+++ b/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,
--- a/src/stores/socketio.ts
+++ b/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,
-          next_move: data.next_move,
+          longitude: data.longitude
        };
-        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(
-      command: string,
-      latitude?: number | null,
-      longitude?: number | null,
-      loc_id?: string | null,
-      delay?: number,
-      address?: string | null,
-    ) {
+    simulationControl({
+      command,
+      latitude,
+      longitude,
+      loc_id,
+      delay,
+      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 {
-      this.deviceConnected = !!(data.udid && data.tunnel);
+    digestQueueUpdate(data: QueueData): void {
+      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.simulationRunning = data.simulation_queue.active;
-      this.simulationState = data.simulation_queue.state;
-      this.simulationQueueLength = data.simulation_queue.order.length;
+      this.gpsNoise = data.gps_noise;
+    },
+    digestUpdate(data: StatusUpdate): void {
+      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 } = {
-        command_status: '',
-        message: '',
-      };
+      let fnctRtn: { command_status: string; message: string };
      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;
+      });
    },
  },
 });