Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-16 05:44:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(InterviewBooking): fixed wording, added css to modal, and fixed error and error line

Browse Source
This commit is contained in:
darkicewolf50 2025-04-19 11:44:10 -06:00
parent aedc1d9510
commit 480e14e74c
3 changed files with 96 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/Interivew Booking/InterviewBooking.css
View File

@ -71,12 +71,16 @@
}
#InterviewSubmit button {
background-color: lightgreen;
width: 20%;
width: clamp(62px, 16svw, 180px);
/* width: 16svw; */
height: 5svh;
margin-bottom: 5svh;
font-size: large;
border: none;
padding: 0px;
color: black;
}
#InterviewText {
padding-left: var(--interviewspacing);
padding-right: var(--interviewspacing);
@ -118,5 +122,45 @@
}
#CurrentSelected {
background-color: lightseagreen;
background-color: rgb(28.75, 93.2196969697, 143.75);
color: white;
}
#InterviewError {
opacity: 0%;
color: red;
}
#InterviewDialog[open] {
display: flex;
flex-direction: column;
width: 70%;
border: 4px solid grey;
}
#InterviewDialog::backdrop {
background-color: rgba(35, 35, 35, 0.7);
backdrop-filter: blur(2px);
}
#InterviewDialog a {
align-self: center;
margin-top: 1svh;
}
#InterviewDialog button {
border: 1px solid grey;
border-radius: 4px;
font-size: large;
margin-top: 1svh;
padding: 2svh 1svw;
}
#InterviewDialog h2,
p {
margin-top: 0px;
}
#InterviewDialog p {
margin: 0px;
}

54
src/Interivew Booking/InterviewForm.jsx
View File

@ -1,15 +1,16 @@
import { useState, useRef } from "react";
import { Link } from "react-router-dom";
import TimeDateSelector from "./TimeDateSelector";
/**
* @param {null} null - Takes in nothing
* @returns {JSX.element} JSX - HTML and JS functionality
* @description Used for picking an interview slot
* @author Ahmad <ahmadmuhammadofficial@gmail.com>
* @authors Ahmad <ahmadmuhammadofficial@gmail.com>, Brock <darkicewolf50@gmail.com>
* @todo CSS
*/
const InterviewForm = () => {
export default function InterviewForm() {
const [isButtonDisabled, setIsButtonDisabled] = useState(false);
const dialogRef = useRef(null);
const [selectedTimeSlot, setSelectedTimeSlot] = useState(null);
@ -19,11 +20,12 @@ const InterviewForm = () => {
* @param {String HTML} event - Takes in form info
* @returns {null} null - Returns in nothing
* @description submits the form with the appropriate information
* @author Ahmad <ahmadmuhammadofficial@gmail.com>
* @authors Ahmad <ahmadmuhammadofficial@gmail.com>, Brock <darkicewolf50@gmail.com>
* @todo imporper email and other erros from backend
*/
const formsubmit = async (event) => {
const errorLine = document.getElementById("InterviewError");
const submitButton = document.getElementById("InterviewButtonSubmit");
event.preventDefault();
@ -33,6 +35,8 @@ const InterviewForm = () => {
errorLine.innerHTML = " ";
// disable button to stop multiple requests
setIsButtonDisabled(true);
submitButton.innerHTML = "Loading..";
submitButton.style.background = "grey";
// await new Promise((res) => setTimeout(res, 1000));
const formData = new FormData(event.target);
@ -64,10 +68,18 @@ const InterviewForm = () => {
let data = await res.json();
if (data["body"]["Success"] === true) {
if (
data["body"]["Success"] === true &&
data["body"]["validEmail"] === true
) {
dialogRef.current.showModal();
} else {
// psuedo update, used to refresh page
setGetTimeDates(getTimeDates + "i");
errorLine.innerHTML = "Please input a vaild email";
// makes line visiable after we write the error message
errorLine.style.opacity = "100%";
}
} else {
formSubmitTimeErorrs(selectedTimeSlot, errorLine);
@ -76,6 +88,9 @@ const InterviewForm = () => {
formSubmitTimeErorrs(selectedTimeSlot, errorLine);
}
setIsButtonDisabled(false);
// set button back
submitButton.innerHTML = "Submit";
submitButton.style.background = "";
};
/**
@ -94,9 +109,12 @@ const InterviewForm = () => {
else if (missingError.date === null) {
errorLine.innerHTML = "Please Select a Date";
*/
else if (missingError.startTime) {
else if (missingError.startTime === "" || missingError.startTime) {
errorLine.innerHTML = "Please Select a Time";
}
// makes error line visible after we write the error message
errorLine.style.opacity = "100%";
};
return (
<>
@ -148,24 +166,28 @@ const InterviewForm = () => {
</p>
</div>
<p id="InterviewError"> </p>
<p id="InterviewError">Space For Errors Here</p>
<div id="InterviewSubmit">
<button
type="submit"
disabled={isButtonDisabled}>
disabled={isButtonDisabled}
id="InterviewButtonSubmit">
Submit
</button>
</div>
</form>
{/* Success Dialog */}
<dialog ref={dialogRef}>
<dialog
ref={dialogRef}
id="InterviewDialog">
{" "}
{/* Add the `ref` attribute */}
<h2>Booking Successful!</h2>
<p>
Thank you for booking your interview slot. We’ll contact you soon.
Thank you for booking your interview. We'll send an email confirming
the time.
</p>
<h4>
What to do if I cannot make it to any of the avaliable time slots or
@ -181,9 +203,17 @@ const InterviewForm = () => {
<a href="mailto:uofcbaja@gmail.com">uofcbaja@gmail.com</a> to work out
an alternate interview time or for rescheduling.
</p>
<Link to={"/"}>
<button>Check Out the rest of the site here</button>
</Link>
</dialog>
<button
onClick={() => {
dialogRef.current.showModal();
}}>
Show the modal
</button>
</>
);
};
export default InterviewForm;
}

8
src/Interivew Booking/TimeDateSelector.jsx
View File

@ -66,13 +66,17 @@ export default function TimeDateSelector({
// get and set time slots for a given day
setTimeSlotsAvialable(Object.keys(allDatesAvailable[selectedDateStr]));
setSelectedTime(""); // clear because of date change
// clear because of date change
setSelectedTime("");
// set prematurely for better error messages
onTimeSlotSelect({
date: selectedDateStr,
startTime: selectedTime,
// used because setSelectedTime("") does nothing apearantly
startTime: "",
});
if (selectedTimeButton !== null) {
selectedTimeButton.id = "";
}
setSelectedTimeButton(null);
};