feat: only show inspect button for BUFR files

wmo-im · Aug 16, 2024 · 34a4fed · 34a4fed
1 parent 13341c4
commit 34a4fed
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 34 deletions.
diff --git a/src/components/monitoring/NotificationDashboard.vue b/src/components/monitoring/NotificationDashboard.vue
@@ -215,10 +215,13 @@ export default defineComponent({
         // Methods
 
         // Method to get canonical URL from a message
-        const getCanonicalUrl = (links) => {
+        const getCanonicalInfo = (links) => {
             const canonicalLink = links.find(link => link.rel === "canonical");
             if (canonicalLink) {
-                return canonicalLink.href;
+                return {
+                    'url': canonicalLink.href,
+                    'type': canonicalLink.type
+                };
             }
             return '';
         }
@@ -228,7 +231,8 @@ export default defineComponent({
             const selectedFields = features.map(item => ({
                 id: item.id,
                 pubtime: new Date(item.properties.pubtime),
-                canonical_url: getCanonicalUrl(item.links),
+                canonical_url: getCanonicalInfo(item.links).url,
+                type: getCanonicalInfo(item.links).type,
                 wsi: item.properties.wigos_station_identifier,
                 coordinates: item.geometry?.coordinates ?? null // Geometry may not be present
             }));

diff --git a/src/components/monitoring/PublishedData.vue b/src/components/monitoring/PublishedData.vue
@@ -5,33 +5,34 @@
     </v-card-title>
     <!-- Limit the size of the list and add scroll feature -->
     <v-card-text>
-      <v-text-field v-model="fileSearch" placeholder="Search for a file..." clearable/>
+      <v-text-field v-model="fileSearch" placeholder="Search for a file..." clearable />
     </v-card-text>
     <div class="scrollable-file-list">
-      <template v-for="(file_url, index) in filteredFileUrls" :key="index">
+      <template v-for="(file, index) in filteredFiles" :key="index">
         <v-list class="file-list">
-            <v-row justify="center" align="center">
-              <v-col cols="5">
-
-                <!-- Display the timestamp -->
-                <div class="secondary">
-                  {{ formatTime(filteredPublishTimes[index]) }} UTC
-                </div>
-
-                <!-- Display the file name -->
-                <div class="url-font">
-                  {{ getFileName(file_url) }}
-                </div>
-              </v-col>
-
-              <v-col cols="3">
-                <DownloadButton :fileName="getFileName(file_url)" :fileUrl="file_url" :block="true" />
-              </v-col>
-
-              <v-col cols="3">
-                <InspectBufrButton :fileName="getFileName(file_url)" :fileUrl="file_url" :block="true" />
-              </v-col>
-            </v-row>
+          <v-row justify="center" align="center">
+            <v-col cols="5">
+
+              <!-- Display the timestamp -->
+              <div class="secondary">
+                {{ formatTime(filteredPublishTimes[index]) }} UTC
+              </div>
+
+              <!-- Display the file name -->
+              <div class="url-font">
+                {{ getFileName(file.url) }}
+              </div>
+            </v-col>
+
+            <v-col cols="3">
+              <DownloadButton :fileName="getFileName(file.url)" :fileUrl="file.url" :block="true" />
+            </v-col>
+
+            <v-col cols="3">
+              <InspectBufrButton v-if="file.type === 'application/x-bufr'" :fileName="getFileName(file.url)"
+                :fileUrl="file.url" :block="true" />
+            </v-col>
+          </v-row>
         </v-list>
         <v-divider />
       </template>
@@ -69,15 +70,18 @@ export default defineComponent({
 
     // Computed
 
-    // Filter the file URLs in published data by the search parameter
-    const filteredFileUrls = computed(() => {
-      // Create array of file urls from the messages
-      let fileUrls = props.messages.map(message => message.canonical_url);
+    // Filter the files in published data by the search parameter
+    const filteredFiles = computed(() => {
+      // Create array of objects with url and type from the messages
+      let fileObjects = props.messages.map(message => ({
+        url: message.canonical_url,
+        type: message.type
+      }));
 
       if (fileSearch.value) {
-        return fileUrls.filter(url => getFileName(url).includes(fileSearch.value));
+        return fileObjects.filter(file => getFileName(file.url).includes(fileSearch.value));
       }
-      return fileUrls;
+      return fileObjects;
     });
 
     // Filter the associated publish times by the search parameter
@@ -112,7 +116,7 @@ export default defineComponent({
 
     return {
       fileSearch,
-      filteredFileUrls,
+      filteredFiles,
       filteredPublishTimes,
       getFileName,
       formatTime