322 lines
12 KiB
JavaScript
322 lines
12 KiB
JavaScript
document.addEventListener('DOMContentLoaded', fetchHabits);
|
|
|
|
const habitListDiv = document.getElementById('habitList');
|
|
const dateModal = document.getElementById('dateModal');
|
|
const modalHabitName = document.getElementById('modalHabitName');
|
|
const modalDateGrid = document.getElementById('modalDateGrid');
|
|
const modalCompleteTodayBtn = document.getElementById('modalCompleteTodayBtn');
|
|
const modalEditBtn = document.getElementById('modalEditBtn'); // Neu hinzugefügt
|
|
const modalDeleteBtn = document.getElementById('modalDeleteBtn'); // Neu hinzugefügt
|
|
|
|
|
|
let currentHabitId = null; // Stellt sicher, dass diese globale Variable korrekt ist
|
|
|
|
function getCurrentDate() {
|
|
const today = new Date();
|
|
const year = today.getFullYear();
|
|
const month = String(today.getMonth() + 1).padStart(2, '0');
|
|
const day = String(today.getDate()).padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
}
|
|
|
|
function getPastDates(days) {
|
|
const dates = [];
|
|
for (let i = days - 1; i >= 0; i--) {
|
|
const d = new Date();
|
|
d.setDate(d.getDate() - i);
|
|
const year = d.getFullYear();
|
|
const month = String(d.getMonth() + 1).padStart(2, '0');
|
|
const day = String(d.getDate()).padStart(2, '0');
|
|
dates.push(`${year}-${month}-${day}`);
|
|
}
|
|
return dates;
|
|
}
|
|
|
|
async function fetchHabits() {
|
|
try {
|
|
const response = await fetch('/habits');
|
|
const habits = await response.json();
|
|
renderHabits(habits);
|
|
} catch (error) {
|
|
console.error('Error fetching habits:', error);
|
|
}
|
|
}
|
|
|
|
function renderHabits(habits) {
|
|
habitListDiv.innerHTML = ''; // Clear previous habits
|
|
const last30Days = getPastDates(30);
|
|
|
|
habits.forEach(habit => {
|
|
const habitItem = document.createElement('div');
|
|
habitItem.className = 'habit-item';
|
|
habitItem.dataset.id = habit.id; // Store habit ID
|
|
|
|
const habitHeader = document.createElement('div');
|
|
habitHeader.className = 'habit-header';
|
|
|
|
const habitName = document.createElement('div');
|
|
habitName.className = 'habit-name';
|
|
habitName.textContent = habit.name;
|
|
habitHeader.appendChild(habitName);
|
|
|
|
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();
|
|
const isCompletedToday = habit.completed_dates && habit.completed_dates.includes(today);
|
|
todayToggleButton.innerHTML = isCompletedToday ? '✓' : '✓'; // Checkmark symbol
|
|
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)
|
|
menuButton.onclick = () => openHabitModal(habit.id, habit.name, habit.completed_dates);
|
|
habitActions.appendChild(menuButton);
|
|
habitHeader.appendChild(habitActions);
|
|
habitItem.appendChild(habitHeader);
|
|
|
|
const dateGrid = document.createElement('div');
|
|
dateGrid.className = 'date-grid';
|
|
|
|
last30Days.forEach(date => {
|
|
const dateSquare = document.createElement('div');
|
|
dateSquare.className = 'date-square';
|
|
if (habit.completed_dates && habit.completed_dates.includes(date)) {
|
|
dateSquare.classList.add('completed');
|
|
}
|
|
dateSquare.title = date; // Show date on hover
|
|
dateGrid.appendChild(dateSquare);
|
|
});
|
|
habitItem.appendChild(dateGrid);
|
|
|
|
habitListDiv.appendChild(habitItem);
|
|
});
|
|
}
|
|
|
|
async function addHabit() {
|
|
const newHabitNameInput = document.getElementById('newHabitName');
|
|
const name = newHabitNameInput.value.trim();
|
|
|
|
if (name) {
|
|
try {
|
|
const response = await fetch('/habits', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: name })
|
|
});
|
|
const newHabit = await response.json();
|
|
if (response.ok) {
|
|
newHabitNameInput.value = '';
|
|
fetchHabits(); // Re-fetch and re-render all habits
|
|
} else {
|
|
console.error('Failed to add habit:', newHabit.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error adding habit:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function openHabitModal(habitId, habitName, completedDates) {
|
|
currentHabitId = habitId; // Hier wird die globale Variable gesetzt
|
|
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
|
|
|
|
|
|
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')}`;
|
|
|
|
const dateCell = document.createElement('div');
|
|
dateCell.className = 'date-cell';
|
|
dateCell.textContent = d.getDate();
|
|
if (completedDates.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);
|
|
modalDateGrid.appendChild(dateCell);
|
|
}
|
|
|
|
dateModal.style.display = 'flex'; // Show the modal
|
|
}
|
|
|
|
function closeModal() {
|
|
dateModal.style.display = 'none';
|
|
currentHabitId = null; // Zurücksetzen, wenn das Modal geschlossen wird
|
|
fetchHabits(); // Refresh habits after closing modal
|
|
}
|
|
|
|
async function toggleCompletionForDate(event, habitId, date) {
|
|
const cell = event.target;
|
|
let response;
|
|
let data;
|
|
|
|
if (cell.classList.contains('completed')) {
|
|
// Mark as uncompleted
|
|
response = await fetch(`/habits/${habitId}/uncomplete`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ date: 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
|
|
}
|
|
} else {
|
|
// Mark as completed
|
|
response = await fetch(`/habits/${habitId}/complete`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ date: date })
|
|
});
|
|
data = await response.json();
|
|
if (response.ok) {
|
|
cell.classList.add('completed');
|
|
// Hier sollte eventuell auch die completed_dates in der Hauptansicht aktualisiert werden
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
async function completeHabitForDate(event, habitId, date) {
|
|
// Der habitId kommt jetzt direkt vom dataset des Buttons oder der Funktion, die ihn aufruft
|
|
// Sicherstellen, dass habitId gültig ist
|
|
if (!habitId) {
|
|
console.error('Habit ID is undefined for completion.');
|
|
return;
|
|
}
|
|
try {
|
|
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) {
|
|
// Update the modal's date grid immediately
|
|
const dateCells = modalDateGrid.querySelectorAll('.date-cell');
|
|
dateCells.forEach(cell => {
|
|
if (cell.dataset.date === date) {
|
|
cell.classList.add('completed');
|
|
}
|
|
});
|
|
} else {
|
|
console.error('Failed to complete habit:', data.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error completing habit:', error);
|
|
}
|
|
}
|
|
|
|
async function editHabitName() {
|
|
// Sicherstellen, dass currentHabitId gesetzt ist
|
|
if (!currentHabitId) {
|
|
console.error('No habit selected for editing.');
|
|
return;
|
|
}
|
|
const newName = prompt("Neuen Namen für die Gewohnheit eingeben:", modalHabitName.textContent);
|
|
if (newName && newName.trim() !== "") {
|
|
try {
|
|
const response = await fetch(`/habits/${currentHabitId}`, { // Verwendet currentHabitId
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: newName.trim() })
|
|
});
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
modalHabitName.textContent = newName.trim();
|
|
fetchHabits(); // Re-fetch and re-render all habits to update the main view
|
|
} else {
|
|
console.error('Failed to update habit:', data.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating habit:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function deleteHabitFromModal() {
|
|
// Sicherstellen, dass currentHabitId gesetzt ist
|
|
if (!currentHabitId) {
|
|
console.error('No habit selected for deletion.');
|
|
return;
|
|
}
|
|
if (confirm("Bist du sicher, dass du diese Gewohnheit löschen möchtest?")) {
|
|
try {
|
|
const response = await fetch(`/habits/${currentHabitId}`, { // Verwendet currentHabitId
|
|
method: 'DELETE'
|
|
});
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
closeModal();
|
|
fetchHabits(); // Re-fetch and re-render all habits
|
|
} else {
|
|
console.error('Failed to delete habit:', data.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting habit:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
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`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ date: date })
|
|
});
|
|
} else {
|
|
// Mark as completed
|
|
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) {
|
|
// Update button appearance
|
|
if (isCurrentlyCompleted) {
|
|
buttonElement.classList.remove('completed-today');
|
|
buttonElement.classList.add('not-completed-today');
|
|
} else {
|
|
buttonElement.classList.remove('not-completed-today');
|
|
buttonElement.classList.add('completed-today');
|
|
}
|
|
// Refresh the date grid 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);
|
|
}
|
|
} |