132 lines
3.4 KiB
Svelte
132 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { daysOfWeek } from "$lib";
|
|
import CrossUrl from "../../assets/cross.svg";
|
|
interface Props {
|
|
index: number;
|
|
openingValue: string;
|
|
closingValue: string;
|
|
openTodayStatus: boolean | null;
|
|
onHide?: () => void;
|
|
day: number; //0-6 for Sunday-Saturday, 7 for all days, 8 for all other days
|
|
}
|
|
|
|
let {
|
|
index,
|
|
openingValue = $bindable(),
|
|
closingValue = $bindable(),
|
|
openTodayStatus = $bindable(),
|
|
day = $bindable(),
|
|
onHide
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<div class="opening-time-item">
|
|
{#if day <= 6}
|
|
<select bind:value={day} class="dayOfWeek">
|
|
{#each [0, 1, 2, 3, 4, 5, 6] as dayNum (dayNum)}
|
|
<option value={dayNum}>{daysOfWeek[dayNum]}</option>
|
|
{/each}
|
|
</select>
|
|
{:else}
|
|
<label for={"opens-" + index} class="dayOfWeek">{daysOfWeek[day]}</label>
|
|
{/if}
|
|
<label for={"isAllDay-" + index}>
|
|
<input
|
|
id={"isAllDay-" + index}
|
|
class="checkbox"
|
|
type="checkbox"
|
|
bind:checked={
|
|
() => openTodayStatus === true, (v) => (openTodayStatus = v ? true : null)
|
|
}
|
|
/>
|
|
Open all day
|
|
</label>
|
|
<label for={"isclosed-" + index}>
|
|
<input
|
|
id={"isclosed-" + index}
|
|
class="checkbox"
|
|
type="checkbox"
|
|
bind:checked={
|
|
() => openTodayStatus === false, (v) => (openTodayStatus = v ? false : null)
|
|
}
|
|
/>
|
|
Closed
|
|
</label>
|
|
{#if onHide}
|
|
<button class="hideButton" onclick={onHide} type="button">
|
|
<img src={CrossUrl} alt="nah" />
|
|
</button>
|
|
{/if}
|
|
{#if openTodayStatus === null}
|
|
<div class="timeRange">
|
|
<input id={"opens-" + index} type="time" bind:value={openingValue} />
|
|
<span class="to">to</span>
|
|
<input id={"closes-" + index} type="time" bind:value={closingValue} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.opening-time-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.25rem 1rem;
|
|
padding: 0.5rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
}
|
|
|
|
input[type="time"] {
|
|
border: 2px solid #000000;
|
|
border-radius: 4px;
|
|
background: none;
|
|
color: #000000;
|
|
padding: 0.25rem;
|
|
flex: 1;
|
|
filter: brightness(0) saturate(100%) invert(98%) sepia(8%) saturate(555%) hue-rotate(54deg)
|
|
brightness(100%) contrast(102%);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.timeRange {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.dayOfWeek {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
text-align: center;
|
|
border-radius: 0.25rem;
|
|
background-color: #eaffeb;
|
|
color: #2e4653;
|
|
cursor: pointer;
|
|
padding: 0.2rem 0.4rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.hideButton {
|
|
background: none;
|
|
border: none;
|
|
margin: 0 0.5% 0 auto;
|
|
width: 5%;
|
|
padding: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.hideButton img {
|
|
width: 120%;
|
|
transform: scale(2);
|
|
}
|
|
</style>
|