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

Review of many feature switches and iframe context; fix OH-vis when ranges are not given

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-06-23 02:54:53 +02:00
parent ecfa7d3d1d
commit afea9adacb
21 changed files with 157 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/UI/BigComponents/CopyrightPanel.ts
View file

@ -40,8 +40,8 @@ export default class CopyrightPanel extends Combine {
const t = Translations.t.general.attribution
const layoutToUse = state.layout
const iconAttributions: BaseUIElement[] = layoutToUse
.getUsedImages()
const iconAttributions: BaseUIElement[] = Utils.Dedup(layoutToUse
.getUsedImages())
.map(CopyrightPanel.IconAttribution)
let maintainer: BaseUIElement = undefined

5
src/UI/BigComponents/ExtraLinkButton.svelte
View file

@ -11,10 +11,9 @@
export let state: SpecialVisualizationState
let theme = state.layout?.id ?? ""
let config: ExtraLinkConfig = state.layout.extraLink
const isIframe = window !== window.top
let basepath = window.location.host
let showWelcomeMessageSwitch = state.featureSwitches.featureSwitchWelcomeMessage
const isIframe = Utils.isIframe
const t = Translations.t.general
const href = state.mapProperties.location.map(
(loc) => {
@ -36,7 +35,7 @@
href={$href}
target={config.newTab ? "_blank" : ""}
rel="noopener"
class="pointer-events-auto flex rounded-full border-black"
class="button pointer-events-auto flex rounded-full border-black"
>
<Icon icon={config.icon} clss="w-6 h-6 m-2" />

24
src/UI/BigComponents/ThemeIntroPanel.svelte
View file

@ -15,6 +15,7 @@
import Location_refused from "../../assets/svg/Location_refused.svelte"
import Location from "../../assets/svg/Location.svelte"
import ChevronDoubleLeft from "@babeard/svelte-heroicons/mini/ChevronDoubleLeft"
import Constants from "../../Models/Constants"
/**
* The theme introduction panel
@ -149,13 +150,20 @@
{/if}
</div>
<If condition={state.featureSwitches.featureSwitchBackToThemeOverview}>
<div class="link-underline m-2 mx-4 flex w-full">
<!-- bottom buttons, a bit hidden away: switch layout -->
<a class="flex w-fit items-center justify-end" href={Utils.HomepageLink()}>
<ChevronDoubleLeft class="h-4 w-4" />
<Tr t={Translations.t.general.backToIndex} />
</a>
{#if Utils.isIframe}
<div class="flex justify-end link-underline">
<a href="https://mapcomplete.org" target="_blank">
<Tr t={Translations.t.general.poweredByMapComplete}/>
</a>
</div>
</If>
{:else}
<If condition={state.featureSwitches.featureSwitchBackToThemeOverview}>
<div class="link-underline m-2 mx-4 flex w-full">
<a class="flex w-fit items-center justify-end" href={Utils.HomepageLink()}>
<ChevronDoubleLeft class="h-4 w-4" />
<Tr t={Translations.t.general.backToIndex} />
</a>
</div>
</If>
{/if}
</div>

3
src/UI/Comparison/ComparisonTool.svelte
View file

@ -42,9 +42,10 @@
let knownImages = comparisonState.bindD((ct) => ct.knownImages)
let propertyKeysExternal = comparisonState.mapD((ct) => ct.propertyKeysExternal)
let hasDifferencesAtStart = comparisonState.mapD((ct) => ct.hasDifferencesAtStart)
let enableLogin= state.featureSwitches.featureSwitchEnableLogin
</script>
{#if !$sourceUrl}
{#if !$sourceUrl || !$enableLogin}
<!-- empty block -->
{:else if $externalData === undefined}
<Loading />

3
src/UI/Image/ImageCarousel.ts
View file

@ -54,10 +54,9 @@ export class ImageCarousel extends Toggle {
)
super(
new SlideShow(uiElements).SetClass("w-full"),
new SlideShow(uiElements).SetClass("w-full block w-full my-4"),
undefined,
uiElements.map((els) => els.length > 0)
)
this.SetClass("block w-full")
}
}

3
src/UI/Image/NearbyImagesCollapsed.svelte
View file

@ -25,11 +25,14 @@
const t = Translations.t.image.nearby
let expanded = false
let enableLogin = state.featureSwitches.featureSwitchEnableLogin
</script>
{#if enableLogin.data}
<AccordionSingle>
<span slot="header" class="p-2 text-base">
<Tr t={t.seeNearby} />
</span>
<NearbyImages {tags} {state} {lon} {lat} {feature} {linkable} {layer} />
</AccordionSingle>
{/if}

2
src/UI/Image/UploadImage.svelte
View file

@ -58,7 +58,7 @@
<LoginButton clss="small w-full" osmConnection={state.osmConnection} slot="not-logged-in">
<Tr t={Translations.t.image.pleaseLogin} />
</LoginButton>
<div class="flex flex-col">
<div class="flex flex-col my-4">
<UploadingImageCounter {state} {tags} />
{#each $errors as error}
<Tr t={error} cls="alert" />

10
src/UI/OpeningHours/OpeningHours.ts
View file

@ -932,9 +932,11 @@ export class ToTextualDescription {
public static createTextualDescriptionFor(
oh: opening_hours,
ranges: OpeningRange[][]
): Translation {
): Translation | undefined {
const t = Translations.t.general.opening_hours
if(!ranges){
return undefined
}
if (!ranges?.some((r) => r.length > 0)) {
// <!-- No changes to the opening hours in the next week; probably open 24/7, permanently closed, opening far in the future or unkown -->
if (oh.getNextChange() === undefined) {
@ -1029,9 +1031,9 @@ export class ToTextualDescription {
})
}
private static createRangesFor(ranges: OpeningRange[]): Translation {
private static createRangesFor(ranges: OpeningRange[]): Translation | undefined {
if (ranges.length === 0) {
// return undefined
return undefined
}
let tr = ToTextualDescription.createRangeFor(ranges[0])
for (let i = 1; i < ranges.length; i++) {

21
src/UI/OpeningHours/OpeningHoursVisualization.ts
View file

@ -26,7 +26,6 @@ export default class OpeningHoursVisualization extends Toggle {
constructor(
tags: UIEventSource<Record<string, string>>,
state: { osmConnection?: OsmConnection },
key: string,
prefix = "",
postfix = ""
@ -56,7 +55,7 @@ export default class OpeningHoursVisualization extends Toggle {
)
Locale.language.mapD((lng) => {
console.debug("Setting OH description to", lng, textual)
vis.ConstructElement().ariaLabel = textual.textFor(lng)
vis.ConstructElement().ariaLabel = textual?.textFor(lng)
})
return vis
})
@ -75,17 +74,13 @@ export default class OpeningHoursVisualization extends Toggle {
ranges: OpeningRange[][],
lastMonday: Date
): BaseUIElement {
/* First, a small sanity check. The business might be permanently closed, 24/7 opened or something other special
* So, we have to handle the case that ranges is completely empty*/
if (ranges.filter((range) => range.length > 0).length === 0) {
return OpeningHoursVisualization.ShowSpecialCase(oh).SetClass(
"p-4 rounded-full block bg-gray-200"
)
// First, a small sanity check. The business might be permanently closed, 24/7 opened or something other special
if (ranges.some((range) => range.length > 0)) {
// The normal case: we have items for the coming days
return OpeningHoursVisualization.ConstructVizTable(oh, ranges, lastMonday)
}
/** With all the edge cases handled, we can actually construct the table! **/
return OpeningHoursVisualization.ConstructVizTable(oh, ranges, lastMonday)
// The special case that range is completely empty
return OpeningHoursVisualization.ShowSpecialCase(oh)
}
private static ConstructVizTable(
@ -308,6 +303,6 @@ export default class OpeningHoursVisualization extends Toggle {
opensAtDate.getHours(),
opensAtDate.getMinutes()
)}`
return Translations.t.general.opening_hours.closed_until.Subs({ date: willOpenAt })
return Translations.t.general.opening_hours.closed_until.Subs({ date: opensAtDate.toLocaleString() })
}
}

4
src/UI/Popup/TagRendering/Questionbox.svelte
View file

@ -94,6 +94,8 @@
let answered: number = 0
let skipped: number = 0
let loginEnabled = state.featureSwitches.featureSwitchEnableLogin
function skip(question: { id: string }, didAnswer: boolean = false) {
skippedQuestions.data.add(question.id) // Must use ID, the config object might be a copy of the original
skippedQuestions.ping()
@ -108,6 +110,7 @@
}
</script>
{#if $loginEnabled}
<div
bind:this={questionboxElem}
aria-live="polite"
@ -197,3 +200,4 @@
</div>
{/if}
</div>
{/if}

24
src/UI/Popup/TagRendering/TagRenderingEditable.svelte
View file

@ -83,7 +83,7 @@
{config.id}
</span>
{/if}
{#if config.question && (!editingEnabled || $editingEnabled)}
{#if config.question}
{#if editMode}
<TagRenderingQuestion
{config}
@ -106,19 +106,19 @@
</TagRenderingQuestion>
{:else}
<div class="low-interaction flex items-center justify-between overflow-hidden rounded pl-2">
<TagRenderingAnswer id={answerId} {config} {tags} {selectedElement} {state} {layer} />
<EditButton
arialabel={config.editButtonAriaLabel}
ariaLabelledBy={answerId}
on:click={() => {
editMode = true
}}
/>
<TagRenderingAnswer id={answerId} {config} {tags} {selectedElement} {state} {layer} extraClasses="my-2"/>
{#if (!editingEnabled || $editingEnabled)}
<EditButton
arialabel={config.editButtonAriaLabel}
ariaLabelledBy={answerId}
on:click={() => {
editMode = true
}}
/>
{/if}
</div>
{/if}
{:else}
<div class="h-full w-full overflow-auto">
<TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} />
</div>
<TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} />
{/if}
</div>

2
src/UI/SpecialVisualizations.ts
View file

@ -794,7 +794,7 @@ export default class SpecialVisualizations {
"A normal opening hours table can be invoked with `{opening_hours_table()}`. A table for e.g. conditional access with opening hours can be `{opening_hours_table(access:conditional, no @ &LPARENS, &RPARENS)}`",
constr: (state, tagSource: UIEventSource<any>, args) => {
const [key, prefix, postfix] = args
return new OpeningHoursVisualization(tagSource, state, key, prefix, postfix)
return new OpeningHoursVisualization(tagSource, key, prefix, postfix)
},
},
{

5
src/UI/Test.svelte
View file

@ -1,4 +1,7 @@
<script lang="ts">
import OpeningHoursVisualization from "./OpeningHours/OpeningHoursVisualization"
</script>
<main />
<main >
<ToSvelte construct={new OpeningHoursVisualization()}
</main>

17
src/UI/ThemeViewGUI.svelte
View file

@ -124,11 +124,11 @@
state.mapProperties.installCustomKeyboardHandler(viewport)
let canZoomIn = mapproperties.maxzoom.map(
(mz) => mapproperties.zoom.data < mz,
[mapproperties.zoom]
[mapproperties.zoom],
)
let canZoomOut = mapproperties.minzoom.map(
(mz) => mapproperties.zoom.data > mz,
[mapproperties.zoom]
[mapproperties.zoom],
)
function updateViewport() {
@ -165,7 +165,7 @@
onDestroy(
rasterLayer.addCallbackAndRunD((l) => {
rasterLayerName = l.properties.name
})
}),
)
let previewedImage = state.previewedImage
@ -196,7 +196,7 @@
let openMapButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
let openMenuButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
let openCurrentViewLayerButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(
undefined
undefined,
)
let _openNewElementButton: HTMLButtonElement
let openNewElementButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
@ -478,7 +478,7 @@
<FloatOver on:close={() => state.guistate.themeIsOpened.setData(false)}>
<span slot="close-button"><!-- Disable the close button --></span>
<TabbedGroup
condition1={state.featureSwitches.featureSwitchFilter}
condition1={state.featureSwitches.featureSwitchEnableExport}
tab={state.guistate.themeViewTabIndex}
>
<div slot="post-tablist">
@ -572,9 +572,14 @@
<div class="link-underline links-w-full m-2 flex flex-col gap-y-1" slot="content0">
<Tr t={Translations.t.general.aboutMapComplete.intro} />
<a class="flex" href={Utils.HomepageLink()}>
<Add class="h-6 w-6" />
<Tr t={Translations.t.general.backToIndex} />
{#if Utils.isIframe}
<Tr t={Translations.t.general.seeIndex} />
{:else}
<Tr t={Translations.t.general.backToIndex} />
{/if}
</a>
<a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">