Merge pull request #337 from dfpc-coe/search-offset

Add Search Offset
dfpc-coe · Sep 11, 2024 · 6202cca · 6202cca
2 parents 8d1eff3 + 32bcf42
commit 6202cca
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 76 deletions.
diff --git a/api/web/src/components/CloudTAK/CoTView.vue b/api/web/src/components/CloudTAK/CoTView.vue
@@ -228,7 +228,7 @@
             </div>
 
 
-            <div class='col-12 pb-2'>
+            <div v-if='!feat.properties.archived' class='col-12 pb-2'>
                 <div class='d-flex mx-3'>
                     <label class='subheader'>Times</label>
                     <div class='ms-auto cursor-pointer text-blue subheader'>
@@ -261,14 +261,13 @@
                         </tbody>
                     </table>
                 </div>
-
-                <TablerToggle
-                    v-if='isArchivable'
-                    v-model='feat.properties.archived'
-                    label='Archived'
-                    class='mx-2'
-                />
             </div>
+            <TablerToggle
+                v-if='isArchivable'
+                v-model='feat.properties.archived'
+                label='Archived'
+                class='mx-2'
+            />
 
             <div
                 v-if='feat.properties.video'

diff --git a/api/web/src/components/CloudTAK/Map.vue b/api/web/src/components/CloudTAK/Map.vue
@@ -183,10 +183,11 @@
 
             <div
                 v-if='search.shown'
-                class='position-absolute top-0 text-white bg-dark'
+                class='position-absolute text-white bg-dark rounded'
                 style='
                     z-index: 1;
-                    left: 60px;
+                    top: 8px;
+                    left: 70px;
                     width: 200px;
                 '
             >

diff --git a/api/web/src/components/CloudTAK/Menu.vue b/api/web/src/components/CloudTAK/Menu.vue
@@ -29,7 +29,7 @@
                         <div class='modal-title'>
                             Sidebar
                         </div>
-                        <div/>
+                        <div />
                     </div>
                 </div>
                 <div

diff --git a/api/web/src/components/CloudTAK/Menu/Imports.vue b/api/web/src/components/CloudTAK/Menu/Imports.vue
@@ -51,9 +51,14 @@
                                 :status='imported.status'
                             />
                         </div>
+                        <div class='col-auto mx-2' v-tooltip='`${imported.mode} Import`'>
+                            <IconAmbulance v-if='imported.mode === "Mission"' :size='32' :stroke='0.5'/>
+                            <IconFile v-else-if='imported.mode === "Unknown"' :size='32' :stroke='0.5'/>
+                            <IconPackages v-else-if='imported.mode === "Package"' :size='32' :stroke='0.5'/>
+                        </div>
                         <div
                             class='mx-2 col-auto row'
-                            style='width: 300px;'
+                            style='width: 280px;'
                         >
                             <div
                                 class='text-truncate'
@@ -90,6 +95,9 @@ import {
 } from '@tak-ps/vue-tabler';
 import {
     IconPlus,
+    IconFile,
+    IconAmbulance,
+    IconPackages,
     IconRefresh,
 } from '@tabler/icons-vue';
 import MenuTemplate from '../util/MenuTemplate.vue';
@@ -106,6 +114,9 @@ export default {
         TablerPager,
         TablerLoading,
         IconPlus,
+        IconFile,
+        IconAmbulance,
+        IconPackages,
         IconRefresh,
         MenuTemplate,
     },

diff --git a/api/web/src/components/CloudTAK/util/Attachments.vue b/api/web/src/components/CloudTAK/util/Attachments.vue
@@ -39,36 +39,41 @@
                 :create='false'
             />
             <template v-else>
-                <template v-for='file of files'>
-                    <div class='col-12 hover-button px-2 py-2 d-flex align-items-center'>
-                        <IconPhoto
-                            v-if='[".png", ".jpg"].includes(file.ext)'
-                            :size='24'
-                            :stroke='1'
-                        />
-                        <IconFile
-                            v-else
-                            :size='24'
-                            :stroke='1'
-                        />
-
-                        <span
-                            class='mx-2 text-truncate'
-                            style='max-width: 300px;'
-                            v-text='file.name'
-                        />
-
-                        <div class='ms-auto'>
-                            <IconDownload
-                                v-tooltip='"Download Asset"'
+                <div class='row'>
+                    <template v-for='file of files'>
+                        <div class='col-4 px-2 py-2'>
+                            <img
+                                v-if='[".png", ".jpg"].includes(file.ext)'
+                                :src='downloadAssetUrl(file)'
+                                :size='24'
+                                :stroke='1'
+                            />
+                            <IconFile
+                                v-else
                                 :size='24'
                                 :stroke='1'
-                                class='cursor-pointer'
-                                @click='downloadAsset(file)'
                             />
