Skip to content

Commit

Permalink
feat: change file structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@Faelayis
Faelayis committed Oct 6, 2024
1 parent 31064f1 commit 96750c4
Show file tree
Hide file tree
Showing 7 changed files with 308 additions and 262 deletions.
4 changes: 2 additions & 2 deletions COM-2305/Project/api/reservation/post.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Origin: *");

include("../connected.php");

$response = [];

try {
Expand All @@ -11,10 +13,8 @@
exit;
}

include("../connected.php");
include("../../function/reservation/valid-reservation.php");
include("../../function/reservation/valid-student.php");
include("../../function/page.php");

$reservation_date = $_POST['reservation_date'];
$student_id = $_POST['student_id'];
Expand Down
264 changes: 4 additions & 260 deletions COM-2305/Project/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
const API_BASE_URL = "http://localhost:3000/Project/api";
</script>
<style>
html,
body {
Expand All @@ -33,265 +36,6 @@
<div class="container mx-auto p-4 h-full">
<div id="calendar"></div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
const calendarEl = document.getElementById("calendar");
const calendar = new FullCalendar.Calendar(calendarEl, {
locale: "th",
initialView: "dayGridMonth",
selectable: true,
selectMirror: true,
selectAllow: (selectInfo) => {
const day = new Date(selectInfo.start).getDay();
return day !== 0 && day !== 6;
},
events: async (fetchInfo, successCallback, failureCallback) => {
try {
console.log("Fetching events...");
const response = await fetch("http://localhost:3000/Project/api/reservation/get.php?student_id=66143000");
console.log("Response:", response);
const data = await response.json();
console.log("Data:", data);
const events = data.flatMap((event) =>
[
{
title: `${event.time_slot_1} ${event.goto_slot_1}`,
start: event.reservation_date,
end: event.reservation_date,
extendedProps: {
time_slot_1: event.time_slot_1,
goto_slot_1: event.goto_slot_1,
time_slot_2: event.time_slot_2,
goto_slot_2: event.goto_slot_2,
},
},
event.time_slot_2 && event.goto_slot_2
? {
title: `${event.time_slot_2} ${event.goto_slot_2}`,
start: event.reservation_date,
end: event.reservation_date,
extendedProps: {
time_slot_1: event.time_slot_1,
goto_slot_1: event.goto_slot_1,
time_slot_2: event.time_slot_2,
goto_slot_2: event.goto_slot_2,
},
}
: null,
].filter(Boolean),
);
successCallback(events);
} catch (error) {
console.error("Error fetching events:", error);
failureCallback(error);
}
},
eventClick: async (info) => {
const result = await Swal.fire({
title: "ต้องการที่จะยกเลิกวันจองทั้งหมดในวันนี้",
showCancelButton: true,
confirmButtonText: "ยืนยัน",
cancelButtonText: "ยกเลิก",
});
if (result.isConfirmed) {
const eventsToRemove = calendar.getEvents().filter((event) => event.startStr === info.event.startStr);

try {
console.log("Deleting event:", info.event);
const response = await fetch("http://localhost:3000/Project/api/reservation/delete.php", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
reservation_date: info.event.startStr,
student_id: "66143000",
day_of_week: new Date(info.event.startStr).toLocaleDateString("th-TH", { weekday: "long" }),
time_slot_1: info.event.extendedProps.time_slot_1,
goto_slot_1: info.event.extendedProps.goto_slot_1,
time_slot_2: info.event.extendedProps.time_slot_2,
goto_slot_2: info.event.extendedProps.goto_slot_2,
}),
});
console.log("Response:", response);
const data = await response.json();
console.log("Data:", data);

if (response.ok) {
eventsToRemove.forEach((event) => event.remove());
Swal.fire("ลบแล้ว!", "การจองทั้งหมดในวันนี้ถูกลบแล้ว", "success");
} else {
Swal.fire("ผิดพลาด!", "เกิดข้อผิดพลาดในการลบการจอง", "error");
}
} catch (error) {
console.error("Error deleting event:", error);
Swal.fire("ผิดพลาด!", "เกิดข้อผิดพลาดในการลบการจอง", "error");
}
}
},
select: async (info) => {
const HTML = `
<select class="swal2-select" id="goto_slot_1" required>
<option value="ไปแม่ริม">ไปแม่ริม</option>
<option value="ไปเวียงบัว">ไปเวียงบัว</option>
</select><br/>
<select class="swal2-select" id="time_slot_1" required>
<option value="07:30">07:30</option>
<option value="10:00">10:00</option>
<option value="15:00">15:00</option>
<option value="16:30">16:30</option>
<option value="17:45">17:45</option>
</select><br/>
<select class="swal2-select" id="goto_slot_2">
<option value="">-</option>
<option value="ไปแม่ริม">ไปแม่ริม</option>
<option value="ไปเวียงบัว">ไปเวียงบัว</option>
</select><br/>
<select class="swal2-select" id="time_slot_2">
<option value="">-</option>
<option value="07:30">07:30</option>
<option value="10:00">10:00</option>
<option value="15:00">15:00</option>
<option value="16:30">16:30</option>
<option value="17:45">17:45</option>
</select><br/>
`;

const result = await Swal.fire({
title: "",
html: HTML,
focusConfirm: false,
preConfirm: () => [
document.getElementById("time_slot_1").value,
document.getElementById("goto_slot_1").value,
document.getElementById("time_slot_2").value,
document.getElementById("goto_slot_2").value,
],
});

function existingEvents(startDate) {
const existingEvents = calendar.getEvents().filter((event) => event.startStr === startDate);

existingEvents.forEach((event) => event.remove());
}

if (result.isConfirmed) {
const [time_slot_1, goto_slot_1, time_slot_2, goto_slot_2] = result.value;
const startDate = info.startStr;
const endDate = info.endStr;
const dayOfWeek = new Date(startDate).toLocaleDateString("th-TH", { weekday: "long" });

existingEvents(startDate);

if (startDate === endDate) {
const day = new Date(startDate).getDay();
if (day !== 0 && day !== 6) {
addEvent(calendar, startDate, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2);
}
} else {
let start = new Date(startDate);
const end = new Date(endDate);
end.setDate(end.getDate() - 1);

while (start <= end) {
const currentDate = start.toISOString().split("T")[0];
const day = new Date(currentDate).getDay();
existingEvents(currentDate);

if (day !== 0 && day !== 6) {
addEvent(calendar, currentDate, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2);
}
start.setDate(start.getDate() + 1);
}
}

const reservations = [];
let start = new Date(startDate);
const end = new Date(endDate);
end.setDate(end.getDate() - 1);

while (start <= end) {
const currentDate = start.toISOString().split("T")[0];
const day = new Date(currentDate).getDay();

if (day !== 0 && day !== 6) {
reservations.push({
reservation_date: currentDate,
status: null,
student_id: "66143000",
day_of_week: new Date(currentDate).toLocaleDateString("th-TH", { weekday: "long" }),
time_slot_1,
goto_slot_1,
time_slot_2,
goto_slot_2,
});
}
start.setDate(start.getDate() + 1);
}

try {
console.log("Posting reservations:", reservations);
const responses = await Promise.all(
reservations.map((reservation) =>
fetch("http://localhost:3000/Project/api/reservation/post.php", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(reservation),
}),
),
);
console.log("Responses:", responses);
const data = await Promise.all(responses.map((response) => response.json()));
console.log("Data:", data);

if (responses.every((response) => response.ok)) {
Swal.fire("จองแล้ว!", "", "success");
} else {
Swal.fire("ผิดพลาด!", "เกิดข้อผิดพลาดในการจองรถ", "error");
}
} catch (error) {
console.error("Error posting reservations:", error);
Swal.fire("ผิดพลาด!", "เกิดข้อผิดพลาดในการจองรถ", "error");
}
}
calendar.unselect();
},
});
calendar.render();
});

