chris/timepulse
chris/timepulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add time elapsed instead of running

Browse Source
This commit is contained in:
chris 2025-08-02 09:03:36 -04:00
parent b005af58a2
commit a4d737111c
1 changed files with 91 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/index.html
View File

@ -53,6 +53,7 @@
const navUserControls = document.getElementById('nav-user-controls'), welcomeMessage = document.getElementById('welcome-message'), signOutBtn = document.getElementById('sign-out-btn');
const messageBox = document.getElementById('message-box'), loadingSpinner = document.getElementById('loading-spinner'), modalContainer = document.getElementById('modal-container');
let authToken, user, allTimeEntries = [], allUsers = [], employeeTimerInterval = null;
let adminTimerIntervals = [];
// --- Helper Functions ---
const showLoading = (show) => { loadingSpinner.innerHTML = show ? `<div class="inline-block animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>` : ''; };
@ -104,8 +105,13 @@
}
// --- View Management ---
// --- View Management ---
const showView = (viewName) => {
// Clear all timers when the view changes
clearInterval(employeeTimerInterval);
adminTimerIntervals.forEach(clearInterval);
adminTimerIntervals = [];
Object.keys(mainViews).forEach(v => mainViews[v].classList.toggle('hidden', v !== viewName));
}
@ -252,7 +258,7 @@
<span class="font-medium text-gray-800">${e.username}</span>
<div class="flex items-center space-x-4">
<span class="text-sm text-gray-500">Since: ${formatDateTime(e.punch_in_time)}</span>
<button class="force-clock-out-btn px-3 py-1 text-xs bg-red-500 text-white rounded whitespace-nowrap" data-userid="${e.user_id}">Force Clock Out</button>
<button class="force-clock-out-btn px-3 py-1 text-xs bg-red-500 text-white rounded whitespace-nowrap" data-userid="${e.user_id}" data-username="${e.username}">Force Clock Out</button>
</div>
</li>`).join('') || '<li class="p-4 text-center text-gray-500">None</li>'}
</ul>
@ -270,7 +276,7 @@
</div>
<div class="bg-white rounded-xl shadow-md p-6">
<h3 class="text-xl font-bold text-gray-700 mb-4">Detailed Logs</h3>
<div class="overflow-x-auto border rounded-lg"><table class="min-w-full text-sm text-left"><thead class="bg-gray-50"><tr><th class="p-2">Employee</th><th class="p-2">In</th><th class="p-2">Out</th><th class="p-2">Duration</th><th class="p-2">Actions</th></tr></thead><tbody>${allTimeEntries.map(e => `<tr class="border-t"><td class="p-2">${e.username||'N/A'}</td><td class="p-2">${formatDateTime(e.punch_in_time)}</td><td class="p-2">${formatDateTime(e.punch_out_time)}</td><td class="p-2">${e.punch_out_time ? formatDecimal(new Date(e.punch_out_time) - new Date(e.punch_in_time)) : 'Running'}</td><td class="p-2 space-x-2"><button class="edit-btn font-medium text-blue-600 hover:underline" data-id="${e.id}">Edit</button><button class="delete-btn font-medium text-red-600 hover:underline" data-id="${e.id}">Delete</button></td></tr>`).join('')}</tbody></table></div>
<div class="overflow-x-auto border rounded-lg"><table class="min-w-full text-sm text-left"><thead class="bg-gray-50"><tr><th class="p-2">Employee</th><th class="p-2">In</th><th class="p-2">Out</th><th class="p-2">Duration</th><th class="p-2">Actions</th></tr></thead><tbody>${allTimeEntries.map(e => `<tr class="border-t"><td class="p-2">${e.username||'N/A'}</td><td class="p-2">${formatDateTime(e.punch_in_time)}</td><td class="p-2">${formatDateTime(e.punch_out_time)}</td><td class="p-2" id="admin-duration-${e.id}">${e.punch_out_time ? formatDecimal(new Date(e.punch_out_time) - new Date(e.punch_in_time)) + ' hrs' : '...'}</td><td class="p-2 space-x-2"><button class="edit-btn font-medium text-blue-600 hover:underline" data-id="${e.id}">Edit</button><button class="delete-btn font-medium text-red-600 hover:underline" data-id="${e.id}">Delete</button></td></tr>`).join('')}</tbody></table></div>
</div>
<div class="bg-white rounded-xl shadow-md p-6">
<h3 class="text-xl font-bold text-gray-700 mb-4">User & Payroll Management</h3>
@ -281,6 +287,19 @@
<div class="mt-6"><h4 class="font-semibold mb-2">Manage Users</h4><div class="overflow-x-auto border rounded-lg"><table class="min-w-full text-sm text-left"><thead class="bg-gray-50"><tr><th class="p-2">Username</th><th class="p-2">Role</th><th class="p-2">Actions</th></tr></thead><tbody>${allUsers.map(u => `<tr class="border-t"><td class="p-2 font-medium">${u.username}</td><td class="p-2 capitalize">${u.role}</td><td class="p-2 space-x-2">${u.isPrimary ? `<span class="text-sm text-gray-500">Primary Admin</span>` : `<button class="reset-pw-btn font-medium text-blue-600 hover:underline" data-username="${u.username}">Reset PW</button><button class="change-role-btn font-medium text-purple-600 hover:underline" data-username="${u.username}" data-role="${u.role}">${u.role === 'admin' ? 'Demote' : 'Promote'}</button>${u.username !== user.username ? `<button class="delete-user-btn font-medium text-red-600 hover:underline" data-username="${u.username}">Delete</button>` : ''}`}</td></tr>`).join('')}</tbody></table></div></div>
</div>
</div>`;
// ** NEW: Start timers for all currently punched-in users **
punchedInEntries.forEach(entry => {
const durationCell = document.getElementById(`admin-duration-${entry.id}`);
if (durationCell) {
const punchInTime = new Date(entry.punch_in_time);
const intervalId = setInterval(() => {
durationCell.textContent = formatDuration(Date.now() - punchInTime.getTime());
}, 1000);
adminTimerIntervals.push(intervalId); // Store the timer to clear it later
}
});
document.getElementById('archive-btn').addEventListener('click', handleArchive);
document.getElementById('view-archives-btn').addEventListener('click', renderArchiveView);
document.getElementById('view-time-off-history-btn').addEventListener('click', renderTimeOffHistoryView);