demo filtering

script/api.ts

@@ -1,4 +1,7 @@
+import {FilterSet} from "./filterbar";
+
 export type SteamId = string;
+
 export interface SteamUser {
     id: number;
     steamid: SteamId;

script/demo_list.js

@@ -8,6 +8,22 @@ ready(() => {
     const maps = filterBar.dataset.maps.split(",");
     const apiBase = filterBar.dataset.apiBase;
     const api = new Api(apiBase);
+    const demoListBody = document.querySelector('.demolist tbody');
 
-    render(() => <FilterBar maps={maps} api={api} />, filterBar)
-});
+    render(() => <FilterBar maps={maps} api={api} onChange={onFilter.bind(null, api, demoListBody)}/>, filterBar);
+});
+
+const onFilter = async (api, demoListBody, filter) => {
+    if (!(filter.mode || filter.map || filter.players.length)) {
+        return;
+    }
+
+    let queryParams = new URLSearchParams({
+        players: filter.players.map(player => player.id).join(','),
+        mode: filter.mode.toLowerCase(),
+        map: filter.map,
+    });
+    console.log(queryParams);
+    const response = await fetch("/fragments/demo-list?" + queryParams);
+    document.querySelector('.demolist tbody').innerHTML = await response.text();
+}

script/filterbar.tsx

@@ -1,19 +1,47 @@
 import {Select, createOptions, createAsyncOptions} from "@thisbeyond/solid-select";
-import {Api} from "./api";
+import {Api, SteamUser} from "./api";
+import {createEffect, createSignal} from "solid-js";
 
 export interface FilterBarProps {
     maps: string[],
     api: Api,
+    onChange: (FilterSet) => void,
 }
 
-export const FilterBar = ({maps, api}: FilterBarProps) => {
+export const FilterBar = ({maps, api, onChange}: FilterBarProps) => {
     const modes = createOptions(["4v4", "6v6", "Highlander"]);
-    const mapOptions = createOptions(maps);
+    const mapOptions = createOptions(maps, {
+        createable: true
+    });
     const playerOptions = createAsyncOptions(search => api.searchPlayer(search));
     const playerFormat = player => player.name;
+
+
+    const [filterSet, setFilterSet] = createSignal({
+        mode: "",
+        map: "",
+        players: []
+    });
+    createEffect(() => onChange(filterSet()));
+
     return <div class="filter-bar">
-        <Select class="mode" placeholder="All Types" {...modes} />
-        <Select class="maps" placeholder="All Maps" {...mapOptions} />
-        <Select class="players" multiple placeholder="All Players" format={playerFormat} {...playerOptions} />
+        <Select class="mode" onChange={mode => setFilterSet({
+            ...filterSet(),
+            mode
+        })} placeholder="All Types" {...modes} />
+        <Select class="maps" onChange={map => setFilterSet({
+            ...filterSet(),
+            map
+        })}  placeholder="All Maps" {...mapOptions} />
+        <Select class="players" onChange={players => setFilterSet({
+            ...filterSet(),
+            players
+        })}  multiple placeholder="All Players" format={playerFormat} {...playerOptions} />
     </div>;
 }
+
+export interface FilterSet {
+    mode: string,
+    map: string,
+    players: SteamUser[],
+}