Skip to content

Commit

Permalink
Group some sidebar controls, and stop using extra divs around everyth…
Browse files Browse the repository at this point in the history 
…ing, now that pico does reasonable things
  • Loading branch information
@dabreegster
dabreegster committed Sep 4, 2024
1 parent 62f9a7e commit 53a20a9
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 167 deletions.
23 changes: 13 additions & 10 deletions web/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,17 @@
<Header app="main" />
</div>
<div slot="left">
<label>
{#if pmtiles == null}
Open a <i>.pmtiles</i>
file produced by the tool. Note this file stays in your browser; it doesn't
get uploaded anywhere.
{/if}
<input bind:this={fileInput} on:change={fileLoaded} type="file" />
</label>
<div>
<details open={!outputMetadata}>
<summary role="button" class="secondary">Load a file</summary>
<label>
{#if pmtiles == null}
Open a <i>.pmtiles</i>
file produced by the tool. Note this file stays in your browser; it doesn't
get uploaded anywhere.
{/if}
<input bind:this={fileInput} on:change={fileLoaded} type="file" />
</label>

<label>
Or load an example:
<select bind:value={example}>
Expand All @@ -80,7 +82,8 @@
<option value="lisbon">Lisbon</option>
</select>
</label>
</div>
</details>

{#if outputMetadata}
<SidebarControls {outputMetadata} {map} bind:controls />
{/if}
Expand Down
24 changes: 11 additions & 13 deletions web/src/ClippedPBFs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@
export let example: string;
</script>

<div>
<label>
Or load an example:
<select bind:value={example}>
<option value="">Custom file loaded</option>
<option value="antwerp">Antwerp</option>
<option value="berlin">Berlin</option>
<option value="london">South London</option>
<option value="paris">Paris</option>
<option value="seattle">Seattle</option>
</select>
</label>
</div>
<label>
Or load an example:
<select bind:value={example}>
<option value="">Custom file loaded</option>
<option value="antwerp">Antwerp</option>
<option value="berlin">Berlin</option>
<option value="london">South London</option>
<option value="paris">Paris</option>
<option value="seattle">Seattle</option>
</select>
</label>
40 changes: 18 additions & 22 deletions web/src/CostFunction.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,17 +74,15 @@
$: setCost(costChoice);
</script>

<div>
<label>
Cost function:
<select bind:value={costChoice}>
<option value="Distance">Distance</option>
<option value="Generalized">Generalized cost function</option>
<option value="ByLTS">Weight per LTS</option>
<option value="OsmHighwayType">Set a weight per OSM highway type</option>
</select>
</label>
</div>
<label>
Cost function:
<select bind:value={costChoice}>
<option value="Distance">Distance</option>
<option value="Generalized">Generalized cost function</option>
<option value="ByLTS">Weight per LTS</option>
<option value="OsmHighwayType">Set a weight per OSM highway type</option>
</select>
</label>

<button on:click={() => (showJson = true)}>See cost function JSON</button>

Expand Down Expand Up @@ -156,15 +154,13 @@
{/each}
</ul>

<div>
<label>
Give roads a good score if they have at least this many nearby amenities:
<input
type="number"
min="0"
bind:value={generalized.minimum_amenities}
on:change={() => (cost = cost)}
/>
</label>
</div>
<label>
Give roads a good score if they have at least this many nearby amenities:
<input
type="number"
min="0"
bind:value={generalized.minimum_amenities}
on:change={() => (cost = cost)}
/>
</label>
{/if}
61 changes: 31 additions & 30 deletions web/src/EdgeCostApp.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,31 +215,32 @@
<Header app="costs" />
</div>
<div slot="left">
<label>
Open an <i>.osm.pbf</i>
file
<input bind:this={fileInput} on:change={fileLoaded} type="file" />
</label>
<ClippedPBFs bind:example />
<OverpassSelector
{map}
on:gotXml={gotXml}
on:loading={(e) => (loading = e.detail)}
on:error={(e) => (loading = e.detail)}
/>
<details open={!network}>
<summary role="button" class="secondary">Change areas</summary>
<label>
Open an <i>.osm.pbf</i>
file
<input bind:this={fileInput} on:change={fileLoaded} type="file" />
</label>
<ClippedPBFs bind:example />
<OverpassSelector
{map}
on:gotXml={gotXml}
on:loading={(e) => (loading = e.detail)}
on:error={(e) => (loading = e.detail)}
/>
</details>

{#if network}
<hr />
<div>
<label>
Color edges by:
<select bind:value={colorBy}>
<option value="lts">LTS</option>
<option value="cost">Edge cost (relative to length)</option>
<option value="nearby_amenities">Nearby amenities</option>
</select>
</label>
</div>
<label>
Color edges by:
<select bind:value={colorBy}>
<option value="lts">LTS</option>
<option value="cost">Edge cost (relative to length)</option>
<option value="nearby_amenities">Nearby amenities</option>
</select>
</label>

{#if colorBy == "lts"}
<Legend
rows={[
Expand All @@ -263,6 +264,7 @@
],
]}
/>

<p>
Note: LTS model from <a
href="https://github.com/BikeOttawa/stressmodel/blob/master/stressmodel.js"
Expand All @@ -278,13 +280,12 @@
decimalPlaces={1}
/>
{/if}
<div>
<label style:color={colors.lts_not_allowed}>
<input type="checkbox" bind:checked={showNotAllowed} />
Show cyclists not allowed
</label>
</div>
<hr />

<label style:color={colors.lts_not_allowed}>
<input type="checkbox" bind:checked={showNotAllowed} />
Show cyclists not allowed
</label>

<CostFunction bind:cost />
{/if}
</div>
Expand Down
39 changes: 20 additions & 19 deletions web/src/InteractiveApp.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,27 +115,28 @@
<Header app="interactive" />
</div>
<div slot="left">
<label>
Open an <i>.osm.pbf</i>
file
<input bind:this={fileInput} on:change={fileLoaded} type="file" />
</label>
<ClippedPBFs bind:example />
<OverpassSelector
{map}
on:gotXml={gotXml}
on:loading={(e) => (loading = e.detail)}
on:error={(e) => (loading = e.detail)}
/>
<details open={!network}>
<summary role="button" class="secondary">Change areas</summary>
<label>
Open an <i>.osm.pbf</i>
file
<input bind:this={fileInput} on:change={fileLoaded} type="file" />
</label>
<ClippedPBFs bind:example />
<OverpassSelector
{map}
on:gotXml={gotXml}
on:loading={(e) => (loading = e.detail)}
on:error={(e) => (loading = e.detail)}
/>
</details>

{#if network}
<div>
<label>
Max requests (limit for faster updates):
<br />
<input type="number" bind:value={maxRequests} min={1} />
</label>
</div>
<label>
Max requests (limit for faster updates):
<br />
<input type="number" bind:value={maxRequests} min={1} />
</label>
<CostFunction bind:cost />
{/if}

Expand Down
Loading

0 comments on commit 53a20a9

Please sign in to comment.