forked from MapComplete/MapComplete
78 lines
2.8 KiB
Svelte
78 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { EditThemeState } from "./EditLayerState";
|
|
import type { ConfigMeta } from "./configMeta";
|
|
import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
|
|
import type { ConversionMessage } from "../../Models/ThemeConfig/Conversion/Conversion";
|
|
import TabbedGroup from "../Base/TabbedGroup.svelte";
|
|
import ShowConversionMessages from "./ShowConversionMessages.svelte";
|
|
import Region from "./Region.svelte";
|
|
|
|
export let state: EditThemeState;
|
|
let schema: ConfigMeta[] = state.schema.filter(schema => schema.path.length > 0);
|
|
let config = state.configuration;
|
|
let messages = state.messages;
|
|
let hasErrors = messages.map((m: ConversionMessage[]) => m.filter(m => m.level === "error").length);
|
|
let title = state.getStoreFor(["id"]);
|
|
const wl = window.location;
|
|
const baseUrl = wl.protocol + "//" + wl.host + "/theme.html?userlayout=";
|
|
|
|
const perRegion: Record<string, ConfigMeta[]> = {};
|
|
for (const schemaElement of schema) {
|
|
const key = schemaElement.hints.group ?? "no-group";
|
|
const list = perRegion[key] ?? (perRegion[key] = []);
|
|
list.push(schemaElement);
|
|
}
|
|
console.log({perRegion, schema})
|
|
</script>
|
|
<div class="flex flex-col h-screen">
|
|
<div class="w-full flex justify-between my-2">
|
|
<slot />
|
|
<h3>Editing theme {$title}</h3>
|
|
{#if $hasErrors > 0}
|
|
<div class="alert">{$hasErrors} errors detected</div>
|
|
{:else}
|
|
<a class="primary button" href={baseUrl+state.server.urlFor($title, "themes")} target="_blank" rel="noopener">
|
|
Try it out
|
|
<ChevronRightIcon class="h-6 w-6 shrink-0" />
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="m4 h-full overflow-y-auto">
|
|
{Object.keys(perRegion).join(";")}
|
|
<TabbedGroup>
|
|
<div slot="title0">Basic properties</div>
|
|
<div slot="content0">
|
|
<Region configs={perRegion["basic"]} path={[]} {state} title="Basic properties"/>
|
|
<Region configs={perRegion["start_location"]} path={[]} {state} title="Start location"/>
|
|
|
|
</div>
|
|
|
|
<div slot="title1">Layers</div>
|
|
<div slot="content1">
|
|
<Region configs={perRegion["layers"]} path={[]} {state} />
|
|
|
|
</div>
|
|
<div slot="title2">Feature switches</div>
|
|
<div slot="content2">
|
|
<Region configs={perRegion["feature_switches"]} path={[]} {state}></Region>
|
|
</div>
|
|
|
|
<div slot="title3">Advanced options</div>
|
|
<div slot="content3">
|
|
<Region configs={perRegion["advanced"]} path={[]} {state}></Region>
|
|
</div>
|
|
|
|
<div slot="title4">Configuration file</div>
|
|
<div slot="content4">
|
|
<div class="literal-code">
|
|
{JSON.stringify($config)}
|
|
</div>
|
|
|
|
<ShowConversionMessages messages={$messages}></ShowConversionMessages>
|
|
|
|
</div>
|
|
</TabbedGroup>
|
|
</div>
|
|
|
|
</div>
|