fix issues clocking in
This commit is contained in:
parent
91807d41e5
commit
fd343cb6a6
@ -52,7 +52,10 @@
|
||||
const mainViews = { auth: document.getElementById('auth-view'), employee: document.getElementById('employee-dashboard'), admin: document.getElementById('admin-dashboard'), archive: document.getElementById('admin-archive-view'), timeOffHistory: document.getElementById('admin-time-off-history-view') };
|
||||
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');
|
||||
|
||||
// **FIXED**: Declared variables safely without parsing immediately.
|
||||
let authToken, user, allTimeEntries = [], allUsers = [], employeeTimerInterval = null;
|
||||
|
||||
// --- 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>` : '';
|
||||
const showMessage = (message, type = 'success') => { messageBox.innerHTML = `<div class="p-4 mb-4 text-sm rounded-lg flex items-center justify-between ${type === 'error' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}" role="alert"><span>${message}</span><button onclick="messageBox.classList.add('hidden')" class="font-bold text-lg">×</button></div>`; messageBox.classList.remove('hidden'); };
|
||||
@ -72,25 +75,33 @@
|
||||
const response = await fetch(`${API_BASE_URL}${endpoint}`, { method, headers, body: body ? JSON.stringify(body) : null });
|
||||
if (response.status === 401) { handleSignOut('Your session has expired. Please log in again.'); return { success: false }; }
|
||||
const text = await response.text();
|
||||
if (!response.ok) throw new Error(JSON.parse(text).message || `HTTP error ${response.status}`);
|
||||
if (!response.ok) {
|
||||
const errorData = text ? JSON.parse(text) : {};
|
||||
throw new Error(errorData.message || `HTTP error ${response.status}`);
|
||||
}
|
||||
return { success: true, data: text ? JSON.parse(text) : null };
|
||||
} catch (error) { showMessage(error.message, 'error'); return { success: false };
|
||||
} finally { showLoading(false); }
|
||||
} catch (error) {
|
||||
showMessage(error.message, 'error');
|
||||
return { success: false };
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// --- View Management ---
|
||||
const showView = (viewName) => { clearInterval(employeeTimerInterval); Object.keys(mainViews).forEach(v => mainViews[v].classList.toggle('hidden', v !== viewName)); }
|
||||
|
||||
// --- UI Rendering ---
|
||||
// **FIXED**: This function now safely handles loading from localStorage.
|
||||
function updateUI() {
|
||||
try {
|
||||
const storedUser = localStorage.getItem('user');
|
||||
user = storedUser ? JSON.parse(storedUser) : null;
|
||||
authToken = localStorage.getItem('authToken');
|
||||
user = storedUser ? JSON.parse(storedUser) : null;
|
||||
|
||||
if (authToken && user) {
|
||||
navUserControls.classList.remove('hidden');
|
||||
welcomeMessage.textContent = `${user.username}`;
|
||||
welcomeMessage.textContent = `Welcome, ${user.username}`;
|
||||
user.role === 'admin' ? (showView('admin'), renderAdminDashboard()) : (showView('employee'), renderEmployeeDashboard());
|
||||
} else {
|
||||
navUserControls.classList.add('hidden');
|
||||
@ -98,7 +109,7 @@
|
||||
renderAuthView();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error in updateUI:", error);
|
||||
console.error("Error initializing UI:", error);
|
||||
handleSignOut("There was an error loading your session.");
|
||||
}
|
||||
}
|
||||
@ -166,10 +177,7 @@
|
||||
mainViews.admin.innerHTML = `
|
||||
<div class="max-w-6xl mx-auto space-y-8">
|
||||
<div class="bg-white rounded-xl shadow-md p-6"><div class="flex justify-between items-center mb-4"><h2 class="text-2xl font-bold">Admin Dashboard</h2><div class="space-x-2"><button id="view-archives-btn" class="px-4 py-2 bg-gray-500 text-white rounded-lg">View Archives</button><button id="archive-btn" class="px-4 py-2 bg-amber-500 text-white rounded-lg">Archive Records</button></div></div></div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md p-6">
|
||||
<h3 class="text-xl font-bold text-gray-700 mb-2">Currently Punched In</h3>
|
||||
<ul id="punched-in-list" class="border rounded-lg divide-y">${punchedInEntries.map(e => `
|
||||
<div class="bg-white rounded-xl shadow-md p-6"><h3 class="text-xl font-bold text-gray-700 mb-2">Currently Punched In</h3><ul id="punched-in-list" class="border rounded-lg divide-y">${punchedInEntries.map(e => `
|
||||
<li class="flex flex-col items-start space-y-2 p-3 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
|
||||
<span class="font-medium text-gray-800">${e.username}</span>
|
||||
<div class="flex items-center space-x-4">
|
||||
@ -177,9 +185,7 @@
|
||||
<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}">Clock Out</button>
|
||||
</div>
|
||||
</li>
|
||||
`).join('') || '<li class="p-4 text-center">None</li>'}</ul>
|
||||
</div>
|
||||
|
||||
`).join('') || '<li class="p-4 text-center">None</li>'}</ul></div>
|
||||
<div class="bg-white rounded-xl shadow-md p-6"><div class="flex justify-between items-center mb-4"><h3 class="text-xl font-bold text-gray-700">Pending Time Off Requests</h3><button id="view-time-off-history-btn" class="px-4 py-2 text-sm bg-gray-200 rounded-lg">View History</button></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">Dates</th><th class="p-2">Reason</th><th class="p-2">Actions</th></tr></thead><tbody id="time-off-requests-table">${pendingRequests.map(r => `<tr class="border-t"><td class="p-2">${r.username}</td><td class="p-2">${formatDate(r.start_date)} - ${formatDate(r.end_date)}</td><td class="p-2">${r.reason||''}</td><td class="p-2 space-x-1"><button class="approve-request-btn text-green-600" data-id="${r.id}">Approve</button><button class="deny-request-btn text-red-600" data-id="${r.id}">Deny</button></td></tr>`).join('') || '<tr><td colspan="4" class="text-center p-4">No pending requests.</td></tr>'}</tbody></table></div></div>
|
||||
<div class="bg-white rounded-xl shadow-md p-6"><h3 class="text-xl font-bold text-gray-700 mb-2">Hours by Employee</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">Total Hours</th></tr></thead><tbody>${Object.keys(employeeTotals).map(u => `<tr class="border-t"><td class="p-2 font-medium">${u}</td><td class="p-2">${formatDecimal(employeeTotals[u])}</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">Detailed Logs</h3><div class="overflow-x-auto"><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 id="admin-table">${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">${formatDecimal(new Date(e.punch_out_time) - new Date(e.punch_in_time))}</td><td class="p-2 space-x-2"><button class="edit-btn text-blue-600" data-id="${e.id}">Edit</button><button class="delete-btn text-red-600" data-id="${e.id}">Delete</button></td></tr>`).join('')}</tbody></table></div></div>
|
||||
@ -268,19 +274,19 @@
|
||||
// --- Initializer ---
|
||||
signOutBtn.addEventListener('click', () => handleSignOut());
|
||||
updateUI();
|
||||
console.log("Attempting to register service worker...");
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
.then(registration => {
|
||||
console.log('✅ ServiceWorker registration successful with scope: ', registration.scope);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('❌ ServiceWorker registration failed: ', err);
|
||||
});
|
||||
});
|
||||
}
|
||||
// Service worker registration can be added back once the main app logic is stable.
|
||||
// if ('serviceWorker' in navigator) {
|
||||
// window.addEventListener('load', () => {
|
||||
// navigator.serviceWorker.register('/sw.js')
|
||||
// .then(registration => {
|
||||
// console.log('✅ ServiceWorker registration successful with scope: ', registration.scope);
|
||||
// })
|
||||
// .catch(err => {
|
||||
// console.log('❌ ServiceWorker registration failed: ', err);
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user