forked from MapComplete/MapComplete
Chore: housekeeping: lint
This commit is contained in:
parent
2cbd709d71
commit
663b194247
334 changed files with 4675 additions and 1730 deletions
|
|
@ -1,40 +1,38 @@
|
|||
<script lang="ts">
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import type { MoveReason } from "./MoveWizardState"
|
||||
import { MoveWizardState } from "./MoveWizardState"
|
||||
|
||||
import { UIEventSource } from "../../Logic/UIEventSource";
|
||||
import type { MoveReason } from "./MoveWizardState";
|
||||
import { MoveWizardState } from "./MoveWizardState";
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||
import ToSvelte from "../Base/ToSvelte.svelte"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import Translations from "../i18n/Translations"
|
||||
import Move from "../../assets/svg/Move.svelte"
|
||||
import Move_not_allowed from "../../assets/svg/Move_not_allowed.svelte"
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
|
||||
import type { MapProperties } from "../../Models/MapProperties"
|
||||
import type { Feature, Point } from "geojson"
|
||||
import { GeoOperations } from "../../Logic/GeoOperations"
|
||||
import LocationInput from "../InputElement/Helpers/LocationInput.svelte"
|
||||
import OpenBackgroundSelectorButton from "../BigComponents/OpenBackgroundSelectorButton.svelte"
|
||||
import Geosearch from "../BigComponents/Geosearch.svelte"
|
||||
import Move_confirm from "../../assets/svg/Move_confirm.svelte"
|
||||
import If from "../Base/If.svelte"
|
||||
import Constants from "../../Models/Constants"
|
||||
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
|
||||
import ToSvelte from "../Base/ToSvelte.svelte";
|
||||
import Tr from "../Base/Tr.svelte";
|
||||
import Translations from "../i18n/Translations";
|
||||
import Move from "../../assets/svg/Move.svelte";
|
||||
import Move_not_allowed from "../../assets/svg/Move_not_allowed.svelte";
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization";
|
||||
import { XCircleIcon } from "@babeard/svelte-heroicons/solid";
|
||||
import type { MapProperties } from "../../Models/MapProperties";
|
||||
import type { Feature, Point } from "geojson";
|
||||
import { GeoOperations } from "../../Logic/GeoOperations";
|
||||
import LocationInput from "../InputElement/Helpers/LocationInput.svelte";
|
||||
import OpenBackgroundSelectorButton from "../BigComponents/OpenBackgroundSelectorButton.svelte";
|
||||
import Geosearch from "../BigComponents/Geosearch.svelte";
|
||||
import Move_confirm from "../../assets/svg/Move_confirm.svelte";
|
||||
import If from "../Base/If.svelte";
|
||||
import Constants from "../../Models/Constants";
|
||||
export let state: SpecialVisualizationState
|
||||
|
||||
export let layer: LayerConfig
|
||||
export let featureToMove: Feature<Point>
|
||||
|
||||
export let state: SpecialVisualizationState;
|
||||
let id: string = featureToMove.properties.id
|
||||
let currentStep: "start" | "reason" | "pick_location" | "moved" = "start"
|
||||
const t = Translations.t.move
|
||||
const reason = new UIEventSource<MoveReason>(undefined)
|
||||
let [lon, lat] = GeoOperations.centerpointCoordinates(featureToMove)
|
||||
|
||||
export let layer: LayerConfig;
|
||||
export let featureToMove: Feature<Point>;
|
||||
|
||||
let id: string = featureToMove.properties.id;
|
||||
let currentStep: "start" | "reason" | "pick_location" | "moved" = "start";
|
||||
const t = Translations.t.move;
|
||||
const reason = new UIEventSource<MoveReason>(undefined);
|
||||
let [lon, lat] = GeoOperations.centerpointCoordinates(featureToMove);
|
||||
|
||||
let newLocation = new UIEventSource<{ lon: number; lat: number }>(undefined);
|
||||
let newLocation = new UIEventSource<{ lon: number; lat: number }>(undefined)
|
||||
|
||||
function initMapProperties() {
|
||||
return <any>{
|
||||
|
|
@ -45,20 +43,19 @@
|
|||
location: new UIEventSource({ lon, lat }),
|
||||
minzoom: new UIEventSource($reason.minZoom),
|
||||
rasterLayer: state.mapProperties.rasterLayer,
|
||||
zoom: new UIEventSource($reason?.startZoom ?? 16)
|
||||
};
|
||||
zoom: new UIEventSource($reason?.startZoom ?? 16),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let moveWizardState = new MoveWizardState(id, layer.allowMove, state);
|
||||
let notAllowed = moveWizardState.moveDisallowedReason;
|
||||
let currentMapProperties: MapProperties = undefined;
|
||||
let moveWizardState = new MoveWizardState(id, layer.allowMove, state)
|
||||
let notAllowed = moveWizardState.moveDisallowedReason
|
||||
let currentMapProperties: MapProperties = undefined
|
||||
</script>
|
||||
{#if moveWizardState.reasons.length > 0}
|
||||
|
||||
{#if moveWizardState.reasons.length > 0}
|
||||
{#if $notAllowed}
|
||||
<div class="flex m-2 p-2 rounded-lg bg-gray-200">
|
||||
<Move_not_allowed class="h-8 w-8 m-2" />
|
||||
<div class="m-2 flex rounded-lg bg-gray-200 p-2">
|
||||
<Move_not_allowed class="m-2 h-8 w-8" />
|
||||
<div class="flex flex-col">
|
||||
<Tr t={t.cannotBeMoved} />
|
||||
<Tr t={$notAllowed} />
|
||||
|
|
@ -66,79 +63,106 @@
|
|||
</div>
|
||||
{:else if currentStep === "start"}
|
||||
{#if moveWizardState.reasons.length === 1}
|
||||
<button class="flex" on:click={() => {reason.setData(moveWizardState.reasons[0]); currentStep = "pick_location"}}>
|
||||
<ToSvelte construct={moveWizardState.reasons[0].icon.SetStyle("height: 1.5rem; width: 1.5rem;")}></ToSvelte>
|
||||
<button
|
||||
class="flex"
|
||||
on:click={() => {
|
||||
reason.setData(moveWizardState.reasons[0])
|
||||
currentStep = "pick_location"
|
||||
}}
|
||||
>
|
||||
<ToSvelte
|
||||
construct={moveWizardState.reasons[0].icon.SetStyle("height: 1.5rem; width: 1.5rem;")}
|
||||
/>
|
||||
<Tr t={Translations.T(moveWizardState.reasons[0].invitingText)} />
|
||||
</button>
|
||||
{:else}
|
||||
<button class="flex" on:click={() => {currentStep = "reason"}}>
|
||||
<Move class="w-6 h-6" />
|
||||
<button
|
||||
class="flex"
|
||||
on:click={() => {
|
||||
currentStep = "reason"
|
||||
}}
|
||||
>
|
||||
<Move class="h-6 w-6" />
|
||||
<Tr t={t.inviteToMove.generic} />
|
||||
</button>
|
||||
{/if}
|
||||
{:else if currentStep === "reason"}
|
||||
<div class="flex flex-col interactive border-interactive p-2">
|
||||
|
||||
<div class="interactive border-interactive flex flex-col p-2">
|
||||
<Tr cls="text-lg font-bold" t={t.whyMove} />
|
||||
{#each moveWizardState.reasons as reasonSpec}
|
||||
<button on:click={() => {reason.setData(reasonSpec); currentStep = "pick_location"}}>
|
||||
<ToSvelte construct={reasonSpec.icon.SetClass("w-16 h-16 pr-2")} />
|
||||
<button
|
||||
on:click={() => {
|
||||
reason.setData(reasonSpec)
|
||||
currentStep = "pick_location"
|
||||
}}
|
||||
>
|
||||
<ToSvelte construct={reasonSpec.icon.SetClass("w-16 h-16 pr-2")} />
|
||||
<Tr t={reasonSpec.text} />
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{:else if currentStep === "pick_location"}
|
||||
<div class="flex flex-col border-interactive interactive p-2">
|
||||
<div class="border-interactive interactive flex flex-col p-2">
|
||||
<Tr cls="text-lg font-bold" t={t.moveTitle} />
|
||||
|
||||
|
||||
<div class="relative w-full h-64">
|
||||
<LocationInput mapProperties={currentMapProperties = initMapProperties()} value={newLocation}
|
||||
initialCoordinate={{lon, lat}} />
|
||||
<div class="relative h-64 w-full">
|
||||
<LocationInput
|
||||
mapProperties={(currentMapProperties = initMapProperties())}
|
||||
value={newLocation}
|
||||
initialCoordinate={{ lon, lat }}
|
||||
/>
|
||||
<div class="absolute bottom-0 left-0">
|
||||
<OpenBackgroundSelectorButton {state} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $reason.includeSearch}
|
||||
<Geosearch bounds={ currentMapProperties.bounds} clearAfterView={false} />
|
||||
<Geosearch bounds={currentMapProperties.bounds} clearAfterView={false} />
|
||||
{/if}
|
||||
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<If condition={currentMapProperties.zoom.mapD(zoom => zoom >= Constants.minZoomLevelToAddNewPoint)}>
|
||||
|
||||
<button class="flex flex primary w-full"
|
||||
on:click={() => {moveWizardState.moveFeature(newLocation.data, reason.data, featureToMove)}}>
|
||||
<Move class="w-6 h-6 mr-2" />
|
||||
<If
|
||||
condition={currentMapProperties.zoom.mapD(
|
||||
(zoom) => zoom >= Constants.minZoomLevelToAddNewPoint
|
||||
)}
|
||||
>
|
||||
<button
|
||||
class="primary flex flex w-full"
|
||||
on:click={() => {
|
||||
moveWizardState.moveFeature(newLocation.data, reason.data, featureToMove)
|
||||
}}
|
||||
>
|
||||
<Move class="mr-2 h-6 w-6" />
|
||||
<Tr t={t.confirmMove} />
|
||||
</button>
|
||||
|
||||
<div slot="else" class="alert">
|
||||
<Tr t={t.zoomInFurther} />
|
||||
</div>
|
||||
|
||||
</If>
|
||||
|
||||
<button class="w-full" on:click={() => {currentStep= "start"}}>
|
||||
<XCircleIcon class="w-6 h-6 mr-2" />
|
||||
<button
|
||||
class="w-full"
|
||||
on:click={() => {
|
||||
currentStep = "start"
|
||||
}}
|
||||
>
|
||||
<XCircleIcon class="mr-2 h-6 w-6" />
|
||||
<Tr t={t.cancel} />
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{:else if currentStep === "moved"}
|
||||
|
||||
<div class="flex flex-col">
|
||||
<Tr cls="thanks" t={t.pointIsMoved} />
|
||||
<button on:click={() => {currentStep = "reason"}}>
|
||||
<button
|
||||
on:click={() => {
|
||||
currentStep = "reason"
|
||||
}}
|
||||
>
|
||||
<Move />
|
||||
<Tr t={t.inviteToMoveAgain} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue