Entry View: 3h-Segmente, Tagesansicht mit 3h-Separatoren

This commit is contained in:
Meleki committed 2026-02-25 20:03:46 +01:00
1 parent 4beb7cc663
commit 6c40a9063a
2 files changed
+20 -22

No files matched your search

+20 -16
View File
@@ -216,6 +216,7 @@ function renderBucketChart(buckets, bucketMinutes) {
// Determine week boundaries for grouping
let lastWeekId = null;
let lastDayId = null;
let lastSixHourId = null;
for (let i = 0; i < getBarCount(); i++) {
const b = bucketMap[i];
@@ -236,12 +237,18 @@ function renderBucketChart(buckets, bucketMinutes) {
const isNewWeek = lastWeekId !== null && weekId !== lastWeekId;
const showDaySep = ZOOM_LEVELS[zoomIndex].weeks === 1;
const isNewDay = showDaySep && lastDayId !== null && dayId !== lastDayId && !isNewWeek;
if (isNewWeek || isNewDay) {
// 3h quarter separators for 1-day view (absolute, anchored to anchorHour)
const isOneDayView = ZOOM_LEVELS[zoomIndex].days === 1;
const absHour = new Date(bucketStart);
const sixHourId = isOneDayView ? Math.floor((absHour.getHours() - CFG.anchorHour + 24) % 24 / 3) : null;
const isNewQuarter = isOneDayView && lastSixHourId !== null && sixHourId !== lastSixHourId && !isNewWeek && !isNewDay;
if (isNewWeek || isNewDay || isNewQuarter) {
const spacer = document.createElement('div');
spacer.className = isNewWeek ? 'bar-spacer' : 'bar-spacer day-spacer';
chart.appendChild(spacer);
labels.appendChild(Object.assign(document.createElement('div'), { className: 'chart-label bar-spacer' }));
}
if (isOneDayView) lastSixHourId = sixHourId;
lastWeekId = weekId;
lastDayId = dayId;
@@ -365,20 +372,9 @@ function renderChainBlocks(chains) {
if (entryMode) {
openModal(null, null, c.chainId);
} else if (zoomIndex >= ZOOM_LEVELS.length - 1) {
// Already at max zoom (1 Tag) - enter entry mode for the bucket containing this chain
// Already at max zoom (1 Tag) - enter entry mode for 3h window containing this chain
const chainMid = new Date((new Date(c.first).getTime() + new Date(c.last).getTime()) / 2);
const totalMinutes = (viewTo - viewFrom) / 60000;
const bucketMinutes = Math.max(1, Math.round(totalMinutes / getBarCount()));
const bucketMs = bucketMinutes * 60000;
const elapsed = chainMid - viewFrom;
const bucketIndex = Math.floor(elapsed / bucketMs);
const bucketStart = new Date(viewFrom.getTime() + bucketIndex * bucketMs);
const bucketEnd = new Date(bucketStart.getTime() + bucketMs);
zoomStack.push({ from: new Date(viewFrom), to: new Date(viewTo), zoom: zoomIndex, entry: false });
viewFrom = bucketStart;
viewTo = bucketEnd;
entryMode = true;
loadView();
enterEntryMode(chainMid, chainMid);
} else {
const chainMid = new Date((new Date(c.first).getTime() + new Date(c.last).getTime()) / 2);
zoomStack.push({ from: new Date(viewFrom), to: new Date(viewTo), zoom: zoomIndex, entry: false });
@@ -497,8 +493,16 @@ function zoomInto(clickStart, clickEnd) {
function enterEntryMode(bucketStart, bucketEnd) {
zoomStack.push({ from: new Date(viewFrom), to: new Date(viewTo), zoom: zoomIndex, entry: false });
viewFrom = bucketStart;
viewTo = bucketEnd;
// Snap to 3-hour window containing the clicked bucket (use bucketStart to avoid boundary drift)
const THREE_H = 3 * 3600000;
// Align to 3h slots starting at anchorHour
const dayStart = new Date(bucketStart);
dayStart.setHours(CFG.anchorHour, 0, 0, 0);
if (dayStart > bucketStart) dayStart.setDate(dayStart.getDate() - 1);
const elapsed = bucketStart.getTime() - dayStart.getTime();
const slotIdx = Math.floor(elapsed / THREE_H);
viewFrom = new Date(dayStart.getTime() + slotIdx * THREE_H);
viewTo = new Date(viewFrom.getTime() + THREE_H);
entryMode = true;
loadView();
}