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

Themes: improve favourite panel

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-02 03:19:50 +01:00
parent 37cdf0f01a
commit 59090fdb39
14 changed files with 176 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Customizations/AllKnownLayouts.ts
View file

@ -15,7 +15,7 @@ export class AllKnownLayoutsLazy {
constructor(includeFavouriteLayer = true) {
for (const layoutConfigJson of known_themes["themes"]) {
for (const layerId of Constants.added_by_default) {
if (layerId === "favourite") {
if (layerId === "favourite" && favourite.id) {
if (includeFavouriteLayer) {
layoutConfigJson.layers.push(favourite)
}

1
src/Models/MenuState.ts
View file

@ -24,6 +24,7 @@ export class MenuState {
public static readonly _menuviewTabs = [
"about",
"settings",
"favourites",
"community",
"privacy",
"advanced",

15
src/Models/ThemeConfig/Conversion/Validation.ts
View file

@ -22,7 +22,7 @@ import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
import { Translatable } from "../Json/Translatable"
import { ConversionContext } from "./ConversionContext"
class ValidateLanguageCompleteness extends DesugaringStep<any> {
class ValidateLanguageCompleteness extends DesugaringStep<LayoutConfig> {
private readonly _languages: string[]
constructor(...languages: string[]) {
@ -34,7 +34,9 @@ class ValidateLanguageCompleteness extends DesugaringStep<any> {
this._languages = languages ?? ["en"]
}
convert(obj: any, context: ConversionContext): LayerConfig {
convert(obj: LayoutConfig, context: ConversionContext): LayoutConfig {
const origLayers = obj.layers
obj.layers = [...obj.layers].filter((l) => l["id"] !== "favourite")
const translations = Translation.ExtractAllTranslationsFrom(obj)
for (const neededLanguage of this._languages) {
translations
@ -56,7 +58,7 @@ class ValidateLanguageCompleteness extends DesugaringStep<any> {
)
})
}
obj.layers = origLayers
return obj
}
}
@ -1369,7 +1371,12 @@ export class ValidateLayerConfig extends DesugaringStep<LayerConfigJson> {
}
convert(json: LayerConfigJson, context: ConversionContext): LayerConfigJson {
return this.validator.convert(json, context).raw
const prepared = this.validator.convert(json, context)
if (!prepared) {
context.err("Preparing layer failed")
return undefined
}
return prepared?.raw
}
}
export class ValidateLayer extends Conversion<

2
src/Models/ThemeConfig/Json/LayerConfigJson.ts
View file

@ -243,7 +243,7 @@ export interface LayerConfigJson {
* Type: icon[]
* group: infobox
*/
titleIcons?: (string | TagRenderingConfigJson)[] | ["defaults"]
titleIcons?: (string | (TagRenderingConfigJson & { id?: string }))[] | ["defaults"]
/**
* Creates points to render on the map.

59
src/UI/Favourites/FavouriteSummary.svelte
View file

@ -1,10 +1,59 @@
<script lang="ts">
export let properties: Record<string, string>
import type { SpecialVisualizationState } from "../SpecialVisualization";
import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte";
import type { Feature } from "geojson";
import { ImmutableStore } from "../../Logic/UIEventSource";
import { GeoOperations } from "../../Logic/GeoOperations";
import Center from "../../assets/svg/Center.svelte";
export let feature: Feature;
let properties: Record<string, string> = feature.properties;
export let state: SpecialVisualizationState;
let tags = state.featureProperties.getStore(properties.id) ?? new ImmutableStore(properties);
const favLayer = state.layerState.filteredLayers.get("favourite");
const favConfig = favLayer.layerDef;
const titleConfig = favConfig.title;
function center(){
const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
state.mapProperties.location.setData(
{lon, lat}
)
state.guistate.menuIsOpened.setData(false)
}
function select(){
state.selectedLayer.setData(favConfig)
state.selectedElement.setData(feature)
center()
}
const titleIconBlacklist = ["osmlink","sharelink","favourite_title_icon"]
</script>
<div>
{JSON.stringify(properties)}
{properties?.id ?? "undefined"}
<a href={properties._backend +"/"+ properties?.id}>OSM</a>
<div class="px-1 my-1 border-2 border-dashed border-gray-300 rounded flex justify-between items-center">
<h3 on:click={() => select()} class="cursor-pointer ml-1 m-0">
<TagRenderingAnswer config={titleConfig} layer={favConfig} selectedElement={feature} {tags} />
</h3>
<div class="flex items-center">
{#each favConfig.titleIcons as titleIconConfig}
{#if (titleIconBlacklist.indexOf(titleIconConfig.id) < 0) && (titleIconConfig.condition?.matchesProperties(properties) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ...properties, ...state.userRelatedState.preferencesAsTags.data } ) ?? true) && titleIconConfig.IsKnown(properties)}
<div class={titleIconConfig.renderIconClass ?? "flex h-8 w-8 items-center"}>
<TagRenderingAnswer
config={titleIconConfig}
{tags}
selectedElement={feature}
{state}
layer={favLayer}
extraClasses="h-full justify-center"
/>
</div>
{/if}
{/each}
<button on:click={() => center()} class="p-1" ><Center class="w-6 h-6"/></button>
</div>
</div>

8
src/UI/Favourites/Favourites.svelte
View file

@ -11,9 +11,9 @@
<div class="flex flex-col">
You marked {$favourites.length} locations as a favourite location.
This list is only visible to you
{#each $favourites as f}
<FavouriteSummary properties={f.properties} />
{/each}
{#each $favourites as feature (feature.properties.id)}
<FavouriteSummary {feature} {state} />
{/each}
</div>

3
src/UI/ThemeViewGUI.svelte
View file

@ -64,7 +64,6 @@
import Community from "../assets/svg/Community.svelte";
import Download from "../assets/svg/Download.svelte";
import Share from "../assets/svg/Share.svelte";
import FavouriteSummary from "./Favourites/FavouriteSummary.svelte";
import Favourites from "./Favourites/Favourites.svelte";
export let state: ThemeViewState;
@ -499,7 +498,7 @@
Your favourites
</div>
<div class="flex flex-col" slot="content2">
<div class="flex flex-col m-2" slot="content2">
<h3>Your favourite locations</h3>
<Favourites {state}/>
</div>

38
src/assets/editor-layer-index.json
View file

File diff suppressed because one or more lines are too long

4
src/assets/svg/Center.svelte Normal file
View file

@ -0,0 +1,4 @@
<script>
export let color = "#000000"
</script>
<svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown width="544.02838" height="544.02838" viewBox="0 0 544.02838 544.02838" version="1.1" id="svg1" sodipodi:docname="center.svg" inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <defs id="defs1" /> <sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showguides="true" inkscape:zoom="0.90326851" inkscape:cx="393.57068" inkscape:cy="250.756" inkscape:window-width="1920" inkscape:window-height="995" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="svg1"> <sodipodi:guide position="171.95879,103.32864" orientation="0,-1" id="guide4" inkscape:locked="false" /> <sodipodi:guide position="271.68286,132.35281" orientation="1,0" id="guide5" inkscape:locked="false" /> </sodipodi:namedview> <path d="m 365.63918,111.75001 h -62.375 V 15.9375 c 0,-8.75 -7,-15.9375 -15.625,-15.9375 h -31.1875 c -8.5625,0 -15.625,7.1875 -15.625,15.9375 v 95.81251 h -62.375 l 93.5625,127.75 z" id="path1" sodipodi:nodetypes="ccsssscccc" /> <path d="m 432.27837,365.63919 v -62.375 h 95.8125 c 8.75,0 15.9375,-7 15.9375,-15.625 v -31.1875 c 0,-8.5625 -7.1875,-15.625 -15.9375,-15.625 h -95.8125 v -62.375 l -127.75,93.5625 z" id="path1-5" sodipodi:nodetypes="ccsssscccc" /> <path d="m 178.38918,432.27838 h 62.375 v 95.8125 c 0,8.75 7,15.9375 15.625,15.9375 h 31.1875 c 8.5625,0 15.625,-7.1875 15.625,-15.9375 v -95.8125 h 62.375 l -93.5625,-127.75 z" id="path2" sodipodi:nodetypes="ccsssscccc" /> <path d="m 111.75,178.38919 v 62.375 H 15.9375 c -8.75,0 -15.9375,7 -15.9375,15.625 v 31.1875 c 0,8.5625 7.1875,15.625 15.9375,15.625 H 111.75 v 62.375 l 127.74999,-93.5625 z" id="path3" sodipodi:nodetypes="ccsssscccc" /> </svg>