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

Neue Monats ansicht

Browse Source
This commit is contained in:
jafreli
2025-07-16 18:55:38 +02:00
parent c78e825f2f
commit 5bc7faa451
5 changed files with 123 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
static/js/script.js
View File

@@ -10,6 +10,8 @@ const modalDeleteBtn = document.getElementById('modalDeleteBtn'); // Neu hinzuge
let currentHabitId = null; // Stellt sicher, dass diese globale Variable korrekt ist
let currentModalDate = new Date(); // Aktueller Monat im Modal
let currentHabitCompletedDates = []; // Completed dates für das aktuelle Habit
function getCurrentDate() {
const today = new Date();
@@ -61,7 +63,7 @@ function renderHabits(habits) {
const habitActions = document.createElement('div');
habitActions.className = 'habit-actions';
// Haken-Button für heute abhaken/rückgängig machen
const todayToggleButton = document.createElement('button');
const today = getCurrentDate();
@@ -70,7 +72,7 @@ function renderHabits(habits) {
todayToggleButton.className = isCompletedToday ? 'completed-today' : 'not-completed-today';
todayToggleButton.onclick = () => toggleTodayCompletion(habit.id, today, todayToggleButton);
habitActions.appendChild(todayToggleButton);
// Drei-Punkte-Menü für erweiterte Optionen
const menuButton = document.createElement('button');
menuButton.innerHTML = '⋮'; // Vertical ellipsis (drei Punkte)
@@ -81,7 +83,7 @@ function renderHabits(habits) {
const dateGrid = document.createElement('div');
dateGrid.className = 'date-grid';
last30Days.forEach(date => {
const dateSquare = document.createElement('div');
dateSquare.className = 'date-square';
@@ -122,41 +124,69 @@ async function addHabit() {
}
async function openHabitModal(habitId, habitName, completedDates) {
currentHabitId = habitId; // Hier wird die globale Variable gesetzt
currentHabitId = habitId;
currentHabitCompletedDates = completedDates;
currentModalDate = new Date(); // Reset to current month
modalHabitName.textContent = habitName;
// Setzen der habitId auf den Buttons im Modal
modalCompleteTodayBtn.dataset.habitId = habitId;
modalEditBtn.dataset.habitId = habitId; // Wichtig
modalDeleteBtn.dataset.habitId = habitId; // Wichtig
modalEditBtn.dataset.habitId = habitId;
modalDeleteBtn.dataset.habitId = habitId;
renderModalCalendar();
dateModal.style.display = 'flex';
}
function renderModalCalendar() {
modalDateGrid.innerHTML = '';
const today = getCurrentDate();
const startOfWeek = new Date();
startOfWeek.setDate(startOfWeek.getDate() - (startOfWeek.getDay() + 6) % 7); // Go back to Monday
for (let i = 0; i < 35; i++) { // Display 5 weeks (5 * 7 days)
const d = new Date(startOfWeek);
d.setDate(startOfWeek.getDate() + i);
const dateStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
// Update month/year display
const monthNames = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
document.getElementById('currentMonthYear').textContent =
`${monthNames[currentModalDate.getMonth()]} ${currentModalDate.getFullYear()}`;
const today = getCurrentDate();
const year = currentModalDate.getFullYear();
const month = currentModalDate.getMonth();
// Get first day of month and calculate starting position
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const startingDayOfWeek = (firstDay.getDay() + 6) % 7; // Monday = 0
// Add empty cells for days before month starts
for (let i = 0; i < startingDayOfWeek; i++) {
const emptyCell = document.createElement('div');
emptyCell.className = 'date-cell empty';
modalDateGrid.appendChild(emptyCell);
}
// Add days of the month
for (let day = 1; day <= lastDay.getDate(); day++) {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const dateCell = document.createElement('div');
dateCell.className = 'date-cell';
dateCell.textContent = d.getDate();
if (completedDates.includes(dateStr)) {
dateCell.textContent = day;
if (currentHabitCompletedDates.includes(dateStr)) {
dateCell.classList.add('completed');
}
if (dateStr === today) {
dateCell.classList.add('today');
}
dateCell.dataset.date = dateStr;
// habitId wird hier korrekt an toggleCompletionForDate übergeben
dateCell.onclick = (event) => toggleCompletionForDate(event, habitId, dateStr);
dateCell.onclick = (event) => toggleCompletionForDate(event, currentHabitId, dateStr);
modalDateGrid.appendChild(dateCell);
}
}
dateModal.style.display = 'flex'; // Show the modal
function changeMonth(direction) {
currentModalDate.setMonth(currentModalDate.getMonth() + direction);
renderModalCalendar();
}
function closeModal() {
@@ -180,8 +210,11 @@ async function toggleCompletionForDate(event, habitId, date) {
data = await response.json();
if (response.ok) {
cell.classList.remove('completed');
// Hier sollte eventuell auch die completed_dates in der Hauptansicht aktualisiert werden
// Aber der fetchHabits() beim Schließen des Modals kümmert sich darum
// Update local completed dates array
const index = currentHabitCompletedDates.indexOf(date);
if (index > -1) {
currentHabitCompletedDates.splice(index, 1);
}
}
} else {
// Mark as completed
@@ -193,7 +226,10 @@ async function toggleCompletionForDate(event, habitId, date) {
data = await response.json();
if (response.ok) {
cell.classList.add('completed');
// Hier sollte eventuell auch die completed_dates in der Hauptansicht aktualisiert werden
// Update local completed dates array
if (!currentHabitCompletedDates.includes(date)) {
currentHabitCompletedDates.push(date);
}
}
}
}
@@ -284,7 +320,7 @@ async function toggleTodayCompletion(habitId, date, buttonElement) {
try {
const isCurrentlyCompleted = buttonElement.classList.contains('completed-today');
let response;
if (isCurrentlyCompleted) {
// Mark as uncompleted
response = await fetch(`/habits/${habitId}/uncomplete`, {
@@ -300,7 +336,7 @@ async function toggleTodayCompletion(habitId, date, buttonElement) {
body: JSON.stringify({ date: date })
});
}
const data = await response.json();
if (response.ok) {
// Update button appearance