Wire up CoT Changes

api/web/src/components/CloudTAK/CoTView.vue

@@ -411,7 +411,7 @@
             <CoTStyle
                 v-if='feat.properties.archived'
                 :key='feat.id'
-                v-model='feat'
+                :feature='feat'
             />
 
             <div

api/web/src/components/CloudTAK/util/CoTStyle.vue

@@ -94,32 +94,23 @@
     </div>
 </template>
 
-<script>
+<script setup lang='ts'>
+import { watch, ref } from 'vue';
 import IconSelect from '../../util/IconSelect.vue';
 import {
     TablerRange,
     TablerInput,
     TablerEnum
 } from '@tak-ps/vue-tabler';
 
-export default {
-    name: 'CoTStyle',
-    components: {
-        TablerRange,
-        TablerEnum,
-        TablerInput,
-        IconSelect,
-    },
-    props: {
-        modelValue: {
-            type: Object,
-            required: true
-        },
-    },
-    data: function() {
-        return {
-            feat: this.modelValue,
-        };
-    }
-}
+const props = defineProps<{
+    feature: COT
+}>();
+
+const feat = ref(props.feature.as_feature());
+
+watch(feat.value, () => {
+    props.feature.update(feat.value);
+});
+
 </script>

api/web/src/stores/base/cot.ts

@@ -87,9 +87,8 @@ export default class COT implements Feature {
         //TODO Detect Geometry changes, use centroid?!
         this.geometry = feat["geometry"];
 
-        if (changed) {
-            this.store.pending.set(this.id, this);
-        }
+        // TODO only update if Geometry or Rendered Prop changes
+        this.store.pending.set(this.id, this);
 
         await this.save();
 

api/web/src/stores/cots.ts

@@ -450,7 +450,8 @@ export const useCOTStore = defineStore('cots', {
                 if (exists) {
                     await exists.update(feat)
                 } else {
-                    new COT(feat);
+                    const cot = new COT(feat);
+                    await cot.save();
                 }
             }
         }