Add refresh buttons to weather data pages

src/views/WeatherView.vue

@@ -10,7 +10,7 @@ const locationStore = useLocationStore()
 const weatherStore = useWeatherStore()
 
 const coordinates = ref(null)
-const alerts = ref(null)
+const refreshing = ref(false)
 
 
 const panelHeadingTitle = computed(() => {
@@ -25,27 +25,39 @@ const panelHeadingTitle = computed(() => {
 
 
 onActivated(() => {
-    fetchWeather()
-})
-
-
-function coordinatesUpdated(coords) {
-    weatherStore.clearWeather()
-    weatherStore.setCoordinates(coords)
-    fetchWeather()
-}
-
-
-async function fetchWeather() {
 
     if (!weatherStore.coordinates) {
         router.push('/')
         return
     }
 
-    const forecast = await weatherStore.getForecast()
+    refreshing.value = true
+    fetchWeather().then(() => {
+        refreshing.value = false
+    })
+})
+
+
+async function coordinatesUpdated(coords) {
+    refreshing.value = true
+    weatherStore.clearWeather()
+    weatherStore.setCoordinates(coords)
+    await fetchWeather()
+    refreshing.value = false
+}
+
+
+async function fetchWeather() {
+    await weatherStore.getForecast()
     coordinates.value = weatherStore.coordinates
-    alerts.value = weatherStore.alerts
+}
+
+
+async function refreshWeather() {
+    refreshing.value = true
+    weatherStore.clearWeather(true)
+    await fetchWeather()
+    refreshing.value = false
 }
 
 
@@ -64,7 +76,8 @@ function showHourly(period) {
   <main>
     <div style="display: flex; flex-direction: column;">
 
-      <o-field>
+      <div class="block"
+           style="display: flex; justify-content: space-between; align-items: center;">
         <o-select v-if="weatherStore.weather"
                   v-model="coordinates"
                   @update:model-value="coordinatesUpdated">
@@ -74,15 +87,21 @@ function showHourly(period) {
             {{ location.cityState }}
           </option>
         </o-select>
-      </o-field>
+        <o-button variant="primary"
+                  icon-left="refresh"
+                  @click="refreshWeather()"
+                  :disabled="refreshing">
+          {{ refreshing ? "Refreshing" : "Refresh" }}
+        </o-button>
+      </div>
 
-      <div v-if="alerts?.features?.length">
+      <div v-if="weatherStore.alerts?.features?.length">
         <o-notification variant="warning"
                         icon="warning"
                         @click="$router.push('/alerts')"
                         style="cursor: pointer;">
           <p class="has-text-weight-bold">Watches In Effect</p>
-          <p>Updated {{ new Date(alerts.updated).toLocaleTimeString('en-US', {timeStyle: 'short'}) }}</p>
+          <p>Updated {{ new Date(weatherStore.alerts.updated).toLocaleTimeString('en-US', {timeStyle: 'short'}) }}</p>
         </o-notification>
       </div>
 
@@ -101,6 +120,7 @@ function showHourly(period) {
                  :key="period.number"
                  class="weather-period is-size-7 has-text-weight-bold"
                  :class="{daytime: period.isDaytime}"
+                 style="cursor: pointer;"
                  @click="showHourly(period)">
 
               <p>{{ period.name }}</p>