Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Testing #326

Merged
merged 5 commits into from
Mar 29, 2024
Merged

Testing #326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
03ba536
practice slot by dates
Pawardevelops Mar 28, 2024
cd69b60
Merge branch 'testing' of https://github.com/manipalutsav/frontend in…
Pawardevelops Mar 28, 2024
a5dbff7
Merge pull request #324 from manipalutsav/feature-practice-slots
Pawardevelops Mar 28, 2024
160c190
Some ui changes
Ajoy10 Mar 29, 2024
40a3ba8
Merge pull request #325 from manipalutsav/feature-practice-slots
abhikpai Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/commons/LBList/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ const LBList = (props) => (
}}>
{props.title}
</div>
<div css={{
fontSize: "0.5em"
}}>
Team : {props.team}
</div>
<div css={{
fontSize: "0.9em",
// color: "rgba(0, 0, 0, .5)",
Expand Down
69 changes: 54 additions & 15 deletions src/components/PracticeSlots/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,21 @@ export default class extends React.Component {
newSlots: [],
slotting: false,
slotted: false,
eventDate: "2024-04-01"
}
}

componentWillMount() {
practiceSlotsService.getPracticeSlot().then(slots =>
this.setState({ slots, loaded: true, slotted: slots.length > 0 })
console.log("check");

practiceSlotsService.getPracticeSlot(this.state.eventDate).then(slots =>
this.setState({ slots, loaded: true, slotted: slots?.length > 0 })
);
console.log(this.state.slots,"sltos")
}

getTimeSlot = (index) => {
console.log(this.state.slots,"slots")
var totalTeams = this.state.slots.length;
// time should start from 6 till 10 am
const startTime = new Date();
Expand Down Expand Up @@ -87,19 +92,17 @@ export default class extends React.Component {

startSlotting() {
this.setState({ slotting: true, });

practiceSlotsService.createPracticeSlot().then(slots =>
practiceSlotsService.createPracticeSlot(this.state.eventDate).then(slots =>
this.setState({ slots }, () =>
this.animate(this.state.slots)
)
)

}

deleteSlots() {

if (typeof window !== "undefined" && window.confirm("Are you sure you want to reset slots?")) {
practiceSlotsService.deletePracticeSlot().then(() => {
practiceSlotsService.deletePracticeSlot(this.state.eventDate).then(() => {
this.slots = [];
this.timer = null;

Expand All @@ -112,7 +115,19 @@ export default class extends React.Component {
});
}
}

handleDateChange = (event) => {
// Function to handle date selection from dropdown
this.setState({ eventDate: event.target.value });
this.setState({
slots: [],
newSlots: [],
slotting: false,
slotted: false,
})
practiceSlotsService.getPracticeSlot(event.target.value).then(slots =>
this.setState({ slots, loaded: true, slotted: slots?.length > 0 })
);
}
render = () => (
this.state.loaded
? this.state.slotted
Expand All @@ -125,15 +140,23 @@ export default class extends React.Component {
Practice Slots
</h2>
<button className="mucapp" onClick={this.deleteSlots}>Reset Slots</button>
<select name="date" id="date" style={{"cursor":"pointer"}} value={this.state.eventDate} onChange={this.handleDateChange} className="m-2 py-2 px-4 border border-orange-500 rounded-md bg-slate-300 bg-opacity-100">
{/* Dropdown to select event date */}
<option value="2024-04-01">April 1, 2024</option>
<option value="2024-04-02">April 2, 2024</option>
<option value="2024-04-03">April 3, 2024</option>
<option value="2024-04-04">April 4, 2024</option>
<option value="2024-04-05">April 5, 2024</option>
</select>
</div>
<div>
{
this.state.slots.map((slot, i) =>
<LBList
key={i}
color={slot.registered ? "#444" : "#999"}
position={slot.number}
title={`${slot.name}, ${slot.location}`}
color={"#444"}
position={slot.order}
title={`${slot.college}, ${slot.location}`}
description={this.getTimeSlot(i)}
/>
)
Expand All @@ -148,15 +171,22 @@ export default class extends React.Component {
}}>
<h2 className="mucapp">
Practice slots
{this.state.event.rounds && this.state.event.rounds.length > 1 && (
{this.state.event?.rounds && this.state.event.rounds?.length > 1 && (
<>
{" "}
Round {this.state.event.rounds.indexOf(this.props.round) + 1}
</>
)}
</h2>
<button className="mucapp" onClick={this.deleteSlots}>Reset Slots</button>

<select name="date" id="date" style={{"cursor":"pointer"}} value={this.state.eventDate} onChange={this.handleDateChange} className=" py-2 px-4 border border-orange-500 rounded-md bg-slate-300 bg-opacity-100 m-2">
{/* Dropdown to select event date */}
<option value="2024-04-01">April 1, 2024</option>
<option value="2024-04-02">April 2, 2024</option>
<option value="2024-04-03">April 3, 2024</option>
<option value="2024-04-04">April 4, 2024</option>
<option value="2024-04-05">April 5, 2024</option>
</select>
</div>

<div>
Expand All @@ -165,13 +195,14 @@ export default class extends React.Component {
<LBList

key={i}
position={slot.number}
position={slot.order}
team={String.fromCharCode(65 + slot.team)}
title={
<Scramble
autoStart
preScramble
speed="slow"
text={`${slot.name}, ${slot.location}`}
text={`${slot.college}, ${slot.location}`}
steps={[
{
action: "-",
Expand All @@ -187,7 +218,7 @@ export default class extends React.Component {
</div>
<div>
{
this.state.slots.length !== this.slots.length && this.slots.length
this.state.slots?.length !== this.slots?.length && this.slots?.length
? <Shuffle />
: null
}
Expand All @@ -212,6 +243,14 @@ export default class extends React.Component {
: "Start Slotting"
}
</button>
<select name="date" style={{"cursor":"pointer"}} id="date" value={this.state.eventDate} onChange={this.handleDateChange} className=" py-2 px-4 border border-orange-500 rounded-md bg-slate-300 bg-opacity-100 m-2">
{/* Dropdown to select event date */}
<option value="2024-04-01">April 1, 2024</option>
<option value="2024-04-02">April 2, 2024</option>
<option value="2024-04-03">April 3, 2024</option>
<option value="2024-04-04">April 4, 2024</option>
<option value="2024-04-05">April 5, 2024</option>
</select>
</div>
: <div>Please wait while we check for slots...</div>
);
Expand Down
84 changes: 65 additions & 19 deletions src/components/PublicPracticeSlots/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,51 +23,88 @@ export default class extends React.Component {
newSlots: [],
slotting: false,
slotted: false,
eventDate: "2024-04-01"
}
}

componentWillMount() {
practiceSlotsService.getPracticeSlot().then(slots =>
this.setState({ slots, loaded: true, slotted: slots.length > 0 })
//console.log("check");
practiceSlotsService.getPracticeSlot(this.state.eventDate).then(slots =>
this.setState({ slots, loaded: true, slotted: slots?.length > 0 })
);
}

getTimeSlot = (index) => {
let hours = ["06", "07", "08", "09", "10", "11", "12", "01", "02", "03", "04", "05"]
let mins = ["00", "15", "30", "45"]
let endMin = ["59", "14", "29", "44"]
let meridiem = ["AM", "PM"];
let startHourIndex = Math.floor(index / 4) % 12;
let startMinIndex = index % 4;
let startMeridiemIndex = (Math.floor((startHourIndex + 6) / 12)) % 2;
let nextIndex = index + 1;
let endHourIndex = Math.floor(index / 4) % 12;
let endMinIndex = nextIndex % 4;
let endMeridiemIndex = (Math.floor((endHourIndex + 6) / 12)) % 2;
return `${hours[startHourIndex]}:${mins[startMinIndex]} ${meridiem[startMeridiemIndex]} - ${hours[endHourIndex]}:${endMin[endMinIndex]} ${meridiem[endMeridiemIndex]}`
}
console.log(this.state.slots,"slots")
var totalTeams = this.state.slots.length;
// time should start from 6 till 10 am
const startTime = new Date();
startTime.setHours(6, 0, 0, 0);
const endTime = new Date();
endTime.setHours(10, 0, 0, 0);
//total = 10am-6am = 240 minutes

// total minutes between 6 am to 10 am
//can hardcode 240 mins
const totalMinutes = (endTime - startTime) / (1000 * 60);

// time in minutes per team
let timePerTeam = Math.floor(totalMinutes / totalTeams);

// if it exceeds 15 min then restrict it to 15 only ie (if there are less teams)
timePerTeam = Math.min(timePerTeam, 15);

// calculate slot timing for perticular team
const slotStartTime = new Date(startTime.getTime() + index * timePerTeam * 60 * 1000);
const slotEndTime = new Date(slotStartTime.getTime() + timePerTeam * 60 * 1000);

// formating of time
const startTimeString = slotStartTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const endTimeString = slotEndTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

return `${startTimeString} - ${endTimeString}`;
}

handleDateChange = (event) => {
// Function to handle date selection from dropdown
this.setState({ eventDate: event.target.value });
practiceSlotsService.getPracticeSlot(event.target.value).then(slots =>
this.setState({ slots, loaded: true, slotted: slots?.length > 0 })
);
}

render = () => (

this.state.loaded
? this.state.slotted
? <div>

<div css={{
textAlign: "center",
marginBottom: 30,
}}>

<h2 className="mucapp">
Practice Slots
</h2>
<select name="date" id="date" style={{"cursor":"pointer"}} className=" py-2 px-4 border border-orange-500 rounded-md bg-slate-300 bg-opacity-100" value={this.state.eventDate} onChange={this.handleDateChange}>
{/* Dropdown to select event date */}
<option value="2024-04-01">April 1, 2024</option>
<option value="2024-04-02">April 2, 2024</option>
<option value="2024-04-03">April 3, 2024</option>
<option value="2024-04-04">April 4, 2024</option>
<option value="2024-04-05">April 5, 2024</option>
</select>
</div>
<div>
{
this.state.slots.map((slot, i) =>
<LBList
key={i}
color={slot.registered ? "#444" : "#999"}
position={slot.number}
title={`${slot.name}, ${slot.location}`}
color={"#222"}
position={slot.order}
team={String.fromCharCode(65 + slot.team)}
title={`${slot.college}, ${slot.location}`}
description={this.getTimeSlot(i)}
/>
)
Expand All @@ -80,7 +117,16 @@ export default class extends React.Component {
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}>Slots are yet to be generated</div>
}}>Slots are yet to be generated for
<select name="date" id="date" style={{"cursor":"pointer"}} value={this.state.eventDate} onChange={this.handleDateChange} className=" py-2 px-4 border border-orange-500 rounded-md bg-slate-300 bg-opacity-100">
{/* Dropdown to select event date */}
<option value="2024-04-01">April 1, 2024</option>
<option value="2024-04-02">April 2, 2024</option>
<option value="2024-04-03">April 3, 2024</option>
<option value="2024-04-04">April 4, 2024</option>
<option value="2024-04-05">April 5, 2024</option>
</select>
</div>
: <div css={{
height: "100%",
display: "flex",
Expand Down
19 changes: 12 additions & 7 deletions src/services/practiceSlots.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import request from "../utils/request";
import { toast } from "../actions/toastActions";

const createPracticeSlot = async () => {
let response = await request("/practiceslots", "POST", {});
const createPracticeSlot = async (date) => {
let response = await request("/practiceslots", "POST", {date});

if (response && response.status === 200) {
// let slots=[];
// response.data.map(slot=>{

// })
return response.data;
} else {
if (response && response.status === "401")
Expand All @@ -13,20 +17,21 @@ const createPracticeSlot = async () => {
}
};

const getPracticeSlot = async () => {
let response = await request("/practiceslots", "GET");
const getPracticeSlot = async (date) => {
let response = await request("/practiceslots", "GET",);

if (response && response.status === 200) {
return response.data;
console.log(response.data)
return response.data.filter(slot=>new Date(slot.date).getDay()==new Date(date).getDay());
} else {
if (response && response.status === "401")
toast("Your session has expired, please logout and login again.")
return null;
}
};

const deletePracticeSlot = async () => {
let response = await request("/practiceslots", "DELETE");
const deletePracticeSlot = async (date) => {
let response = await request("/practiceslots", "DELETE",{date});

if (response && response.status === 200) {
return response.data;
Expand Down
Loading