Add star filters

Author: fallaciousreasoning

src/components/mountains/RoutesFilter.svelte

@@ -14,6 +14,8 @@
     ice,
     mixed,
     scrollPos,
+    minStars,
+    maxStars,
   } from '../../stores/mountainFilters'
   import Card from '../Card.svelte'
   import { fromLonLat } from 'ol/proj'
@@ -54,6 +56,7 @@
         (m.latlng &&
           containsCoordinate($extent, fromLonLat([m.latlng[1], m.latlng[0]])))
     )
+    // Filter grade
     .filter(([, r]) => {
       // If we aren't filtering by anything, include everything.
       if (!$alpine && !$rock && !$ice && !$mixed) return true
@@ -66,6 +69,12 @@
         (grade.mixed && $mixed)
       )
     })
+    // Filter stars
+    .filter(([,r]) => {
+      if ($minStars !== 'any' && r.quality < $minStars) return false
+      if ($maxStars !== 'any' && r.quality > $maxStars) return false
+      return true
+    })
 
   let sorted: Route[] = []
 </script>
@@ -105,6 +114,30 @@
         <input type="checkbox" bind:checked={$mixed} />
       </label>
     </div>
+    <details>
+      <summary> Stars </summary>
+      <div class="flex flex-col">
+        <label>
+          Min:
+          <select bind:value={$minStars}>
+            <option value='any'>Any</option>
+            <option value={1}>1</option>
+            <option value={2}>2</option>
+            <option value={3}>3</option>
+          </select>
+        </label>
+        <label>
+          Max:
+          <select bind:value={$maxStars}>
+            <option value='any'>Any</option>
+            <option>0</option>
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+          </select>
+        </label>
+      </div>
+    </details>
     <SortyBy
       options={[
         { name: 'name', getter: ([m, r]) => r.name },

src/stores/mountainFilters.ts

@@ -12,3 +12,6 @@ export const alpine = writable(false)
 export const rock = writable(false)
 export const ice = writable(false)
 export const mixed = writable(false)
+
+export const minStars = writable<'any' | 1 | 2 | 3>('any');
+export const maxStars = writable<'any' | 0 | 1 | 2 | 3>('any');