Skip to content

Commit c0c2e50

Browse files
marcus-wishesmarcus-wishes
authored
Merge pull request #117 from linked-planet/dev
Dev
2 parents edef317 + 5aa3734 commit c0c2e50

File tree

11 files changed

+296
-128
lines changed

11 files changed

+296
-128
lines changed

‎library/src/components/timetable/TimeTable.tsx‎

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -396,7 +396,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
396396
const nowbarScrollHandling = useCallback(() => {
397397
if (nowTimeSlotRef?.current) {
398398
rateLimiter(() =>
399-
nowbarRemoveCoveredCheck(
399+
nowbarCoveredCheck(
400400
nowBarRef,
401401
tableHeaderRef,
402402
nowTimeSlotRef,
@@ -449,6 +449,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
449449
timeFrameDay,
450450
currViewType,
451451
groupHeaderColumnWidth,
452+
timeStepsMinutes,
452453
setMessage,
453454
)
454455
}, [
@@ -458,6 +459,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
458459
currViewType,
459460
setMessage,
460461
groupHeaderColumnWidth,
462+
timeStepsMinutes,
461463
])
462464

463465
// initial run, and start interval to move the now bar
@@ -553,6 +555,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
553555
customHeaderRow={customHeaderRow}
554556
entries={entries}
555557
tableHeaderRef={tableHeaderRef}
558+
timeStepMinutesHoursView={timeStepsMinutes}
556559
/>
557560
<tbody ref={tableBodyRef} className="table-fixed">
558561
<TimeTableRows<G, I>
@@ -567,6 +570,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
567570
slotsArray={slotsArray}
568571
timeFrameDay={timeFrameDay}
569572
viewType={currViewType}
573+
timeStepMinutesHoursView={timeStepsMinutes}
570574
/>
571575
</tbody>
572576
</table>
@@ -596,6 +600,7 @@ function moveNowBar(
596600
timeFrameDay: TimeFrameDay,
597601
viewType: TimeTableViewType,
598602
groupHeaderColumnWidth: number,
603+
timeStepMinutes: number,
599604
setMessage?: (message: TimeTableMessage) => void,
600605
) {
601606
if (!tableHeaderRef.current || !tableBodyRef.current) {
@@ -660,6 +665,15 @@ function moveNowBar(
660665
timeFrameDay,
661666
viewType,
662667
)
668+
669+
/*const insideOfTimeFrameOfDay =
670+
now.hour() > timeFrameDay.startHour ||
671+
(now.hour() === timeFrameDay.startHour &&
672+
now.minute() > timeFrameDay.startMinute &&
673+
now.hour() < timeFrameDay.endHour) ||
674+
(now.hour() === timeFrameDay.endHour &&
675+
now.minute() < timeFrameDay.endMinute)*/
676+
663677
if (startAndEndSlot.status !== "in") {
664678
// we need to remove the now bar, if it is there
665679
if (nowBar) {
@@ -686,32 +700,46 @@ function moveNowBar(
686700

687701
if (!nowBar) {
688702
nowBar = document.createElement("div")
689-
//nowBar.className = styles.nowBar
690703
nowBar.className =
691704
"absolute opacity-60 bg-orange-bold top-0 bottom-0 z-[2] w-[2px]"
692-
//slotBar.appendChild(nowBar)
705+
nowBar.id = "nowBar"
693706
nowBarRef.current = nowBar
694-
nowbarRemoveCoveredCheck(
695-
nowBarRef,
696-
tableHeaderRef,
697-
nowTimeSlotRef,
698-
groupHeaderColumnWidth,
699-
)
700707
}
701708

702-
const currentTimeSlot = slotsArray[startSlot]
709+
let currentTimeSlot = slotsArray[startSlot]
703710
const timeSlotMinutes = getTimeSlotMinutes(
704711
currentTimeSlot,
705712
timeFrameDay,
706713
viewType,
714+
timeStepMinutes,
707715
)
716+
717+
if (viewType !== "hours") {
718+
// see getTimeSlotMinutes in timeTableUtils
719+
currentTimeSlot = currentTimeSlot
720+
.add(timeFrameDay.startHour, "hours")
721+
.add(timeFrameDay.startMinute, "minutes")
722+
}
723+
708724
const diffNow = now.diff(currentTimeSlot, "minutes")
709725

710726
const diffPerc = diffNow / timeSlotMinutes
727+
711728
nowBar.style.left = `${diffPerc * 100}%`
712729
nowBar.style.top = "100%"
713730
nowBar.style.height = `${tableBody.getBoundingClientRect().bottom - nowTimeSlotCell.getBoundingClientRect().top - nowTimeSlotCell.clientHeight}px`
714731

732+
if (nowBarRef.current && nowTimeSlotRef.current) {
733+
nowTimeSlotRef.current.appendChild(nowBarRef.current)
734+
nowbarCoveredCheck(
735+
nowBarRef,
736+
tableHeaderRef,
737+
nowTimeSlotRef,
738+
groupHeaderColumnWidth,
739+
)
740+
}
741+
742+
// orange bottom border of the now time slot cell
715743
nowTimeSlotCell.classList.remove(
716744
"border-b-border-bold",
717745
"font-normal",
@@ -752,7 +780,7 @@ function moveNowBar(
752780
* @param nowBarRef
753781
* @param tableHeaderRef
754782
*/
755-
function nowbarRemoveCoveredCheck(
783+
function nowbarCoveredCheck(
756784
nowBarRef: MutableRefObject<HTMLDivElement | undefined>,
757785
tableHeaderRef: MutableRefObject<HTMLTableSectionElement | null>,
758786
nowTimeSlotRef: MutableRefObject<HTMLTableCellElement | undefined>,
@@ -761,23 +789,23 @@ function nowbarRemoveCoveredCheck(
761789
if (!nowTimeSlotRef.current) {
762790
return
763791
}
792+
764793
const tableHeader = tableHeaderRef.current
765794
// the first TH is the sticky group header column
766795
const tableHeaderFirstTH = tableHeader?.children[0]?.children[0]
767796
const rightNowbarBorder =
768797
tableHeaderFirstTH?.getBoundingClientRect().right ||
769798
groupHeaderColumnWidth
770799
const nowTimeSlotLeft = nowTimeSlotRef.current.getBoundingClientRect().left
800+
771801
if (nowTimeSlotLeft <= rightNowbarBorder) {
772802
if (nowBarRef.current?.parentElement) {
773803
const nowBarRect = nowBarRef.current.getBoundingClientRect()
774804
if (nowBarRect.left <= rightNowbarBorder) {
775-
nowBarRef.current.remove()
805+
nowBarRef.current.classList.add("hidden")
776806
}
777807
}
778808
} else {
779-
if (nowBarRef.current && !nowBarRef.current.parentElement) {
780-
nowTimeSlotRef.current.appendChild(nowBarRef.current)
781-
}
809+
nowBarRef.current?.classList.remove("hidden")
782810
}
783811
}

‎library/src/components/timetable/TimeTableConfigStore.ts‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,13 @@ export type TimeTableConfig<G extends TimeTableGroup> = {
1313
timeFrameDay: TimeFrameDay
1414
slotsArray: readonly Dayjs[]
1515
viewType: TimeTableViewType
16+
// this is the timeSlotMinutes set through the props, which can be different then the one calculated to fit the time slots
17+
timeStepMinutesHoursView: number
1618
}
1719
disableWeekendInteractions: boolean
1820
hideOutOfRangeMarkers: boolean
1921
timeSlotSelectionDisabled: boolean
2022

21-
// this is the timeSlotMinutes set through the props, which can be different then the one calculated to fit the time slots
22-
propTimeSlotMinutes: number
23-
2423
dimensions: {
2524
placeHolderHeight: number
2625
columnWidth: number
@@ -51,7 +50,7 @@ export function initAndUpdateTimeTableConfigStore<G extends TimeTableGroup>(
5150
startDate: Dayjs,
5251
endDate: Dayjs,
5352
viewType: TimeTableViewType,
54-
propTimeSlotMinutes: number,
53+
timeStepMinutesHoursView: number,
5554
columnWidth: number,
5655
rowHeight: number,
5756
placeHolderHeight: number,
@@ -69,16 +68,14 @@ export function initAndUpdateTimeTableConfigStore<G extends TimeTableGroup>(
6968
const basicProperties = calculateTimeSlotPropertiesForView(
7069
startDate,
7170
endDate,
72-
propTimeSlotMinutes,
71+
timeStepMinutesHoursView,
7372
viewType,
7473
weekStartsOnSunday,
7574
)
7675

7776
timeTableConfigStore[ident] = proxy<TimeTableConfig<G>>({
7877
basicProperties,
7978

80-
propTimeSlotMinutes,
81-
8279
disableWeekendInteractions,
8380
hideOutOfRangeMarkers,
8481
timeSlotSelectionDisabled,
@@ -107,14 +104,14 @@ export function initAndUpdateTimeTableConfigStore<G extends TimeTableGroup>(
107104
if (
108105
timeTableConfigStore[ident].startDate !== startDateString ||
109106
timeTableConfigStore[ident].endDate !== endDateString ||
110-
timeTableConfigStore[ident].propTimeSlotMinutes !==
111-
propTimeSlotMinutes ||
107+
timeTableConfigStore[ident].basicProperties.timeStepMinutesHoursView !==
108+
timeStepMinutesHoursView ||
112109
timeTableConfigStore[ident].basicProperties.viewType !== viewType
113110
) {
114111
const basicProperties = calculateTimeSlotPropertiesForView(
115112
startDate,
116113
endDate,
117-
propTimeSlotMinutes,
114+
timeStepMinutesHoursView,
118115
viewType,
119116
weekStartsOnSunday,
120117
)
@@ -134,8 +131,8 @@ export function initAndUpdateTimeTableConfigStore<G extends TimeTableGroup>(
134131
? `${timeTableConfigStore[ident].endDate} !== ${endDateString}`
135132
: "",
136133
"time slot minutes updated",
137-
timeTableConfigStore[ident].propTimeSlotMinutes !==
138-
propTimeSlotMinutes,
134+
timeTableConfigStore[ident].basicProperties
135+
.timeStepMinutesHoursView !== timeStepMinutesHoursView,
139136
"view type updated",
140137
timeTableConfigStore[ident].basicProperties.viewType !==
141138
viewType,
@@ -145,10 +142,10 @@ export function initAndUpdateTimeTableConfigStore<G extends TimeTableGroup>(
145142
clearTimeSlotSelection(ident, true)
146143

147144
timeTableConfigStore[ident].basicProperties = basicProperties
148-
timeTableConfigStore[ident].propTimeSlotMinutes = propTimeSlotMinutes
149145
timeTableConfigStore[ident].startDate = startDateString
150146
timeTableConfigStore[ident].endDate = endDateString
151-
timeTableConfigStore[ident].propTimeSlotMinutes = propTimeSlotMinutes
147+
timeTableConfigStore[ident].basicProperties.timeStepMinutesHoursView =
148+
timeStepMinutesHoursView
152149
}
153150

154151
if (isCellDisabled !== timeTableConfigStore[ident].isCellDisabled) {

‎library/src/components/timetable/TimeTableHeader.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ type TimeTableHeaderProps<
108108
timeSlot: (props: CustomHeaderRowTimeSlotProps<G, I>) => React.ReactNode
109109
header: (props: CustomHeaderRowHeaderProps<G, I>) => React.ReactNode
110110
}
111-
111+
timeStepMinutesHoursView: number
112112
tableHeaderRef: React.Ref<HTMLTableSectionElement>
113113
}
114114

@@ -134,6 +134,7 @@ export const LPTimeTableHeader = function TimeTableHeader<
134134
locale,
135135
customHeaderRow,
136136
entries,
137+
timeStepMinutesHoursView,
137138
tableHeaderRef,
138139
}: TimeTableHeaderProps<G, I>) {
139140
const currentLocale = dayjs.locale()
@@ -316,6 +317,7 @@ export const LPTimeTableHeader = function TimeTableHeader<
316317
slotsArray[i],
317318
timeFrameDay,
318319
viewType,
320+
timeStepMinutesHoursView,
319321
)
320322
return (
321323
<CustomHeaderRowCell

0 commit comments

Comments
 (0)