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

Farben der Habits wälbarmachen

Browse Source
This commit is contained in:
jafreli
2025-07-16 22:57:28 +02:00
parent 04c40b29d9
commit 8580a82222
5 changed files with 146 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
static/css/style.css
View File

@@ -89,7 +89,7 @@ h1 {
}
.habit-actions button.completed-today {
color: #4CAF50;
color: var(--habit-color, #4CAF50);
}
.habit-actions button.not-completed-today {
@@ -97,11 +97,12 @@ h1 {
}
.habit-actions button.completed-today:hover {
color: #45a049;
color: var(--habit-color, #45a049);
filter: brightness(0.9);
}
.habit-actions button.not-completed-today:hover {
color: #4CAF50;
color: var(--habit-color, #4CAF50);
}
.date-grid {
@@ -133,7 +134,7 @@ h1 {
}
.date-square.completed {
background-color: #4CAF50;
background-color: var(--habit-color, #4CAF50);
}
/* Modal Styles */
@@ -188,7 +189,7 @@ h1 {
#modalHabitName {
text-align: center;
color: #4CAF50;
color: var(--current-habit-color, #4CAF50);
margin-bottom: 20px;
}
@@ -200,8 +201,8 @@ h1 {
}
.month-navigation button {
background-color: #4CAF50;
color: white;
background-color: var(--current-habit-color, #4CAF50);
color: var(--current-habit-text-color, white);
border: none;
border-radius: 5px;
padding: 8px 12px;
@@ -210,7 +211,9 @@ h1 {
}
.month-navigation button:hover {
background-color: #45a049;
background-color: var(--current-habit-color, #45a049);
color: var(--current-habit-text-color, white);
filter: brightness(0.9);
}
#currentMonthYear {
@@ -226,7 +229,7 @@ h1 {
margin-bottom: 10px;
text-align: center;
font-weight: bold;
color: #4CAF50;
color: var(--current-habit-color, #4CAF50);
}
.weekdays-header div {
@@ -251,7 +254,8 @@ h1 {
}
.date-cell.completed {
background-color: #4CAF50;
background-color: var(--current-habit-color, #4CAF50);
color: var(--current-habit-text-color, white);
}
.date-cell.today {
@@ -304,12 +308,14 @@ h1 {
}
#modalCompleteTodayBtn {
background-color: #4CAF50;
color: white;
background-color: var(--current-habit-color, #4CAF50);
color: var(--current-habit-text-color, white);
}
#modalCompleteTodayBtn:hover {
background-color: #45a049;
background-color: var(--current-habit-color, #45a049);
color: var(--current-habit-text-color, white);
filter: brightness(0.9);
}
#modalEditBtn {
@@ -328,4 +334,26 @@ h1 {
#modalDeleteBtn:hover {
background-color: #c82333;
}
.color-picker-section {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
gap: 10px;
}
.color-picker-section label {
color: #e0e0e0;
font-weight: bold;
}
#habitColorPicker {
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
cursor: pointer;
background: none;
}

95
static/js/script.js
View File

@@ -12,6 +12,7 @@ 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
let currentHabitColor = '#4CAF50'; // Current habit color
function getCurrentDate() {
const today = new Date();
@@ -38,23 +39,23 @@ function calculateStreak(completedDates) {
if (!completedDates || completedDates.length === 0) {
return 0;
}
// Sort dates in descending order (newest first)
const sortedDates = completedDates.sort((a, b) => new Date(b) - new Date(a));
const today = getCurrentDate();
let streak = 0;
let currentDate = new Date();
// Check if today is completed, if not, start from yesterday
if (!sortedDates.includes(today)) {
currentDate.setDate(currentDate.getDate() - 1);
}
// Count consecutive days backwards from today (or yesterday)
while (true) {
const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`;
if (sortedDates.includes(dateStr)) {
streak++;
currentDate.setDate(currentDate.getDate() - 1);
@@ -62,7 +63,7 @@ function calculateStreak(completedDates) {
break;
}
}
return streak;
}
@@ -85,6 +86,10 @@ function renderHabits(habits) {
habitItem.className = 'habit-item';
habitItem.dataset.id = habit.id; // Store habit ID
// Apply custom color to the habit item
const habitColor = habit.color || '#4CAF50';
habitItem.style.setProperty('--habit-color', habitColor);
const habitHeader = document.createElement('div');
habitHeader.className = 'habit-header';
@@ -108,7 +113,7 @@ function renderHabits(habits) {
// 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);
menuButton.onclick = () => openHabitModal(habit.id, habit.name, habit.completed_dates, habitColor);
habitActions.appendChild(menuButton);
habitHeader.appendChild(habitActions);
habitItem.appendChild(habitHeader);
@@ -130,16 +135,16 @@ function renderHabits(habits) {
// Streak Counter hinzufügen
const streakContainer = document.createElement('div');
streakContainer.className = 'streak-container';
const flameIcon = document.createElement('span');
flameIcon.className = 'flame-icon';
flameIcon.innerHTML = '🔥'; // Flammen-Emoji
const streakCount = document.createElement('span');
streakCount.className = 'streak-count';
const currentStreak = calculateStreak(habit.completed_dates);
streakCount.textContent = `${currentStreak} Tag${currentStreak !== 1 ? 'e' : ''}`;
streakContainer.appendChild(flameIcon);
streakContainer.appendChild(streakCount);
habitItem.appendChild(streakContainer);
@@ -172,9 +177,10 @@ async function addHabit() {
}
}
async function openHabitModal(habitId, habitName, completedDates) {
async function openHabitModal(habitId, habitName, completedDates, habitColor = '#4CAF50') {
currentHabitId = habitId;
currentHabitCompletedDates = completedDates;
currentHabitColor = habitColor;
currentModalDate = new Date(); // Reset to current month
modalHabitName.textContent = habitName;
@@ -183,6 +189,16 @@ async function openHabitModal(habitId, habitName, completedDates) {
modalEditBtn.dataset.habitId = habitId;
modalDeleteBtn.dataset.habitId = habitId;
// Set color picker to current habit color
document.getElementById('habitColorPicker').value = habitColor;
// Set CSS variable for modal elements
dateModal.style.setProperty('--current-habit-color', habitColor);
// Set contrast color for text on colored backgrounds
const contrastColor = getContrastColor(habitColor);
dateModal.style.setProperty('--current-habit-text-color', contrastColor);
renderModalCalendar();
dateModal.style.display = 'flex';
}
@@ -404,4 +420,61 @@ async function toggleTodayCompletion(habitId, date, buttonElement) {
} catch (error) {
console.error('Error toggling habit completion:', error);
}
}
async function updateHabitColor() {
if (!currentHabitId) {
console.error('No habit selected for color update.');
return;
}
const newColor = document.getElementById('habitColorPicker').value;
currentHabitColor = newColor;
try {
const response = await fetch(`/habits/${currentHabitId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ color: newColor })
});
const data = await response.json();
if (response.ok) {
// Update CSS variable for modal elements
dateModal.style.setProperty('--current-habit-color', newColor);
// Update contrast color for text on colored backgrounds
const contrastColor = getContrastColor(newColor);
dateModal.style.setProperty('--current-habit-text-color', contrastColor);
// Update modal calendar colors immediately
updateModalColors(newColor);
// Refresh habits list to show new color
fetchHabits();
} else {
console.error('Failed to update habit color:', data.error);
}
} catch (error) {
console.error('Error updating habit color:', error);
}
}
function updateModalColors(color) {
// Update completed date cells in modal
const completedCells = modalDateGrid.querySelectorAll('.date-cell.completed');
completedCells.forEach(cell => {
cell.style.backgroundColor = color;
});
}
function getContrastColor(hexColor) {
// Convert hex to RGB
const r = parseInt(hexColor.slice(1, 3), 16);
const g = parseInt(hexColor.slice(3, 5), 16);
const b = parseInt(hexColor.slice(5, 7), 16);
// Calculate luminance
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
// Return dark text for light colors, light text for dark colors
return luminance > 0.5 ? '#333333' : '#ffffff';
}