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(InterviewBookig): Added more CSS alignment)

Browse Source
This commit is contained in:
ahmad.ahmad1 2025-04-05 14:07:16 -06:00
parent 02e70c025e
commit 34e752feca
3 changed files with 104 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/Interivew Booking/InterviewBooking.css
View File

@ -21,12 +21,28 @@
flex-direction: column; flex-direction: column;
padding-left: var(--interviewspacing); padding-left: var(--interviewspacing);
padding-right: var(--interviewspacing); padding-right: var(--interviewspacing);
font-weight: 700; text-align: start;
}
#TimeDate {
display: flex;
flex-direction: row;
justify-content: center;
}
#TimeDate h4 {
padding-left: var(--interviewspacing);
padding-right: var(--interviewspacing);
text-align: start; text-align: start;
} }
#InterviewForm div label {
font-weight: 700;
}
#InterviewForm div p {
font-size: x-small;
margin: 0px;
}
#InterviewForm div input { #InterviewForm div input {
width: 20.3svw; width: 200px;
margin-top: 1svh; margin-top: 1svh;
height: 30px; height: 30px;
} }
@ -42,3 +58,12 @@
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
} }
#TimeSlotSelector {
display: flex;
flex-direction: row;
justify-content: center;
}
.TimeSlot {
padding-left: var(--interviewspacing);
padding-right: var(--interviewspacing);
}

9
src/Interivew Booking/InterviewForm.jsx
View File