function addEvent(calendar, date, time_slot_1, goto_slot_1, time_slot_2, goto_slot_2) {
calendar.addEvent({
title: `${time_slot_1} ${goto_slot_1}`,
start: date,
end: date,
extendedProps: {
time_slot_1,
goto_slot_1,
time_slot_2,
goto_slot_2,
},
allDay: true,
});

if (time_slot_2 && goto_slot_2) {
calendar.addEvent({
title: `${time_slot_2} ${goto_slot_2}`,
start: date,
end: date,
extendedProps: {
time_slot_1,
goto_slot_1,
time_slot_2,
goto_slot_2,
},
allDay: true,
});
}
}
</script>
<script type="module" src="./script/calendar.js"></script>
</body>
</html>
62 changes: 62 additions & 0 deletions COM-2305/Project/script/alerts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */

async function showDeleteConfirmation() {
return await Swal.fire({
title: "ต้องการที่จะยกเลิกวันจองทั้งหมดในวันนี้",
showCancelButton: true,
confirmButtonText: "ยืนยัน",
cancelButtonText: "ยกเลิก",
});
}

async function showReservationForm() {
const HTML = `
<select class="swal2-select" id="goto_slot_1" required>
<option value="ไปแม่ริม">ไปแม่ริม</option>
<option value="ไปเวียงบัว">ไปเวียงบัว</option>
</select><br/>
<select class="swal2-select" id="time_slot_1" required>
<option value="07:30">07:30</option>
<option value="10:00">10:00</option>
<option value="15:00">15:00</option>
<option value="16:30">16:30</option>
<option value="17:45">17:45</option>
</select><br/>
<select class="swal2-select" id="goto_slot_2">
<option value="">-</option>
<option value="ไปแม่ริม">ไปแม่ริม</option>
<option value="ไปเวียงบัว">ไปเวียงบัว</option>
</select><br/>
<select class="swal2-select" id="time_slot_2">
<option value="">-</option>
<option value="07:30">07:30</option>
<option value="10:00">10:00</option>
<option value="15:00">15:00</option>
<option value="16:30">16:30</option>
<option value="17:45">17:45</option>
</select><br/>
`;

return await Swal.fire({
title: "",
html: HTML,
focusConfirm: false,
preConfirm: () => [
document.getElementById("time_slot_1").value,
document.getElementById("goto_slot_1").value,
document.getElementById("time_slot_2").value,
document.getElementById("goto_slot_2").value,
],
});
}

function showSuccessMessage(title, text) {
Swal.fire(title, text, "success");
}

function showErrorMessage(title, text) {
Swal.fire(title, text, "error");
}

export { showDeleteConfirmation, showErrorMessage, showReservationForm, showSuccessMessage };
25 changes: 25 additions & 0 deletions COM-2305/Project/script/calendar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/* eslint-disable no-undef */
import { handleEventClick, handleSelect } from "./events.js";
import { fetchEvents } from "./fetch.js";

let calendar;

document.addEventListener("DOMContentLoaded", function () {
const calendarEl = document.getElementById("calendar");
calendar = new FullCalendar.Calendar(calendarEl, {
locale: "th",
initialView: "dayGridMonth",
selectable: true,
selectMirror: true,
selectAllow: (selectInfo) => {
const day = new Date(selectInfo.start).getDay();
return day !== 0 && day !== 6;
},
events: fetchEvents,
eventClick: handleEventClick,
select: handleSelect,
});
calendar.render();
});

export { calendar };
Loading

0 comments on commit 96750c4

Please sign in to comment.