Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-15 21:34: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;
padding-left: 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;
}
#InterviewForm div label {
font-weight: 700;
}
#InterviewForm div p {
font-size: x-small;
margin: 0px;
}
#InterviewForm div input {
width: 20.3svw;
width: 200px;
margin-top: 1svh;
height: 30px;
}
@ -42,3 +58,12 @@
flex-direction: column;
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}>
<div id="InterviewForm">
<div>
<label for="name">Name (What to call you):</label>
<label for="name">Name:</label>
<input
type="text"
id="fname"
@ -84,6 +84,7 @@ const InterviewForm = () => {
placeholder="Jaeinceins"
required
/>
<p>(what to call you)</p>
</div>
<div>
<label for="email">UCalgary Email:</label>
@ -94,9 +95,13 @@ const InterviewForm = () => {
placeholder="jaeinceins.bhaja@ucalgary.ca"
required
/>
<p>(for interview confirmation email)</p>
</div>
</div>
<div id="TimeDate">
<h4>Interview Date</h4>
<h4>Interview Time</h4>
</div>
{/* Time Slot Selector */}
<TimeDateSelector
onTimeSlotSelect={(timeSlot) => setSelectedTimeSlot(timeSlot)}

123
src/Interivew Booking/TimeDateSelector.jsx
View File

@ -1,12 +1,15 @@
import React, { useState, useEffect } from "react";
import DatePicker from 'react-datepicker';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGet }) {
export default function TimeDateSelector({
onTimeSlotSelect,
timeDateSelectorGet,
}) {
const [allDatesAvailable, setAllDatesAvailable] = useState({});
const [selectedDate, setSelectedDate] = useState(null);
const [timeSlotsAvialable, setTimeSlotsAvialable] = useState([]);
const [selectedTime, setSelectedTime] = useState('');
const [selectedTime, setSelectedTime] = useState("");
useEffect(() => {
getInterviewDates();
@ -44,30 +47,38 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
* @author Brock <darkicewolf50@gmail.com>
*/
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) => {
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
setTimeSlotsAvialable(Object.keys(allDatesAvailable[selectedDateStr]));
setSelectedTime(''); // clear because of date change
setSelectedTime(""); // clear because of date change
};
const handleTimeSlotChange = (e) => {
let startTime = e.target.innerHTML;
setSelectedTime(startTime);
onTimeSlotSelect({"date": selectedDate.toLocaleDateString(), "startTime": selectedTime });
onTimeSlotSelect({
date: selectedDate.toLocaleDateString(),
startTime: selectedTime,
});
};
return (
<div>
{Object.keys(allDatesAvailable).length > 0 ? (
<div id="TimeSlotSelector">
{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
selected={selectedDate}
onChange={handleDateChange}
@ -76,44 +87,50 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
dateFormat="yyyy-MM-dd"
required // Make date selection required
/>
{!selectedDate ? (
<>
<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 ? (
<>
<p>Please select a date.</p>
</>
) : timeSlotsAvialable !== '' ? (
<>
{Object.values(timeSlotsAvialable).map((time) => {
return (
<button
key={time}
type="button"
onClick={(self) => {
handleTimeSlotChange(self);
}}
>
{time}
</button>
);
})}
</>
) : (
<>
<p>No available time slots for the selected date.</p>
</>
)}
</>
)}
{/* {selectedDate && selectedTime && (
</div>
<div className="TimeSlot">
{!selectedDate ? (
<>
<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 ? (
<>
<p>Please select a date.</p>
</>
) : timeSlotsAvialable !== "" ? (
<>
{Object.values(timeSlotsAvialable).map((time) => {
return (
<button
key={time}
type="button"
onClick={(self) => {
handleTimeSlotChange(self);
}}
>
{time}
</button>
);
})}
</>
) : (
<>
<p>No available time slots for the selected date.</p>
</>
)}
</>
)}
</div>
{/* {selectedDate && selectedTime && (
<div>
<p>
You have selected:
@ -124,9 +141,9 @@ export default function TimeDateSelector ({ onTimeSlotSelect, timeDateSelectorGe
</p>
</div>)} */}
</>
):
<p>Loading ...</p>}
) : (
<p>Loading ...</p>
)}
</div>
);
};
}