Formalise filtering by tags

Author: penelopeysm

src/App.svelte

@@ -14,14 +14,16 @@
     // Filter concerts
     let filters: FiltersType = {
         searchTerm: "",
-        wigmoreU35: false,
+        booleanTagNames: [],
     };
     let concertsToShow: HashedConcert[];
     let selectedConcertHashes: string[] = [];
     let selectedConcerts: HashedConcert[];
     $: {
         concertsToShow = concerts.filter((c) => satisfies(c, filters));
-        selectedConcerts = concertsToShow.filter((c) => selectedConcertHashes.includes(c.hash));
+        selectedConcerts = concertsToShow.filter((c) =>
+            selectedConcertHashes.includes(c.hash),
+        );
     }
 </script>
 

src/lib/Filters.svelte

@@ -1,27 +1,55 @@
 <script lang="ts">
-    import { type FiltersType } from "src/lib/filters";
+    import { type FiltersType, allBooleanFilters } from "src/lib/filters";
+    import Tag from "src/lib/Tag.svelte";
+
     export let filters: FiltersType;
-    $: {
-        console.log(filters);
+
+    function toggleBooleanTag(
+        event: CustomEvent<{ boolFilter: BooleanFilter }>,
+    ) {
+        const { boolFilter } = event.detail;
+
+        if (filters.booleanTagNames.includes(boolFilter.tagName)) {
+            filters.booleanTagNames = filters.booleanTagNames.filter(
+                (tagName) => tagName !== boolFilter.tagName,
+            );
+        } else {
+            filters.booleanTagNames = [
+                ...filters.booleanTagNames,
+                boolFilter.tagName,
+            ];
+        }
     }
 </script>
 
 <div class="filters">
-    <input
-        id="search"
-        type="text"
-        placeholder="Search for a composer, performer, etc."
-        bind:value={filters.searchTerm}
-    />
-
-    <div id="u35">
+    <span class="bold">Currently filtering by</span>
+    <div class="horizontal-flex">
+
         <input
-            type="checkbox"
-            id="wigmoreU35"
-            name="wigmoreU35"
-            bind:checked={filters.wigmoreU35}
+            id="search"
+            type="text"
+            placeholder="Search for a composer, performer, etc."
+            bind:value={filters.searchTerm}
         />
-        <label for="wigmoreU35">£5 Wigmore Hall under-35 tickets only?</label>
+        {#each allBooleanFilters as boolFilter}
+            {#if filters.booleanTagNames.includes(boolFilter.tagName)}
+                <Tag
+                    {boolFilter}
+                    mode="canRemove"
+                    on:clicked={toggleBooleanTag}
+                />
+            {/if}
+        {/each}
+    </div>
+
+    <span class="bold">Add a filter</span>
+    <div class="horizontal-flex">
+        {#each allBooleanFilters as boolFilter}
+            {#if !filters.booleanTagNames.includes(boolFilter.tagName)}
+                <Tag {boolFilter} mode="canAdd" on:clicked={toggleBooleanTag} />
+            {/if}
+        {/each}
     </div>
 </div>
 
@@ -35,7 +63,7 @@
 
         display: flex;
         flex-direction: column;
-        gap: 5px;
+        gap: 10px;
     }
 
     input {
@@ -45,4 +73,15 @@
     input#search {
         width: 300px;
     }
+
+    .horizontal-flex {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        align-items: baseline;
+    }
+
+    .bold {
+        font-weight: bold;
+    }
 </style>

src/lib/Tag.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { type BooleanFilter } from "src/lib/filters";
+
+    import { createEventDispatcher } from "svelte";
+    const dispatch = createEventDispatcher();
+
+    function handleClick() {
+        dispatch("clicked", {
+            boolFilter: boolFilter,
+        });
+    }
+
+    export let boolFilter: BooleanFilter;
+    export let mode: "normal" | "canAdd" | "canRemove" = "normal";
+</script>
+
+<button
+    class="tag"
+    class:can-add={mode === "canAdd"}
+    class:can-remove={mode === "canRemove"}
+    style="background-color: {boolFilter.tagColor}"
+    on:click={handleClick}
+>
+    <span>{boolFilter.tagName}</span>
+</button>
+
+<style>
+    button.tag {
+        font-family: inherit;
+        padding: 2px 5px;
+        border-radius: 5px;
+        margin: 0;
+        color: white;
+        border: none;
+        width: max-content;
+    }
+
+    button.tag.can-remove,
+    button.tag.can-add {
+        cursor: pointer;
+    }
+
+    button.tag.can-remove > span::before {
+        content: "− ";
+    }
+
+    button.tag.can-add > span::before {
+        content: "+ ";
+    }
+</style>

src/lib/Tags.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
     import { type Concert } from "src/lib/bindings/Concert";
+    import { type BooleanFilter, allBooleanFilters } from "src/lib/filters";
+    import Tag from "src/lib/Tag.svelte";
+
     export let concert: Concert;
 </script>
 
 <div id="tags">
-    {#if concert.venue === "Wigmore Hall"}
-        <span class="tag wigmore">Wigmore Hall</span>
-    {/if}
-    {#if concert.is_wigmore_u35}
-        <span class="tag wigmore-u35">£5 for U35</span>
-    {/if}
+    {#each allBooleanFilters as boolFilter}
+        {#if boolFilter.filterFunc(concert)}
+            <Tag {boolFilter} />
+        {/if}
+    {/each}
 </div>
 
 <style>
@@ -19,20 +21,4 @@
         gap: 5px;
         margin-bottom: 5px;
     }
-
-    span.tag {
-        padding: 2px 5px;
-        border-radius: 5px;
-        margin: 0;
-    }
-
-    span.wigmore {
-        background-color: #17a8ad;
-        color: white;
-    }
-
-    span.wigmore-u35 {
-        background-color: #3694cf;
-        color: white;
-    }
 </style>

src/lib/filters.ts

@@ -2,9 +2,30 @@ import { type Concert } from "src/lib/bindings/Concert";
 
 export type FiltersType = {
     searchTerm: string;
-    wigmoreU35: boolean;
+    booleanTagNames: string[];
 };
 
+// Type of a filter which is either on/off
+export type BooleanFilter = {
+    tagName: string;
+    tagColor: string;
+    filterFunc: (concert: Concert) => boolean;
+}
+
+// List of all boolean filters that we know of
+export const allBooleanFilters: BooleanFilter[] = [
+    {
+        tagName: "Wigmore U35 £5",
+        tagColor: "#3694cf",
+        filterFunc: (concert: Concert) => concert.is_wigmore_u35,
+    },
+    {
+        tagName: "Wigmore Hall",
+        tagColor: "#17a8ad",
+        filterFunc: (concert: Concert) => concert.venue === "Wigmore Hall",
+    }
+];
+
 // Check if a concert satisfies the filters
 export function satisfies(concert: Concert, filters: FiltersType): boolean {
     // Check search filter
@@ -19,9 +40,17 @@ export function satisfies(concert: Concert, filters: FiltersType): boolean {
             p.name.toLowerCase().includes(ciSearchTerm),
         );
 
-    // Check U35 filter
-    let u35Pass = filters.wigmoreU35 ? concert.is_wigmore_u35 : true;
+    // Check boolean tags
+    let booleanPass = filters.booleanTagNames.every((tag) => {
+        let filter = allBooleanFilters.find((f) => f.tagName === tag);
+        if (filter === undefined) {
+            console.error(`Unknown boolean tag ${tag}`);
+            return false;
+        }
+        return filter.filterFunc(concert);
+    });
 
-    return searchPass && u35Pass;
+    // Return conjunction of both
+    return searchPass && booleanPass;
 }