+
+                            <div class='d-flex align-items-center mt-2'>
+                                <span
+                                    class='mx-2 text-truncate'
+                                    style='max-width: 300px;'
+                                    v-text='file.name'
+                                />
+
+                                <div class='ms-auto'>
+                                    <IconDownload
+                                        v-tooltip='"Download Asset"'
+                                        :size='24'
+                                        :stroke='1'
+                                        class='cursor-pointer'
+                                        @click='downloadAsset(file)'
+                                    />
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                </template>
+                    </template>
+                </div>
             </template>
         </div>
     </div>
@@ -80,7 +85,6 @@ import Upload from '../../util/Upload.vue';
 import {
     IconFile,
     IconFileUpload,
-    IconPhoto,
     IconDownload
 } from '@tabler/icons-vue';
 
@@ -93,7 +97,6 @@ export default {
     name: 'COTAttachments',
     components: {
         Upload,
-        IconPhoto,
         IconFile,
         IconDownload,
         IconFileUpload,
@@ -151,10 +154,13 @@ export default {
         uploadURL: function() {
             return stdurl(`/api/attachment`);
         },
-        downloadAsset: async function(file) {
+        downloadAssetUrl: function(file) {
             const url = stdurl(`/api/attachment/${file.hash}`);
             url.searchParams.append('token', localStorage.token);
-            window.open(url, "_blank")
+            return url;
+        },
+        downloadAsset: async function(file) {
+            window.open(this.downloadAssetUrl(file), "_blank")
         },
         fetchMetadata: async function() {
             const url = stdurl(`/api/attachment`);

diff --git a/api/web/src/components/CloudTAK/util/Contact.vue b/api/web/src/components/CloudTAK/util/Contact.vue
@@ -30,7 +30,7 @@
                 }'
             >
                 <div
-                    class='text-truncate'
+                    class='text-truncate user-select-none'
                     v-text='contact.callsign'
                 />
                 <div

diff --git a/api/web/src/components/CloudTAK/util/Feature.vue b/api/web/src/components/CloudTAK/util/Feature.vue
@@ -1,7 +1,9 @@
 <template>
     <Contact
         v-if='feature.properties.group'
+        class='px-2 py-2'
         :button-chat='false'
+        :compact='compact'
         :contact='{
             "uid": feature.id,
             "callsign": feature.properties.callsign,
@@ -11,7 +13,7 @@
     />
     <div
         v-else
-        class='d-flex align-items-center px-3 py-2 me-2'
+        class='d-flex align-items-center px-3 py-2'
         :class='{
             "cursor-pointer": isZoomable,
             "cursor-default": !isZoomable,
@@ -26,11 +28,12 @@
             class='me-2'
         />
         <div
-            class='text-truncate'
-            v-text='feature.properties.callsign'
+            class='text-truncate user-select-none'
+            v-text='feature.properties.callsign || feature.properties.name || "Unnamed"'
         />
 
         <div
+            v-if='deleteButton'
             class='ms-auto btn-list hover-button-hidden'
         >
             <TablerDelete
@@ -70,6 +73,10 @@ export default {
         mission: {
             type: String,
         },
+        deleteButton: {
+            type: Boolean,
+            default: true
+        },
         hover: {
             type: Boolean,
             default: true

diff --git a/api/web/src/components/CloudTAK/util/MultipleSelect.vue b/api/web/src/components/CloudTAK/util/MultipleSelect.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         ref='selectMenu'
-        class='position-absolute bg-white rounded'
+        class='position-absolute bg-dark rounded'
         style='
             width: 200px;
             z-index: 1;
@@ -14,49 +14,27 @@
         <div
             v-for='feat in select.feats'
             :key='feat.properties.id'
-            class='rounded col-12 d-flex align-items-center cursor-pointer hover-light'
+            class='col-12 text-white'
             @click='$emit("selected", feat)'
         >
-            <span class='ms-2'>
-                <IconPoint
-                    v-if='feat.geometry.type.includes("Point")'
-                    :size='20'
-                    :stroke='1'
-                />
-                <IconLine
-                    v-else-if='feat.geometry.type.includes("Line")'
-                    :size='20'
-                    :stroke='1'
-                />
-                <IconPolygon
-                    v-else-if='feat.geometry.type.includes("Polygon")'
-                    :size='20'
-                    :stroke='1'
-                />
-            </span>
-            <span
-                class='subheader me-2'
-                v-text='feat.properties.callsign ? feat.properties.callsign.trim() : "Unnamed Feature"'
+            <Feature
+                :feature='feat'
+                :compact='true'
+                :deleteButton='false'
             />
         </div>
     </div>
 </template>
 
 <script>
-import {
-    IconPoint,
-    IconLine,
-    IconPolygon
-} from '@tabler/icons-vue';
+import Feature from './Feature.vue'
 import { useMapStore } from '/src/stores/map.ts';
 import { mapState, mapActions } from 'pinia'
 
 export default {
     name: 'MultipleSelect',
     components: {
-        IconPoint,
-        IconLine,
-        IconPolygon
+        Feature
     },
     emits: [
         'selected'
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ @@
                             <div class='modal-title'>
                                 Sidebar
                             </div>
-                            <div/>
+                            <div />
                         </div>
                     </div>
                     <div
@@ Expand Down @@