Meeting Conflict Resolver

Meeting Conflict Resolver

${meeting.title}

${meeting.start.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})} - ${meeting.end.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}

`; const slotIndex = (startHour - HOURS[0]) * 7 + dayColumn -1; scheduleContainer.children[8 + slotIndex].appendChild(meetingEl); }); } function renderScheduleForm() { meetingTeam.innerHTML = state.teams.map(t => ``).join(''); meetingDate.value = toISODateString(new Date()); } function renderConfiguration() { // Teams & Members teamsList.innerHTML = state.teams.map(team => `...`).join(''); // Simplified for brevity membersList.innerHTML = state.members.map(member => `...`).join(''); memberTeamSelect.innerHTML = state.teams.map(t => ``).join(''); availabilityMemberFilter.innerHTML = state.members.map(m => ``).join(''); renderAvailabilityGrid(); } function renderAvailabilityGrid() { const memberId = parseInt(availabilityMemberFilter.value); if (!memberId) { availabilityGrid.innerHTML = ''; return; } let html = '
Day
' + HOURS.map(h => `
${h}:00
`).join(''); DAYS.slice(1, 6).forEach((day, dayIndex) => { // Monday to Friday html += `
${day}
`; HOURS.forEach(hour => { const isAvailable = state.availability[memberId]?.[dayIndex+1] && hour >= state.availability[memberId][dayIndex+1][0] && hour < state.availability[memberId][dayIndex+1][1]; html += `
`; }); }); availabilityGrid.innerHTML = html; } // SECTION: Event Handlers & Logic function checkConflicts() { const teamId = parseInt(meetingTeam.value); const date = meetingDate.value; const startTime = meetingStartTime.value; const endTime = meetingEndTime.value; if (!teamId || !date || !startTime || !endTime) { conflictInfo.innerHTML = '

Fill out the form to check for conflicts.

'; return; } const startDateTime = new Date(`${date}T${startTime}`); const endDateTime = new Date(`${date}T${endTime}`); let conflicts = { meetings: [], availability: [] }; // Check against other meetings const teamMeetings = state.meetings.filter(m => m.teamId === teamId); teamMeetings.forEach(m => { if (startDateTime < m.end && endDateTime > m.start) { conflicts.meetings.push(m.title); } }); // Check against member availability const teamMembers = state.members.filter(m => m.teamId === teamId); const meetingDay = startDateTime.getDay(); const startHour = startDateTime.getHours(); const endHour = endDateTime.getHours() + (endDateTime.getMinutes() > 0 ? 1 : 0); teamMembers.forEach(member => { const memberAvail = state.availability[member.id]?.[meetingDay]; if (memberAvail) { if (startHour < memberAvail[0] || endHour > memberAvail[1]) { conflicts.availability.push(member.name); } } else { // No availability set means unavailable conflicts.availability.push(member.name); } }); // Render conflict info if (conflicts.meetings.length === 0 && conflicts.availability.length === 0) { conflictInfo.innerHTML = '

✅ No conflicts found. This time slot is available.

'; } else { let html = '

🚨 Conflicts Detected!

'; if (conflicts.meetings.length > 0) { html += `

Overlapping Meetings: ${conflicts.meetings.join(', ')}

`; } if (conflicts.availability.length > 0) { html += `

Members Unavailable: ${conflicts.availability.join(', ')}

`; } conflictInfo.innerHTML = html; } } function handleScheduleSubmit(e) { e.preventDefault(); const newMeeting = { id: Date.now(), title: meetingTitle.value, teamId: parseInt(meetingTeam.value), start: new Date(`${meetingDate.value}T${meetingStartTime.value}`), end: new Date(`${meetingDate.value}T${meetingEndTime.value}`) }; state.meetings.push(newMeeting); saveState(); alert('Meeting scheduled successfully!'); state.activeTab = 'dashboard'; state.weekStartDate = getStartOfWeek(newMeeting.start); render(); } // ... other handlers for add/delete teams/members, tabs, filters ... // SECTION: Event Listeners Object.values(tabButtons).forEach(btn => btn.addEventListener('click', e => { state.activeTab = e.target.id.split('-')[1]; render(); })); teamFilter.addEventListener('change', e => { state.selectedTeamId = parseInt(e.target.value); renderDashboard(); }); weekStartFilter.addEventListener('change', e => { state.weekStartDate = getStartOfWeek(e.target.value); renderDashboard(); }); scheduleMeetingForm.addEventListener('submit', handleScheduleSubmit); ['team', 'date', 'start-time', 'end-time'].forEach(id => document.getElementById(`meeting-${id}`).addEventListener('change', checkConflicts)); // ... other event listeners ... // SECTION: Initial Load loadState(); render(); });
Scroll to Top