forked from MapComplete/MapComplete
Basic filtering in studio (#1898)
This commit is contained in:
parent
7f3f2fc492
commit
1bde81f5f1
GPG key ID:
53956B3252478F0D
2 changed files with 120 additions and 51 deletions
|
|
@ -693,6 +693,10 @@ video {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.\!relative {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
|
|
@ -717,6 +721,10 @@ video {
|
|||
top: 14rem;
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px;
|
||||
}
|
||||
|
|
@ -725,10 +733,6 @@ video {
|
|||
left: 0px;
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.right-4 {
|
||||
right: 1rem;
|
||||
}
|
||||
|
|
@ -896,14 +900,6 @@ video {
|
|||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
|
@ -936,6 +932,10 @@ video {
|
|||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
|
@ -968,6 +968,10 @@ video {
|
|||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.-ml-6 {
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
|
|
@ -1076,12 +1080,18 @@ video {
|
|||
height: 6rem;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
.h-fit {
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.h-32 {
|
||||
|
|
@ -1105,16 +1115,6 @@ video {
|
|||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-fit {
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.h-96 {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.h-0 {
|
||||
height: 0px;
|
||||
}
|
||||
|
|
@ -1786,10 +1786,6 @@ video {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-white\/50 {
|
||||
background-color: rgb(255 255 255 / 0.5);
|
||||
}
|
||||
|
||||
.bg-red-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
|
||||
|
|
@ -1876,6 +1872,10 @@ video {
|
|||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pr-12 {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
|
@ -1888,10 +1888,6 @@ video {
|
|||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-0\.5 {
|
||||
padding-top: 0.125rem;
|
||||
}
|
||||
|
|
@ -2122,6 +2118,11 @@ video {
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.outline-none {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.outline {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
|
@ -2217,12 +2218,6 @@ video {
|
|||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
|
|
@ -2231,6 +2226,12 @@ video {
|
|||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.duration-200 {
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
|
@ -2928,11 +2929,6 @@ svg.apply-fill path {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hover\:bg-white:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-indigo-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue