Show both "latest" and "loop" radar images

src/stores/weather.js

@@ -11,6 +11,8 @@ const getDefaults = () => {
         cityState,
         weather: null,
         forecast: null,
+        radarLatestURL: null,
+        radarLoopURL: null,
     }
 }
 
@@ -28,6 +30,8 @@ export const useWeatherStore = defineStore('weather', {
             this.setCityState(null)
             this.setWeather(null)
             this.setForecast(null)
+            this.radarLatestURL = null
+            this.radarLoopURL = null
         },
 
         async getWeather() {
@@ -48,6 +52,10 @@ export const useWeatherStore = defineStore('weather', {
                     this.setCityState(cityState)
                 }
 
+                const station = weather.properties.radarStation
+                this.radarLatestURL = `https://radar.weather.gov/ridge/standard/${station}_0.gif`
+                this.radarLoopURL = `https://radar.weather.gov/ridge/standard/${station}_loop.gif`
+
                 this.setWeather(weather)
             }
 

src/views/WeatherView.vue

@@ -25,14 +25,6 @@ export default {
             generated = generated.toLocaleTimeString('en-US', {timeStyle: 'short'})
             return `Forecast @ ${generated}`
         },
-
-        radarURL() {
-            if (this.weatherStore.weather) {
-                const station = this.weatherStore.weather.properties.radarStation
-                return `https://radar.weather.gov/ridge/standard/${station}_loop.gif`
-            }
-        },
-
     },
 
     activated() {
@@ -128,7 +120,14 @@ export default {
           Radar
         </p>
         <div class="panel-block">
-          <img :src="radarURL" />
+          <div class="columns">
+            <div class="column">
+              <img :src="weatherStore.radarLatestURL" />
+            </div>
+            <div class="column">
+              <img :src="weatherStore.radarLoopURL" />
+            </div>
+          </div>
         </div>
       </nav>