123 lines
3.1 KiB
JavaScript
123 lines
3.1 KiB
JavaScript
const timeUtcSpan = document.querySelector("#time-utc");
|
|
const scheduleTable = document.querySelector("#schedule-table");
|
|
const scheduleForm = document.querySelector("#schedule-form");
|
|
|
|
timeUtcSpan.innerText = new Date()
|
|
.toUTCString()
|
|
.slice(17, 22);
|
|
// .toLocaleTimeString(["en-UK"], { hour: "2-digit", minute: "2-digit" });
|
|
|
|
const weekDayNames = [
|
|
"Sunday",
|
|
"Monday",
|
|
"Tuesday",
|
|
"Wednesday",
|
|
"Thursday",
|
|
"Friday",
|
|
"Saturday",
|
|
];
|
|
|
|
const monthNames = [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
"September",
|
|
"October",
|
|
"November",
|
|
"December",
|
|
];
|
|
|
|
const utcWeekDayName = (utcDate) => weekDayNames[utcDate.getUTCDay()];
|
|
const utcDayOfMonth = (utcDate) => utcDate.getUTCDate();
|
|
const utcMonthName = (utcDate) => monthNames[utcDate.getUTCMonth()];
|
|
|
|
const utcDateFromString = (dateString) =>
|
|
new Date(
|
|
new Date(dateString).getTime() -
|
|
new Date().getTimezoneOffset() * 60 * 1000,
|
|
);
|
|
|
|
async function makeScheduleTable() {
|
|
const timeslotData = await fetch("timeslots.json")
|
|
.then((res) => res.json());
|
|
|
|
const timeslots = timeslotData
|
|
.map(({ date, times }) => ({
|
|
dateString: date,
|
|
date: utcDateFromString(date),
|
|
times,
|
|
}));
|
|
|
|
timeslots.sort((a, b) => a.date.getTime() - b.date.getTime());
|
|
|
|
let tableHtml = `<tr>
|
|
${
|
|
timeslots.map((ts) =>
|
|
`<th>${utcWeekDayName(ts.date)} ${utcDayOfMonth(ts.date)}. ${
|
|
utcMonthName(ts.date)
|
|
}</th>`
|
|
)
|
|
.join("")
|
|
}
|
|
</tr>`;
|
|
|
|
tableHtml += "<tr>";
|
|
for (const timeslot of timeslots) {
|
|
tableHtml += "<td>";
|
|
for (const time of timeslot.times) {
|
|
const name = `${timeslot.dateString}-${time}`;
|
|
tableHtml += `
|
|
<div>
|
|
<input type="checkbox" name="${name}" id="checkbox-${name}">
|
|
<label for="checkbox-${name}">${time}</label>
|
|
</div>
|
|
`;
|
|
}
|
|
tableHtml += "</td>";
|
|
}
|
|
tableHtml += "</tr>";
|
|
|
|
scheduleTable.innerHTML = tableHtml;
|
|
}
|
|
|
|
function initScheduler() {
|
|
scheduleForm.onsubmit = async (ev) => {
|
|
ev.preventDefault();
|
|
const formdata = new FormData(ev.target);
|
|
const data = [...formdata]
|
|
.reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {});
|
|
if (!data.username) {
|
|
alert("please specify username");
|
|
return;
|
|
}
|
|
if (!data.tos) {
|
|
alert("please check information agreement");
|
|
return;
|
|
}
|
|
|
|
const response = await fetch("/api/log", {
|
|
method: "post",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
}).then((res) => res.json());
|
|
|
|
if (response.ok) {
|
|
alert("submitted!");
|
|
} else {
|
|
alert("error occured!");
|
|
console.log(response);
|
|
}
|
|
};
|
|
|
|
makeScheduleTable();
|
|
}
|
|
|
|
if (scheduleTable !== null && scheduleForm !== null) {
|
|
initScheduler();
|
|
}
|