Merge commit '16fd3042c4fcf30f098647e0593663ca2634af9a' into swot-front

frontend/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@vueuse/core": "^10.5.0",
+    "chart.js": "^4.4.1",
     "esri-leaflet": "^3.0.12",
     "esri-leaflet-vector": "^4.2.3",
     "leaflet": "^1.9.4",
@@ -24,6 +25,7 @@
     "swagger-ui": "^5.9.0",
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.3.4",
+    "vue-chartjs": "^5.3.0",
     "vue-router": "^4.2.4",
     "vuetify": "^3.3.21"
   },

frontend/src/components/ChartVis.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-theme-provider theme="light" with-background>
+    <Line :data="props.data" :options="props.options" />
+</v-theme-provider>
+</template>
+
+<script setup>
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js'
+import { Line } from 'vue-chartjs'
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)
+const props = defineProps(['data', 'options'])
+</script>

frontend/src/components/TheBottomSheet.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-bottom-sheet v-model="show" inset>
+    <v-card class="text-center" height="100%">
+      <v-card-text>
+        <v-btn @click="show = null">
+          close
+        </v-btn>
+
+        <br>
+        <br>
+
+        <div>
+          {{ sheetObject }}
+          <ChartVis :data="data" :options="options" />
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-bottom-sheet>
+</template>
+<script setup>
+import { ref } from 'vue'
+import ChartVis from "@/components/ChartVis.vue";
+defineProps(['sheetObject'])
+
+let show = ref(true)
+
+const data = {
+    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
+}
+</script>

frontend/src/components/TheLeafletMap.vue

@@ -1,5 +1,6 @@
 <template>
     <div id="mapContainer"></div>
+    <TheBottomSheet :sheetObject="swotData" />
 </template>
 
 <script setup>
@@ -9,16 +10,19 @@ import L from 'leaflet'
 import * as esriLeaflet from "esri-leaflet";
 // import * as esriLeafletVector from 'esri-leaflet-vector';
 import "leaflet-easybutton/src/easy-button";
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useMapStore } from '@/stores/map'
 import { useModelsStore } from '@/stores/models'
 import { useAlertStore } from '@/stores/alerts'
 import { APP_API_URL } from '@/constants'
+import TheBottomSheet from "./TheBottomSheet.vue";
 
 const mapStore = useMapStore()
 const modelsStore = useModelsStore();
 const alertStore = useAlertStore();
 
+let swotData = ref(null)
+
 const modelAction = modelsStore.$onAction(
     ({
         name, // name of the action
@@ -151,8 +155,20 @@ onMounted(() => {
     }).addTo(map);
 
     reachesFeatures.on("click", async function (e) {
-        console.log(e.layer.feature.properties)
-        // alert(JSON.stringify(e.layer.feature.properties))
+        const popup = L.popup();
+        const content = `
+        <h3>${e.layer.feature.properties.river_name}</h3>
+        <h4>Reach ID: ${e.layer.feature.properties.reach_id}</h4>
+        <p>
+            <ul>
+                <li>SWORD Width: ${e.layer.feature.properties.width}</li>
+                <li>SWORD WSE: ${e.layer.feature.properties.wse}</li>
+                <li>SWORD Slope: ${e.layer.feature.properties.slope}</li>
+                <li>SWOT Orbit: ${e.layer.feature.properties.swot_orbit}</li>
+            </ul>
+        </p>
+        `;
+        popup.setLatLng(e.latlng).setContent(content).openOn(map);
         reachesFeatures.setFeatureStyle(e.layer.feature.id, {
             color: "#9D78D2",
             weight: 3,
@@ -184,6 +200,7 @@ onMounted(() => {
         })
         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))