Revamped synop form result

wmo-im · Aug 10, 2023 · 02017c6 · 02017c6
1 parent 1f4f270
commit 02017c6
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 177 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/src/components/DownloadButton.vue b/webapp/src/components/DownloadButton.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-btn color="primary" @click="downloadFile">Download</v-btn>
+  <v-btn color="#00BD9D" append-icon="mdi-download" @click="downloadFile">Download</v-btn>
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 import { VBtn } from 'vuetify/lib/components/index.mjs';
 
 export default defineComponent({
@@ -18,11 +18,11 @@ export default defineComponent({
         VBtn
     },
     setup(props) {
-        const fileName = ref("");
+        // Extract the file name from the URL
+        const fileName = props.fileUrl.split('/').pop();
+
         // function to download file
         const downloadFile = () => {
-            // Extract the file name from the URL
-            fileName.value = props.fileUrl.substring(props.fileUrl.lastIndexOf('/') + 1);
             // Create a temporary anchor element to initiate the download
             const link = document.createElement('a');
             link.href = props.fileUrl;
@@ -31,8 +31,8 @@ export default defineComponent({
             link.click();
         };
         return {
-            downloadFile,
-            fileName
+            fileName,
+            downloadFile
         };
     },
 });  

diff --git a/webapp/src/components/InspectBufrButton.vue b/webapp/src/components/InspectBufrButton.vue
@@ -1,7 +1,7 @@
 <template>
   <v-dialog v-model="dialog" width="auto">
     <template v-slot:activator="{ props }">
-      <v-btn color="secondary" v-bind="props" @click="inspectFile">Inspect</v-btn>
+      <v-btn color="#49C6E5" append-icon="mdi-feature-search" v-bind="props" @click="inspectFile">Inspect</v-btn>
     </template>
       <v-card class="inspect-content">
         <v-card-title>{{ fileName }}</v-card-title>
@@ -13,7 +13,7 @@
           </div>
         </v-card-text>
         <v-card-actions>
-          <v-btn color="primary" block @click="dialog = false">Close Dialog</v-btn>
+          <v-btn color="#1994b3" block @click="dialog = false">Close Dialog</v-btn>
         </v-card-actions>
       </v-card>
   </v-dialog>
@@ -42,21 +42,12 @@ export default defineComponent({
         VSelect,
     },
     setup(props) {
-        const fileName = ref("");
+        // Extract the file name from the URL
+        const fileName = props.fileUrl.split('/').pop();
         const itemsInBufr = ref([]);
         const dialog = ref(false);
         // function to create new object and to add to store
         const inspectFile = async () => {
-            if(props.fileUrl == undefined) {
-                console.log("props.fileUrl is undefined");
-                return;
-            }
-            // check if fileUrl contains / 
-            if(props.fileUrl.indexOf("/") == -1) {
-                console.log("props.fileUrl does not contain /");
-                return;
-            }
-            fileName.value = props.fileUrl.substring(props.fileUrl.lastIndexOf('/') + 1);
             dialog.value = true;
             // check if TEST_MODE is set in .env file or if VITE_API_URL is not set
             if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
@@ -99,7 +90,6 @@ export default defineComponent({
         };
         const callInspect = async () => {
             // set items_from_bufr back to empty array
-            console.log("execute wis2box-bufr2geojson process on file: " + props.fileUrl);
             itemsInBufr.value = [];
             var payload = {
                 inputs: {