jafreli/HabitTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Umbau auf 7 reihen

Browse Source
This commit is contained in:
jafreli
2025-07-19 00:40:43 +02:00
parent 84c026ca9b
commit f551dfe00c
4 changed files with 185 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
static/css/style.css
View File

@@ -105,6 +105,38 @@ h1 {
color: var(--habit-color, #4CAF50);
}
/* Weekly Grid Layout */
.weekly-grid {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 0;
}
.weekday-row {
display: flex;
align-items: center;
gap: 3px;
}
.weekday-label {
width: 30px;
font-size: 0.8em;
font-weight: bold;
color: #b0b0b0;
text-align: center;
flex-shrink: 0;
}
.weekday-row .date-square {
flex: 1;
min-width: 0;
aspect-ratio: 1;
max-width: 25px;
height: auto;
}
/* Legacy date-grid for backward compatibility */
.date-grid {
display: grid;
grid-template-columns: repeat(30, 1fr);
@@ -133,6 +165,11 @@ h1 {
cursor: pointer;
}
.date-square-readonly {
cursor: default;
opacity: 0.9;
}
.date-square.completed {
background-color: var(--habit-color, #4CAF50);
}

98
static/js/script.js
View File

@@ -79,7 +79,6 @@ async function fetchHabits() {
function renderHabits(habits) {
habitListDiv.innerHTML = ''; // Clear previous habits
const last30Days = getPastDates(30);
habits.forEach(habit => {
const habitItem = document.createElement('div');
@@ -127,27 +126,48 @@ function renderHabits(habits) {
habitHeader.appendChild(habitActions);
habitItem.appendChild(habitHeader);
const dateGrid = document.createElement('div');
dateGrid.className = 'date-grid';
// Create weekly grid instead of single row
const weeklyGrid = document.createElement('div');
weeklyGrid.className = 'weekly-grid';
last30Days.forEach(date => {
const dateSquare = document.createElement('div');
dateSquare.className = 'date-square';
const dateCount = habit.completed_dates[date] || 0;
const isCompleted = dateCount >= dailyTarget;
const weekdays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
// Apply gradient styling based on completion percentage
applyCompletionStyling(dateSquare, dateCount, dailyTarget, habitColor);
weekdays.forEach(weekday => {
const weekdayRow = document.createElement('div');
weekdayRow.className = 'weekday-row';
// Show count in tooltip if target > 1
if (dailyTarget > 1) {
dateSquare.title = `${date}: ${dateCount}/${dailyTarget}`;
} else {
dateSquare.title = date;
}
dateGrid.appendChild(dateSquare);
// Weekday label
const weekdayLabel = document.createElement('div');
weekdayLabel.className = 'weekday-label';
weekdayLabel.textContent = weekday.substring(0, 2); // Show first 2 letters
weekdayRow.appendChild(weekdayLabel);
// Date squares for this weekday
const weekdayDates = habit.weekly_completion[weekday] || [];
weekdayDates.forEach(dateInfo => {
const dateSquare = document.createElement('div');
dateSquare.className = 'date-square date-square-readonly';
dateSquare.dataset.date = dateInfo.date;
// Apply gradient styling based on completion percentage
applyCompletionStyling(dateSquare, dateInfo.completed, dateInfo.target, habitColor);
// Show count in tooltip if target > 1
if (dateInfo.target > 1) {
dateSquare.title = `${dateInfo.date}: ${dateInfo.completed}/${dateInfo.target}`;
} else {
dateSquare.title = dateInfo.date;
}
// No click handler - dates are read-only in main view
weekdayRow.appendChild(dateSquare);
});
weeklyGrid.appendChild(weekdayRow);
});
habitItem.appendChild(dateGrid);
habitItem.appendChild(weeklyGrid);
// Streak Counter hinzufügen
const streakContainer = document.createElement('div');
@@ -421,15 +441,53 @@ async function deleteHabitFromModal() {
}
}
async function toggleTodayCompletion(habitId, date, buttonElement, dailyTarget = 1) {
async function toggleDateCompletion(event, habitId, date) {
try {
// Always increment completion count
// Always increment completion count for weekly grid clicks
const response = await fetch(`/habits/${habitId}/complete`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ date: date })
});
const data = await response.json();
if (response.ok) {
// Refresh the entire habits display to show updated completion status
fetchHabits();
} else {
console.error('Failed to toggle habit completion:', data.error);
}
} catch (error) {
console.error('Error toggling habit completion:', error);
}
}
async function toggleTodayCompletion(habitId, date, buttonElement, dailyTarget = 1) {
try {
// Get current count first to check if we should increment or reset
const currentHabits = await fetch('/habits');
const habits = await currentHabits.json();
const currentHabit = habits.find(h => h.id === habitId);
const currentCount = currentHabit?.completed_dates[date] || 0;
let response;
if (currentCount >= dailyTarget) {
// If already at or above target, reset to 0 with single API call
response = await fetch(`/habits/${habitId}/reset`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ date: date })
});
} else {
// Increment completion count
response = await fetch(`/habits/${habitId}/complete`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ date: date })
});
}
const data = await response.json();
if (response.ok) {
const newCount = data.current_count;