@ -76,7 +76,7 @@ const InterviewForm = () => {
<form onSubmit={formsubmit}> <form onSubmit={formsubmit}>
<div id="InterviewForm"> <div id="InterviewForm">
<div> <div>
<label for="name">Name (What to call you):</label> <label for="name">Name:</label>
<input <input
type="text" type="text"
id="fname" id="fname"
@ -84,6 +84,7 @@ const InterviewForm = () => {
placeholder="Jaeinceins" placeholder="Jaeinceins"
required required
/> />
<p>(what to call you)</p>
</div> </div>
<div> <div>
<label for="email">UCalgary Email:</label> <label for="email">UCalgary Email:</label>
@ -94,9 +95,13 @@ const InterviewForm = () => {
placeholder="jaeinceins.bhaja@ucalgary.ca" placeholder="jaeinceins.bhaja@ucalgary.ca"
required required
/> />
<p>(for interview confirmation email)</p>
</div> </div>
</div> </div>
<div id="TimeDate">
<h4>Interview Date</h4>
<h4>Interview Time</h4>
</div>
{/* Time Slot Selector */} {/* Time Slot Selector */}
<TimeDateSelector <TimeDateSelector
onTimeSlotSelect={(timeSlot) => setSelectedTimeSlot(timeSlot)} onTimeSlotSelect={(timeSlot) => setSelectedTimeSlot(timeSlot)}

121
src/Interivew Booking/TimeDateSelector.jsx
View File

@ -1,12 +1,15 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import DatePicker from 'react-datepicker'; import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; import "react-datepicker/dist/react-datepicker.css";
export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGet }) { export default function TimeDateSelector({
onTimeSlotSelect,
timeDateSelectorGet,
}) {
const [allDatesAvailable, setAllDatesAvailable] = useState({}); const [allDatesAvailable, setAllDatesAvailable] = useState({});
const [selectedDate, setSelectedDate] = useState(null); const [selectedDate, setSelectedDate] = useState(null);
const [timeSlotsAvialable, setTimeSlotsAvialable] = useState([]); const [timeSlotsAvialable, setTimeSlotsAvialable] = useState([]);
const [selectedTime, setSelectedTime] = useState(''); const [selectedTime, setSelectedTime] = useState("");
useEffect(() => { useEffect(() => {
getInterviewDates(); getInterviewDates();
@ -44,30 +47,38 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
* @author Brock <darkicewolf50@gmail.com> * @author Brock <darkicewolf50@gmail.com>
*/ */
const isDateAvailable = (date) => { const isDateAvailable = (date) => {
return Object.keys(allDatesAvailable).includes(date.toISOString().split('T')[0]); return Object.keys(allDatesAvailable).includes(
} date.toISOString().split("T")[0]
);
};
const handleDateChange = (date) => { const handleDateChange = (date) => {
setSelectedDate(date); // Capture the selected date in date object setSelectedDate(date); // Capture the selected date in date object
const selectedDateStr = date.toISOString().split('T')[0]; const selectedDateStr = date.toISOString().split("T")[0];
// get and set time slots for a given day // get and set time slots for a given day
setTimeSlotsAvialable(Object.keys(allDatesAvailable[selectedDateStr])); setTimeSlotsAvialable(Object.keys(allDatesAvailable[selectedDateStr]));
setSelectedTime(''); // clear because of date change setSelectedTime(""); // clear because of date change
}; };
const handleTimeSlotChange = (e) => { const handleTimeSlotChange = (e) => {
let startTime = e.target.innerHTML; let startTime = e.target.innerHTML;
setSelectedTime(startTime); setSelectedTime(startTime);
onTimeSlotSelect({"date": selectedDate.toLocaleDateString(), "startTime": selectedTime }); onTimeSlotSelect({
date: selectedDate.toLocaleDateString(),
startTime: selectedTime,
});
}; };
return ( return (
<div> <div id="TimeSlotSelector">
{Object.keys(allDatesAvailable).length > 0 ? ( {Object.keys(allDatesAvailable).length > 0 ? (
<> <>
<label htmlFor="date-picker"><h3>Select a Date:</h3></label> <div className="TimeSlot">
<label htmlFor="date-picker">
<h4>Select a Date:</h4>
</label>
<DatePicker <DatePicker
selected={selectedDate} selected={selectedDate}
onChange={handleDateChange} onChange={handleDateChange}
@ -76,44 +87,50 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
dateFormat="yyyy-MM-dd" dateFormat="yyyy-MM-dd"
required // Make date selection required required // Make date selection required
/> />
{!selectedDate ? ( </div>
<> <div className="TimeSlot">
<h4>Available Time Slots:</h4> {!selectedDate ? (
<p>Please select the a date to see time slots.</p> <>
</> <h4>Available Time Slots:</h4>
) : ( <p>Please select the a date to see time slots.</p>
<> </>
<label htmlFor="time-picker"><h4>Available Time Slots for {selectedDate.toISOString().split('T')[0]}:</h4></label> ) : (
{selectedDate === undefined ? ( <>
<> <label htmlFor="time-picker">
<p>Please select a date.</p> <h4>
</> Available Time Slots for{" "}
) : timeSlotsAvialable !== '' ? ( {selectedDate.toISOString().split("T")[0]}:
<> </h4>
{Object.values(timeSlotsAvialable).map((time) => { </label>
return ( {selectedDate === undefined ? (
<button <>
key={time} <p>Please select a date.</p>
type="button" </>
onClick={(self) => { ) : timeSlotsAvialable !== "" ? (
handleTimeSlotChange(self); <>
}} {Object.values(timeSlotsAvialable).map((time) => {
> return (
{time} <button
</button> key={time}
); type="button"
})} onClick={(self) => {
</> handleTimeSlotChange(self);
) : ( }}
<> >
<p>No available time slots for the selected date.</p> {time}
</> </button>
)} );
})}
</> </>
) : (
)} <>
{/* {selectedDate && selectedTime && ( <p>No available time slots for the selected date.</p>
</>
)}
</>
)}
</div>
{/* {selectedDate && selectedTime && (
<div> <div>
<p> <p>
You have selected: You have selected:
@ -124,9 +141,9 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
</p> </p>
</div>)} */} </div>)} */}
</> </>
): ) : (
<p>Loading ...</p>} <p>Loading ...</p>
)}
</div> </div>
); );
}; }