refactor: simpler timing inputs
This commit is contained in:
Barf-Vader
@@ -6,13 +6,15 @@
|
||||
import crossUrl from "$lib/assets/cross.svg";
|
||||
import Button from "$lib/components/Button.svelte";
|
||||
import Images from "$lib/components/inputs/Images.svelte";
|
||||
import OpeningTimesDay from "$lib/components/inputs/OpeningTimesDay.svelte";
|
||||
import {
|
||||
availableStudySpaceTags,
|
||||
wifiTags,
|
||||
powerOutletTags,
|
||||
volumeTags,
|
||||
gmapsLoader,
|
||||
daysOfWeek
|
||||
daysOfWeek,
|
||||
timeToMins
|
||||
} from "$lib";
|
||||
import { onMount } from "svelte";
|
||||
import type { Json } from "$lib/database.js";
|
||||
@@ -21,13 +23,15 @@
|
||||
const { supabase } = $derived(data);
|
||||
|
||||
const { space, images } = $derived(data);
|
||||
|
||||
interface OpeningTime {
|
||||
day_of_week: number;
|
||||
opens_at: string;
|
||||
closes_at: string;
|
||||
open_today_status: boolean | null;
|
||||
}
|
||||
const studySpaceData = $state({
|
||||
opening_times: daysOfWeek.map((_, index) => ({
|
||||
day_of_week: index,
|
||||
opens_at: "",
|
||||
closes_at: "",
|
||||
is_24_7: false
|
||||
})),
|
||||
opening_times: [] as OpeningTime[],
|
||||
...space
|
||||
});
|
||||
|
||||
@@ -57,8 +61,79 @@
|
||||
);
|
||||
let spaceImgs = $state<FileList>();
|
||||
let uploading = $state(false);
|
||||
function checkTimings() {
|
||||
console.log(studySpaceData.opening_times);
|
||||
let cannotExist = [] as number[];
|
||||
|
||||
const opensAtMinsAll = timeToMins(allDays.opens_at);
|
||||
const closesAtMinsAll = timeToMins(allDays.closes_at);
|
||||
if (opensAtMinsAll >= closesAtMinsAll) {
|
||||
alert(`Opening time for all days is after closing time.`);
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const entry of studySpaceData.opening_times) {
|
||||
if (cannotExist.includes(entry.day_of_week)) {
|
||||
alert(
|
||||
"You marked a day as either closed or open all day, and then provided another timing."
|
||||
);
|
||||
return false;
|
||||
}
|
||||
if (entry.open_today_status != null) {
|
||||
cannotExist.push(entry.day_of_week);
|
||||
}
|
||||
const opensAtMins = timeToMins(entry.opens_at);
|
||||
const closesAtMins = timeToMins(entry.closes_at);
|
||||
if (opensAtMins >= closesAtMins) {
|
||||
alert(`Opening time for ${daysOfWeek[entry.day_of_week]} is after closing time.`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function genTimings(studySpaceId: string) {
|
||||
const fullDayOfWeek = [0, 1, 2, 3, 4, 5, 6];
|
||||
console.log(studySpaceData.opening_times, allDays);
|
||||
// all day only
|
||||
if (
|
||||
studySpaceData.opening_times.length === 0 &&
|
||||
((allDays.closes_at != "" && allDays.opens_at != "") ||
|
||||
allDays.open_today_status != null)
|
||||
) {
|
||||
return fullDayOfWeek.map((day) => ({
|
||||
study_space_id: studySpaceId,
|
||||
day_of_week: day,
|
||||
opens_at: allDays.open_today_status == null ? allDays.opens_at : "00:00",
|
||||
closes_at: allDays.open_today_status == null ? allDays.closes_at : "00:00",
|
||||
open_today_status: allDays.open_today_status
|
||||
}));
|
||||
}
|
||||
// some days specified
|
||||
const nonDefinedDays = fullDayOfWeek.filter(
|
||||
(day) => !new Set(studySpaceData.opening_times.map((h) => h.day_of_week)).has(day)
|
||||
);
|
||||
return studySpaceData.opening_times
|
||||
.map((h) => ({
|
||||
study_space_id: studySpaceId,
|
||||
day_of_week: h.day_of_week,
|
||||
opens_at: h.opens_at,
|
||||
closes_at: h.closes_at,
|
||||
open_today_status: h.open_today_status
|
||||
}))
|
||||
.concat(
|
||||
nonDefinedDays.map((day) => ({
|
||||
study_space_id: studySpaceId,
|
||||
day_of_week: day,
|
||||
opens_at: allDays.opens_at,
|
||||
closes_at: allDays.closes_at,
|
||||
open_today_status: allDays.open_today_status
|
||||
}))
|
||||
);
|
||||
}
|
||||
|
||||
async function uploadStudySpace() {
|
||||
if (!checkTimings()) return;
|
||||
if (!spaceImgs || spaceImgs.length < 1) return alert("Please select an image file.");
|
||||
if (!studySpaceData.building_location) return alert("Please select a building location.");
|
||||
|
||||
@@ -126,17 +201,16 @@
|
||||
.eq("study_space_id", studySpaceInsert.id);
|
||||
if (deleteErr) return alert(`Error clearing old hours: ${deleteErr.message}`);
|
||||
|
||||
const { error: hoursErr } = await supabase.from("study_space_hours").insert(
|
||||
opening_times.map((h) => ({
|
||||
study_space_id: studySpaceInsert.id,
|
||||
day_of_week: h.day_of_week,
|
||||
opens_at: h.opens_at,
|
||||
closes_at: h.closes_at,
|
||||
is_24_7: h.is_24_7
|
||||
}))
|
||||
);
|
||||
if (hoursErr) return alert(`Error saving opening times: ${hoursErr.message}`);
|
||||
|
||||
// Nothing is provided
|
||||
if (
|
||||
(allDays.closes_at != "" && allDays.opens_at != "") ||
|
||||
allDays.open_today_status != null
|
||||
) {
|
||||
const { error: hoursErr } = await supabase
|
||||
.from("study_space_hours")
|
||||
.insert(genTimings(studySpaceInsert.id));
|
||||
if (hoursErr) return alert(`Error saving opening times: ${hoursErr.message}`);
|
||||
}
|
||||
alert("Thank you for your contribution!");
|
||||
// Redirect to the new study space page
|
||||
await goto(`/space/${studySpaceInsert.id}`, {
|
||||
@@ -196,20 +270,12 @@
|
||||
});
|
||||
spaceImgs = dt.files;
|
||||
});
|
||||
|
||||
// --- Helper functions for opening times ---
|
||||
function toggle247(index: number) {
|
||||
const ot = studySpaceData.opening_times[index];
|
||||
if (ot.is_24_7) {
|
||||
ot.opens_at = "00:00";
|
||||
ot.closes_at = "00:00";
|
||||
}
|
||||
}
|
||||
|
||||
function updateTimes(index: number) {
|
||||
const ot = studySpaceData.opening_times[index];
|
||||
ot.is_24_7 = ot.opens_at === "00:00" && ot.closes_at === "00:00";
|
||||
}
|
||||
// Opening times
|
||||
let allDays = $state({
|
||||
opens_at: "",
|
||||
closes_at: "",
|
||||
open_today_status: null
|
||||
});
|
||||
</script>
|
||||
|
||||
<Navbar>
|
||||
@@ -302,41 +368,43 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="opening-times-label">Opening Times:</label>
|
||||
<div class="opening-times">
|
||||
{#each daysOfWeek as day, index (index)}
|
||||
<div class="opening-time-item">
|
||||
<label for={"opens-" + index}>{day}</label>
|
||||
<input
|
||||
id={"opens-" + index}
|
||||
type="time"
|
||||
bind:value={studySpaceData.opening_times[index].opens_at}
|
||||
required
|
||||
onchange={() => updateTimes(index)}
|
||||
/>
|
||||
<span>to</span>
|
||||
<input
|
||||
id={"closes-" + index}
|
||||
type="time"
|
||||
bind:value={studySpaceData.opening_times[index].closes_at}
|
||||
required
|
||||
onchange={() => updateTimes(index)}
|
||||
/>
|
||||
<label for={"is247-" + index}>
|
||||
<input
|
||||
id={"is247-" + index}
|
||||
type="checkbox"
|
||||
bind:checked={studySpaceData.opening_times[index].is_24_7}
|
||||
onchange={() => toggle247(index)}
|
||||
/>
|
||||
All day
|
||||
</label>
|
||||
</div>
|
||||
<label for="openingTimes">Opening times (Optional):</label>
|
||||
<div class="allDaysTiming">
|
||||
{#each studySpaceData.opening_times as opening_time, index (index)}
|
||||
<OpeningTimesDay
|
||||
{index}
|
||||
bind:openingValue={opening_time.opens_at}
|
||||
bind:closingValue={opening_time.closes_at}
|
||||
bind:openTodayStatus={opening_time.open_today_status}
|
||||
bind:day={opening_time.day_of_week}
|
||||
onHide={() => {
|
||||
studySpaceData.opening_times.splice(index, 1);
|
||||
}}
|
||||
/>
|
||||
<hr />
|
||||
{/each}
|
||||
<OpeningTimesDay
|
||||
index={-1}
|
||||
bind:openingValue={allDays.opens_at}
|
||||
bind:closingValue={allDays.closes_at}
|
||||
bind:openTodayStatus={allDays.open_today_status}
|
||||
day={studySpaceData.opening_times.length === 0 ? 7 : 8}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
style="normal"
|
||||
type="button"
|
||||
onclick={() => {
|
||||
studySpaceData.opening_times.push({
|
||||
day_of_week: 0,
|
||||
opens_at: "09:00",
|
||||
closes_at: "17:00",
|
||||
open_today_status: null
|
||||
});
|
||||
}}>Add new day</Button
|
||||
>
|
||||
|
||||
<label for="tags">Additional tags:</label>
|
||||
<label for="tags">Additional tags (Optional):</label>
|
||||
<div class="tagDisplay">
|
||||
{#each studySpaceData.tags as tagName (tagName)}
|
||||
<button class="tag" onclick={deleteTag(tagName)} type="button">
|
||||
@@ -385,7 +453,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<label for="description">Optional brief description:</label>
|
||||
<label for="description">Brief description (Optional):</label>
|
||||
<Textarea
|
||||
name="description"
|
||||
bind:value={studySpaceData.description}
|
||||
@@ -572,6 +640,24 @@
|
||||
}
|
||||
|
||||
/* Opening times layout and inputs styling */
|
||||
.allDaysTiming {
|
||||
border-radius: 0.5rem;
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0%;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border: none;
|
||||
background-color: #eaffeb;
|
||||
border-radius: 5rem;
|
||||
}
|
||||
.opening-times {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user