Update TablerInput

dfpc-coe · Mar 11, 2024 · 41db5f9 · 41db5f9
1 parent f5a2243
commit 41db5f9
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 49 deletions.
diff --git a/api/web/package-lock.json b/api/web/package-lock.json
diff --git a/api/web/package.json b/api/web/package.json
@@ -11,7 +11,7 @@
     },
     "dependencies": {
         "@tabler/core": "^1.0.0-beta16",
-        "@tabler/icons-vue": "^2.44.0",
+        "@tabler/icons-vue": "^3.0.0",
         "@tak-ps/vue-tabler": "^3.15.0",
         "@turf/point-on-feature": "^6.5.0",
         "apexcharts": "^3.41.0",

diff --git a/api/web/src/components/CloudTAK/Menu/Overlays.vue b/api/web/src/components/CloudTAK/Menu/Overlays.vue
@@ -31,6 +31,7 @@
             </div>
             <div :key='p' v-for='p of Object.keys(isEditing.single.layout)' class='col-12 d-flex bg-gray-500 px-2 my-2 py-2'>
                 <span v-text='p'/>
+
                 <span class='ms-auto' v-text='isEditing.single.layout[p]'/>
             </div>
         </div>
@@ -41,7 +42,13 @@
             </div>
             <div :key='p' v-for='p of Object.keys(isEditing.single.paint)' class='col-12 d-flex bg-gray-500 px-2 my-2 py-2'>
                 <span v-text='p'/>
-                <span class='ms-auto' v-text='isEditing.single.paint[p]'/>
+
+                <template v-if='p === "fill-opacity"'>
+                    <TablerRange label='Opacity' v-model='isEditing.single.paint[p]' :min='0' :max='1' :step='0.1'/>
+                </template>
+                <template v-else>
+                    <span class='ms-auto' v-text='isEditing.single.paint[p]'/>
+                </template>
             </div>
         </div>
     </template>
@@ -112,6 +119,7 @@
 import {
     TablerDelete,
     TablerLoading,
+    TablerInput,
     TablerRange
 } from '@tak-ps/vue-tabler';
 import {
@@ -140,6 +148,18 @@ export default {
     computed: {
         ...mapState(useMapStore, ['layers'])
     },
+    watch: {
+        isEditing: {
+            deep: true,
+            handler: function() {
+                if (!this.isEditing || !this.isEditing.single) return;
+
+                if (this.isEditing.single['fill-opacity']) {
+                    mapStore.map.setPaintProperty('fill-opacity', this.isEditing.single['fill-opacity']);
+                }
+            }
+        }
+    },
     methods: {
         removeLayer: async function(layer) {
             this.loading = true;
@@ -175,6 +195,7 @@ export default {
     },
     components: {
         TablerRange,
+        TablerInput,
         TablerLoading,
         TablerDelete,
         IconMaximize,