clear alerts on close

frontend/src/_helpers/hydroCron.js

@@ -37,6 +37,9 @@ const queryHydroCron = async (swordFeature = null) => {
     console.log('fake params', params)
   }
   let json = await fetchHydroCronData(url, params, swordFeature)
+  if (json == null) {
+    return
+  }
   if (featuresStore.shouldFakeData) {
     let fakeData = buildFakeData([...featuresStore.selectedFeatures, json])
     // update the visData before selecting the feature otherwise it will show blank
@@ -65,7 +68,6 @@ const fetchHydroCronData = async (url, params, swordFeature) => {
     console.log(result)
     console.log('json', json)
     let features = json.results.geojson.features
-    console.log('features', features)
     if (features.length > 0) {
       return json
     }else{

frontend/src/components/AlertPopup.vue

@@ -1,9 +1,15 @@
 <template>
-  <v-alert v-show="props.text != ''" class="zlert" :title="props.title" :text="props.text" :closeable="props.closeable"></v-alert>
+  <v-alert v-show="props.text != ''" class="zlert" :title="props.title" :text="props.text" :closeable="props.closeable" @click:close="closeEvent"></v-alert>
 </template>
 
 <script setup>
+import { useAlertStore } from '@/stores/alerts'
+const alertStore = useAlertStore()
 const props = defineProps({ text: { type: String, default: "" }, title: { default: "Alert" }, closeable: { default: true } })
+
+const closeEvent = () => {
+  alertStore.clearAlert()
+}
 </script>
 
 <style scoped>

frontend/src/stores/alerts.js

@@ -10,6 +10,10 @@ export const useAlertStore = defineStore('alerts', () => {
       displayed.value = {}
     }, alert.duration * 1000)
   }
+
+  function clearAlert(){
+    displayed.value = {}
+  }
 
-  return { displayed, displayAlert }
+  return { displayed, displayAlert, clearAlert }
 })