From d1d654ebac2d51e3841675faeb56480e440f622f Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Tue, 5 Mar 2024 18:08:09 +0100
Subject: Initial commit

---
 .../lib/scraper/components/SelectorButton.svelte   | 22 ++++++++++++++
 .../lib/scraper/components/SelectorGroup.svelte    | 35 ++++++++++++++++++++++
 .../src/lib/scraper/components/SelectorItem.svelte | 24 +++++++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 frontend/src/lib/scraper/components/SelectorButton.svelte
 create mode 100644 frontend/src/lib/scraper/components/SelectorGroup.svelte
 create mode 100644 frontend/src/lib/scraper/components/SelectorItem.svelte

(limited to 'frontend/src/lib/scraper/components')

diff --git a/frontend/src/lib/scraper/components/SelectorButton.svelte b/frontend/src/lib/scraper/components/SelectorButton.svelte
new file mode 100644
index 0000000..b786f89
--- /dev/null
+++ b/frontend/src/lib/scraper/components/SelectorButton.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Selector } from '$lib/Scraper';
+
+	export let selector: Selector<string>;
+</script>
+
+<button
+	type="button"
+	class="ml-1 flex rounded-sm border-slate-700 bg-slate-900 hover:brightness-110"
+	on:click={() => (selector.keep = !selector.keep)}
+>
+	<div class="flex self-center pl-1">
+		{#if selector.keep}
+			<span class="icon-base icon-[material-symbols--check] text-green-400" />
+		{:else}
+			<span class="icon-base icon-[material-symbols--close] text-red-400" />
+		{/if}
+	</div>
+	<p class:opacity-50={!selector.keep} class="p-1 text-left">
+		{selector}
+	</p>
+</button>
diff --git a/frontend/src/lib/scraper/components/SelectorGroup.svelte b/frontend/src/lib/scraper/components/SelectorGroup.svelte
new file mode 100644
index 0000000..ae7287a
--- /dev/null
+++ b/frontend/src/lib/scraper/components/SelectorGroup.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Selector } from '$lib/Scraper';
+	import SelectorButton from './SelectorButton.svelte';
+
+	export let title: string;
+	export let selectors: Selector<string>[];
+
+	function invert() {
+		for (let selector of selectors) {
+			selector.keep = !selector.keep;
+		}
+		selectors = selectors;
+	}
+</script>
+
+{#if selectors.length > 0}
+	<div class="group col-span-6 flex flex-col gap-1">
+		<div class="flex gap-2">
+			<h2>{title}</h2>
+			<button
+				type="button"
+				class="flex items-end opacity-0 brightness-75 transition-opacity hover:brightness-110 group-hover:opacity-100"
+				on:click={invert}
+				title="Invert selection"
+			>
+				<span class="icon-xs icon-[material-symbols--compare-arrows]"></span>
+			</button>
+		</div>
+		<div class="flex flex-wrap gap-y-1">
+			{#each selectors as selector}
+				<SelectorButton {selector} />
+			{/each}
+		</div>
+	</div>
+{/if}
diff --git a/frontend/src/lib/scraper/components/SelectorItem.svelte b/frontend/src/lib/scraper/components/SelectorItem.svelte
new file mode 100644
index 0000000..dd3f5b4
--- /dev/null
+++ b/frontend/src/lib/scraper/components/SelectorItem.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Selector } from '$lib/Scraper';
+	import SelectorButton from './SelectorButton.svelte';
+
+	export let title: string;
+	export let selector: Selector<string> | undefined;
+</script>
+
+{#if selector}
+	<div class="flex flex-col gap-1">
+		<h2>{title}</h2>
+		<SelectorButton {selector} />
+	</div>
+{/if}
+
+<style>
+	:root {
+		--span: 6;
+	}
+
+	div {
+		grid-column: span var(--span) / span var(--span);
+	}
+</style>
-- 
cgit v1.2.3-2-gb3c3