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

Studio: more finetuning, first version working

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-10-13 18:46:56 +02:00
parent c4d4a57a08
commit ac1e7c7f06
39 changed files with 2971 additions and 7187 deletions
Download patch file Download diff file Expand all files Collapse all files

175
src/UI/StudioGUI.svelte
View file

@ -14,8 +14,9 @@
import { OsmConnection } from "../Logic/Osm/OsmConnection";
import { QueryParameters } from "../Logic/Web/QueryParameters";
import layerSchemaRaw from "../../src/assets/schemas/layerconfigmeta.json";
export let studioUrl = "http://127.0.0.1:1235";
export let studioUrl = /*"https://studio.mapcomplete.org"; /*/ "http://127.0.0.1:1235"; //*/
const studio = new StudioServer(studioUrl);
let layers = UIEventSource.FromPromise(studio.fetchLayerOverview());
let state: undefined | "edit_layer" | "new_layer" | "edit_theme" | "new_theme" | "editing_layer" | "loading" = undefined;
@ -33,101 +34,121 @@
}, [layers]);
let editLayerState = new EditLayerState();
const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
let editLayerState = new EditLayerState(layerSchema, studio);
function fetchIconDescription(layerId): any {
const icon = AllSharedLayers.getSharedLayersConfigs().get(layerId)?._layerIcon;
console.log(icon);
return icon;
return AllSharedLayers.getSharedLayersConfigs().get(layerId)?._layerIcon;
}
async function createNewLayer(){
state = "loading"
const id = newLayerId.data
const createdBy = osmConnection.userDetails.data.name
const loaded = await studio.fetchLayer(id, true)
initialLayerConfig = loaded ?? {id, credits: createdBy};
state = "editing_layer"}
let osmConnection = new OsmConnection( new OsmConnection({
async function createNewLayer() {
state = "loading";
const id = newLayerId.data;
const createdBy = osmConnection.userDetails.data.name;
try {
const loaded = await studio.fetchLayer(id);
initialLayerConfig = loaded ?? {
id, credits: createdBy,
pointRendering: [
{
location: ["point", "centroid"],
marker: [{
icon: "circle",
color: "white"
}]
}
],
lineRendering : [{
width : 1,
color: "blue"
}]
};
} catch (e) {
initialLayerConfig = { id, credits: createdBy };
}
state = "editing_layer";
}
let osmConnection = new OsmConnection(new OsmConnection({
oauth_token: QueryParameters.GetQueryParameter(
"oauth_token",
undefined,
"Used to complete the login"
),
}))
)
}));
</script>
<LoginToggle state={{osmConnection}}>
<div slot="not-logged-in" >
<NextButton clss="primary">
Please log in to use MapComplete Studio
</NextButton>
</div>
{#if state === undefined}
<h1>MapComplete Studio</h1>
<div class="w-full flex flex-col">
<NextButton on:click={() => state = "edit_layer"}>
Edit an existing layer
</NextButton>
<NextButton on:click={() => state = "new_layer"}>
Create a new layer
</NextButton>
<NextButton on:click={() => state = "edit_theme"}>
Edit a theme
</NextButton>
<NextButton on:click={() => state = "new_theme"}>
Create a new theme
<LoginToggle state={{osmConnection}} ignoreLoading={true}>
<div slot="not-logged-in">
<NextButton clss="primary">
Please log in to use MapComplete Studio
</NextButton>
</div>
{:else if state === "edit_layer"}
<div class="flex flex-wrap">
{#each Array.from($layers) as layerId}
<NextButton clss="small" on:click={async () => {
console.log("Editing layer",layerId)
{#if state === undefined}
<h1>MapComplete Studio</h1>
<div class="w-full flex flex-col">
<NextButton on:click={() => state = "edit_layer"}>
Edit an existing layer
</NextButton>
<NextButton on:click={() => state = "new_layer"}>
Create a new layer
</NextButton>
<NextButton on:click={() => state = "edit_theme"}>
Edit a theme
</NextButton>
<NextButton on:click={() => state = "new_theme"}>
Create a new theme
</NextButton>
</div>
{:else if state === "edit_layer"}
<div class="flex flex-wrap">
{#each Array.from($layers) as layerId}
<NextButton clss="small" on:click={async () => {
state = "loading"
initialLayerConfig = await studio.fetchLayer(layerId)
state = "editing_layer"
}}>
<div class="w-4 h-4 mr-1">
<Marker icons={fetchIconDescription(layerId)} />
<div class="w-4 h-4 mr-1">
<Marker icons={fetchIconDescription(layerId)} />
</div>
{layerId}
</NextButton>
{/each}
</div>
{:else if state === "new_layer"}
<div class="interactive flex m-2 rounded-2xl flex-col p-2">
<h3>Enter the ID for the new layer</h3>
A good ID is:
<ul>
<li>a noun</li>
<li>singular</li>
<li>describes the object</li>
<li>in English</li>
</ul>
<div class="m-2 p-2 w-full">
<ValidatedInput type="id" value={newLayerId} feedback={layerIdFeedback} on:submit={() => createNewLayer()} />
</div>
{#if $layerIdFeedback !== undefined}
<div class="alert">
{$layerIdFeedback}
</div>
{layerId}
</NextButton>
{/each}
</div>
{:else if state === "new_layer"}
<div class="interactive flex m-2 rounded-2xl flex-col p-2">
<h3>Enter the ID for the new layer</h3>
A good ID is:
<ul>
<li>a noun</li>
<li>singular</li>
<li>describes the object</li>
<li>in English</li>
</ul>
<div class="m-2 p-2 w-full">
<ValidatedInput type="id" value={newLayerId} feedback={layerIdFeedback} on:submit={() => createNewLayer()}/>
{:else }
<NextButton clss="primary" on:click={() => createNewLayer()}>
Create layer {$newLayerId}
</NextButton>
{/if}
</div>
{#if $layerIdFeedback !== undefined}
<div class="alert">
{$layerIdFeedback}
{:else if state === "loading"}
<div class="w-8 h-8">
<Loading />
</div>
{:else }
<NextButton clss="primary" on:click={() => createNewLayer()}>
Create layer {$newLayerId}
</NextButton>
{:else if state === "editing_layer"}
<EditLayer {initialLayerConfig} state={editLayerState} />
{/if}
</div>
{:else if state === "loading"}
<div class="w-8 h-8">
<Loading />
</div>
{:else if state === "editing_layer"}
<EditLayer {initialLayerConfig} />
{/if}
</LoginToggle>