Merge pull request #328 from dfpc-coe/phone-comp

Phone Comp

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

@@ -174,12 +174,10 @@
 
                 <div
                     v-if='feat.properties.contact && feat.properties.contact.phone'
-                    class='col-12 px-2 pb-2'
+                    class='pt-2'
                 >
-                    <label class='subheader'>Phone</label>
-                    <div
-                        class='bg-gray-500 rounded mx-2 px-2 py-2'
-                        v-text='phone(feat.properties.contact.phone)'
+                    <Phone
+                        :phone='feat.properties.contact.phone'
                     />
                 </div>
             </div>
@@ -234,8 +232,14 @@
                 <div class='d-flex mx-3'>
                     <label class='subheader'>Times</label>
                     <div class='ms-auto cursor-pointer text-blue subheader'>
-                        <span v-if='time === "relative"' @click='time = "absolute"'>Absolute</span>
-                        <span v-if='time === "absolute"' @click='time = "relative"'>Relative</span>
+                        <span
+                            v-if='time === "relative"'
+                            @click='time = "absolute"'
+                        >Absolute</span>
+                        <span
+                            v-if='time === "absolute"'
+                            @click='time = "relative"'
+                        >Relative</span>
                     </div>
                 </div>
                 <div class='table-responsive rounded mx-2 py-2 px-2'>
@@ -260,9 +264,9 @@
 
                 <TablerToggle
                     v-if='isArchivable'
+                    v-model='feat.properties.archived'
                     label='Archived'
                     class='mx-2'
-                    v-model='feat.properties.archived'
                 />
             </div>
 
@@ -356,10 +360,10 @@ import Share from './util/Share.vue';
 import CoTStyle from './util/CoTStyle.vue';
 import Coordinate from './util/Coordinate.vue';
 import Course from './util/Course.vue';
+import Phone from './util/Phone.vue';
 import Speed from './util/Speed.vue';
 import Elevation from './util/Elevation.vue';
 import Attachments from './util/Attachments.vue';
-import phone from 'phone';
 import {
     IconX,
     IconAmbulance,
@@ -479,17 +483,6 @@ export default {
 
             this.feat.properties.attachments.push(hash)
         },
-        phone: function(number) {
-            const p = phone(number);
-
-            if (!p.isValid) return number;
-
-            if (p.countryCode === '+1') {
-                return `${p.phoneNumber.slice(0, 2)} (${p.phoneNumber.slice(2, 5)}) ${p.phoneNumber.slice(5, 8)}-${p.phoneNumber.slice(8, 12)}`;
-            } else {
-                return p;
-            }
-        },
         updateStyle: async function() {
             if (this.feat.properties.archived) {
                 await cotStore.add(this.feat);
@@ -532,6 +525,7 @@ export default {
         Elevation,
         Attachments,
         Speed,
+        Phone,
         Course,
         Share,
         Coordinate,

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

@@ -2,6 +2,7 @@
     <div
         class='bg-gray-500 rounded-top py-2 px-2 position-relative text-truncate'
     >
+        <slot />
         <span v-text='text' />
         <CopyButton
             :text='text'

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

@@ -0,0 +1,60 @@
+<template>
+    <div class='col-12'>
+        <label class='subheader mx-2'>Phone</label>
+        <div class='mx-2'>
+            <CopyField
+                :text='format(phone)'
+                :size='24'
+            >
+                <a
+                    :href='`tel:${format(phone)}`'
+                    class='cursor-pointer pe-2'
+                >
+                    <IconPhone
+                        :size='24'
+                        :stroke='1'
+                    />
+                </a>
+            </CopyField>
+        </div>
+    </div>
+</template>
+
+<script>
+import CopyField from './CopyField.vue';
+import phoneFormat from 'phone';
+import {
+    IconPhone
+} from '@tabler/icons-vue';
+
+export default {
+    name: 'COTPhone',
+    components: {
+        CopyField,
+        IconPhone
+    },
+    props: {
+        phone: {
+            type: String,
+            required: true
+        },
+        unit: {
+            type: String,
+            default: 'deg'
+        }
+    },
+    methods: {
+        format: function(number) {
+            const p = phoneFormat(number);
+
+            if (!p.isValid) return number;
+
+            if (p.countryCode === '+1') {
+                return `${p.phoneNumber.slice(0, 2)} (${p.phoneNumber.slice(2, 5)}) ${p.phoneNumber.slice(5, 8)}-${p.phoneNumber.slice(8, 12)}`;
+            } else {
+                return p;
+            }
+        },
+    },
+}
+</script>

api/web/src/stores/cots.ts

@@ -385,8 +385,6 @@ export const useCOTStore = defineStore('cots', {
          * Add a CoT GeoJSON to the store and modify props to meet MapLibre style requirements
          */
         add: async function(feat: Feature, mission_guid?: string) {
-            feat = COT.style(feat);
-
             mission_guid = mission_guid || this.subscriptionPending.get(feat.id);
 
             if (mission_guid)  {

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

@@ -35,17 +35,25 @@ export default class COT implements Feature {
     geometry: Feature["geometry"];
 
     constructor(feat: Feature) {
+        feat = COT.style(feat);
+
         this.id = feat.id || crypto.randomUUID();
         this.type = feat.type || 'Feature';
         this.path = feat.path || '/';
         this.properties = feat["properties"] || {};
         this.geometry = feat["geometry"];
+
+        if (!this.properties.archived) {
+            this.properties.archived = false
+        }
     }
 
     /**
      * Update the COT and return a boolean as to whether the COT needs to be re-rendered
      */
     update(feat: Feature): boolean {
+        feat = COT.style(feat);
+
         let changed = false;
         for (const prop of RENDERED_PROPERTIES) {
             if (this.properties[prop] !== feat.properties[prop]) {

tasks/data/Dockerfile

@@ -49,3 +49,4 @@ RUN npm install
 #ENTRYPOINT ["/usr/local/bin/npx", "aws-lambda-ric"]
 #CMD ["app.handler"]
 
+CMD ["npm", "start"]