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

Studio: theme editing

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-10-30 13:45:44 +01:00
parent 6e7eccf9de
commit 3aa9a21dea
34 changed files with 975 additions and 350 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/UI/Studio/EditTheme.svelte
View file

@ -8,7 +8,7 @@
import Region from "./Region.svelte";
export let state: EditThemeState;
let schema: ConfigMeta[] = state.schema.filter(schema => schema.path.length > 0 && schema.path[0] !== "layers");
let schema: ConfigMeta[] = state.schema.filter(schema => schema.path.length > 0);
let config = state.configuration;
const messages = state.messages;
const hasErrors = messages.map((m: ConversionMessage[]) => m.filter(m => m.level === "error").length);
@ -18,47 +18,61 @@
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)
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="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 {state} configs={perRegion["basic"]} path={[]}></Region>
<Region {state} configs={perRegion["no-group"]} path={[]}></Region>
</div>
<div slot="title1">Feature switches</div>
<div slot="content1">
<Region {state} configs={perRegion["feature_switches"]} path={[]}></Region>
</div>
<div slot="title2">Configuration file</div>
<div slot="content2">
<div class="literal-code">
{JSON.stringify($config)}
<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>
<ShowConversionMessages messages={$messages}></ShowConversionMessages>
<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>
</TabbedGroup>
</div>