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

Refine balance scoring and dashboard views

Browse Source
This commit is contained in:
Florian Heinz
2026-05-21 12:19:52 +02:00
parent 0fb8adbb14
commit abcd35714f
8 changed files with 316 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+67 -3
View File
@@ -547,6 +547,34 @@ body.page-dashboard .content {
.compare-day__line.score-2 .compare-day__marker { top: 12%; }
.compare-day__line.score-empty .compare-day__marker { top: 50%; }
.score-scale {
position: absolute;
inset: 0 auto 0 0;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 2.2rem;
padding-block: 0.25rem;
color: rgba(239, 247, 255, 0.52);
font-size: 0.66rem;
line-height: 1;
pointer-events: none;
}
.score-scale--day {
left: calc(50% - 9.8rem);
}
.score-scale--range {
left: 0.35rem;
top: 1rem;
bottom: 2rem;
}
.score-scale--month {
bottom: 1rem;
}
.tone-neg2 { background: #ff8f8f !important; border-color: rgba(255, 143, 143, 0.6) !important; }
.tone-neg1 { background: #ffbf8d !important; border-color: rgba(255, 191, 141, 0.6) !important; }
.tone-zero { background: #8be4ff !important; border-color: rgba(139, 228, 255, 0.6) !important; }
@@ -1559,6 +1587,7 @@ body.page-dashboard .content {
}
.range-score-strip {
position: relative;
display: grid;
gap: 0.55rem;
align-items: stretch;
@@ -1569,13 +1598,14 @@ body.page-dashboard .content {
.range-score-strip--week {
grid-template-columns: repeat(7, minmax(0, 1fr));
padding-left: 2.45rem;
}
.range-score-strip--month {
display: flex;
gap: 0.18rem;
overflow: visible;
padding-inline: 0.8rem;
padding-inline: 2.45rem 0.8rem;
}
.range-score-day {
@@ -1635,11 +1665,15 @@ body.page-dashboard .content {
display: flex;
flex-direction: column;
gap: 1rem;
max-height: min(68vh, 56rem);
overflow: auto;
overflow: visible;
padding-right: 0.15rem;
}
.range-day-list--month {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.range-day-card {
display: block;
overflow: hidden;
@@ -1713,6 +1747,18 @@ body.page-dashboard .content {
line-height: 1.45;
}
.range-day-card__score {
display: inline-flex;
width: fit-content;
margin: 0 0 0.5rem;
padding: 0.34rem 0.62rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: rgba(239, 247, 255, 0.82);
font-size: 0.82rem;
font-weight: 700;
}
.range-day-card--summary-only .range-day-card__summary {
font-size: clamp(1rem, 2.2vw, 1.25rem);
}
@@ -1739,6 +1785,15 @@ body.page-dashboard .content {
display: block;
}
.signal-scale {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
width: min(100%, 13rem);
color: rgba(239, 247, 255, 0.52);
font-size: 0.68rem;
text-align: center;
}
.range-moment-list__item span span {
margin-top: 0.16rem;
color: rgba(239, 247, 255, 0.64);
@@ -2248,6 +2303,15 @@ body.page-dashboard .content {
padding: 0.95rem;
}
.range-score-strip--week,
.range-score-strip--month {
padding-left: 2.35rem;
}
.range-day-list--month {
grid-template-columns: 1fr;
}
.dashboard-topbar {
position: relative;
top: auto;
assets/js/app.js
+30 -12
View File
@@ -425,7 +425,10 @@
let minValue = Math.min(...values);
let maxValue = Math.max(...values);
if (seriesName === "mood" || seriesName === "stress" || seriesName === "pain") {
if (seriesName === "balance") {
minValue = -2;
maxValue = 2;
} else if (seriesName === "mood" || seriesName === "stress" || seriesName === "pain") {
minValue = Math.max(1, minValue - 1.5);
maxValue = Math.min(10, maxValue + 1.5);
} else {
@@ -435,7 +438,10 @@
if ((maxValue - minValue) < 3) {
const center = (maxValue + minValue) / 2;
if (seriesName === "mood" || seriesName === "stress" || seriesName === "pain") {
if (seriesName === "balance") {
minValue = -2;
maxValue = 2;
} else if (seriesName === "mood" || seriesName === "stress" || seriesName === "pain") {
minValue = Math.max(1, center - 1.5);
maxValue = Math.min(10, center + 1.5);
} else {
@@ -701,7 +707,7 @@
}
const title = item.entry
? `${item.date}: ${formatNumber(Number(item.entry.score))} Punkte · ${item.entry.label}`
? `${item.date}: ${formatNumber(Number(item.entry.score))}% Bilanz · ${item.entry.label}`
: `${item.date}: kein Eintrag`;
if (!item.entry) {
@@ -732,7 +738,7 @@
</div>
<div class="calendar-detail__score">
<span data-calendar-score>${formatNumber(Number(latestVisibleEntry.score))}</span>
<small>Punkte</small>
<small>% Bilanz</small>
</div>
<a class="ghost-link calendar-detail__link" data-calendar-link href="${dashboardDayPath(latestVisibleEntry.date)}">Tag öffnen</a>
`;
@@ -1070,6 +1076,12 @@
return "tone-zero";
};
const signalLabels = {
mood: { "-2": "sehr niedrig", "-1": "niedrig", 0: "neutral", 1: "hoch", 2: "sehr hoch" },
energy: { "-2": "leer", "-1": "matt", 0: "okay", 1: "wach", 2: "kraftvoll" },
stress: { "-2": "sehr ruhig", "-1": "ruhig", 0: "neutral", 1: "angespannt", 2: "sehr angespannt" },
};
const setHidden = (element, hidden) => {
if (!element) {
return;
@@ -1113,6 +1125,10 @@
const metric = stepper.dataset.stepperMetric || "mood";
input.value = String(current);
value.textContent = `${current > 0 ? "+" : ""}${current}`;
const label = stepper.querySelector("[data-stepper-label]");
if (label) {
label.textContent = signalLabels[metric]?.[current] || signalLabels.mood[current] || "neutral";
}
minus.disabled = current <= -2;
plus.disabled = current >= 2;
const ring = stepper.querySelector(".overlay-signal-card__ring");
@@ -1434,20 +1450,22 @@
let pointerStartX = 0;
let pointerStartY = 0;
let dragging = false;
let ignoreSwipe = false;
const handleSwipe = (deltaX, deltaY) => {
if (Math.abs(deltaX) < 70 || Math.abs(deltaY) > 50) {
if (ignoreSwipe || document.body.classList.contains("is-dashboard-overlay-open") || Math.abs(deltaX) < 70 || Math.abs(deltaY) > 50) {
return;
}
if (deltaX < 0 && swipeContainer.dataset.prevDate) {
window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
} else if (deltaX > 0 && swipeContainer.dataset.nextDate) {
if (deltaX < 0 && swipeContainer.dataset.nextDate) {
window.location.href = dashboardDayPath(swipeContainer.dataset.nextDate);
} else if (deltaX > 0 && swipeContainer.dataset.prevDate) {
window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
}
};
swipeContainer.addEventListener("pointerdown", event => {
ignoreSwipe = Boolean(event.target.closest("a, button, input, textarea, select, label, [data-event-editable]"));
dragging = true;
pointerStartX = event.clientX;
pointerStartY = event.clientY;
@@ -1471,12 +1489,12 @@
return;
}
if (event.key === "ArrowLeft" && swipeContainer.dataset.prevDate) {
window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
if (event.key === "ArrowLeft" && swipeContainer.dataset.nextDate) {
window.location.href = dashboardDayPath(swipeContainer.dataset.nextDate);
}
if (event.key === "ArrowRight" && swipeContainer.dataset.nextDate) {
window.location.href = dashboardDayPath(swipeContainer.dataset.nextDate);
if (event.key === "ArrowRight" && swipeContainer.dataset.prevDate) {
window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
}
});
}