LouisMazin/Boulangerie_Website
LouisMazin/Boulangerie_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean

Browse Source
This commit is contained in:
Louis Mazin 2026-09-15 20:54:19 +02:00
parent 1c2ed65db8
commit ba33de6564
2 changed files with 55 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/pages/WeeklySummaryPage.css
View File

@ -224,7 +224,6 @@
.multi-user-schedule .attendance-bar-group { .multi-user-schedule .attendance-bar-group {
position: absolute; position: absolute;
left: 5px;
display: flex; display: flex;
gap: 3px; gap: 3px;
overflow: visible; overflow: visible;

87
frontend/src/pages/WeeklySummaryPage.jsx
View File

@ -150,6 +150,28 @@ const WeeklySummaryPage = ({ userId }) => {
}).filter(Boolean); }).filter(Boolean);
}; };
const getAttendanceColumns = (dayAttendances) => {
const columns = new Map();
dayAttendances.forEach((attendance) => {
const start = getMinutes(getTimeValue(attendance, 'start_time'));
const end = getMinutes(getTimeValue(attendance, 'end_time'));
const username = attendance.username;
if (start === null || end === null || end <= start || !username) return;
const currentColumn = columns.get(username);
columns.set(username, {
username,
color: getUserColor(username),
start: currentColumn ? Math.min(currentColumn.start, start) : start,
end: currentColumn ? Math.max(currentColumn.end, end) : end,
});
});
return [...columns.values()];
};
const navigateWeek = (direction) => { const navigateWeek = (direction) => {
const newWeek = new Date(currentWeek); const newWeek = new Date(currentWeek);
newWeek.setDate(currentWeek.getDate() + (direction * 7)); newWeek.setDate(currentWeek.getDate() + (direction * 7));
@ -259,42 +281,43 @@ const WeeklySummaryPage = ({ userId }) => {
{weekDays.map((day) => ( {weekDays.map((day) => (
<div className="schedule-day-column" key={formatDateKey(day)}> <div className="schedule-day-column" key={formatDateKey(day)}>
{hours.map((hour) => <span className="schedule-hour-line" key={hour} />)} {hours.map((hour) => <span className="schedule-hour-line" key={hour} />)}
{getAttendanceSegments(getAttendancesForDay(day)).map(({ start, end, users }) => { {isAdmin ? getAttendanceColumns(getAttendancesForDay(day)).map(({ start, end, username, color }, columnIndex) => {
const startTime = formatSegmentTime(start);
const endTime = formatSegmentTime(end);
return (
<div
className="attendance-bar-group"
style={{
...getAttendanceStyle(start, end, startHour, endHour, hourHeight),
left: `${5 + (columnIndex * 9)}px`,
width: '6px',
}}
title={`${username} : ${startTime} - ${endTime}`}
aria-label={`${username} : ${startTime} - ${endTime}`}
key={`${formatDateKey(day)}-${username}`}
>
<span
className="attendance-user-bar"
style={{ backgroundColor: color }}
title={`${username} : ${startTime} - ${endTime}`}
aria-label={`${username} : ${startTime} - ${endTime}`}
/>
</div>
);
}) : getAttendanceSegments(getAttendancesForDay(day)).map(({ start, end, users }) => {
const startTime = formatSegmentTime(start); const startTime = formatSegmentTime(start);
const endTime = formatSegmentTime(end); const endTime = formatSegmentTime(end);
const segmentLabel = users.map(({ username }) => username).join(', '); const segmentLabel = users.map(({ username }) => username).join(', ');
return ( return (
isAdmin ? ( <div
<div className="attendance-block"
className="attendance-bar-group" style={getAttendanceStyle(start, end, startHour, endHour, hourHeight)}
style={{ title={segmentLabel}
...getAttendanceStyle(start, end, startHour, endHour, hourHeight), key={`${formatDateKey(day)}-${start}-${end}`}
width: `${(users.length * 6) + ((users.length - 1) * 3)}px`, >
}} <strong>{startTime} - {endTime}</strong>
title={`${startTime} - ${endTime}${segmentLabel ? ` : ${segmentLabel}` : ''}`} <span>{segmentLabel}</span>
aria-label={`${startTime} - ${endTime}${segmentLabel ? ` : ${segmentLabel}` : ''}`} </div>
key={`${formatDateKey(day)}-${start}-${end}`}
>
{users.map(({ username, color }) => (
<span
className="attendance-user-bar"
style={{ backgroundColor: color }}
title={`${username} : ${startTime} - ${endTime}`}
aria-label={`${username} : ${startTime} - ${endTime}`}
key={username}
/>
))}
</div>
) : (
<div
className="attendance-block"
style={getAttendanceStyle(start, end, startHour, endHour, hourHeight)}
key={`${formatDateKey(day)}-${start}-${end}`}
>
<strong>{startTime} - {endTime}</strong>
<span />
</div>
)
); );
})} })}
</div> </div>