display alert on network err

CUAHSI · Feb 24, 2024 · bff75dc · bff75dc
1 parent 0d7f5aa
commit bff75dc
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/frontend/src/components/TheBottomSheet.vue b/frontend/src/components/TheBottomSheet.vue
@@ -1,38 +1,41 @@
 <template>
   <v-bottom-sheet v-model="props.show" inset>
     <v-card class="text-center" height="100%">
+      <v-card-title>
+        <h3>SWOT Data</h3>
+      </v-card-title>
       <v-card-text>
-        <v-btn @click="props.show = null">
-          close
-        </v-btn>
-
-        <br>
-        <br>
-
         <div>
-          {{ sheetObject }}
           <ChartVis :data="data" :options="options" />
         </div>
       </v-card-text>
     </v-card>
+    <v-card class="text-center">
+      <v-card-text>
+        <p>{{ sheetObject }}</p>
+        <v-btn @click="props.show = null">
+          close
+        </v-btn>
+      </v-card-text>
+    </v-card>
   </v-bottom-sheet>
 </template>
 <script setup>
 import ChartVis from "@/components/ChartVis.vue";
 let props = defineProps(['sheetObject', 'show'])
 
 const data = {
-    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-    datasets: [
-        {
-            label: 'SWOT DATA',
-            data: [40, 39, 10, 40, 39, 80, 40]
-        }
-    ]
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [
+    {
+      label: 'SWOT DATA',
+      data: [40, 39, 10, 40, 39, 80, 40]
+    }
+  ]
 }
 
 const options = {
-    responsive: true,
-    maintainAspectRatio: false
+  responsive: true,
+  maintainAspectRatio: false
 }
 </script>
diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
@@ -193,7 +193,7 @@ onMounted(() => {
         const searchParams = new URLSearchParams(params)
         let query = url + '?' + searchParams.toString()
         showSheet.value = true
-        swotData.value = `Loading data for reach ${e.layer.feature.properties.reach_id} from ${url}`
+        swotData.value = `Swot data for reach ${e.layer.feature.properties.reach_id} from ${url} with params ${searchParams.toString()}`
         try {
             let result = await fetch(query, {
                 method: 'GET',
@@ -209,7 +209,13 @@ onMounted(() => {
             console.log("features", json.results.geojson.features)
         } catch (e) {
             console.error("Error fetching data", e)
-            alert(`Error fetching swot data: ${e}`)
+            alertStore.displayAlert({
+                title: 'Error fetching SWOT data',
+                text: `Error while fetching SWOT data from ${url}: ${e}`,
+                type: 'error',
+                closable: true,
+                duration: 3
+            })
             showSheet.value = false
         }
     });