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

Erste funktionierende Version

Browse Source
This commit is contained in:
jafreli
2025-07-16 18:43:11 +02:00
parent 08ed4906cc
commit c78e825f2f
5 changed files with 126 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
static/css/style.css
View File

@@ -81,12 +81,29 @@ h1 {
color: #e0e0e0;
font-size: 1.5em;
cursor: pointer;
margin-left: 5px;
}
.habit-actions button:hover {
color: #666;
}
.habit-actions button.completed-today {
color: #4CAF50;
}
.habit-actions button.not-completed-today {
color: #888;
}
.habit-actions button.completed-today:hover {
color: #45a049;
}
.habit-actions button.not-completed-today:hover {
color: #4CAF50;
}
.date-grid {
display: grid;
grid-template-columns: repeat(30, 1fr); /* Adjust based on your date range */

105
static/js/script.js
View File

@@ -5,8 +5,11 @@ 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;
let currentHabitId = null; // Stellt sicher, dass diese globale Variable korrekt ist
function getCurrentDate() {
const today = new Date();
@@ -58,10 +61,21 @@ function renderHabits(habits) {
const habitActions = document.createElement('div');
habitActions.className = 'habit-actions';
const openModalButton = document.createElement('button');
openModalButton.innerHTML = '✔'; // Checkmark symbol
openModalButton.onclick = () => openHabitModal(habit.id, habit.name, habit.completed_dates);
habitActions.appendChild(openModalButton);
// 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);
@@ -108,9 +122,14 @@ async function addHabit() {
}
async function openHabitModal(habitId, habitName, completedDates) {
currentHabitId = habitId;
currentHabitId = habitId; // Hier wird die globale Variable gesetzt
modalHabitName.textContent = habitName;
modalCompleteTodayBtn.dataset.habitId = habitId; // Store habit ID for button
// 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();
@@ -132,6 +151,7 @@ async function openHabitModal(habitId, habitName, completedDates) {
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);
}
@@ -141,7 +161,7 @@ async function openHabitModal(habitId, habitName, completedDates) {
function closeModal() {
dateModal.style.display = 'none';
currentHabitId = null;
currentHabitId = null; // Zurücksetzen, wenn das Modal geschlossen wird
fetchHabits(); // Refresh habits after closing modal
}
@@ -160,8 +180,8 @@ async function toggleCompletionForDate(event, habitId, date) {
data = await response.json();
if (response.ok) {
cell.classList.remove('completed');
// Update the completion_history in the rendered habits
// (You might need to re-fetch or update the local habit data for the main view)
// 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
@@ -173,13 +193,19 @@ async function toggleCompletionForDate(event, habitId, date) {
data = await response.json();
if (response.ok) {
cell.classList.add('completed');
// Update the completion_history
// 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',
@@ -195,8 +221,6 @@ async function completeHabitForDate(event, habitId, date) {
cell.classList.add('completed');
}
});
// Optionally, disable the "Today erledigen" button if already completed
// modalCompleteTodayBtn.disabled = true;
} else {
console.error('Failed to complete habit:', data.error);
}
@@ -206,10 +230,15 @@ async function completeHabitForDate(event, habitId, date) {
}
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}`, {
const response = await fetch(`/habits/${currentHabitId}`, { // Verwendet currentHabitId
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: newName.trim() })
@@ -228,9 +257,14 @@ async function editHabitName() {
}
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}`, {
const response = await fetch(`/habits/${currentHabitId}`, { // Verwendet currentHabitId
method: 'DELETE'
});
const data = await response.json();
@@ -244,4 +278,45 @@ async function deleteHabitFromModal() {
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);
}
}