Chore: run prettier

This commit is contained in:
Pieter Vander Vennet 2023-06-15 16:12:46 +02:00
parent 147c3db957
commit 9661ade80c
19 changed files with 910 additions and 897 deletions

View file

@ -14,7 +14,8 @@
<SubtleButton
on:click={() => dispatch("click")}
options={{ extraClasses: twMerge("flex items-center", clss) }}>
options={{ extraClasses: twMerge("flex items-center", clss) }}
>
<ChevronLeftIcon class="h-12 w-12" slot="image" />
<slot slot="message" />
</SubtleButton>

View file

@ -15,7 +15,7 @@
if (hideSignal) {
onDestroy(
hideSignal.addCallbackD(() => {
if(initTime + 1000 > Date.now()){
if (initTime + 1000 > Date.now()) {
console.log("Ignoring hide signal")
return
}
@ -32,7 +32,7 @@
}
</script>
<div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full pointer-events-none">
<div bind:this={mainElem} class="pointer-events-none absolute bottom-0 right-0 h-full w-full">
<div id="hand-container">
<img src="./assets/svg/hand.svg" />
</div>

View file

@ -11,6 +11,7 @@
<button
on:click={(e) => dispatch("click", e)}
class={twJoin("pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1", cls)}>
class={twJoin("pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1", cls)}
>
<slot />
</button>

View file

@ -15,7 +15,8 @@
<SubtleButton
on:click={() => dispatch("click")}
options={{ extraClasses: twMerge("flex items-center", clss) }}>
options={{ extraClasses: twMerge("flex items-center", clss) }}
>
<slot name="image" slot="image" />
<div class="flex w-full items-center justify-between" slot="message">
<slot />

View file

@ -17,7 +17,8 @@
<button
class={twMerge(options.extraClasses, "secondary no-image-background")}
on:click={(e) => dispatch("click", e)}>
on:click={(e) => dispatch("click", e)}
>
<slot name="image">
{#if imageUrl !== undefined}
{#if typeof imageUrl === "string"}

View file

@ -17,7 +17,7 @@
}
</script>
<div class="tabbedgroup h-full flex w-full">
<div class="tabbedgroup flex h-full w-full">
<TabGroup
class="flex h-full w-full flex-col"
defaultIndex={1}
@ -67,7 +67,7 @@
</TabList>
<slot name="post-tablist" />
</div>
<div class="normal-background overflow-y-auto h-full">
<div class="normal-background h-full overflow-y-auto">
<TabPanels class="tabpanels" defaultIndex={$tab}>
<TabPanel class="tabpanel">
<slot name="content0">
@ -98,14 +98,13 @@
}
:global(.tabpanel) {
height:100%;
height: 100%;
}
:global(.tabpanels) {
height: calc( 100% - 2rem );
height: calc(100% - 2rem);
}
:global(.tab) {
margin: 0.25rem;
padding: 0.25rem;

View file

@ -15,7 +15,7 @@
import FeatureSourceMerger from "../../Logic/FeatureSource/Sources/FeatureSourceMerger"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import { Utils } from "../../Utils"
import {createEventDispatcher} from "svelte";
import { createEventDispatcher } from "svelte"
/**
* An advanced location input, which has support to:
@ -45,7 +45,7 @@
lat: number
}>(undefined)
const dispatch = createEventDispatcher<{click: {lon: number, lat: number}}>()
const dispatch = createEventDispatcher<{ click: { lon: number; lat: number } }>()
const xyz = Tiles.embedded_tile(coordinate.lat, coordinate.lon, 16)
const map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
@ -109,7 +109,7 @@
<LocationInput
{map}
on:click={data => dispatch("click", data)}
on:click={(data) => dispatch("click", data)}
mapProperties={initialMapProperties}
value={preciseLocation}
initialCoordinate={coordinate}

View file

@ -3,21 +3,19 @@
* A mapcontrol button which allows the user to select a different background.
* Even though the componenet is very small, it gets it's own class as it is often reused
*/
import {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid";
import type {SpecialVisualizationState} from "../SpecialVisualization";
import Translations from "../i18n/Translations";
import MapControlButton from "../Base/MapControlButton.svelte";
import Tr from "../Base/Tr.svelte";
import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import Translations from "../i18n/Translations"
import MapControlButton from "../Base/MapControlButton.svelte"
import Tr from "../Base/Tr.svelte"
export let state: SpecialVisualizationState
export let hideTooltip = false
</script>
<MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
>
<Square3Stack3dIcon class="h-6 w-6"/>
<MapControlButton on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}>
<Square3Stack3dIcon class="h-6 w-6" />
{#if !hideTooltip}
<Tr cls="mx-2" t={Translations.t.general.backgroundSwitch}/>
<Tr cls="mx-2" t={Translations.t.general.backgroundSwitch} />
{/if}
</MapControlButton>

View file

@ -1,8 +1,8 @@
<script lang="ts">
import ThemeViewState from "../../Models/ThemeViewState";
import Translations from "../i18n/Translations";
import Tr from "../Base/Tr.svelte";
import Loading from "../Base/Loading.svelte";
import ThemeViewState from "../../Models/ThemeViewState"
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
import Loading from "../Base/Loading.svelte"
export let state: ThemeViewState
/**
@ -17,24 +17,25 @@
currentState.data === ""
const t = Translations.t.centerMessage
</script>
{#if $currentState === "has-visible-features"}
<!-- don't show anything -->
{:else if $currentState === "zoom-to-low"}
<div class="w-fit p-4 alert">
<Tr t={t.zoomIn}/>
<div class="alert w-fit p-4">
<Tr t={t.zoomIn} />
</div>
{:else if $currentState === "all-filtered-away"}
<div class="w-fit p-4 alert">
<Tr t={t.allFilteredAway}/>
<div class="alert w-fit p-4">
<Tr t={t.allFilteredAway} />
</div>
{:else if $dataIsLoading}
<div class="w-fit p-4 alert">
<div class="alert w-fit p-4">
<Loading>
<Tr t={Translations.t.centerMessage.loadingData}/>
<Tr t={Translations.t.centerMessage.loadingData} />
</Loading>
</div>
{:else if $currentState === "no-data"}
<div class="w-fit p-4 alert">
<Tr t={t.noData}/>
<div class="alert w-fit p-4">
<Tr t={t.noData} />
</div>
{/if}

View file

@ -8,10 +8,10 @@
import ToSvelte from "../Base/ToSvelte.svelte"
import ThemeViewState from "../../Models/ThemeViewState"
import If from "../Base/If.svelte"
import {UIEventSource} from "../../Logic/UIEventSource"
import {SearchIcon} from "@rgossiaux/svelte-heroicons/solid"
import {twJoin} from "tailwind-merge"
import {Utils} from "../../Utils";
import { UIEventSource } from "../../Logic/UIEventSource"
import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
import { twJoin } from "tailwind-merge"
import { Utils } from "../../Utils"
/**
* The theme introduction panel
@ -29,7 +29,7 @@
if (glstate.currentGPSLocation.data !== undefined) {
const c: GeolocationCoordinates = glstate.currentGPSLocation.data
state.guistate.themeIsOpened.setData(false)
const coor = {lon: c.longitude, lat: c.latitude}
const coor = { lon: c.longitude, lat: c.latitude }
state.mapProperties.location.setData(coor)
}
if (glstate.permission.data !== "granted") {
@ -39,34 +39,31 @@
}
</script>
<div class="flex flex-col justify-between h-full">
<div class="flex h-full flex-col justify-between">
<div>
<!-- Intro, description, ... -->
<Tr t={layout.description}/>
<Tr t={Translations.t.general.welcomeExplanation.general}/>
<Tr t={layout.description} />
<Tr t={Translations.t.general.welcomeExplanation.general} />
{#if layout.layers.some((l) => l.presets?.length > 0)}
<If condition={state.featureSwitches.featureSwitchAddNew}>
<Tr t={Translations.t.general.welcomeExplanation.addNew}/>
<Tr t={Translations.t.general.welcomeExplanation.addNew} />
</If>
{/if}
<Tr t={layout.descriptionTail}/>
<Tr t={layout.descriptionTail} />
<!-- Buttons: open map, go to location, search -->
<NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
<div class="flex w-full justify-center text-2xl">
<Tr t={Translations.t.general.openTheMap}/>
<Tr t={Translations.t.general.openTheMap} />
</div>
</NextButton>
<div class="flex w-full flex-wrap sm:flex-nowrap">
<IfNot condition={state.geolocation.geolocationState.permission.map((p) => p === "denied")}>
<button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
<ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")}/>
<Tr t={Translations.t.general.openTheMapAtGeolocation}/>
<ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
<Tr t={Translations.t.general.openTheMapAtGeolocation} />
</button>
</IfNot>
@ -86,9 +83,10 @@
</div>
<button
class={twJoin("flex items-center justify-between gap-x-2", !searchEnabled && "disabled")}
on:click={() => triggerSearch.ping()}>
<Tr t={Translations.t.general.search.searchShort}/>
<SearchIcon class="h-6 w-6"/>
on:click={() => triggerSearch.ping()}
>
<Tr t={Translations.t.general.search.searchShort} />
<SearchIcon class="h-6 w-6" />
</button>
</div>
</div>
@ -97,8 +95,8 @@
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
<!-- bottom buttons, a bit hidden away: switch layout -->
<a class="flex" href={Utils.HomepageLink()}>
<img class="h-6 w-6" src="./assets/svg/add.svg"/>
<Tr t={Translations.t.general.backToIndex}/>
<img class="h-6 w-6" src="./assets/svg/add.svg" />
<Tr t={Translations.t.general.backToIndex} />
</a>
</div>
</div>

View file

@ -127,7 +127,8 @@
draggable="false"
on:mousedown={click}
src="./assets/svg/elevator.svg"
style={`top: ${top}px;`} />
style={`top: ${top}px;`}
/>
</div>
</div>

View file

@ -1,17 +1,17 @@
<script lang="ts">
import {Store, UIEventSource} from "../../../Logic/UIEventSource"
import type {MapProperties} from "../../../Models/MapProperties"
import {Map as MlMap} from "maplibre-gl"
import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
import { Store, UIEventSource } from "../../../Logic/UIEventSource"
import type { MapProperties } from "../../../Models/MapProperties"
import { Map as MlMap } from "maplibre-gl"
import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
import MaplibreMap from "../../Map/MaplibreMap.svelte"
import DragInvitation from "../../Base/DragInvitation.svelte"
import {GeoOperations} from "../../../Logic/GeoOperations"
import { GeoOperations } from "../../../Logic/GeoOperations"
import ShowDataLayer from "../../Map/ShowDataLayer"
import * as boundsdisplay from "../../../assets/layers/range/range.json"
import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
import * as turf from "@turf/turf"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import {createEventDispatcher, onDestroy} from "svelte"
import { createEventDispatcher, onDestroy } from "svelte"
/**
* A visualisation to pick a location on a map background
@ -35,11 +35,11 @@
mapProperties: MapProperties
) => void = undefined
const dispatch = createEventDispatcher<{ click: { lon: number, lat: number } }>()
const dispatch = createEventDispatcher<{ click: { lon: number; lat: number } }>()
export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
let mla = new MapLibreAdaptor(map, mapProperties)
mla.lastClickLocation.addCallbackAndRunD(lastClick => {
mla.lastClickLocation.addCallbackAndRunD((lastClick) => {
dispatch("click", lastClick)
})
mapProperties.location.syncWith(value)
@ -61,7 +61,7 @@
// This is too far away - let's move back
const correctLocation = GeoOperations.along(c, l, maxDistanceInMeters - 10)
window.setTimeout(() => {
mla.location.setData({lon: correctLocation[0], lat: correctLocation[1]})
mla.location.setData({ lon: correctLocation[0], lat: correctLocation[1] })
}, 25)
if (!rangeIsShown) {
@ -70,7 +70,7 @@
features: new StaticFeatureSource([
turf.circle(c, maxDistanceInMeters, {
units: "meters",
properties: {range: "yes", id: "0"},
properties: { range: "yes", id: "0" },
}),
]),
})
@ -83,14 +83,14 @@
<div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
<div class="absolute top-0 left-0 h-full w-full cursor-pointer">
<MaplibreMap {map}/>
<MaplibreMap {map} />
</div>
<div
class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50"
>
<img class="h-full max-h-24" src="./assets/svg/move-arrows.svg"/>
<img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" />
</div>
<DragInvitation hideSignal={mla.location}/>
<DragInvitation hideSignal={mla.location} />
</div>

View file

@ -3,7 +3,7 @@
* This component ties together all the steps that are needed to create a new point.
* There are many subcomponents which help with that
*/
import type {SpecialVisualizationState} from "../../SpecialVisualization"
import type { SpecialVisualizationState } from "../../SpecialVisualization"
import PresetList from "./PresetList.svelte"
import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
@ -12,26 +12,26 @@
import FromHtml from "../../Base/FromHtml.svelte"
import Translations from "../../i18n/Translations.js"
import TagHint from "../TagHint.svelte"
import {And} from "../../../Logic/Tags/And.js"
import { And } from "../../../Logic/Tags/And.js"
import LoginToggle from "../../Base/LoginToggle.svelte"
import Constants from "../../../Models/Constants.js"
import FilteredLayer from "../../../Models/FilteredLayer"
import {Store, UIEventSource} from "../../../Logic/UIEventSource"
import {EyeIcon, EyeOffIcon} from "@rgossiaux/svelte-heroicons/solid"
import { Store, UIEventSource } from "../../../Logic/UIEventSource"
import { EyeIcon, EyeOffIcon } from "@rgossiaux/svelte-heroicons/solid"
import LoginButton from "../../Base/LoginButton.svelte"
import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
import CreateNewNodeAction from "../../../Logic/Osm/Actions/CreateNewNodeAction"
import {OsmWay} from "../../../Logic/Osm/OsmObject"
import {Tag} from "../../../Logic/Tags/Tag"
import type {WayId} from "../../../Models/OsmFeature"
import { OsmWay } from "../../../Logic/Osm/OsmObject"
import { Tag } from "../../../Logic/Tags/Tag"
import type { WayId } from "../../../Models/OsmFeature"
import Loading from "../../Base/Loading.svelte"
import type {GlobalFilter} from "../../../Models/GlobalFilter"
import {onDestroy} from "svelte"
import type { GlobalFilter } from "../../../Models/GlobalFilter"
import { onDestroy } from "svelte"
import NextButton from "../../Base/NextButton.svelte"
import BackButton from "../../Base/BackButton.svelte"
import ToSvelte from "../../Base/ToSvelte.svelte"
import Svg from "../../../Svg"
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
import { twJoin } from "tailwind-merge"
export let coordinate: { lon: number; lat: number }
@ -149,17 +149,17 @@
2. What do we want to add?
3. Are all elements of this category visible? (i.e. there are no filters possibly hiding this, is the data still loading, ...) -->
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in">
<Tr slot="message" t={Translations.t.general.add.pleaseLogin}/>
<Tr slot="message" t={Translations.t.general.add.pleaseLogin} />
</LoginButton>
{#if $isLoading}
<div class="alert">
<Loading>
<Tr t={Translations.t.general.add.stillLoading}/>
<Tr t={Translations.t.general.add.stillLoading} />
</Loading>
</div>
{:else if $zoom < Constants.minZoomLevelToAddNewPoint}
<div class="alert">
<Tr t={Translations.t.general.add.zoomInFurther}/>
<Tr t={Translations.t.general.add.zoomInFurther} />
</div>
{:else if selectedPreset === undefined}
<!-- First, select the correct preset -->
@ -172,7 +172,7 @@
{:else if !$layerIsDisplayed}
<!-- Check that the layer is enabled, so that we don't add a duplicate -->
<div class="alert flex items-center justify-center">
<EyeOffIcon class="w-8"/>
<EyeOffIcon class="w-8" />
<Tr
t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })}
/>
@ -186,8 +186,8 @@
state.guistate.openFilterView(selectedPreset.layer)
}}
>
<ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
<Tr t={Translations.t.general.add.openLayerControl}/>
<ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
<Tr t={Translations.t.general.add.openLayerControl} />
</button>
<button
@ -197,15 +197,15 @@
abort()
}}
>
<EyeIcon class="w-12"/>
<Tr t={Translations.t.general.add.enableLayer.Subs({ name: selectedPreset.layer.name })}/>
<EyeIcon class="w-12" />
<Tr t={Translations.t.general.add.enableLayer.Subs({ name: selectedPreset.layer.name })} />
</button>
</div>
{:else if $layerHasFilters}
<!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
<div class="alert flex items-center justify-center">
<EyeOffIcon class="w-8"/>
<Tr t={Translations.t.general.add.disableFiltersExplanation}/>
<EyeOffIcon class="w-8" />
<Tr t={Translations.t.general.add.disableFiltersExplanation} />
</div>
<div class="flex flex-wrap-reverse md:flex-nowrap">
<button
@ -215,8 +215,8 @@
state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters()
}}
>
<EyeOffIcon class="w-12"/>
<Tr t={Translations.t.general.add.disableFilters}/>
<EyeOffIcon class="w-12" />
<Tr t={Translations.t.general.add.disableFilters} />
</button>
<button
class="flex w-full gap-x-1"
@ -225,8 +225,8 @@
state.guistate.openFilterView(selectedPreset.layer)
}}
>
<ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
<Tr t={Translations.t.general.add.openLayerControl}/>
<ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
<Tr t={Translations.t.general.add.openLayerControl} />
</button>
</div>
{:else if !confirmedCategory}
@ -237,23 +237,23 @@
/>
</h2>
<Tr t={Translations.t.general.add.confirmIntro}/>
<Tr t={Translations.t.general.add.confirmIntro} />
{#if selectedPreset.preset.description}
<Tr t={selectedPreset.preset.description}/>
<Tr t={selectedPreset.preset.description} />
{/if}
{#if selectedPreset.preset.exampleImages}
<h3>
{#if selectedPreset.preset.exampleImages.length === 1}
<Tr t={Translations.t.general.example}/>
<Tr t={Translations.t.general.example} />
{:else}
<Tr t={Translations.t.general.examples}/>
<Tr t={Translations.t.general.examples} />
{/if}
</h3>
<span class="flex flex-wrap items-stretch">
{#each selectedPreset.preset.exampleImages as src}
<img {src} class="m-1 h-64 w-auto rounded-lg"/>
<img {src} class="m-1 h-64 w-auto rounded-lg" />
{/each}
</span>
{/if}
@ -265,21 +265,21 @@
<div class="flex w-full flex-wrap-reverse md:flex-nowrap">
<BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
<Tr t={t.backToSelect}/>
<Tr t={t.backToSelect} />
</BackButton>
<NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
<div slot="image" class="relative">
<FromHtml src={selectedPreset.icon}/>
<img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg"/>
<FromHtml src={selectedPreset.icon} />
<img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg" />
</div>
<div class="w-full">
<Tr t={selectedPreset.text}/>
<Tr t={selectedPreset.text} />
</div>
</NextButton>
</div>
{:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
<Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12"/>
<Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12" />
<SubtleButton
on:click={() => {
checkedOfGlobalFilters = checkedOfGlobalFilters + 1
@ -303,14 +303,16 @@
abort()
}}
>
<img slot="image" src="./assets/svg/close.svg" class="h-8 w-8"/>
<Tr slot="message" t={Translations.t.general.cancel}/>
<img slot="image" src="./assets/svg/close.svg" class="h-8 w-8" />
<Tr slot="message" t={Translations.t.general.cancel} />
</SubtleButton>
{:else if !creating}
<div class="relative w-full p-1">
<div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
<NewPointLocationInput
on:click={() => {preciseInputIsTapped = true}}
on:click={() => {
preciseInputIsTapped = true
}}
value={preciseCoordinate}
snappedTo={snappedToObject}
{state}
@ -320,26 +322,31 @@
/>
</div>
<div class={twJoin(!preciseInputIsTapped && "hidden", "absolute top-0 p-12 flex justify-center w-full")}>
<div
class={twJoin(
!preciseInputIsTapped && "hidden",
"absolute top-0 flex w-full justify-center p-12"
)}
>
<NextButton on:click={confirm} clss="primary w-fit">
<div class="flex w-full justify-end gap-x-2">
<Tr t={Translations.t.general.add.confirmLocation}/>
<Tr t={Translations.t.general.add.confirmLocation} />
</div>
</NextButton>
</div>
<div class="absolute bottom-0 left-0 p-4">
<OpenBackgroundSelectorButton {state}/>
<OpenBackgroundSelectorButton {state} />
</div>
</div>
<div class="flex flex-wrap-reverse md:flex-nowrap">
<BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
<Tr t={t.backToSelect}/>
<Tr t={t.backToSelect} />
</BackButton>
<NextButton on:click={confirm} clss={"primary w-full"}>
<div class="flex w-full justify-end gap-x-2">
<Tr t={Translations.t.general.add.confirmLocation}/>
<Tr t={Translations.t.general.add.confirmLocation} />
</div>
</NextButton>
</div>

View file

@ -112,10 +112,13 @@
<button
slot="save-button"
on:click={onDelete}
class={twJoin((selectedTags === undefined && "disabled"), "primary flex bg-red-600")}
class={twJoin(selectedTags === undefined && "disabled", "primary flex bg-red-600")}
>
<TrashIcon
class={twJoin("ml-1 mr-2 h-6 w-6 rounded-full p-1", selectedTags !== undefined && "bg-red-600")}
class={twJoin(
"ml-1 mr-2 h-6 w-6 rounded-full p-1",
selectedTags !== undefined && "bg-red-600"
)}
/>
<Tr t={t.delete} />
</button>

View file

@ -1,10 +1,10 @@
<script lang="ts">
import ImportFlow from "./ImportFlow.svelte"
import {PointImportFlowState} from "./PointImportFlowState"
import { PointImportFlowState } from "./PointImportFlowState"
import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import {UIEventSource} from "../../../Logic/UIEventSource"
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
import { UIEventSource } from "../../../Logic/UIEventSource"
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
export let importFlow: PointImportFlowState
@ -52,7 +52,7 @@
/>
</div>
<div class="absolute bottom-0">
<OpenBackgroundSelectorButton {state}/>
<OpenBackgroundSelectorButton {state} />
</div>
</div>
</ImportFlow>

View file

@ -4,16 +4,16 @@
*/
import WayImportFlowState from "./WayImportFlowState"
import ImportFlow from "./ImportFlow.svelte"
import {UIEventSource} from "../../../Logic/UIEventSource"
import {Map as MlMap} from "maplibre-gl"
import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
import { UIEventSource } from "../../../Logic/UIEventSource"
import { Map as MlMap } from "maplibre-gl"
import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
import MaplibreMap from "../../Map/MaplibreMap.svelte"
import ShowDataLayer from "../../Map/ShowDataLayer"
import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
import {ImportFlowUtils} from "./ImportFlow"
import {GeoOperations} from "../../../Logic/GeoOperations"
import { ImportFlowUtils } from "./ImportFlow"
import { GeoOperations } from "../../../Logic/GeoOperations"
import ConflateImportFlowState from "./ConflateImportFlowState"
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
export let importFlow: WayImportFlowState | ConflateImportFlowState
@ -51,7 +51,7 @@
<MaplibreMap {map} />
</div>
<div class="absolute bottom-0">
<OpenBackgroundSelectorButton/>
<OpenBackgroundSelectorButton />
</div>
</div>
</ImportFlow>

View file

@ -32,7 +32,8 @@
class={twJoin(`mapping-icon-${mapping.iconClass}`, "mr-1")}
src={mapping.icon}
aria-hidden="true"
alt="" />
alt=""
/>
<SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
</div>
{:else if mapping.then !== undefined}

View file

@ -277,7 +277,8 @@
<slot name="save-button" {selectedTags}>
<button
on:click={onSave}
class={twJoin(selectedTags === undefined ? "disabled" : "button-shadow", "primary")}>
class={twJoin(selectedTags === undefined ? "disabled" : "button-shadow", "primary")}
>
<Tr t={Translations.t.general.save} />
</button>
</slot>

View file

@ -1,21 +1,21 @@
<script lang="ts">
import {Store, UIEventSource} from "../Logic/UIEventSource"
import {Map as MlMap} from "maplibre-gl"
import { Store, UIEventSource } from "../Logic/UIEventSource"
import { Map as MlMap } from "maplibre-gl"
import MaplibreMap from "./Map/MaplibreMap.svelte"
import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
import MapControlButton from "./Base/MapControlButton.svelte"
import ToSvelte from "./Base/ToSvelte.svelte"
import If from "./Base/If.svelte"
import {GeolocationControl} from "./BigComponents/GeolocationControl"
import type {Feature} from "geojson"
import { GeolocationControl } from "./BigComponents/GeolocationControl"
import type { Feature } from "geojson"
import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
import LayerConfig from "../Models/ThemeConfig/LayerConfig"
import Filterview from "./BigComponents/Filterview.svelte"
import ThemeViewState from "../Models/ThemeViewState"
import type {MapProperties} from "../Models/MapProperties"
import type { MapProperties } from "../Models/MapProperties"
import Geosearch from "./BigComponents/Geosearch.svelte"
import Translations from "./i18n/Translations"
import {CogIcon, EyeIcon, MenuIcon, XCircleIcon} from "@rgossiaux/svelte-heroicons/solid"
import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
import Tr from "./Base/Tr.svelte"
import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
@ -29,28 +29,28 @@
import CopyrightPanel from "./BigComponents/CopyrightPanel"
import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
import ModalRight from "./Base/ModalRight.svelte"
import {Utils} from "../Utils"
import { Utils } from "../Utils"
import Hotkeys from "./Base/Hotkeys"
import {VariableUiElement} from "./Base/VariableUIElement"
import { VariableUiElement } from "./Base/VariableUIElement"
import SvelteUIElement from "./Base/SvelteUIElement"
import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
import LevelSelector from "./BigComponents/LevelSelector.svelte"
import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
import Svg from "../Svg"
import {ShareScreen} from "./BigComponents/ShareScreen"
import { ShareScreen } from "./BigComponents/ShareScreen"
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
import type {RasterLayerPolygon} from "../Models/RasterLayers"
import {AvailableRasterLayers} from "../Models/RasterLayers"
import type { RasterLayerPolygon } from "../Models/RasterLayers"
import { AvailableRasterLayers } from "../Models/RasterLayers"
import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
import IfHidden from "./Base/IfHidden.svelte"
import {onDestroy} from "svelte"
import {OpenJosm} from "./BigComponents/OpenJosm"
import { onDestroy } from "svelte"
import { OpenJosm } from "./BigComponents/OpenJosm"
import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte";
import Loading from "./Base/Loading.svelte";
import StateIndicator from "./BigComponents/StateIndicator.svelte";
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
import Loading from "./Base/Loading.svelte"
import StateIndicator from "./BigComponents/StateIndicator.svelte"
export let state: ThemeViewState
let layout = state.layout
@ -74,7 +74,7 @@
}
const tags = state.featureProperties.getStore(selectedElement.properties.id)
return new SvelteUIElement(SelectedElementView, {state, layer, selectedElement, tags})
return new SvelteUIElement(SelectedElementView, { state, layer, selectedElement, tags })
},
[selectedLayer]
)
@ -90,7 +90,7 @@
}
const tags = state.featureProperties.getStore(selectedElement.properties.id)
return new SvelteUIElement(SelectedElementTitle, {state, layer, selectedElement, tags})
return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags })
},
[selectedLayer]
)
@ -111,10 +111,9 @@
</script>
<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
<MaplibreMap map={maplibremap}/>
<MaplibreMap map={maplibremap} />
</div>
<div class="pointer-events-none absolute top-0 left-0 w-full">
<!-- Top components -->
<If condition={state.featureSwitches.featureSwitchSearch}>
@ -130,14 +129,14 @@
<div class="float-left m-1 flex flex-col sm:mt-2">
<MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
<div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
<img class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8" src={layout.icon}/>
<img class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8" src={layout.icon} />
<b class="mr-1">
<Tr t={layout.title}/>
<Tr t={layout.title} />
</b>
</div>
</MapControlButton>
<MapControlButton on:click={() => state.guistate.menuIsOpened.setData(true)}>
<MenuIcon class="h-8 w-8 cursor-pointer"/>
<MenuIcon class="h-8 w-8 cursor-pointer" />
</MapControlButton>
{#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
<MapControlButton
@ -158,9 +157,10 @@
<div class="alert w-fit">Testmode</div>
</If>
</div>
<div class="flex justify-center w-full"> <!-- Flex and w-full are needed for the positioning -->
<div class="flex w-full justify-center">
<!-- Flex and w-full are needed for the positioning -->
<!-- Centermessage -->
<StateIndicator {state}/>
<StateIndicator {state} />
</div>
</div>
@ -169,7 +169,7 @@
<div class="flex w-full items-end justify-between px-4">
<div class="flex">
<!-- bottom left elements -->
<OpenBackgroundSelectorButton hideTooltip={true} {state}/>
<OpenBackgroundSelectorButton hideTooltip={true} {state} />
<a
class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
on:click={() => {
@ -193,10 +193,10 @@
</div>
</If>
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z + 1)}>
<ToSvelte construct={Svg.plus_svg().SetClass("w-8 h-8")}/>
<ToSvelte construct={Svg.plus_svg().SetClass("w-8 h-8")} />
</MapControlButton>
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z - 1)}>
<ToSvelte construct={Svg.min_svg().SetClass("w-8 h-8")}/>
<ToSvelte construct={Svg.min_svg().SetClass("w-8 h-8")} />
</MapControlButton>
<If condition={featureSwitches.featureSwitchGeolocation}>
<MapControlButton>
@ -248,7 +248,7 @@
selectedElement.setData(undefined)
}}
>
<ToSvelte construct={new VariableUiElement(selectedElementView)}/>
<ToSvelte construct={new VariableUiElement(selectedElementView)} />
</FloatOver>
</If>
@ -265,18 +265,18 @@
</div>
<div class="flex" slot="title0">
<img class="block h-4 w-4" src={layout.icon}/>
<Tr t={layout.title}/>
<img class="block h-4 w-4" src={layout.icon} />
<Tr t={layout.title} />
</div>
<div class="m-4 h-full" slot="content0">
<ThemeIntroPanel {state}/>
<ThemeIntroPanel {state} />
</div>
<div class="flex" slot="title1">
<If condition={state.featureSwitches.featureSwitchFilter}>
<ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")}/>
<Tr t={Translations.t.general.menu.filter}/>
<ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")} />
<Tr t={Translations.t.general.menu.filter} />
</If>
</div>
@ -299,25 +299,25 @@
</div>
<div class="flex" slot="title2">
<If condition={state.featureSwitches.featureSwitchEnableExport}>
<ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")}/>
<Tr t={Translations.t.general.download.title}/>
<ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")} />
<Tr t={Translations.t.general.download.title} />
</If>
</div>
<div class="m-4" slot="content2">
<DownloadPanel {state}/>
<DownloadPanel {state} />
</div>
<div slot="title3">
<Tr t={Translations.t.general.attribution.title}/>
<Tr t={Translations.t.general.attribution.title} />
</div>
<ToSvelte construct={() => new CopyrightPanel(state)} slot="content3"/>
<ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" />
<div slot="title4">
<Tr t={Translations.t.general.sharescreen.title}/>
<Tr t={Translations.t.general.sharescreen.title} />
</div>
<div class="m-2" slot="content4">
<ToSvelte construct={() => new ShareScreen(state)}/>
<ToSvelte construct={() => new ShareScreen(state)} />
</div>
</TabbedGroup>
</FloatOver>
@ -350,50 +350,50 @@
/>
</div>
<div class="flex" slot="title0">
<Tr t={Translations.t.general.menu.aboutMapComplete}/>
<Tr t={Translations.t.general.menu.aboutMapComplete} />
</div>
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1" slot="content0">
<Tr t={Translations.t.general.aboutMapComplete.intro}/>
<Tr t={Translations.t.general.aboutMapComplete.intro} />
<a class="flex" href={Utils.HomepageLink()}>
<img class="h-6 w-6" src="./assets/svg/add.svg"/>
<Tr t={Translations.t.general.backToIndex}/>
<img class="h-6 w-6" src="./assets/svg/add.svg" />
<Tr t={Translations.t.general.backToIndex} />
</a>
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
<img class="h-6 w-6" src="./assets/svg/bug.svg"/>
<Tr t={Translations.t.general.attribution.openIssueTracker}/>
<img class="h-6 w-6" src="./assets/svg/bug.svg" />
<Tr t={Translations.t.general.attribution.openIssueTracker} />
</a>
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
<img class="h-6 w-6" src="./assets/svg/mastodon.svg"/>
<Tr t={Translations.t.general.attribution.followOnMastodon}/>
<img class="h-6 w-6" src="./assets/svg/mastodon.svg" />
<Tr t={Translations.t.general.attribution.followOnMastodon} />
</a>
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
<img class="h-6 w-6" src="./assets/svg/liberapay.svg"/>
<Tr t={Translations.t.general.attribution.donate}/>
<img class="h-6 w-6" src="./assets/svg/liberapay.svg" />
<Tr t={Translations.t.general.attribution.donate} />
</a>
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
<img class="h-6 w-6" src="./assets/svg/statistics.svg"/>
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: "MapComplete" })}/>
<img class="h-6 w-6" src="./assets/svg/statistics.svg" />
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: "MapComplete" })} />
</a>
{Constants.vNumber}
</div>
<div class="flex" slot="title1">
<CogIcon class="h-6 w-6"/>
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})}/>
<CogIcon class="h-6 w-6" />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</div>
<div class="links-as-button" slot="content1">
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
<LoginToggle {state}>
<div class="flex flex-col" slot="not-logged-in">
<Tr class="alert" t={Translations.t.userinfo.notLoggedIn}/>
<LoginButton clss="primary" osmConnection={state.osmConnection}/>
<Tr class="alert" t={Translations.t.userinfo.notLoggedIn} />
<LoginButton clss="primary" osmConnection={state.osmConnection} />
</div>
<SelectedElementView
highlightedRendering={state.guistate.highlightedUserSetting}
@ -410,30 +410,30 @@
</div>
<div class="flex" slot="title2">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
Get in touch with others
</div>
<div class="m-2" slot="content2">
<CommunityIndexView location={state.mapProperties.location}/>
<CommunityIndexView location={state.mapProperties.location} />
</div>
<div class="flex" slot="title3">
<EyeIcon class="w-6"/>
<Tr t={Translations.t.privacy.title}/>
<EyeIcon class="w-6" />
<Tr t={Translations.t.privacy.title} />
</div>
<div class="m-2" slot="content3">
<ToSvelte construct={() => new PrivacyPolicy()}/>
<ToSvelte construct={() => new PrivacyPolicy()} />
</div>
<Tr slot="title4" t={Translations.t.advanced.title}/>
<Tr slot="title4" t={Translations.t.advanced.title} />
<div class="m-2 flex flex-col" slot="content4">
<OpenIdEditor mapProperties={state.mapProperties}/>
<OpenIdEditor mapProperties={state.mapProperties} />
<ToSvelte
construct={() =>
new OpenJosm(state.osmConnection, state.mapProperties.bounds).SetClass("w-full")}
/>
<MapillaryLink mapProperties={state.mapProperties}/>
<ToSvelte construct={Hotkeys.generateDocumentationDynamic}/>
<MapillaryLink mapProperties={state.mapProperties} />
<ToSvelte construct={Hotkeys.generateDocumentationDynamic} />
</div>
</TabbedGroup>
</FloatOver>