forked from MapComplete/MapComplete
38 lines
1.3 KiB
Svelte
38 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="w-full absolute block h-8" 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="block absolute top-0 m-0 h-full box-border ohviz-time-indication">
|
|
<div
|
|
style="left: -50%; word-break: initial;"
|
|
class:border-opacity-50={!todayChangeMoments?.has(changeMoment)}
|
|
class="relative h-fit bg-white pl-1 pr-1 h-3 font-sm rounded-xl border-2 border-black">
|
|
{changeHourText[i]}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|