forked from MapComplete/MapComplete
40 lines
1.3 KiB
Svelte
40 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import BaseUIElement from "../../BaseUIElement"
|
|
import Combine from "../../Base/Combine"
|
|
import { FixedUiElement } from "../../Base/FixedUiElement"
|
|
|
|
/**
|
|
* The element showing an "hour" in a bubble, above or below the opening hours table
|
|
* Dumbly shows one row of what is given.
|
|
*
|
|
* Does not include lines
|
|
*/
|
|
export let availableArea: number
|
|
export let changeHours: number[]
|
|
export let changeHourText: string[]
|
|
export let earliestOpen: number
|
|
export let todayChangeMoments: Set<number>
|
|
|
|
function calcOffset(changeMoment: number) {
|
|
return (100 * (changeMoment - earliestOpen)) / availableArea
|
|
}
|
|
</script>
|
|
|
|
<div class="absolute block h-8 w-full" style="margin-top: -1rem">
|
|
{#each changeHours as changeMoment, i}
|
|
{#if calcOffset(changeMoment) >= 0 && calcOffset(changeMoment) <= 100}
|
|
<div
|
|
style={`left:${calcOffset(changeMoment)}%; margin-top: 0.1rem`}
|
|
class="ohviz-time-indication absolute top-0 m-0 box-border block h-full"
|
|
>
|
|
<div
|
|
style="left: -50%; word-break: initial;"
|
|
class:border-opacity-50={!todayChangeMoments?.has(changeMoment)}
|
|
class="font-sm relative h-3 h-fit rounded-xl border-2 border-black bg-white pl-1 pr-1"
|
|
>
|
|
{changeHourText[i]}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|