gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added render cell on timeline

Browse Source
This commit is contained in:
sianida26 2024-06-25 02:52:40 +07:00
parent 6f3f651294
commit 4c3b66b2b5
2 changed files with 90 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
apps/frontend/src/components/Timetable/DayColumn.tsx
View File

@ -11,9 +11,16 @@ type Props = {
startTime: dayjs.Dayjs; startTime: dayjs.Dayjs;
endTime: dayjs.Dayjs; endTime: dayjs.Dayjs;
events: Event[]; events: Event[];
renderCell?: (events: Event[]) => JSX.Element;
}; };
export default function DayColumn({ day, startTime, endTime, events }: Props) { export default function DayColumn({
day,
startTime,
endTime,
events,
renderCell,
}: Props) {
const isToday = day.isSame(dayjs(), "day"); const isToday = day.isSame(dayjs(), "day");
return ( return (
@ -32,62 +39,84 @@ export default function DayColumn({ day, startTime, endTime, events }: Props) {
const currentDateTime = day.hour(startTime.hour() + i); const currentDateTime = day.hour(startTime.hour() + i);
return ( return (
<button // Base Cell
key={i} <div key={i} className="border-t h-20">
className="border-t h-20 hover:bg-gray-100 flex pr-1.5 gap-1 relative" {renderCell ? (
> <div className="w-full h-full relative">
{/* <div className="absolute top-1 right-1 text-sm text-gray-500 rounded-full size-6 bg-gray-100 flex items-center justify-center"> {renderCell(
5 events.filter((event) => {
</div> */} // return event.start.isSame(
{events // startTime.add(i, "h"),
.filter((event) => { // "hour"
// return event.start.isSame( // );
// startTime.add(i, "h"),
// "hour"
// );
return ( return (
currentDateTime.isSame( currentDateTime.isSame(
event.start, event.start,
"hour" "hour"
) || ) ||
(currentDateTime.isAfter(event.start) && (currentDateTime.isAfter(
currentDateTime.isBefore(event.end)) event.start
); ) &&
}) currentDateTime.isBefore(
.map((event, i) => event.end
currentDateTime.isSame(event.start, "hour") ? ( ))
<div );
key={i} })
className="bg-primary-100 rounded-sm text-sm text-left pl-1 text-primary-800 font-medium w-full z-10 relative" )}
style={{ </div>
minHeight: "min-content", ) : (
<div className="flex pr-1.5 w-full gap-1 relative hover:bg-gray-100 h-full">
{events
.filter((event) => {
return (
currentDateTime.isSame(
event.start,
"hour"
) ||
(currentDateTime.isAfter(
event.start
) &&
currentDateTime.isBefore(
event.end
))
);
})
.map((event, i) =>
currentDateTime.isSame(
event.start,
"hour"
) ? (
<div
key={i}
className="bg-primary-100 rounded-sm text-sm text-left pl-1 text-primary-800 font-medium w-full z-10 relative"
style={{
minHeight: "min-content",
// The height is calculated from the duration of the event in minutes, converted to a percentage of an hour, // The height is calculated from the duration of the event in minutes, converted to a percentage of an hour,
// plus an additional number of pixels equivalent to the number of hours in the event duration // plus an additional number of pixels equivalent to the number of hours in the event duration
height: `calc(${ height: `calc(${
(event.end.diff( (event.end.diff(
event.start, event.start,
"minute" "minute"
) * ) *
100) / 100) /
60 60
}% + ${event.end.diff(event.start, "hour")}px)`, }% + ${event.end.diff(event.start, "hour")}px)`,
// The top position is calculated from the start minute of the event, converted to a percentage of an hour // The top position is calculated from the start minute of the event, converted to a percentage of an hour
top: `${(event.start.minute() * 100) / 60}%`, top: `${(event.start.minute() * 100) / 60}%`,
}} }}
> >
{event.title} {event.title}
</div> </div>
) : ( ) : (
<div className="w-full"></div> <div className="w-full"></div>
) )
)} )}
{/* {Math.random() < 0.1 && ( </div>
<div className="bg-purple-200/80 rounded-md w-full h-full"></div> )}
)} */} </div>
</button>
); );
})} })}
</div> </div>

10
apps/frontend/src/components/Timetable/Timetable.tsx
View File

@ -13,14 +13,17 @@ dayjs.extend(isoWeek);
dayjs.extend(customParseFormat); dayjs.extend(customParseFormat);
type Props = { type Props = {
startTime?: dayjs.Dayjs;
endTime?: dayjs.Dayjs;
events: Event[]; events: Event[];
renderCell?: (events: Event[]) => JSX.Element;
}; };
export default function Timetable({ events }: Props) { export default function Timetable({ events, ...props }: Props) {
const [currentDate, setCurrentDate] = useState(dayjs()); const [currentDate, setCurrentDate] = useState(dayjs());
const startTime = dayjs("08:00", "HH:mm"); const startTime = props.startTime ?? dayjs("08:00", "HH:mm");
const endTime = dayjs("18:00", "HH:mm"); const endTime = props.endTime ?? dayjs("18:00", "HH:mm");
const weekDays = useMemo(() => { const weekDays = useMemo(() => {
const startOfWeek = currentDate.startOf("isoWeek"); const startOfWeek = currentDate.startOf("isoWeek");
@ -90,6 +93,7 @@ export default function Timetable({ events }: Props) {
events={eventPerDay[i]} events={eventPerDay[i]}
startTime={startTime} startTime={startTime}
endTime={endTime} endTime={endTime}
renderCell={props.renderCell}
/> />
))} ))}
</div> </div>