From eac0d1a13cd5d2fb5743a8c33ac6de7893332909 Mon Sep 17 00:00:00 2001
From: "Markus T." <19794318+marcus-wishes@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:15:26 +0200
Subject: [PATCH 1/2] fixed now bar header-line

---
 .../src/components/timetable/TimeTable.tsx    |  3 +-
 .../components/timetable/TimeTableHeader.tsx  |  2 +-
 showcase/public/showcase-sources.txt          | 50 +++++++++++++++----
 .../showcase/wrapper/TimeTableShowcase.tsx    |  7 ++-
 4 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/library/src/components/timetable/TimeTable.tsx b/library/src/components/timetable/TimeTable.tsx
index 4d57b986..d1f33dd6 100644
--- a/library/src/components/timetable/TimeTable.tsx
+++ b/library/src/components/timetable/TimeTable.tsx
@@ -566,7 +566,8 @@ function moveNowBar(
 	const tableBody = tableBodyRef.current
 
 	// remove the orange border from the header cell
-	const headerTimeslotRow = tableHeader.children[1]
+	const headerTimeslotRow =
+		tableHeader.children[tableHeader.children.length - 1]
 	if (!headerTimeslotRow) {
 		setMessage?.({
 			appearance: "danger",
diff --git a/library/src/components/timetable/TimeTableHeader.tsx b/library/src/components/timetable/TimeTableHeader.tsx
index 1d92226f..ac682f8e 100644
--- a/library/src/components/timetable/TimeTableHeader.tsx
+++ b/library/src/components/timetable/TimeTableHeader.tsx
@@ -369,7 +369,7 @@ function CustomHeaderRowCell<
 			key={`timeheader${timeSlot.unix()}`}
 			colSpan={2}
 			className={`${headerCellBaseClassname} ${
-				isLastOfDay ? "after:border-l-2" : ""
+				isLastOfDay ? "after:border-l-2" : "after:border-l"
 			} ${showTimeSlotHeader ? "pt-1" : ""}`}
 			ref={ref}
 		>
diff --git a/showcase/public/showcase-sources.txt b/showcase/public/showcase-sources.txt
index 1658838d..5c3bc2aa 100644
--- a/showcase/public/showcase-sources.txt
+++ b/showcase/public/showcase-sources.txt
@@ -7936,21 +7936,35 @@ function TestCustomHeaderRowTimeSlot<
 	viewType,
 	slotsArray,
 	entries,
+	tableCellRef,
 }: TimeTableTypes.CustomHeadeRowTimeSlotProps<G, I>) {
 	const groupItems = entries[1].items
 
-	const startAndEndSlots = groupItems.map((it) =>
-		timeTableUtils.getStartAndEndSlot(
-			it,
+	const groupItemsOfCell: I[] = []
+	const startAndEndInSlow: {
+		status: "in" | "before" | "after"
+		startSlot: number
+		endSlot: number
+	}[] = []
+	for (let i = 0; i < groupItems.length; i++) {
+		const item = groupItems[i]
+		const startAndEnd = timeTableUtils.getStartAndEndSlot(
+			item,
 			slotsArray,
 			timeFrameOfDay,
 			timeSlotMinutes,
 			viewType,
-		),
-	)
+		)
+		if (slotsArray[startAndEnd.startSlot] === timeSlot) {
+			groupItemsOfCell.push(item)
+			startAndEndInSlow.push(startAndEnd)
+		}
+	}
+
+	console.log("GROUP ITEMS", groupItemsOfCell)
 
-	const getLeftAndWidth = groupItems.map((it, i) => {
-		const startAndEnd = startAndEndSlots[i]
+	const leftAndWidths = groupItemsOfCell.map((it, i) => {
+		const startAndEnd = startAndEndInSlow[i]
 		if (startAndEnd.status === "before" || startAndEnd.status === "after") {
 			return null
 		}
@@ -7965,8 +7979,26 @@ function TestCustomHeaderRowTimeSlot<
 		)
 	})
 
-	console.log("GET LEFT AND WIDTH", getLeftAndWidth)
-	return <div>{startAndEndSlots.length}</div>
+	const cellWidth = tableCellRef.current?.offsetWidth ?? 70
+
+	const ret = leftAndWidths.map((it, i) =>
+		it ? (
+			<div
+				key={groupItemsOfCell[i].title}
+				className="absolute top-0 bottom-0 bg-warning-bold whitespace-nowrap overflow-visible truncate"
+				style={{
+					left: `${it.left * cellWidth}px`,
+					width: `${it.width * cellWidth}px`,
+				}}
+			>
+				{groupItemsOfCell[i].title}
+			</div>
+		) : null,
+	)
+
+	console.log("RET", ret, leftAndWidths)
+
+	return <>{ret}</>
 }
 
 function CustomHeaderRowHeader<
diff --git a/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx b/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx
index cf78010c..7962815c 100644
--- a/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx
+++ b/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx
@@ -458,8 +458,6 @@ function TestCustomHeaderRowTimeSlot<
 		}
 	}
 
-	console.log("GROUP ITEMS", groupItemsOfCell)
-
 	const leftAndWidths = groupItemsOfCell.map((it, i) => {
 		const startAndEnd = startAndEndInSlow[i]
 		if (startAndEnd.status === "before" || startAndEnd.status === "after") {
@@ -482,13 +480,14 @@ function TestCustomHeaderRowTimeSlot<
 		it ? (
 			<div
 				key={groupItemsOfCell[i].title}
-				className="absolute top-0 bottom-0 bg-warning-bold whitespace-nowrap overflow-visible truncate"
+				className="absolute top-0 bottom-0 bg-discovery-bold whitespace-nowrap overflow-visible z-10 opacity-50"
 				style={{
 					left: `${it.left * cellWidth}px`,
 					width: `${it.width * cellWidth}px`,
 				}}
+				title={groupItemsOfCell[i].title}
 			>
-				{groupItemsOfCell[i].title}
+				<div className="truncate">{groupItemsOfCell[i].title}</div>
 			</div>
 		) : null,
 	)

From 1072df0c910c58912fbab2c9b6905e9b53e774e5 Mon Sep 17 00:00:00 2001
From: "Markus T." <19794318+marcus-wishes@users.noreply.github.com>
Date: Wed, 9 Oct 2024 18:13:59 +0200
Subject: [PATCH 2/2] removed debug log

---
 showcase/public/showcase-sources.txt                       | 7 +++----
 .../src/components/showcase/wrapper/TimeTableShowcase.tsx  | 2 --
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/showcase/public/showcase-sources.txt b/showcase/public/showcase-sources.txt
index 5c3bc2aa..f0db20b7 100644
--- a/showcase/public/showcase-sources.txt
+++ b/showcase/public/showcase-sources.txt
@@ -7961,8 +7961,6 @@ function TestCustomHeaderRowTimeSlot<
 		}
 	}
 
-	console.log("GROUP ITEMS", groupItemsOfCell)
-
 	const leftAndWidths = groupItemsOfCell.map((it, i) => {
 		const startAndEnd = startAndEndInSlow[i]
 		if (startAndEnd.status === "before" || startAndEnd.status === "after") {
@@ -7985,13 +7983,14 @@ function TestCustomHeaderRowTimeSlot<
 		it ? (
 			<div
 				key={groupItemsOfCell[i].title}
-				className="absolute top-0 bottom-0 bg-warning-bold whitespace-nowrap overflow-visible truncate"
+				className="absolute top-0 bottom-0 bg-discovery-bold whitespace-nowrap overflow-visible z-10 opacity-50"
 				style={{
 					left: `${it.left * cellWidth}px`,
 					width: `${it.width * cellWidth}px`,
 				}}
+				title={groupItemsOfCell[i].title}
 			>
-				{groupItemsOfCell[i].title}
+				<div className="truncate">{groupItemsOfCell[i].title}</div>
 			</div>
 		) : null,
 	)
diff --git a/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx b/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx
index 7962815c..143bd692 100644
--- a/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx
+++ b/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx
@@ -492,8 +492,6 @@ function TestCustomHeaderRowTimeSlot<
 		) : null,
 	)
 
-	console.log("RET", ret, leftAndWidths)
-
 	return <>{ret}</>
 }