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(TimeSlotSelector): Mapped out time slot buttons.

Browse Source
This commit is contained in:
ahmad.ahmad1 2025-02-01 16:01:19 -07:00
parent 6cbd1cc4f5
commit 583be5dcd2
1 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/Interivew Booking/TimeSlotSelector.jsx
View File

@ -36,7 +36,7 @@ const TimeSlotSelector = ({ onTimeSlotSelect }) => {
}; };
const handleTimeSlotChange = (e) => { const handleTimeSlotChange = (e) => {
let startTime = e.target.value; let startTime = e.target.innerHTML;
onTimeSlotSelect((prev) => ({ ...prev, startTime })); onTimeSlotSelect((prev) => ({ ...prev, startTime }));
}; };
@ -53,17 +53,30 @@ const TimeSlotSelector = ({ onTimeSlotSelect }) => {
) : ( ) : (
<> <>
<h4>Available Time Slots for {selectedDate}:</h4> <h4>Available Time Slots for {selectedDate}:</h4>
{timeSlots.length > 0 ? ( {selectedDate === undefined ? (
<select onChange={handleTimeSlotChange}> <>
<option value="">Select a time slot</option> <p>Please select a date.</p>
{timeSlots.map((time, index) => ( </>
<option key={index} value={time}> ) : timeSlots.length > 0 ? (
<>
{Object.values(timeSlots).map((time) => {
return (
<button
key={time}
onClick={(self) => {
console.log(self.target.innerHTML);
handleTimeSlotChange(self);
}}
>
{time} {time}
</option> </button>
))} );
</select> })}
</>
) : ( ) : (
<>
<p>No available time slots for the selected date.</p> <p>No available time slots for the selected date.</p>
</>
)} )}
</> </>
)} )}