hnzio/mood-tracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Make day strip draggable and fix sleep bars

Browse Source
This commit is contained in:
Florian Heinz
2026-05-21 12:47:30 +02:00
parent 7c9f464686
commit 0df5983f65
3 changed files with 72 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+15 -4
View File
@@ -467,6 +467,15 @@ body.page-dashboard .content {
width: min(100%, 20rem);
height: 11rem;
margin-top: 0.95rem;
touch-action: pan-y;
transform: translateX(var(--day-strip-offset, 0));
transition: transform 180ms ease;
will-change: transform;
}
.dashboard-compare-strip.is-dragging {
transition: none;
cursor: grabbing;
}
.compare-day {
@@ -915,7 +924,6 @@ body.page-dashboard .content {
.sleep-phase-bar {
position: relative;
display: flex;
min-height: 2.35rem;
margin-top: 1.55rem;
overflow: visible;
@@ -949,20 +957,23 @@ body.page-dashboard .content {
}
.sleep-phase-bar__segment {
box-sizing: border-box;
position: absolute;
left: var(--sleep-segment-left, 0);
top: 0;
bottom: 0;
width: var(--sleep-segment-width, auto);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
min-width: 0;
flex: 0 0 var(--sleep-segment-width, auto);
width: var(--sleep-segment-width, auto);
padding: 0.35rem 0.45rem;
color: rgba(255, 255, 255, 0.94);
font-size: 0.82rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
.sleep-phase-bar__segment.is-compact {
assets/js/app.js
+50 -5
View File
@@ -1013,6 +1013,7 @@
const typeSelect = document.querySelector("[data-event-type-select]");
const unitInput = document.querySelector("[data-event-unit]");
const swipeContainer = document.querySelector("[data-day-swipe]");
const dayStrip = document.querySelector("[data-day-strip]");
const periodRail = document.querySelector(".range-period-rail");
const walkMode = document.body.dataset.walkMode || "time";
@@ -1446,27 +1447,38 @@
typeSelect.addEventListener("change", syncUnit);
}
if (swipeContainer) {
if (swipeContainer && dayStrip) {
let pointerStartX = 0;
let pointerStartY = 0;
let dragging = false;
let didSwipe = false;
let activePointerId = null;
const resetStrip = () => {
dayStrip.classList.remove("is-dragging");
dayStrip.style.setProperty("--day-strip-offset", "0px");
};
const handleSwipe = (deltaX, deltaY) => {
if (document.body.classList.contains("is-dashboard-overlay-open") || Math.abs(deltaX) < 70 || Math.abs(deltaY) > 50) {
resetStrip();
return;
}
if (deltaX < 0 && swipeContainer.dataset.nextDate) {
didSwipe = true;
dayStrip.style.setProperty("--day-strip-offset", "-120%");
window.location.href = dashboardDayPath(swipeContainer.dataset.nextDate);
} else if (deltaX > 0 && swipeContainer.dataset.prevDate) {
didSwipe = true;
dayStrip.style.setProperty("--day-strip-offset", "120%");
window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
} else {
resetStrip();
}
};
swipeContainer.addEventListener("pointerdown", event => {
dayStrip.addEventListener("pointerdown", event => {
if (event.target.closest("input, textarea, select, label, [data-stepper], .dashboard-overlay")) {
dragging = false;
return;
@@ -1474,24 +1486,57 @@
didSwipe = false;
dragging = true;
activePointerId = event.pointerId;
pointerStartX = event.clientX;
pointerStartY = event.clientY;
dayStrip.classList.add("is-dragging");
dayStrip.setPointerCapture?.(event.pointerId);
});
swipeContainer.addEventListener("pointerup", event => {
dayStrip.addEventListener("pointermove", event => {
if (!dragging || (activePointerId !== null && event.pointerId !== activePointerId)) {
return;
}
const deltaX = event.clientX - pointerStartX;
const deltaY = event.clientY - pointerStartY;
if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 20) {
dragging = false;
activePointerId = null;
resetStrip();
return;
}
dayStrip.style.setProperty("--day-strip-offset", `${Math.max(-120, Math.min(120, deltaX))}px`);
});
dayStrip.addEventListener("pointerup", event => {
if (!dragging) {
return;
}
dragging = false;
activePointerId = null;
handleSwipe(event.clientX - pointerStartX, event.clientY - pointerStartY);
});
swipeContainer.addEventListener("pointercancel", () => {
dayStrip.addEventListener("pointercancel", () => {
dragging = false;
activePointerId = null;
resetStrip();
});
swipeContainer.addEventListener("click", event => {
dayStrip.addEventListener("lostpointercapture", () => {
if (!dragging) {
return;
}
dragging = false;
activePointerId = null;
resetStrip();
});
dayStrip.addEventListener("click", event => {
if (!didSwipe) {
return;
}
templates/pages/dashboard.php
+7 -3
View File
@@ -56,7 +56,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<p class="dashboard-day__eyebrow"><?= e((string) $dayWeekday) ?></p>
<h1><?= e(format_display_date((string) $dayEntry['date'], false)) ?></h1>
<nav class="dashboard-compare-strip" aria-label="Tagesvergleich">
<nav class="dashboard-compare-strip" aria-label="Tagesvergleich" data-day-strip>
<span class="score-scale score-scale--day" aria-hidden="true"><span>+2</span><span>+1</span><span>0</span><span>-1</span><span>-2</span></span>
<?php foreach ($dashboardCompareDays as $compareDay): ?>
<a class="compare-day offset-<?= e((string) ($compareDay['offset'] ?? 0)) ?><?= !empty($compareDay['is_current']) ? ' is-current' : '' ?><?= empty($compareDay['has_content']) ? ' is-empty' : '' ?>" href="/?view=day&amp;date=<?= e(rawurlencode((string) $compareDay['date'])) ?>">
@@ -140,6 +140,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
$sleepBarTotal = $eventType === 'sleep' ? max((float) ($item['value'] ?? 0), $sleepPhaseTotal, $optimalSleepHours / 0.75) : 0.0;
$sleepPhaseRemainder = max(0.0, $sleepBarTotal - $sleepPhaseTotal);
$sleepOptimalPercent = $sleepBarTotal > 0 ? max(0, min(100, ($optimalSleepHours / $sleepBarTotal) * 100)) : 0;
$sleepPhaseLeft = 0.0;
?>
<?php $eventStats = array_values(array_filter([
$eventType !== 'sleep' ? (string) ($item['duration_label'] ?? '') : '',
@@ -214,13 +215,16 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<?php $phaseHours = max(0.0, (float) ($sleepPhases[$phase] ?? 0)); ?>
<?php if ($phaseHours <= 0) { continue; } ?>
<?php $phasePercent = $sleepBarTotal > 0 ? max(0.5, min(100, ($phaseHours / $sleepBarTotal) * 100)) : 0; ?>
<span class="sleep-phase-bar__segment sleep-phase-bar__segment--<?= e($class) ?><?= $phasePercent < 13 ? ' is-compact' : '' ?>" style="--sleep-segment-width: <?= e((string) $phasePercent) ?>%" title="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h" data-tooltip="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h">
<?php $phaseLeftPercent = $sleepBarTotal > 0 ? max(0, min(100, ($sleepPhaseLeft / $sleepBarTotal) * 100)) : 0; ?>
<span class="sleep-phase-bar__segment sleep-phase-bar__segment--<?= e($class) ?><?= $phasePercent < 13 ? ' is-compact' : '' ?>" style="--sleep-segment-left: <?= e((string) $phaseLeftPercent) ?>%; --sleep-segment-width: <?= e((string) $phasePercent) ?>%" title="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h" data-tooltip="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h">
<strong><?= e($label) ?></strong> <?= e(format_points($phaseHours)) ?> h
</span>
<?php $sleepPhaseLeft += $phaseHours; ?>
<?php endforeach; ?>
<?php if ($sleepPhaseRemainder > 0): ?>
<?php $remainderPercent = $sleepBarTotal > 0 ? max(0.5, min(100, ($sleepPhaseRemainder / $sleepBarTotal) * 100)) : 0; ?>
<span class="sleep-phase-bar__segment sleep-phase-bar__segment--rest" style="--sleep-segment-width: <?= e((string) $remainderPercent) ?>%" title="Bis Ziel-/Skalenende: <?= e(format_points($sleepPhaseRemainder)) ?> h" data-tooltip="Bis Ziel-/Skalenende: <?= e(format_points($sleepPhaseRemainder)) ?> h"></span>
<?php $remainderLeftPercent = $sleepBarTotal > 0 ? max(0, min(100, ($sleepPhaseTotal / $sleepBarTotal) * 100)) : 0; ?>
<span class="sleep-phase-bar__segment sleep-phase-bar__segment--rest" style="--sleep-segment-left: <?= e((string) $remainderLeftPercent) ?>%; --sleep-segment-width: <?= e((string) $remainderPercent) ?>%" title="Bis Ziel-/Skalenende: <?= e(format_points($sleepPhaseRemainder)) ?> h" data-tooltip="Bis Ziel-/Skalenende: <?= e(format_points($sleepPhaseRemainder)) ?> h"></span>
<?php endif; ?>
<span class="sleep-phase-bar__target"><span><?= e(format_points($optimalSleepHours)) ?> h</span></span>
</div>