Skip to content

Commit

Permalink
Merge pull request #326 from manipalutsav/testing
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhikpai
abhikpai authored Mar 29, 2024
2 parents 00d7f90 + 40a3ba8 commit 30cebcd
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 41 deletions.
5 changes: 5 additions & 0 deletions src/commons/LBList/index.jsx
View file
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
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
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
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

0 comments on commit 30cebcd

Please sign in to comment.