Cleanup

Author: fallaciousreasoning

src/layers/LiveWeather.svelte

@@ -1,148 +1,140 @@
 <script lang="ts" context="module">
   interface SubjectValue {
-    humidity: number;
-    issuedAt: string; // ISO-8601 date
+    humidity: number
+    issuedAt: string // ISO-8601 date
     pressure: {
-      atSeaLevel: string;
-    };
-    rainfall: string;
-    temp: number;
+      atSeaLevel: string
+    }
+    rainfall: string
+    temp: number
     wind: {
-      averageSpeed: 6;
-      direction: string; // Compass direction
-      strength: string; // Description of wind strength.
-    };
+      averageSpeed: 6
+      direction: string // Compass direction
+      strength: string // Description of wind strength.
+    }
   }
 
   interface MetServiceMapMarkerSubject {
-    asAt: string; // ISO-8601 date
-    value: SubjectValue;
-    type: "local" | "traffic-camera";
+    asAt: string // ISO-8601 date
+    value: SubjectValue
+    type: 'local' | 'traffic-camera'
   }
 
   interface MetServiceMapMarker {
-    label: string;
-    point: [number, number];
-    subject: MetServiceMapMarkerSubject[];
+    label: string
+    point: [number, number]
+    subject: MetServiceMapMarkerSubject[]
   }
 
   interface MetServiceLiveWeatherResponse {
-    isSkiSeason: boolean;
+    isSkiSeason: boolean
     layout: {
       primary: {
         map: {
-          markers: MetServiceMapMarker[];
-        };
-      };
-    };
+          markers: MetServiceMapMarker[]
+        }
+      }
+    }
   }
 </script>
 
 <script lang="ts">
-  import Feature from "ol/Feature";
-  import type { FeatureLike } from "ol/Feature";
-  import { fromLonLat, get, toLonLat } from "ol/proj";
-  import Point from "ol/geom/Point";
-  import { corsFetch } from "../utils/cors";
-  import { Style, Circle, Stroke, Fill, Text } from "ol/style";
-  import VectorLayer from "../ol/VectorLayer.svelte";
-  import VectorSource from "ol/source/Vector";
-  import Popup from "../ol/Popup.svelte";
-  import type { Coordinate } from "ol/coordinate";
-import RelativeTime from "../components/RelativeTime.svelte";
+  import Feature from 'ol/Feature'
+  import { fromLonLat } from 'ol/proj'
+  import Point from 'ol/geom/Point'
+  import { Style, Circle, Stroke, Fill, Text } from 'ol/style'
+  import VectorLayer from '../ol/VectorLayer.svelte'
+  import VectorSource from 'ol/source/Vector'
+  import Popup from '../ol/Popup.svelte'
+  import type { Coordinate } from 'ol/coordinate'
+  import RelativeTime from '../components/RelativeTime.svelte'
 
   const getWeatherIcon = (value: SubjectValue): string => {
     const options = {
-      sunCloud: "🌤️",
-      rain: "🌧️",
-      cloud: "☁️",
-      storm: "⛈️",
-      snow: "🌨️",
-      sun: "☀️",
-      wind: "💨",
-    };
+      sunCloud: '🌤️',
+      rain: '🌧️',
+      cloud: '☁️',
+      storm: '⛈️',
+      snow: '🌨️',
+      sun: '☀️',
+      wind: '💨',
+    }
 
-    const rain = parseFloat(value.rainfall);
+    const rain = parseFloat(value.rainfall)
 
     if (rain > 0) {
       // I guess it'll be snow/hail if its cold?
-      return value.temp < 0 ? options.snow : options.rain;
+      return value.temp < 0 ? options.snow : options.rain
     }
 
     // I guess wind greater than 20km/h is windy?
-    if (value.wind && value.wind.averageSpeed > 20) return options.wind;
+    if (value.wind && value.wind.averageSpeed > 20) return options.wind
 
     // I don't actually have the data to know if it's cloudy, so this seems safe.
-    return options.sunCloud;
-  };
+    return options.sunCloud
+  }
 
   const getFeatures = async () => {
-    const url = "/api/weather";
-    const response = await fetch(url);
-    const data = (await response.json()) as MetServiceLiveWeatherResponse;
+    const url = '/api/weather'
+    const response = await fetch(url)
+    const data = (await response.json()) as MetServiceLiveWeatherResponse
 
-    const observations = data?.layout?.primary?.map?.markers;
-    if (!observations) return null;
+    const observations = data?.layout?.primary?.map?.markers
+    if (!observations) return null
 
     return (
       observations
         // Filter out traffic cameras and stuff.
         .filter((marker) => {
-          if (!marker.subject.length) return false;
+          if (!marker.subject.length) return false
 
-          if (marker.subject[0].type === "traffic-camera") return false;
+          if (marker.subject[0].type === 'traffic-camera') return false
 
-          return true;
+          return true
         })
         .map((marker) => {
-          const coords = fromLonLat([marker.point[1], marker.point[0]]);
-          const feature = new Feature(new Point(coords));
-          const subject = marker.subject[0];
-          const observation = subject?.value;
+          const coords = fromLonLat([marker.point[1], marker.point[0]])
+          const feature = new Feature(new Point(coords))
+          const subject = marker.subject[0]
+          const observation = subject?.value
           if (observation && !observation.issuedAt)
-            observation.issuedAt = subject.asAt;
+            observation.issuedAt = subject.asAt
 
           feature.setStyle(
             new Style({
               image: new Circle({
                 radius: 12,
-                fill: new Fill({ color: "blue" }),
-                stroke: new Stroke({ color: "white" }),
+                fill: new Fill({ color: 'blue' }),
+                stroke: new Stroke({ color: 'white' }),
               }),
               text: new Text({
-                fill: new Fill({ color: "white" }),
+                fill: new Fill({ color: 'white' }),
                 text: getWeatherIcon(observation),
               }),
             })
-          );
-          feature.set("observation", observation);
-          feature.set("subject", subject);
+          )
+          feature.set('observation', observation)
+          feature.set('subject', subject)
 
-          return feature;
+          return feature
         })
-    );
-  };
+    )
+  }
 
-  let currentObservation: SubjectValue;
-  let coords: Coordinate;
+  let currentObservation: SubjectValue
+  let coords: Coordinate
 </script>
 
-<style>
-  .weather {
-    white-space: nowrap;
-  }
-</style>
-
 {#await getFeatures() then features}
   <VectorLayer
     id="weather"
     title="Live Weather"
     visible={false}
     on:featureClick={(event) => {
-      const feature = event.detail.feature;
-      const geometry = feature.getGeometry();
-      currentObservation = feature.get('observation');
-      coords = geometry.getCoordinates();
+      const feature = event.detail.feature
+      const geometry = feature.getGeometry()
+      currentObservation = feature.get('observation')
+      coords = geometry.getCoordinates()
     }}
     source={new VectorSource({ features })} />
 {/await}
@@ -173,10 +165,17 @@ import RelativeTime from "../components/RelativeTime.svelte";
         <p>
           <b>💨 Wind:</b>
           {currentObservation.wind.strength}
-          {currentObservation.wind.averageSpeed}km/h {currentObservation.wind.direction}
+          {currentObservation.wind.averageSpeed}km/h {currentObservation.wind
+            .direction}
         </p>
       {/if}
-      <i>Updated: <RelativeTime time={currentObservation.issuedAt}/></i>
+      <i>Updated: <RelativeTime time={currentObservation.issuedAt} /></i>
     </div>
   </Popup>
 {/if}
+
+<style>
+  .weather {
+    white-space: nowrap;
+  }
+</style>