forked from MapComplete/MapComplete
UI(Inspector): update tabgroups, fix import
This commit is contained in:
parent
0a48765f0f
commit
8ae09e25de
2 changed files with 89 additions and 79 deletions
|
@ -12,9 +12,9 @@
|
|||
import Translations from "../i18n/Translations"
|
||||
import type { TagRenderingConfigJson } from "../../Models/ThemeConfig/Json/TagRenderingConfigJson"
|
||||
import { Or } from "../../Logic/Tags/Or"
|
||||
import { Utils } from "../../Utils"
|
||||
import ChartJs from "../Base/ChartJs.svelte"
|
||||
import { ChartJsUtils } from "../Base/ChartJsUtils"
|
||||
import { Lists } from "../../Utils/Lists"
|
||||
|
||||
export let onlyShowUsername: string[]
|
||||
export let features: Feature[]
|
||||
|
|
|
@ -33,6 +33,9 @@
|
|||
import GeocodeResults from "./Search/GeocodeResults.svelte"
|
||||
import MagnifyingGlassCircle from "@babeard/svelte-heroicons/mini/MagnifyingGlassCircle"
|
||||
import type { GeocodeResult } from "../Logic/Search/GeocodingProvider"
|
||||
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui"
|
||||
import WikipediaTitle from "./Wikipedia/WikipediaTitle.svelte"
|
||||
import WikipediaArticle from "./Wikipedia/WikipediaArticle.svelte"
|
||||
|
||||
console.log("Loading inspector GUI")
|
||||
let username = QueryParameters.GetQueryParameter("user", undefined, "Inspect this user")
|
||||
|
@ -49,7 +52,7 @@
|
|||
new CoordinateSearch(),
|
||||
new OpenLocationCodeSearch(),
|
||||
new PhotonSearch(true, 2),
|
||||
new PhotonSearch()
|
||||
new PhotonSearch(),
|
||||
)
|
||||
let showSearchDrawer = new UIEventSource(true)
|
||||
let searchIsFocussed = new UIEventSource(false)
|
||||
|
@ -138,7 +141,7 @@
|
|||
const overpass = new Overpass(
|
||||
Constants.defaultOverpassUrls[0],
|
||||
undefined,
|
||||
user.split(";").map((user) => 'nw(user_touched:"' + user + '");')
|
||||
user.split(";").map((user) => "nw(user_touched:\"" + user + "\");"),
|
||||
)
|
||||
if (!maplibremap.bounds.data) {
|
||||
return
|
||||
|
@ -161,8 +164,6 @@
|
|||
return true
|
||||
})
|
||||
|
||||
let mode: "map" | "table" | "aggregate" | "images" = "map"
|
||||
|
||||
let showPreviouslyVisited = new UIEventSource(true)
|
||||
const t = Translations.t.inspector
|
||||
|
||||
|
@ -207,89 +208,98 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<button class:primary={mode === "map"} on:click={() => (mode = "map")}>
|
||||
<Tr t={t.mapView} />
|
||||
</button>
|
||||
<button class:primary={mode === "table"} on:click={() => (mode = "table")}>
|
||||
<Tr t={t.tableView} />
|
||||
</button>
|
||||
<button class:primary={mode === "aggregate"} on:click={() => (mode = "aggregate")}>
|
||||
<Tr t={t.aggregateView} />
|
||||
</button>
|
||||
<button class:primary={mode === "images"} on:click={() => (mode = "images")}>
|
||||
<Tr t={t.images} />
|
||||
</button>
|
||||
</div>
|
||||
<TabGroup class="flex-grow flex flex-col">
|
||||
<TabList class="tablist">
|
||||
<Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
|
||||
|
||||
{#if mode === "map"}
|
||||
{#if $selectedElement !== undefined}
|
||||
<!-- right modal with the selected element view -->
|
||||
<Drawer
|
||||
placement="right"
|
||||
transitionType="fly"
|
||||
activateClickOutside={false}
|
||||
backdrop={false}
|
||||
id="drawer-right"
|
||||
width="w-full md:w-6/12 lg:w-5/12 xl:w-4/12"
|
||||
rightOffset="inset-y-0 right-0"
|
||||
transitionParams={{
|
||||
<Tr t={t.mapView} />
|
||||
</Tab>
|
||||
<Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
|
||||
|
||||
<Tr t={t.tableView} />
|
||||
</Tab>
|
||||
<Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
|
||||
|
||||
<Tr t={t.aggregateView} />
|
||||
</Tab>
|
||||
<Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
|
||||
|
||||
<Tr t={t.images} />
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabPanels class="flex-grow flex flex-col">
|
||||
|
||||
|
||||
<TabPanel class="flex-grow">
|
||||
{#if $selectedElement !== undefined}
|
||||
<!-- right modal with the selected element view -->
|
||||
<Drawer
|
||||
placement="right"
|
||||
transitionType="fly"
|
||||
activateClickOutside={false}
|
||||
backdrop={false}
|
||||
id="drawer-right"
|
||||
width="w-full md:w-6/12 lg:w-5/12 xl:w-4/12"
|
||||
rightOffset="inset-y-0 right-0"
|
||||
transitionParams={{
|
||||
x: 640,
|
||||
duration: 0,
|
||||
easing: linear,
|
||||
}}
|
||||
divClass="overflow-y-auto z-50 bg-white"
|
||||
hidden={$selectedElement === undefined}
|
||||
on:close={() => {
|
||||
divClass="overflow-y-auto z-50 bg-white"
|
||||
hidden={$selectedElement === undefined}
|
||||
on:close={() => {
|
||||
selectedElement.setData(undefined)
|
||||
}}
|
||||
>
|
||||
<TitledPanel>
|
||||
<div slot="title" class="flex justify-between">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href={"https://osm.org/" + $selectedElement.properties.id}
|
||||
>
|
||||
{$selectedElement.properties.id}
|
||||
</a>
|
||||
<XCircleIcon class="h-6 w-6" on:click={() => selectedElement.set(undefined)} />
|
||||
</div>
|
||||
>
|
||||
<TitledPanel>
|
||||
<div slot="title" class="flex justify-between">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href={"https://osm.org/" + $selectedElement.properties.id}
|
||||
>
|
||||
{$selectedElement.properties.id}
|
||||
</a>
|
||||
<XCircleIcon class="h-6 w-6" on:click={() => selectedElement.set(undefined)} />
|
||||
</div>
|
||||
|
||||
<History onlyShowChangesBy={$username.split(";")} id={$selectedElement.properties.id} />
|
||||
</TitledPanel>
|
||||
</Drawer>
|
||||
{/if}
|
||||
|
||||
<div class="relative m-1 flex-grow overflow-hidden rounded-xl">
|
||||
<MaplibreMap {map} mapProperties={maplibremap} autorecovery={true} />
|
||||
<div class="absolute right-0 top-0 w-1/4 p-4">
|
||||
<Searchbar
|
||||
on:search={() => search()}
|
||||
isFocused={searchIsFocussed}
|
||||
value={searchvalue}
|
||||
on:focus={() => state.searchState.showSearchDrawer.set(true)}
|
||||
/>
|
||||
{#if $searchSuggestions?.length > 0 || $searchIsFocussed}
|
||||
<GeocodeResults {state} on:select={(event) => search(event.detail)} />
|
||||
<History onlyShowChangesBy={$username.split(";")} id={$selectedElement.properties.id} />
|
||||
</TitledPanel>
|
||||
</Drawer>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else if mode === "table"}
|
||||
<div class="m-2 h-full overflow-y-auto">
|
||||
{#each $featuresStore as f}
|
||||
<History onlyShowChangesBy={$username?.split(";")} id={f.properties.id} />
|
||||
{/each}
|
||||
</div>
|
||||
{:else if mode === "aggregate"}
|
||||
<div class="m-2 h-full overflow-y-auto">
|
||||
<AggregateView features={$featuresStore} onlyShowUsername={$username?.split(";")} />
|
||||
</div>
|
||||
{:else if mode === "images"}
|
||||
<div class="m-2 h-full overflow-y-auto">
|
||||
<AggregateImages features={$featuresStore} onlyShowUsername={$username?.split(";")} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="relative m-1 h-full flex-grow overflow-hidden rounded-xl">
|
||||
<MaplibreMap {map} mapProperties={maplibremap} autorecovery={true} />
|
||||
<div class="absolute right-0 top-0 w-1/4 p-4">
|
||||
<Searchbar
|
||||
on:search={() => search()}
|
||||
isFocused={searchIsFocussed}
|
||||
value={searchvalue}
|
||||
on:focus={() => state.searchState.showSearchDrawer.set(true)}
|
||||
/>
|
||||
{#if $searchSuggestions?.length > 0 || $searchIsFocussed}
|
||||
<GeocodeResults {state} on:select={(event) => search(event.detail)} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel class="overflow-auto grow-0">
|
||||
{#each $featuresStore as f}
|
||||
<History onlyShowChangesBy={$username?.split(";")} id={f.properties.id} />
|
||||
{/each}
|
||||
</TabPanel>
|
||||
<TabPanel >
|
||||
<AggregateView features={$featuresStore} onlyShowUsername={$username?.split(";")} />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<AggregateImages features={$featuresStore} onlyShowUsername={$username?.split(";")} />
|
||||
</TabPanel>
|
||||
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
</div>
|
||||
|
||||
<Page shown={showPreviouslyVisited}>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue