From 9696465bcb6626f42c4c2af82338d7e2b9d26a26 Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Thu, 15 Feb 2024 16:05:23 -0700
Subject: [PATCH] CoT Styling

---
 api/web/src/components/CloudTAK/CoTView.vue  | 68 ++++++++++----------
 api/web/src/components/CloudTAK/FeatView.vue | 20 +++---
 api/web/src/stores/map.js                    | 50 +++++++++-----
 3 files changed, 78 insertions(+), 60 deletions(-)

diff --git a/api/web/src/components/CloudTAK/CoTView.vue b/api/web/src/components/CloudTAK/CoTView.vue
index fdf89b49e..0025213a3 100644
--- a/api/web/src/components/CloudTAK/CoTView.vue
+++ b/api/web/src/components/CloudTAK/CoTView.vue
@@ -3,47 +3,45 @@
     class='position-absolute end-0 bottom-0 text-white py-2 bg-dark'
     style='z-index: 1; width: 400px; top: 56px;'
 >
-    <div class='row g-2'>
-        <div class='col-12 row border-light border-bottom'>
-            <div class='col-auto row card-header mx-1 my-2'>
-                <div class='card-title mx-2' v-text='cot.properties.callsign'></div>
-                <div class='subheader mx-2'>
-                    <span class='subheader' v-text='cot.properties.type'/>
-                    <span class='subheader ms-auto' v-text='" (" + cot.properties.how || "Unknown" + ")"'/>
-                </div>
+    <div class='col-12 border-light border-bottom d-flex'>
+        <div class='col-auto card-header row mx-1 my-2'>
+            <div class='card-title mx-2' v-text='cot.properties.callsign'></div>
+            <div class='subheader mx-2'>
+                <span class='subheader' v-text='cot.properties.type'/>
+                <span class='subheader ms-auto' v-text='" (" + cot.properties.how || "Unknown" + ")"'/>
             </div>
-            <div class='col-auto btn-list my-2 ms-auto d-flex align-items-center'>
-                <IconZoomPan @click='zoomTo' class='cursor-pointer' v-tooltip='"Zoom To"'/>
+        </div>
+        <div class='col-auto btn-list my-2 mx-3 ms-auto d-flex align-items-center'>
+            <IconZoomPan @click='zoomTo' class='cursor-pointer' v-tooltip='"Zoom To"'/>
 
-                <IconCode v-if='mode === "default"' @click='mode = "raw"' class='cursor-pointer' v-tooltip='"Raw View"'/>
-                <IconX v-if='mode === "raw"' @click='mode = "default"' class='cursor-pointer' v-tooltip='"Default View"'/>
-            </div>
+            <IconCode v-if='mode === "default"' @click='mode = "raw"' class='cursor-pointer' v-tooltip='"Raw View"'/>
+            <IconX v-if='mode === "raw"' @click='mode = "default"' class='cursor-pointer' v-tooltip='"Default View"'/>
         </div>
+    </div>
 
-        <template v-if='mode === "default"'>
-            <div v-if='!isNaN(cot.properties.speed)' class='col-12 px-3'>
-                <Coordinate :coordinates='center'/>
-            </div>
-            <div v-if='!isNaN(cot.properties.speed)' class='col-12 px-3'>
-                <Speed :speed='cot.properties.speed'/>
-            </div>
-            <div v-if='!isNaN(cot.properties.course)' class='col-12 px-3'>
-                <label class='subheader'>Course</label>
-                <div v-text='cot.properties.course' class='bg-gray-500 rounded mx-2 py-2 px-2'/>
-            </div>
-            <div class='col-12 px-3'>
-                <label class='subheader'>Remarks</label>
-                <div v-text='cot.properties.remarks || "None"' class='bg-gray-500 rounded mx-2 py-2 px-2'/>
-            </div>
+    <template v-if='mode === "default"'>
+        <div v-if='!isNaN(cot.properties.speed)' class='col-12 px-3'>
+            <Coordinate :coordinates='center'/>
+        </div>
+        <div v-if='!isNaN(cot.properties.speed)' class='col-12 px-3'>
+            <Speed :speed='cot.properties.speed'/>
+        </div>
+        <div v-if='!isNaN(cot.properties.course)' class='col-12 px-3'>
+            <label class='subheader'>Course</label>
+            <div v-text='cot.properties.course' class='bg-gray-500 rounded mx-2 py-2 px-2'/>
+        </div>
+        <div class='col-12 px-3'>
+            <label class='subheader'>Remarks</label>
+            <div v-text='cot.properties.remarks || "None"' class='bg-gray-500 rounded mx-2 py-2 px-2'/>
+        </div>
 
-            <template v-if='isUserDrawn'>
-                <CoTStyle v-model='feat'/>
-            </template>
-        </template>
-        <template v-else-if='mode === "raw"'>
-            <pre v-text='cot'/>
+        <template v-if='isUserDrawn'>
+            <CoTStyle v-model='feat'/>
         </template>
-    </div>
+    </template>
+    <template v-else-if='mode === "raw"'>
+        <pre v-text='cot'/>
+    </template>
 </div>
 </template>
 
diff --git a/api/web/src/components/CloudTAK/FeatView.vue b/api/web/src/components/CloudTAK/FeatView.vue
index bee2a449e..0261bbd6d 100644
--- a/api/web/src/components/CloudTAK/FeatView.vue
+++ b/api/web/src/components/CloudTAK/FeatView.vue
@@ -3,19 +3,19 @@
     class='position-absolute end-0 bottom-0 text-white py-2 bg-dark'
     style='z-index: 1; width: 400px; top: 56px;'
 >
-    <div class='row g-2'>
-        <div class='col-12 row border-light border-bottom'>
-            <div class='col-auto row card-header my-2'>
-                <div class='card-title mx-2' v-text='feat.properties.name'></div>
-            </div>
-            <div class='col-auto btn-list my-2 ms-auto d-flex align-items-center mx-2'>
-                <IconZoomPan @click='zoomTo' class='cursor-pointer' v-tooltip='"Zoom To"'/>
+    <div class='col-12 border-light border-bottom d-flex'>
+        <div class='col-auto card-header row mx-1 my-2'>
+            <div class='card-title mx-2' v-text='feat.properties.name'></div>
+        </div>
+        <div class='col-auto btn-list my-2 ms-auto d-flex align-items-center mx-2'>
+            <IconZoomPan @click='zoomTo' class='cursor-pointer' v-tooltip='"Zoom To"'/>
 
-                <IconCode v-if='mode === "default"' @click='mode = "raw"' class='cursor-pointer' v-tooltip='"Raw View"'/>
-                <IconX v-if='mode === "raw"' @click='mode = "default"' class='cursor-pointer' v-tooltip='"Default View"'/>
-            </div>
+            <IconCode v-if='mode === "default"' @click='mode = "raw"' class='cursor-pointer' v-tooltip='"Raw View"'/>
+            <IconX v-if='mode === "raw"' @click='mode = "default"' class='cursor-pointer' v-tooltip='"Default View"'/>
         </div>
+    </div>
 
+    <div class='col-12'>
         <template v-if='mode === "default"'>
             <Coordinate :coordinates='center'/>
         </template>
diff --git a/api/web/src/stores/map.js b/api/web/src/stores/map.js
index bec3dc383..13f4d5c4e 100644
--- a/api/web/src/stores/map.js
+++ b/api/web/src/stores/map.js
@@ -110,7 +110,7 @@ export const useMapStore = defineStore('cloudtak', {
                 }
             }
         },
-        removeLayerBySource: function(source) {
+        removeLayerBySource: async function(source) {
             const pos = this.getLayerPos(source, 'source');
             if (pos === false) return
             const layer = this.layers[pos];
@@ -119,7 +119,7 @@ export const useMapStore = defineStore('cloudtak', {
                 this.map.removeLayer(l.id);
             }
 
-            this.map.removeSource(source);
+            await this.map.removeSource(source);
 
             this.layers.splice(pos, 1)
         },
@@ -245,6 +245,7 @@ export const useMapStore = defineStore('cloudtak', {
                         { id: `${layer.id}-poly`, type: 'feat' },
                         { id: `${layer.id}-polyline`, type: 'feat' },
                         { id: `${layer.id}-line`, type: 'feat' },
+                        { id: `${layer.id}-icon`, type: 'feat' },
                         { id: layer.id, type: 'feat' }
                     ]
                 }, cotStyles(layer.id, {
@@ -301,9 +302,11 @@ export const useMapStore = defineStore('cloudtak', {
                     { id: 'cots', type: 'cot' },
                     { id: 'cots-poly', type: 'cot' },
                     { id: 'cots-group', type: 'cot' },
+                    { id: `cots-icon`, type: 'cot' },
                     { id: 'cots-line', type: 'cot' }
                 ]
             }, cotStyles('cots', {
+                group: true,
                 icons: true,
                 labels: true
             }));
@@ -372,6 +375,7 @@ export const useMapStore = defineStore('cloudtak', {
 
 function cotStyles(id, opts = {
     sourceLayer: undefined,
+    group: false,
     labels: false,
     icons: false
 }) {
@@ -413,11 +417,21 @@ function cotStyles(id, opts = {
             'line-width': ["*", 2, ["number", ["get", "stroke-width"], 3]],
             'line-opacity': ["number", ["get", "stroke-opacity"], 1]
         }
+    },{
+        id: id,
+        type: 'circle',
+        source: id,
+        filter: ["==", "$type", "Point"],
+        paint: {
+            'circle-color': ["string", ["get", "circle-color"], "#00FF00"],
+            'circle-radius': ["number", ["get", "circle-radius"], 4],
+            'circle-opacity': ["number", ["get", "circle-opacity"], 1]
+        }
     }]
 
     if (opts.icons) {
         styles.push({
-            id: id,
+            id: `${id}-icon`,
             type: 'symbol',
             source: id,
             filter: [ 'all', ['==', '$type', 'Point'] ],
@@ -434,18 +448,6 @@ function cotStyles(id, opts = {
                 'icon-anchor': 'center',
             }
         })
-    } else {
-        styles.push({
-            id: id,
-            type: 'circle',
-            source: id,
-            filter: ["==", "$type", "Point"],
-            paint: {
-                'circle-color': ["string", ["get", "circle-color"], "#00FF00"],
-                'circle-radius': ["number", ["get", "circle-radius"], 4],
-                'circle-opacity': ["number", ["get", "circle-opacity"], 1]
-            }
-        });
     }
 
     if (opts.labels) {
@@ -466,6 +468,24 @@ function cotStyles(id, opts = {
         });
     }
 
+    if (opts.group) {
+        styles.push({
+            id: 'cots-group',
+            type: 'circle',
+            source: 'cots',
+            filter: [ 'all',
+                ['==', '$type', 'Point'],
+                ['has', 'color']
+            ],
+            paint: {
+                'circle-color': ['get', 'color'],
+                'circle-stroke-color': '#ffffff',
+                'circle-stroke-width': 2,
+                'circle-radius': 10
+            },
+        })
+    }
+
     return styles.map((s) => {
         if (opts.sourceLayer) s['source-layer'] = opts.sourceLayer;
         return s;