diff --git a/src/commons/LBList/index.jsx b/src/commons/LBList/index.jsx index 5b3828ab..243c0335 100644 --- a/src/commons/LBList/index.jsx +++ b/src/commons/LBList/index.jsx @@ -23,6 +23,11 @@ const LBList = (props) => ( }}> {props.title} +
+ Team : {props.team} +
- 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(); @@ -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; @@ -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 @@ -125,15 +140,23 @@ export default class extends React.Component { Practice Slots +
{ this.state.slots.map((slot, i) => ) @@ -148,7 +171,7 @@ export default class extends React.Component { }}>

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} @@ -156,7 +179,14 @@ export default class extends React.Component { )}

- +
@@ -165,13 +195,14 @@ export default class extends React.Component {
{ - this.state.slots.length !== this.slots.length && this.slots.length + this.state.slots?.length !== this.slots?.length && this.slots?.length ? : null } @@ -212,6 +243,14 @@ export default class extends React.Component { : "Start Slotting" } +
:
Please wait while we check for slots...
); diff --git a/src/components/PublicPracticeSlots/index.jsx b/src/components/PublicPracticeSlots/index.jsx index 338dfd84..4bc29001 100644 --- a/src/components/PublicPracticeSlots/index.jsx +++ b/src/components/PublicPracticeSlots/index.jsx @@ -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 ?
+
+

Practice Slots

+
{ this.state.slots.map((slot, i) => ) @@ -80,7 +117,16 @@ export default class extends React.Component { flexDirection: "column", justifyContent: "center", alignItems: "center", - }}>Slots are yet to be generated
+ }}>Slots are yet to be generated for + +
:
{ - 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") @@ -13,11 +17,12 @@ 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.") @@ -25,8 +30,8 @@ const getPracticeSlot = async () => { } }; -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;