show prob for bottom sheet

CUAHSI · Feb 24, 2024 · 83470dc · 83470dc
1 parent 0957a9a
commit 83470dc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/frontend/src/components/TheBottomSheet.vue b/frontend/src/components/TheBottomSheet.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-bottom-sheet v-model="show" inset>
+  <v-bottom-sheet v-model="props.show" inset>
     <v-card class="text-center" height="100%">
       <v-card-text>
-        <v-btn @click="show = null">
+        <v-btn @click="props.show = null">
           close
         </v-btn>
 
@@ -18,11 +18,8 @@
   </v-bottom-sheet>
 </template>
 <script setup>
-import { ref } from 'vue'
 import ChartVis from "@/components/ChartVis.vue";
-defineProps(['sheetObject'])
-
-let show = ref(true)
+let props = defineProps(['sheetObject', 'show'])
 
 const data = {
     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],

diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="mapContainer"></div>
-    <TheBottomSheet :sheetObject="swotData" />
+    <TheBottomSheet :sheetObject="swotData" :show="showSheet" />
 </template>
 
 <script setup>
@@ -22,6 +22,7 @@ const modelsStore = useModelsStore();
 const alertStore = useAlertStore();
 
 let swotData = ref(null)
+let showSheet = ref(false)
 
 const modelAction = modelsStore.$onAction(
     ({
@@ -191,19 +192,26 @@ onMounted(() => {
         }
         const searchParams = new URLSearchParams(params)
         let query = url + '?' + searchParams.toString()
-        let result = await fetch(query, {
-            method: 'GET',
-            mode: 'cors',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-        })
-        console.log(result)
-        let json = await result.json()
-        swotData.value = json
-        console.log("json", json)
-        console.log("features", json.results.geojson.features)
-        alert(JSON.stringify(json))
+        showSheet.value = true
+        swotData.value = `Loading data for reach ${e.layer.feature.properties.reach_id} from ${url}`
+        try {
+            let result = await fetch(query, {
+                method: 'GET',
+                mode: 'cors',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+            })
+            let json = await result.json()
+            swotData.value = json
+            console.log(result)
+            console.log("json", json)
+            console.log("features", json.results.geojson.features)
+        } catch (e) {
+            console.error("Error fetching data", e)
+            alert(`Error fetching swot data: ${e}`)
+            showSheet.value = false
+        }
     });
 
     // add nodes layer to map