Fixed to Env Editor

dfpc-coe · Dec 9, 2024 · ec569ad · ec569ad
1 parent ea0ec3b
commit ec569ad
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 62 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
@@ -15,7 +15,7 @@
         "@sinclair/typebox": "^0.34.0",
         "@tabler/core": "^1.0.0-beta16",
         "@tabler/icons-vue": "^3.0.0",
-        "@tak-ps/vue-tabler": "^3.60.2",
+        "@tak-ps/vue-tabler": "^3.61.1",
         "@turf/bbox": "^7.1.0",
         "@turf/boolean-point-in-polygon": "^7.1.0",
         "@turf/boolean-touches": "^7.1.0",
@@ -29,7 +29,7 @@
         "dropzone": "^6.0.0-beta.2",
         "floating-vue": "^2.0.0-beta.17",
         "jsonata": "^2.0.4",
-        "maplibre-gl": "^5.0.0-pre.8",
+        "maplibre-gl": "^5.0.0-pre.9",
         "moment": "^2.29.3",
         "p12-pem": "^1.0.5",
         "phone": "^3.1.42",

diff --git a/api/web/src/components/Connection.vue b/api/web/src/components/Connection.vue
@@ -17,7 +17,10 @@
                 <div class='row row-deck row-cards'>
                     <div class='col-lg-12'>
                         <div class='card'>
-                            <TablerLoading v-if='loading.connection' />
+                            <TablerLoading
+                                v-if='loading.connection'
+                                class='text-white'
+                            />
                             <template v-else>
                                 <div class='card-header'>
                                     <ConnectionStatus :connection='connection' />

diff --git a/api/web/src/components/Data.vue b/api/web/src/components/Data.vue
@@ -14,6 +14,7 @@
 
         <TablerLoading
             v-if='loading.data'
+            class='text-white'
             desc='Loading Data'
         />
         <div

diff --git a/api/web/src/components/Layer.vue b/api/web/src/components/Layer.vue
@@ -14,6 +14,7 @@
 
         <TablerLoading
             v-if='loading.layer'
+            class='text-white'
             desc='Loading Layer'
         />
         <div

diff --git a/api/web/src/components/Layer/LayerEnvironment.vue b/api/web/src/components/Layer/LayerEnvironment.vue
@@ -16,7 +16,7 @@
                         class='cursor-pointer'
                         @click='raw = true'
                     />
-                    <IconSettings
+                    <IconPencil
                         :size='32'
                         :stroke='1'
                         class='cursor-pointer'
@@ -130,7 +130,7 @@ import Schema from './utils/Schema.vue';
 import {
     IconX,
     IconCode,
-    IconSettings,
+    IconPencil,
 } from '@tabler/icons-vue'
 
 export default {
@@ -139,7 +139,7 @@ export default {
         Schema,
         IconCode,
         IconX,
-        IconSettings,
+        IconPencil,
         TablerTimeZone,
         TablerAlert,
         TablerLoading,

diff --git a/api/web/src/components/Layer/utils/SchemaModal.vue b/api/web/src/components/Layer/utils/SchemaModal.vue
@@ -4,21 +4,20 @@
             type='button'
             class='btn-close'
             aria-label='Close'
-            @click='$emit("close")'
+            @click='emit("close")'
         />
         <div class='modal-status bg-yellow' />
         <div class='modal-header'>
             <span class='modal-title'>Row Editor</span>
-            <TablerDelete
-                v-if='!disabled'
-                displaytype='icon'
-                @delete='$emit("remove")'
-            />
+            <div class='ms-auto'>
+                <TablerDelete
+                    v-if='!disabled'
+                    displaytype='icon'
+                    @delete='emit("remove")'
+                />
+            </div>
         </div>
-        <div
-            v-if='!loading'
-            class='modal-body py-4'
-        >
+        <div class='modal-body py-4' >
             <TablerSchema
                 v-model='row'
                 :schema='schema'
@@ -28,56 +27,46 @@
             <button
                 v-if='!disabled'
                 class='btn btn-primary w-100 mt-4'
-                @click='$emit("done", row)'
+                @click='emit("done", row)'
             >
                 Done
             </button>
         </div>
     </TablerModal>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from 'vue';
 import {
     TablerModal,
     TablerSchema,
     TablerDelete
 } from '@tak-ps/vue-tabler';
 
-export default {
-    name: 'LayerEnvironmentModal',
-    components: {
-        TablerModal,
-        TablerDelete,
-        TablerSchema
+const props = defineProps({
+    edit: {
+        type: Object,
+        required: true
     },
-    props: {
-        edit: {
-            type: Object,
-            required: true
-        },
-        disabled: {
-            type: Boolean,
-            default: true
-        },
-        schema: {
-            type: Object,
-            required: true
-        },
+    disabled: {
+        type: Boolean,
+        default: true
     },
-    emits: [
-        'close',
-        'remove',
-        'done'
-    ],
-    data: function() {
-        return {
-            loading: true,
-            row: {}
-        }
+    schema: {
+        type: Object,
+        required: true
     },
-    mounted: function() {
-        this.row = Object.assign(this.row, JSON.parse(JSON.stringify(this.edit)));
-        this.loading = false;
-    }
-}
+});
+
+const emit = defineEmits([
+    'close',
+    'remove',
+    'done'
+]);
+
+const row = ref({});
+
+onMounted(() => {
+    row.value = Object.assign(row.value, JSON.parse(JSON.stringify(props.edit)));
+})
 </script>