From fd1a722b9e54d57d23ca7458b13f25aa4b304b11 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Tue, 18 Mar 2025 20:41:17 -0600
Subject: [PATCH] support cardinal directions; style improvements

---
 webapp/src/components/DFMapPopup.vue | 65 ++++++++++++++++++----------
 webapp/src/components/LeafletMap.vue | 16 ++++++-
 2 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/webapp/src/components/DFMapPopup.vue b/webapp/src/components/DFMapPopup.vue
index 50e49fe..803cf7b 100644
--- a/webapp/src/components/DFMapPopup.vue
+++ b/webapp/src/components/DFMapPopup.vue
@@ -2,39 +2,50 @@
   <v-sheet min-width="240">
     <v-list density="compact">
       <v-list-item v-if="isFaceRecognition">
-        <v-icon start>mdi-face-recognition</v-icon> <b>Face Recognition</b>
+        <div class="d-flex align-center">
+          <v-icon start>mdi-face-recognition</v-icon> <b>Face Recognition</b>
+        </div>
       </v-list-item>
       <v-list-item>
-        <v-icon start>mdi-cctv</v-icon> <b>License Plate Reader</b>
+        <div class="d-flex align-center">
+          <v-icon start>mdi-cctv</v-icon> <b>License Plate Reader</b>
+        </div>
       </v-list-item>
       <v-list-item v-if="isFaceRecognition">
         <v-icon start>mdi-adjust</v-icon> <b>Omnidirectional</b>
       </v-list-item>
       <v-list-item v-else>
-        <v-icon start>mdi-compass-outline</v-icon> <b>{{ cardinalDirection }}</b>
+        <div class="d-flex align-center">
+          <v-icon start>mdi-compass-outline</v-icon> <b>{{ cardinalDirection }}</b>
+        </div>
       </v-list-item>
       <v-list-item>
-        <v-icon start>mdi-domain</v-icon> <b>
-          <span v-if="alpr.tags.manufacturer">
-            {{ alpr.tags.manufacturer }}
-          </span>
-          <span v-else-if="alpr.tags.brand">
-            {{ alpr.tags.brand }}
-          </span>
-          <span v-else>
-            Unspecified Manufacturer
-          </span>
-        </b>
+        <div class="d-flex align-center">
+          <v-icon start>mdi-domain</v-icon> <b>
+            <span v-if="alpr.tags.manufacturer">
+              {{ alpr.tags.manufacturer }}
+            </span>
+            <span v-else-if="alpr.tags.brand">
+              {{ alpr.tags.brand }}
+            </span>
+            <span v-else>
+              Unspecified Manufacturer
+            </span>
+          </b>
+        </div>
       </v-list-item>
       <v-list-item>
-        <v-icon start>mdi-account-tie</v-icon> <b>
-          <span v-if="alpr.tags.operator">
-            {{ alpr.tags.operator }}
-          </span>
-          <span v-else>
-            Unspecified Operator
-          </span>
-        </b>
+        <div class="d-flex align-center">
+          <v-icon start>mdi-account-tie</v-icon>
+          <b>
+            <span v-if="alpr.tags.operator">
+              {{ alpr.tags.operator }}
+            </span>
+            <span v-else>
+              Unspecified Operator
+            </span>
+          </b>
+        </div>
       </v-list-item>
     </v-list>
 
@@ -61,12 +72,18 @@ const isFaceRecognition = computed(() => props.alpr.tags.brand === 'Avigilon');
 
 const cardinalDirection = computed(() => {
   const direction = props.alpr.tags.direction || props.alpr.tags["camera:direction"];
-  return direction === undefined ? 'Unspecified Direction' : degreesToCardinal(parseInt(direction))
+  if (direction === undefined) {
+    return 'Unspecified Direction';
+  } else if (direction.includes(';')) {
+    return 'Faces Multiple Directions';
+  } else {
+    return /^\d+$/.test(direction) ? degreesToCardinal(parseInt(direction)) : direction;
+  }
 }
 );
 
 function degreesToCardinal(degrees: number): string {
-  const cardinals = ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest'];
+  const cardinals = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NE'];
   return 'Faces ' + cardinals[Math.round(degrees / 45) % 8];
 }
 
diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index 62e2c33..a52b502 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -58,7 +58,7 @@ let currentLocationLayer: FeatureGroup;
 function createSVGMarkers(alpr: ALPR): string {
   const orientationValues = (alpr.tags.direction || alpr.tags['camera:direction'] || '')
     .split(';')
-    .map(val => val.trim());
+    .map(val => /^\d+$/.test(val) ? parseInt(val) : cardinalToDegrees(val.trim()));
 
   const fovPath = `
       <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
@@ -80,6 +80,20 @@ function createSVGMarkers(alpr: ALPR): string {
     `;
 }
 
+function cardinalToDegrees(cardinal: string): number {
+  const cardinalMap: Record<string, number> = {
+    N: 0,
+    NE: 45,
+    E: 90,
+    SE: 135,
+    S: 180,
+    SW: 225,
+    W: 270,
+    NW: 315,
+  };
+  return cardinalMap[cardinal] ?? cardinal;
+}
+
 function createMarker(alpr: ALPR): Marker | CircleMarker {
   if (hasPlottableOrientation(alpr.tags.direction || alpr.tags['camera:direction'])) {
     const icon = L.divIcon({