Archived & Times

dfpc-coe · Sep 5, 2024 · 98ddf01 · 98ddf01
1 parent 78a64f0
commit 98ddf01
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 48 deletions.
diff --git a/api/routes/profile-features.ts b/api/routes/profile-features.ts
@@ -43,6 +43,9 @@ export default async function router(schema: Schema, config: Config) {
             return res.json({
                 total: list.total,
                 items: list.items.map((feat) => {
+                    // Legacy features
+                    feat.properties.archived = true;
+
                     return {
                         id: feat.id,
                         path: feat.path,
@@ -110,6 +113,9 @@ export default async function router(schema: Schema, config: Config) {
                 return coords
             })
 
+            // Saving to database implies archived
+            req.body.properties.archived = true;
+
             const feat: Static<typeof ProfileFeature> = {
                 type: 'Feature',
                 ...(await config.models.ProfileFeature.generate({
@@ -181,6 +187,9 @@ export default async function router(schema: Schema, config: Config) {
                 id = ${req.params.id} AND username = ${user.email}
             `);
 
+            // Legacy features
+            feat.properties.archived = true;
+
             return res.json({
                 type: 'Feature',
                 ...feat

diff --git a/api/web/src/components/Admin/AdminConfig.vue b/api/web/src/components/Admin/AdminConfig.vue
@@ -91,7 +91,7 @@ import {
 import {
     IconSettings
 } from '@tabler/icons-vue';
-import timeDiff from '../../timediff.js';
+import timeDiff from '../../timediff.ts';
 
 export default {
     name: 'AdminConfig',

diff --git a/api/web/src/components/Admin/AdminServer.vue b/api/web/src/components/Admin/AdminServer.vue
@@ -181,7 +181,7 @@ import {
     IconLock,
     IconSettings
 } from '@tabler/icons-vue';
-import timeDiff from '../../timediff.js';
+import timeDiff from '../../timediff.ts';
 
 export default {
     name: 'AdminServer',

diff --git a/api/web/src/components/CloudTAK/CoTView.vue b/api/web/src/components/CloudTAK/CoTView.vue
@@ -40,7 +40,7 @@
                     </span>
                     <div class='col-12'>
                         <TablerInput
-                            v-if='isUserDrawn'
+                            v-if='feat.properties.archived'
                             v-model='feat.properties.callsign'
                         />
                         <div
@@ -231,7 +231,13 @@
 
 
             <div class='col-12 pb-2'>
-                <label class='subheader mx-3'>Times</label>
+                <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>
+                    </div>
+                </div>
                 <div class='table-responsive rounded mx-2 py-2 px-2'>
                     <table class='table card-table table-hover table-vcenter datatable'>
                         <thead>
@@ -240,17 +246,24 @@
                         </thead>
                         <tbody class='bg-gray-500'>
                             <tr>
-                                <td>Time</td><td v-text='feat.properties.time' />
+                                <td>Time</td><td v-text='timediff(feat.properties.time)' />
                             </tr>
                             <tr>
-                                <td>Start</td><td v-text='feat.properties.start' />
+                                <td>Start</td><td v-text='timediff(feat.properties.start)' />
                             </tr>
                             <tr>
-                                <td>Stale</td><td v-text='feat.properties.stale' />
+                                <td>Stale</td><td v-text='timediff(feat.properties.stale)' />
                             </tr>
                         </tbody>
                     </table>
                 </div>
+
+                <TablerToggle
+                    v-if='isArchivable'
+                    label='Archived'
+                    class='mx-2'
+                    v-model='feat.properties.archived'
+                />
             </div>
 
             <div
@@ -277,12 +290,11 @@
                 </div>
             </div>
 
-            <template v-if='isUserDrawn'>
-                <CoTStyle
-                    :key='feat.id'
-                    v-model='feat'
-                />
-            </template>
+            <CoTStyle
+                v-if='feat.properties.archived'
+                :key='feat.id'
+                v-model='feat'
+            />
 
             <div
                 v-if='feat.properties.takv && feat.properties.takv && Object.keys(feat.properties.takv).length'
@@ -336,6 +348,7 @@ const mapStore = useMapStore();
 import {
     TablerNone,
     TablerInput,
+    TablerToggle,
     TablerDelete,
     TablerMarkdown
 } from '@tak-ps/vue-tabler';
@@ -358,6 +371,7 @@ import {
     IconBattery3,
     IconBattery4
 } from '@tabler/icons-vue';
+import timediff from '/src/timediff.ts';
 import { std } from '/src/std.ts';
 import { useCOTStore } from '/src/stores/cots.ts';
 const cotStore = useCOTStore();
@@ -371,7 +385,9 @@ export default {
             mission: false,
             type: null,
             mode: 'default',
-            icon: null
+            icon: null,
+
+            time: 'relative',
         }
 
         const { feat, mission } = this.findCOT();
@@ -402,9 +418,8 @@ export default {
     },
     computed: {
         ...mapState(useProfileStore, ['profile']),
-        isUserDrawn: function() {
-            if (!this.feat) return false;
-            return this.feat.properties.type.toLowerCase().startsWith("u-d");
+        isArchivable: function() {
+            return !this.feat.properties.group;
         },
         center: function() {
             if (!this.feat) return [0,0];
@@ -424,6 +439,13 @@ export default {
         }
     },
     methods: {
+        timediff: function(date) {
+            if (this.time === 'relative') {
+                return timediff(date);
+            } else {
+                return date;
+            }
+        },
         findCOT: function() {
             const base = {
                 mission: null,
@@ -469,7 +491,7 @@ export default {
             }
         },
         updateStyle: async function() {
-            if (this.isUserDrawn) {
+            if (this.feat.properties.archived) {
                 await cotStore.add(this.feat);
             }
         },
@@ -516,6 +538,7 @@ export default {
         TablerNone,
         TablerInput,
         TablerMarkdown,
+        TablerToggle,
         TablerDelete,
         IconAmbulance,
         IconBattery1,

diff --git a/api/web/src/components/CloudTAK/Menu/Connections.vue b/api/web/src/components/CloudTAK/Menu/Connections.vue
@@ -124,7 +124,7 @@ import {
 import MenuTemplate from '../util/MenuTemplate.vue';
 import ConnectionStatus from './../../Connection/Status.vue';
 import AgencyBadge from './../../Connection/AgencyBadge.vue';
-import timeDiff from '../../../timediff.js';
+import timeDiff from '../../../timediff.ts';
 
 export default {
     name: 'CloudTAKConnections',

diff --git a/api/web/src/components/CloudTAK/Menu/Files.vue b/api/web/src/components/CloudTAK/Menu/Files.vue
@@ -110,7 +110,7 @@ import {
     IconRefresh,
 } from '@tabler/icons-vue';
 import MenuTemplate from '../util/MenuTemplate.vue';
-import timeDiff from '../../../timediff.js';
+import timeDiff from '../../../timediff.ts';
 import { useMapStore } from '/src/stores/map.ts';
 import Overlay from '/src/stores/overlays/base.ts';
 const mapStore = useMapStore();

diff --git a/api/web/src/components/CloudTAK/Menu/Import.vue b/api/web/src/components/CloudTAK/Menu/Import.vue
@@ -111,7 +111,7 @@
 <script>
 import { std, stdurl } from '/src/std.ts';
 import Status from '../../util/Status.vue';
-import timeDiff from '../../../timediff.js';
+import timeDiff from '../../../timediff.ts';
 import {
     TablerNone,
     TablerAlert,

diff --git a/api/web/src/components/CloudTAK/Menu/Imports.vue b/api/web/src/components/CloudTAK/Menu/Imports.vue
@@ -94,7 +94,7 @@ import {
 } from '@tabler/icons-vue';
 import MenuTemplate from '../util/MenuTemplate.vue';
 import Status from '../../util/Status.vue';
-import timeDiff from '../../../timediff.js';
+import timeDiff from '../../../timediff.ts';
 import Upload from '../../util/Upload.vue';
 
 export default {

diff --git a/api/web/src/components/CloudTAK/Menu/Package.vue b/api/web/src/components/CloudTAK/Menu/Package.vue
@@ -99,7 +99,7 @@
 <script>
 import { std, stdurl } from '/src/std.ts';
 import Share from '../util/Share.vue';
-import timeDiff from '../../../timediff.js';
+import timeDiff from '../../../timediff.ts';
 import {
     TablerAlert,
     TablerDelete,

diff --git a/api/web/src/components/CloudTAK/Menu/Packages.vue b/api/web/src/components/CloudTAK/Menu/Packages.vue
@@ -95,7 +95,7 @@ import {
     IconPlus,
     IconRefresh,
 } from '@tabler/icons-vue';
-import timeDiff from '../../../timediff.js';
+import timeDiff from '../../../timediff.ts';
 import ChannelInfo from '../util/ChannelInfo.vue';
 import NoChannelsInfo from '../util/NoChannelsInfo.vue';
 import Upload from '../../util/Upload.vue';

diff --git a/api/web/src/components/Connection.vue b/api/web/src/components/Connection.vue
@@ -200,7 +200,7 @@
 import { std } from '/src/std.ts';
 import PageFooter from './PageFooter.vue';
 import ConnectionStatus from './Connection/Status.vue';
-import timeDiff from '../timediff.js';
+import timeDiff from '../timediff.ts';
 import {
     IconRobot,
     IconRefresh,

diff --git a/api/web/src/components/ConnectionSink.vue b/api/web/src/components/ConnectionSink.vue
@@ -107,7 +107,7 @@
 <script>
 import { std } from '/src/std.ts';
 import PageFooter from './PageFooter.vue';
-import timeDiff from '../timediff.js';
+import timeDiff from '../timediff.ts';
 import {
     IconRefresh,
     IconSettings

diff --git a/api/web/src/components/Connections.vue b/api/web/src/components/Connections.vue
@@ -117,7 +117,7 @@ import { std, stdurl } from '/src/std.ts';
 import PageFooter from './PageFooter.vue';
 import ConnectionStatus from './Connection/Status.vue';
 import AgencyBadge from './Connection/AgencyBadge.vue';
-import timeDiff from '../timediff.js';
+import timeDiff from '../timediff.ts';
 import {
     TablerPager,
     TablerBreadCrumb,

diff --git a/api/web/src/components/Data.vue b/api/web/src/components/Data.vue
@@ -191,7 +191,7 @@
 <script>
 import { std } from '/src/std.ts';
 import PageFooter from './PageFooter.vue';
-import timeDiff from '../timediff.js';
+import timeDiff from '../timediff.ts';
 import {
     TablerLoading,
     TablerMarkdown,

diff --git a/api/web/src/components/Layer.vue b/api/web/src/components/Layer.vue
@@ -203,7 +203,7 @@ import { std } from '/src/std.ts';
 import PageFooter from './PageFooter.vue';
 import LayerStatus from './Layer/utils/Status.vue';
 import cronstrue from 'cronstrue';
-import timeDiff from '../timediff.js';
+import timeDiff from '../timediff.ts';
 import {
     TablerBreadCrumb,
     TablerMarkdown,

diff --git a/api/web/src/timediff.js b/api/web/src/timediff.js
diff --git a/api/web/src/timediff.ts b/api/web/src/timediff.ts
@@ -0,0 +1,33 @@
+export default function(updated: string | number): string {
+    if (typeof updated === 'string') {
+        updated = +new Date(updated)
+    }
+
+    const now = +new Date();
+
+    const msPerMinute = 60 * 1000;
+    const msPerHour = msPerMinute * 60;
+    const msPerDay = msPerHour * 24;
+    const msPerMonth = msPerDay * 30;
+    const msPerYear = msPerDay * 365;
+
+    if (updated < now) {
+        const elapsed = now - updated;
+
+        if (elapsed < msPerMinute) return Math.round(elapsed/1000) + ' seconds ago';
+        if (elapsed < msPerHour) return Math.round(elapsed/msPerMinute) + ' minutes ago';
+        if (elapsed < msPerDay ) return Math.round(elapsed/msPerHour ) + ' hours ago';
+        if (elapsed < msPerMonth) return '~' + Math.round(elapsed/msPerDay) + ' days ago';
+        if (elapsed < msPerYear) return '~' + Math.round(elapsed/msPerMonth) + ' months ago';
+        return '~' + Math.round(elapsed/msPerYear ) + ' years ago';
+    } else {
+        const elapsed = updated - now;
+
+        if (elapsed < msPerMinute) return 'in ' + Math.round(elapsed/1000) + ' seconds';
+        if (elapsed < msPerHour) return 'in ' + Math.round(elapsed/msPerMinute) + ' minutes';
+        if (elapsed < msPerDay ) return 'in ' + Math.round(elapsed/msPerHour ) + ' hours';
+        if (elapsed < msPerMonth) return 'in ~' + Math.round(elapsed/msPerDay) + ' days';
+        if (elapsed < msPerYear) return 'in ~' + Math.round(elapsed/msPerMonth) + ' months';
+        return 'in ~' + Math.round(elapsed/msPerYear ) + ' years';
+    }
+}