midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Basic filtering in studio (#1898)

Browse source
This commit is contained in:
Robin van der Linde 2024-04-21 01:19:48 +02:00
parent 7f3f2fc492
commit 1bde81f5f1
Signed by untrusted user: Robin-van-der-Linde
GPG key ID: 53956B3252478F0D
2 changed files with 120 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/UI/StudioGUI.svelte
View file

@ -29,6 +29,7 @@
import Translations from "./i18n/Translations"
import Tr from "./Base/Tr.svelte"
import Add from "../assets/svg/Add.svelte"
import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
export let studioUrl =
window.location.hostname === "127.0.0.2"
@ -54,26 +55,66 @@
const uid = osmConnection.userDetails.map((ud) => ud?.uid)
const studio = new StudioServer(studioUrl, uid)
let layerFilterTerm: string = ""
let layersWithErr = UIEventSource.FromPromiseWithErr(studio.fetchOverview())
let layers: Store<{ owner: number; id: string }[]> = layersWithErr.mapD((l) =>
l["success"]?.filter((l) => l.category === "layers")
)
let selfLayers = layers.mapD((ls) => ls.filter((l) => l.owner === uid.data), [uid])
let otherLayers = layers.mapD(
(ls) => ls.filter((l) => l.owner !== undefined && l.owner !== uid.data),
$: selfLayers = layers.mapD(
(ls) =>
ls.filter(
(l) => l.owner === uid.data && l.id.toLowerCase().includes(layerFilterTerm.toLowerCase())
),
[uid]
)
let officialLayers = layers.mapD((ls) => ls.filter((l) => l.owner === undefined), [uid])
$: otherLayers = layers.mapD(
(ls) =>
ls.filter(
(l) =>
l.owner !== undefined &&
l.owner !== uid.data &&
l.id.toLowerCase().includes(layerFilterTerm.toLowerCase())
),
[uid]
)
$: officialLayers = layers.mapD(
(ls) =>
ls.filter(
(l) => l.owner === undefined && l.id.toLowerCase().includes(layerFilterTerm.toLowerCase())
),
[uid]
)
let themeFilterTerm: string = ""
let themes: Store<{ owner: number; id: string }[]> = layersWithErr.mapD((l) =>
l["success"]?.filter((l) => l.category === "themes")
)
let selfThemes = themes.mapD((ls) => ls.filter((l) => l.owner === uid.data), [uid])
let otherThemes = themes.mapD(
(ls) => ls.filter((l) => l.owner !== undefined && l.owner !== uid.data),
$: selfThemes = themes.mapD(
(ls) =>
ls.filter(
(l) => l.owner === uid.data && l.id.toLowerCase().includes(themeFilterTerm.toLowerCase())
),
[uid]
)
$: otherThemes = themes.mapD(
(ls) =>
ls.filter(
(l) =>
l.owner !== undefined &&
l.owner !== uid.data &&
l.id.toLowerCase().includes(themeFilterTerm.toLowerCase())
),
[uid]
)
$: officialThemes = themes.mapD(
(ls) =>
ls.filter(
(l) => l.owner === undefined && l.id.toLowerCase().includes(themeFilterTerm.toLowerCase())
),
[uid]
)
let officialThemes = themes.mapD((ls) => ls.filter((l) => l.owner === undefined), [uid])
let state:
| undefined
@ -224,6 +265,22 @@
MapComplete Studio
</BackButton>
<h2>Choose a layer to edit</h2>
<form class="flex justify-center">
<label
class="neutral-label my-2 flex w-full items-center rounded-full border-2 border-black sm:w-1/2"
>
<SearchIcon aria-hidden="true" class="h-8 w-8" />
<input
class="mr-4 w-full outline-none"
id="layer-search"
type="search"
placeholder="Filter layers by name"
bind:value={layerFilterTerm}
/>
</label>
</form>
<ChooseLayerToEdit {osmConnection} layerIds={$selfLayers} on:layerSelected={editLayer}>
<h3 slot="title">Your layers</h3>
</ChooseLayerToEdit>
@ -257,6 +314,22 @@
MapComplete Studio
</BackButton>
<h2>Choose a theme to edit</h2>
<form class="flex justify-center">
<label
class="neutral-label my-2 flex w-full items-center rounded-full border-2 border-black sm:w-1/2"
>
<SearchIcon aria-hidden="true" class="h-8 w-8" />
<input
class="mr-4 w-full outline-none"
id="theme-search"
type="search"
placeholder="Filter themes by name"
bind:value={themeFilterTerm}
/>
</label>
</form>
<ChooseLayerToEdit {osmConnection} layerIds={$selfThemes} on:layerSelected={editTheme}>
<h3 slot="title">Your themes</h3>
</ChooseLayerToEdit>