Feature(inspector): keep track of previously visited contributors

src/UI/History/PreviouslySpiedUsers.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { OsmConnection } from "../../Logic/Osm/OsmConnection"
+  import LoginToggle from "../Base/LoginToggle.svelte"
+  import { createEventDispatcher } from "svelte"
+  import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
+  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
+  import Dropdown from "../Base/Dropdown.svelte"
+
+  export let osmConnection: OsmConnection
+  export let inspectedContributors: UIEventSource<{
+    name: string,
+    visitedTime: string,
+    label: string
+  }[]>
+  let dispatch = createEventDispatcher<{ selectUser: string }>()
+
+  let labels = UIEventSource.asObject<string[]>(osmConnection.getPreference("previously-spied-labels"), [])
+  let labelField = ""
+
+  function remove(user: string) {
+    inspectedContributors.set(inspectedContributors.data.filter(entry => entry.name !== user))
+  }
+
+  function addLabel() {
+    if (labels.data.indexOf(labelField) >= 0) {
+      return
+    }
+    labels.data.push(labelField)
+    labels.ping()
+    labelField = ""
+  }
+
+  function sort(key: string) {
+    console.log("Sorting on", key)
+    inspectedContributors.data.sort((a, b) => (a[key] ?? "").localeCompare(b[key] ?? ""))
+    inspectedContributors.ping()
+  }
+</script>
+
+<LoginToggle ignoreLoading state={{osmConnection}}>
+  <table class="w-full">
+    <tr>
+      <td>
+        <button class="as-link cursor-pointer" on:click={() => sort("name")}>
+          Contributor
+        </button>
+      </td>
+      <td>
+
+        <button class="as-link cursor-pointer" on:click={() => sort("visitedTime")}>
+          Visited time
+        </button>
+      </td>
+      <td>
+        <button class="as-link cursor-pointer" on:click={() => sort("label")}>Label</button>
+      </td>
+      <td>Remove</td>
+    </tr>
+    {#each $inspectedContributors as c}
+      <tr>
+        <td>
+          <button class="as-link" on:click={() => dispatch("selectUser", c.name)}>{c.name}</button>
+        </td>
+        <td>
+          {c.visitedTime}
+        </td>
+        <td>
+          <select bind:value={c.label} on:change={() => inspectedContributors.ping()}>
+            <option value={undefined}><i>No label</i></option>
+            {#each $labels as l}
+              <option value={l}>{l}</option>
+            {/each}
+          </select>
+        </td>
+        <td>
+          <XCircleIcon class="w-6 h-6" on:click={() => remove(c.name)} />
+        </td>
+      </tr>
+    {/each}
+  </table>
+
+  <AccordionSingle>
+
+    <div slot="header">Labels</div>
+    {#if $labels.length === 0}
+      No labels
+    {:else}
+      {#each $labels as label}
+        <div class="mx-2">{label} </div>
+      {/each}
+    {/if}
+    <div class="interactive flex m-2 items-center gap-x-2 rounded-lg p-2">
+      <div class="shrink-0">Create a new label</div>
+      <input bind:value={labelField} type="text" />
+      <button on:click={() => addLabel()} class:disabled={!(labelField?.length > 0) } class="disabled shrink-0">Add
+        label
+      </button>
+    </div>
+  </AccordionSingle>
+</LoginToggle>