117 lines
4.6 KiB
HTML
117 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Booking System</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/datepicker.material.css">
|
|
<script src="datepicker.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="forms-container">
|
|
<div class="form">
|
|
<h1>Book an appointment</h1>
|
|
<div id="success" style="margin-top: 5vh;">
|
|
<h2>Successfully booked!</h2>
|
|
<p>We will get in touch with you soon.</p>
|
|
<img style="height: 40vh; width: 40vh;" src="img/done.png">
|
|
<div>
|
|
<button id="back" class="submitBtn" onclick="reload()">Get Back</button>
|
|
</div>
|
|
</div>
|
|
<div class="inputs" id="form">
|
|
<input type="text" placeholder="Name" id="name">
|
|
<input type="email" placeholder="Email" id="email">
|
|
<input type="tel" placeholder="Phone" id="phone">
|
|
<div class="pickers-row">
|
|
<input class="calendar" type="hidden" id="ranged">
|
|
<div style="display: flex; flex-direction: column; align-items: center; margin-right: 3vh;">
|
|
<p style="font-size: 20px; margin: 0;">Select Time</p>
|
|
<p style="font-size: 14px; margin-top: 0; margin-bottom: 20;">(09:00 - 17:00)</p>
|
|
<div class="picker-container">
|
|
<div class="picker" id="hour-picker"></div>
|
|
<div class="highlight"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="formBottom" >
|
|
<button id="btn" class="submitBtn" onclick="postData()">Submit</button>
|
|
<div id="selected-time"></div>
|
|
<p style="color: rgba(128, 128, 128, 0.75)">User View*</p>
|
|
</div>
|
|
</div>
|
|
<div class="form">
|
|
<h1>Bookings</h1>
|
|
<div style="width: 80%;">
|
|
<div class="adminHeader">
|
|
<button id="prevBtn" class="bookingBtns">
|
|
<img style="width: 5vh; height: 5vh;" src="img/arrow-left.png">
|
|
</button>
|
|
<input type="date" id="currentDate">
|
|
<button id="nextBtn" class="bookingBtns">
|
|
<img style="width: 5vh; height: 5vh;" src="img/arrow-right.png">
|
|
</button>
|
|
</div>
|
|
<div id="bookingsList" class="listBookings">
|
|
<script type="module" src="getData.js" defer></script>
|
|
</div>
|
|
<p style="color: rgba(128, 128, 128, 0.75)">Admin View*</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script type="module" src="timepicker.js"></script>
|
|
<script type="module" src="postData.js"></script>
|
|
<script>
|
|
const input1 = document.getElementById("name");
|
|
const input2 = document.getElementById("email");
|
|
const input3 = document.getElementById("phone");
|
|
const dpicker = document.getElementById("ranged");
|
|
const btn = document.getElementById("btn");
|
|
|
|
btn.disabled = true;
|
|
|
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
const phonePattern = /^\+?\d{7,15}$/;
|
|
|
|
// Validation
|
|
function checkInputs() {
|
|
const isNameFilled = input1.value.trim() !== "";
|
|
const isEmailValid = emailPattern.test(input2.value.trim());
|
|
const isPhoneValid = phonePattern.test(input3.value.trim());
|
|
const isDatePicked = dpicker.value.trim() !== "";
|
|
|
|
return (isNameFilled && isEmailValid && isPhoneValid && isDatePicked);
|
|
}
|
|
|
|
// Init Datepicker
|
|
const datePickerInstance = new Datepicker(dpicker, {
|
|
autohide: true
|
|
});
|
|
|
|
// Listen to normal inputs
|
|
[input1, input2, input3, dpicker].forEach(input => {
|
|
input.addEventListener("input", checkInputs);
|
|
input.addEventListener("change", checkInputs);
|
|
});
|
|
|
|
// Safety: poll the datepicker value every 200ms in case it changes without firing events
|
|
setInterval(() => {
|
|
checkInputs();
|
|
}, 200);
|
|
|
|
var success = document.getElementById("success");
|
|
success.style.display = "none";
|
|
var ranged = new Datepicker('#ranged', {
|
|
inline: true,
|
|
ranged: false,
|
|
time: false
|
|
});
|
|
function reload() {
|
|
location.reload();
|
|
}
|
|
</script> |