maggot/timetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor checkbox column for consistent layout in entries table

Browse Source
This commit is contained in:
Felix Schlusche
2025-10-23 02:18:09 +02:00
parent 06176350b8
commit 720b3d2d03
2 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/app.js
View File

@@ -690,13 +690,13 @@ function renderEntries(entries) {
const locationIcon = location === 'home' ? '🏠' : '🏢'; const locationIcon = location === 'home' ? '🏠' : '🏢';
const locationText = location === 'home' ? 'Home' : 'Büro'; const locationText = location === 'home' ? 'Home' : 'Büro';
// Checkbox column (only in bulk edit mode) // Checkbox column (always present for consistent layout)
const checkboxCell = bulkEditMode ? ` const checkboxCell = bulkEditMode ? `
<td class="px-2 py-4 whitespace-nowrap text-center"> <td class="px-2 py-4 whitespace-nowrap text-center">
<input type="checkbox" class="entry-checkbox w-5 h-5 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500" <input type="checkbox" class="entry-checkbox w-5 h-5 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"
data-id="${entry.id}" ${selectedEntries.has(entry.id) ? 'checked' : ''}> data-id="${entry.id}" ${selectedEntries.has(entry.id) ? 'checked' : ''}>
</td> </td>
` : ''; ` : '<td class="hidden"></td>';
row.innerHTML = checkboxCell + ` row.innerHTML = checkboxCell + `
<td class="px-2 py-4 whitespace-nowrap text-sm font-medium ${weekend ? 'text-blue-400' : 'text-gray-100'}">${dayOfWeek}</td> <td class="px-2 py-4 whitespace-nowrap text-sm font-medium ${weekend ? 'text-blue-400' : 'text-gray-100'}">${dayOfWeek}</td>
@@ -821,13 +821,13 @@ function renderMonthlyView(entries) {
const locationIcon = location === 'home' ? '🏠' : '🏢'; const locationIcon = location === 'home' ? '🏠' : '🏢';
const locationText = location === 'home' ? 'Home' : 'Büro'; const locationText = location === 'home' ? 'Home' : 'Büro';
// Checkbox column (only in bulk edit mode) // Checkbox column (always present for consistent layout)
const checkboxCell = bulkEditMode ? ` const checkboxCell = bulkEditMode ? `
<td class="px-2 py-4 whitespace-nowrap text-center"> <td class="px-2 py-4 whitespace-nowrap text-center">
<input type="checkbox" class="entry-checkbox w-5 h-5 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500" <input type="checkbox" class="entry-checkbox w-5 h-5 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"
data-id="${entry.id}" ${selectedEntries.has(entry.id) ? 'checked' : ''}> data-id="${entry.id}" ${selectedEntries.has(entry.id) ? 'checked' : ''}>
</td> </td>
` : ''; ` : '<td class="hidden"></td>';
row.innerHTML = checkboxCell + ` row.innerHTML = checkboxCell + `
<td class="px-2 py-4 whitespace-nowrap text-sm font-medium ${weekend ? 'text-blue-400' : 'text-gray-100'}">${dayOfWeek}</td> <td class="px-2 py-4 whitespace-nowrap text-sm font-medium ${weekend ? 'text-blue-400' : 'text-gray-100'}">${dayOfWeek}</td>
@@ -866,9 +866,9 @@ function renderMonthlyView(entries) {
row.className = weekend ? 'hover:bg-gray-700 bg-gray-700' : 'hover:bg-gray-700 bg-red-900'; row.className = weekend ? 'hover:bg-gray-700 bg-gray-700' : 'hover:bg-gray-700 bg-red-900';
// Empty checkbox cell in bulk edit mode // Empty checkbox cell (always present for consistent layout)
const checkboxCell = bulkEditMode ? '<td class="px-2 py-4"></td>' : ''; const checkboxCell = bulkEditMode ? '<td class="px-2 py-4"></td>' : '<td class="hidden"></td>';
const colspan = bulkEditMode ? '6' : '5'; const colspan = bulkEditMode ? '5' : '5';
row.innerHTML = checkboxCell + ` row.innerHTML = checkboxCell + `
<td class="px-2 py-4 whitespace-nowrap text-sm font-medium ${weekend ? 'text-blue-400' : 'text-gray-100'}">${dayOfWeek}</td> <td class="px-2 py-4 whitespace-nowrap text-sm font-medium ${weekend ? 'text-blue-400' : 'text-gray-100'}">${dayOfWeek}</td>

20
public/index.html
View File

@@ -308,20 +308,20 @@
<!-- Entries Table --> <!-- Entries Table -->
<div class="bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-700"> <div class="bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-700">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full table-fixed"> <table class="w-full">
<thead class="bg-gray-700 border-b border-gray-600"> <thead class="bg-gray-700 border-b border-gray-600">
<tr> <tr>
<th id="checkboxHeader" class="hidden w-12 px-2 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider"> <th id="checkboxHeader" class="hidden px-2 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">
<input type="checkbox" id="masterCheckbox" class="w-5 h-5 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500" title="Alle auswählen/abwählen"> <input type="checkbox" id="masterCheckbox" class="w-5 h-5 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500" title="Alle auswählen/abwählen">
</th> </th>
<th class="w-12 px-2 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Tag</th> <th class="px-2 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Tag</th>
<th class="w-28 px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Datum</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Datum</th>
<th class="w-20 px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Start</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Start</th>
<th class="w-20 px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Ende</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Ende</th>
<th class="w-28 px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Pause (Min)</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Pause (Min)</th>
<th class="w-28 px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Netto (Std)</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Netto (Std)</th>
<th class="w-24 px-6 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">Ort</th> <th class="px-6 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">Ort</th>
<th class="w-24 px-6 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">Action</th> <th class="px-6 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">Action</th>
</tr> </tr>
</thead> </thead>
<tbody id="entriesTableBody" class="bg-gray-800 divide-y divide-gray-700"> <tbody id="entriesTableBody" class="bg-gray-800 divide-y divide-gray-700">