stefanosalemi/org-parking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: aggiunti: loggica random, tema scuro, correzioni mail, miglioramenti generali, cache;

Browse Source
This commit is contained in:
StefanoSalemi
2026-04-17 18:27:37 +02:00
parent a7ef46640d
commit 104ad53a9a
26 changed files with 861 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/css/styles.css
View File

@@ -16,6 +16,8 @@
--warning-bg: #fde68a;
--danger: #dc2626;
--danger-bg: #fee2e2;
--info: #3b82f6;
--info-bg: #dbeafe;
--text: #1f1f1f;
--text-secondary: #666;
--text-muted: #999;
@@ -25,6 +27,49 @@
--bg-white: #fff;
--sidebar-width: 260px;
--header-height: 64px;
--bg-weekend: #f5f5f5;
--bg-holiday: #fff7ed;
--bg-closed: #e5e7eb;
--text-closed: #9ca3af;
--border-closed: #d1d5db;
--spot-free-bg: #f0fdf4;
--spot-free-border: #22c55e;
--spot-free-text: #15803d;
--spot-occ-bg: #fefce8;
--spot-occ-border: #eab308;
--spot-occ-text: #a16207;
}
[data-theme='dark'] {
--primary: #60a5fa;
--primary-hover: #93c5fd;
--secondary: #9ca3af;
--success: #22c55e;
--success-bg: #064e3b;
--warning: #fbbf24;
--warning-bg: #78350f;
--danger: #ef4444;
--danger-bg: #7f1d1d;
--info: #60a5fa;
--info-bg: #1e3a8a;
--text: #f3f4f6;
--text-secondary: #9ca3af;
--text-muted: #6b7280;
--border: #374151;
--border-dark: #4b5563;
--bg: #111827;
--bg-white: #1f2937;
--bg-weekend: #111827; /* Dark background for weekend */
--bg-holiday: #451a03; /* Dark brown/orange for holiday */
--bg-closed: #374151; /* Gray-700 for closed */
--text-closed: #6b7280; /* Gray-500 for closed date text */
--border-closed: #4b5563; /* Gray-600 for closed border */
--spot-free-bg: #064e3b;
--spot-free-border: #059669;
--spot-free-text: #4ade80;
--spot-occ-bg: #422006;
--spot-occ-border: #ca8a04;
--spot-occ-text: #fde047;
}
/* ============================================================================
@@ -46,6 +91,31 @@ body {
min-height: 100vh;
}
/* ============================================================================
Dark mode global overrides for native browser elements
============================================================================ */
[data-theme='dark'] input,
[data-theme='dark'] select,
[data-theme='dark'] textarea {
background: var(--bg-white);
color: var(--text);
border-color: var(--border-dark);
color-scheme: dark;
}
[data-theme='dark'] input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}
[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
color: var(--text-muted);
}
[data-theme='dark'] .user-button:hover {
background: var(--bg);
}
a {
color: inherit;
text-decoration: none;
@@ -72,7 +142,7 @@ textarea {
top: 0;
bottom: 0;
width: var(--sidebar-width);
background: white;
background: var(--bg-white);
color: var(--text);
border-right: 1px solid var(--border);
display: flex;
@@ -183,7 +253,7 @@ textarea {
left: 0;
right: 0;
margin-bottom: 0.5rem;
background: white;
background: var(--bg-white);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
overflow: hidden;
@@ -226,7 +296,7 @@ textarea {
justify-content: space-between;
padding: 0 1.5rem;
min-height: 53px;
background: white;
background: var(--bg-white);
border-bottom: 1px solid var(--border);
gap: 0.75rem;
}
@@ -253,7 +323,7 @@ textarea {
Cards
============================================================================ */
.card {
background: white;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem;
@@ -302,7 +372,7 @@ textarea {
}
.btn-secondary {
background: white;
background: var(--bg-white);
color: var(--text);
border: 1px solid var(--border-dark);
}
@@ -330,10 +400,12 @@ textarea {
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
}
.btn-icon:hover {
background: var(--bg);
color: var(--text);
}
.btn-full {
@@ -364,7 +436,8 @@ textarea {
font-size: 0.9rem;
border: 1px solid var(--border-dark);
border-radius: 6px;
background: white;
background: var(--bg-white);
color: var(--text);
}
.form-input:focus,
@@ -430,7 +503,7 @@ textarea {
}
.modal-content {
background: white;
background: var(--bg-white);
border-radius: 12px;
width: 100%;
max-width: 480px;
@@ -490,12 +563,12 @@ textarea {
.message.success {
background: var(--success-bg);
color: #166534;
color: var(--success);
}
.message.error {
background: var(--danger-bg);
color: #991b1b;
color: var(--danger);
}
.badge {
@@ -508,17 +581,17 @@ textarea {
.badge-success {
background: var(--success-bg);
color: #166534;
color: var(--success);
}
.badge-warning {
background: var(--warning-bg);
color: #92400e;
color: var(--warning);
}
.badge-danger {
background: var(--danger-bg);
color: #991b1b;
color: var(--danger);
}
/* ============================================================================
@@ -591,11 +664,11 @@ textarea {
}
.calendar-day.weekend {
background: #f5f5f5;
background: var(--bg-weekend);
}
.calendar-day.holiday {
background: #fff7ed;
background: var(--bg-holiday);
}
.calendar-day.today {
@@ -643,8 +716,8 @@ textarea {
}
.status-remote {
background: #dbeafe !important;
border-color: #3b82f6 !important;
background: var(--info-bg) !important;
border-color: var(--info) !important;
}
.status-absent {
@@ -658,19 +731,19 @@ textarea {
}
.status-nodata {
background: white;
background: var(--bg-white);
}
/* Closed Day */
.calendar-day.closed {
background: #e5e7eb;
color: #9ca3af;
background: var(--bg-closed);
color: var(--text-closed);
cursor: not-allowed;
border-color: #d1d5db;
border-color: var(--border-closed);
}
.calendar-day.closed:hover {
border-color: #d1d5db;
border-color: var(--border-closed);
}
.calendar-day.closed .day-number {
@@ -678,8 +751,8 @@ textarea {
}
.team-calendar td.closed {
background: #e5e7eb;
color: #9ca3af;
background: var(--bg-closed);
color: var(--text-closed);
cursor: not-allowed;
}
@@ -723,7 +796,7 @@ textarea {
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: white;
background: var(--bg-white);
border: 2px solid var(--border);
border-radius: 8px;
cursor: pointer;
@@ -789,12 +862,12 @@ textarea {
.team-calendar th.weekend,
.team-calendar td.weekend {
background: #f5f5f5;
background: var(--bg-weekend);
}
.team-calendar th.holiday,
.team-calendar td.holiday {
background: #fff7ed;
background: var(--bg-holiday);
}
.team-calendar th.today {
@@ -820,7 +893,7 @@ textarea {
min-width: 150px;
position: sticky;
left: 0;
background: white;
background: var(--bg-white);
z-index: 1;
}
@@ -828,7 +901,7 @@ textarea {
text-align: left !important;
position: sticky;
left: 0;
background: white;
background: var(--bg-white);
z-index: 1;
}
@@ -880,7 +953,7 @@ textarea {
}
.parking-spot {
background: white;
background: var(--bg-white);
border: 2px solid var(--border);
border-radius: 8px;
padding: 1rem;
@@ -1009,7 +1082,7 @@ textarea {
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
background-color: var(--bg-white);
transition: 0.3s;
border-radius: 50%;
}
@@ -1034,7 +1107,7 @@ textarea {
}
.auth-card {
background: white;
background: var(--bg-white);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 2.5rem;
@@ -1078,7 +1151,7 @@ textarea {
.settings-section,
.profile-section {
background: white;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
@@ -1136,6 +1209,8 @@ textarea {
border-radius: 4px;
font-size: 0.9rem;
min-width: 140px;
background: var(--bg-white);
color: var(--text);
}
.profile-field {
@@ -1194,7 +1269,7 @@ textarea {
}
.rule-section {
background: white;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
@@ -1265,7 +1340,7 @@ textarea {
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: white;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 4px;
}
@@ -1298,14 +1373,15 @@ textarea {
border: 1px solid var(--border-dark);
border-radius: 4px;
font-size: 0.9rem;
background: white;
background: var(--bg-white);
color: var(--text);
}
/* ============================================================================
Admin Tables
============================================================================ */
.admin-table {
background: white;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
@@ -1433,12 +1509,18 @@ textarea {
.team-calendar-table th.weekend,
.team-calendar-table td.weekend {
background: #f5f5f5;
background: var(--bg-weekend);
}
.team-calendar-table th.holiday,
.team-calendar-table td.holiday {
background: #fff7ed;
background: var(--bg-holiday);
}
.team-calendar-table th.closed,
.team-calendar-table td.closed {
background: var(--bg-closed);
color: var(--text-closed);
}
.team-calendar-table .member-name {
@@ -1482,7 +1564,7 @@ textarea {
}
.team-calendar-table .calendar-cell.status-remote {
background: #dbeafe !important;
background: var(--info-bg) !important;
border-color: var(--border) !important;
}
@@ -1530,8 +1612,8 @@ textarea {
.parking-badge-sm {
display: inline-block;
background: #dbeafe;
color: #1e40af;
background: var(--info-bg);
color: var(--info);
font-size: 0.55rem;
font-weight: 600;
padding: 0.1rem 0.25rem;
@@ -1647,7 +1729,8 @@ textarea {
border: 1px solid var(--border-dark);
border-radius: 6px;
font-size: 0.9rem;
background: white;
background: var(--bg-white);
color: var(--text);
min-width: 150px;
}

16
frontend/js/admin-offices.js
View File

@@ -59,7 +59,7 @@ function renderOffices() {
const tbody = document.getElementById('officesBody');
if (offices.length === 0) {
tbody.innerHTML = '<tr><td colspan="5" class="text-center">Nessun ufficio trovato</td></tr>';
tbody.innerHTML = '<tr><td colspan="5" class="text-center">Nessun gruppo trovato</td></tr>';
return;
}
@@ -72,7 +72,7 @@ function renderOffices() {
<td>${office.user_count || 0} utenti</td>
<td>
<button class="btn btn-sm btn-secondary" onclick="editOffice('${office.id}')">Modifica</button>
<button class="btn btn-sm btn-danger" onclick="deleteOffice('${office.id}')" ${office.user_count > 0 ? 'title="Impossibile eliminare uffici con utenti" disabled' : ''}>Elimina</button>
<button class="btn btn-sm btn-danger" onclick="deleteOffice('${office.id}')" ${office.user_count > 0 ? 'title="Impossibile eliminare gruppi con utenti" disabled' : ''}>Elimina</button>
</td>
</tr>
`;
@@ -103,30 +103,30 @@ async function editOffice(officeId) {
document.getElementById('officeCutoffHour').value = office.booking_window_end_hour != null ? office.booking_window_end_hour : 18;
document.getElementById('officeCutoffMinute').value = office.booking_window_end_minute != null ? office.booking_window_end_minute : 0;
openModal('Modifica Ufficio');
openModal('Modifica Gruppo');
}
async function deleteOffice(officeId) {
const office = offices.find(o => o.id === officeId);
if (!office) return;
if (!confirm(`Eliminare l'ufficio "${office.name}"?`)) return;
if (!confirm(`Eliminare il gruppo "${office.name}"?`)) return;
const response = await api.delete(`/api/offices/${officeId}`);
if (response && response.ok) {
utils.showMessage('Ufficio eliminato', 'success');
utils.showMessage('Gruppo eliminato', 'success');
api.invalidateCache('/api/offices'); // Clear cache
await loadOffices();
} else {
const error = await response.json();
utils.showMessage(error.detail || 'Impossibile eliminare l\'ufficio', 'error');
utils.showMessage(error.detail || 'Impossibile eliminare il gruppo', 'error');
}
}
function setupEventListeners() {
// Add button
document.getElementById('addOfficeBtn').addEventListener('click', () => {
openModal('Nuovo Ufficio');
openModal('Nuovo Gruppo');
});
// Modal close
@@ -177,7 +177,7 @@ async function handleOfficeSubmit(e) {
if (response && response.ok) {
closeModal();
utils.showMessage(officeId ? 'Ufficio aggiornato' : 'Ufficio creato', 'success');
utils.showMessage(officeId ? 'Gruppo aggiornato' : 'Gruppo creato', 'success');
api.invalidateCache('/api/offices'); // Clear cache
await loadOffices();
} else {

2
frontend/js/admin-users.js
View File

@@ -129,7 +129,7 @@ async function editUser(userId) {
// Populate office dropdown
const officeSelect = document.getElementById('editOffice');
officeSelect.innerHTML = '<option value="">Nessun ufficio</option>';
officeSelect.innerHTML = '<option value="">Nessun gruppo</option>';
offices.forEach(o => {
const option = document.createElement('option');
option.value = o.id;

56
frontend/js/nav.js
View File

@@ -42,6 +42,20 @@ const ICONS = {
settings: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>`,
sun: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>`,
moon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>`
};
@@ -50,8 +64,8 @@ const NAV_ITEMS = [
{ href: '/team-calendar', icon: 'users', label: 'Calendario del team' },
{ href: '/team-rules', icon: 'rules', label: 'Regole parcheggio', roles: ['admin', 'manager'] },
{ href: '/admin/users', icon: 'user', label: 'Gestione Utenti', roles: ['admin'] },
{ href: '/admin/offices', icon: 'building', label: 'Gestione Uffici', roles: ['admin'] },
{ href: '/parking-settings', icon: 'settings', label: 'Impostazioni Ufficio', roles: ['admin', 'manager'] }
{ href: '/admin/offices', icon: 'building', label: 'Gestione Gruppi', roles: ['admin'] },
{ href: '/parking-settings', icon: 'settings', label: 'Impostazioni Gruppi', roles: ['admin', 'manager'] }
];
function getIcon(name) {
@@ -98,9 +112,10 @@ async function initNav() {
// Setup user menu (logout) & mobile menu
setupUserMenu();
setupMobileMenu();
setupThemeToggle();
// CHECK: Block access if user has no office (and is not admin)
// Admins are allowed to access "Gestione Uffici" even without an office
// Admins are allowed to access "Gestione Gruppi" even without an office
if (currentUser && !currentUser.office_id && currentUser.role !== 'admin') {
navContainer.innerHTML = ''; // Clear nav
@@ -124,14 +139,14 @@ async function initNav() {
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
</div>
<h2 style="margin-bottom: 1rem;">Ufficio non assegnato</h2>
<h2 style="margin-bottom: 1rem;">Gruppo non assegnato</h2>
<p class="text-secondary" style="margin-bottom: 1.5rem; line-height: 1.6;">
Il tuo account <strong>${currentUser.email}</strong> è attivo, ma non sei ancora stato assegnato a nessuno ufficio.
Il tuo account <strong>${currentUser.email}</strong> è attivo, ma non sei ancora stato assegnato a nessuno gruppo.
</p>
<div style="padding: 1.5rem; background: #f8fafc; border-radius: 8px; text-align: left;">
<div style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">Cosa fare?</div>
<div style="font-size: 0.95rem; color: var(--text-secondary);">
Contatta l'amministratore di sistema per richiedere l'assegnazione al tuo ufficio di competenza.<br>
Contatta l'amministratore di sistema per richiedere l'assegnazione al tuo gruppo di competenza.<br>
<a href="mailto:s.salemi@sielte.it" style="color: var(--primary); text-decoration: none; font-weight: 500; margin-top: 0.5rem; display: inline-block;">s.salemi@sielte.it</a>
</div>
</div>
@@ -212,6 +227,35 @@ function setupUserMenu() {
}
}
function setupThemeToggle() {
// Apply immediate theme to avoid flash
const savedTheme = localStorage.getItem('theme') || 'system';
applyTheme(savedTheme);
// Watch for system theme changes if set to system
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (localStorage.getItem('theme') === 'system') {
applyTheme('system');
}
});
}
function applyTheme(theme) {
let isDark = false;
if (theme === 'system') {
isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
} else {
isDark = theme === 'dark';
}
if (isDark) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.removeAttribute('data-theme');
}
localStorage.setItem('theme', theme);
}
// Export for use in other scripts
window.getIcon = getIcon;

16
frontend/js/parking-settings.js
View File

@@ -49,7 +49,7 @@ async function loadOffices() {
}
} catch (e) {
console.error(e);
utils.showMessage('Errore caricamento uffici', 'error');
utils.showMessage('Errore caricamento gruppi', 'error');
}
} else {
// Manager uses their own office
@@ -58,7 +58,7 @@ async function loadOffices() {
if (currentUser.office_id) {
await loadOfficeSettings(currentUser.office_id);
} else {
utils.showMessage('Nessun ufficio assegnato al manager', 'error');
utils.showMessage('Nessun gruppo assegnato al manager', 'error');
}
}
}
@@ -86,7 +86,7 @@ function populateHourSelect() {
async function loadOfficeSettings(id) {
const officeId = id;
if (!officeId) {
utils.showMessage('Nessun ufficio selezionato', 'error');
utils.showMessage('Nessun gruppo selezionato', 'error');
return;
}
@@ -98,6 +98,7 @@ async function loadOfficeSettings(id) {
currentOffice = office;
// Populate form
document.getElementById('assignmentModeSelect').value = office.assignment_mode || 'fairness';
document.getElementById('bookingWindowEnabled').checked = office.booking_window_enabled || false;
document.getElementById('bookingWindowHour').value = office.booking_window_end_hour ?? 18; // Default 18
document.getElementById('bookingWindowMinute').value = office.booking_window_end_minute ?? 0;
@@ -136,6 +137,7 @@ function setupEventListeners() {
if (!currentOffice) return;
const data = {
assignment_mode: document.getElementById('assignmentModeSelect').value,
booking_window_enabled: document.getElementById('bookingWindowEnabled').checked,
booking_window_end_hour: parseInt(document.getElementById('bookingWindowHour').value),
booking_window_end_minute: parseInt(document.getElementById('bookingWindowMinute').value)
@@ -242,7 +244,7 @@ function setupEventListeners() {
const clearPresenceBtn = document.getElementById('clearPresenceBtn');
if (clearPresenceBtn) {
clearPresenceBtn.addEventListener('click', async () => {
if (!confirm('ATTENZIONE: Stai per eliminare TUTTI GLI STATI (Presente/Assente/ecc) e relative assegnazioni per tutti gli utenti dell\'ufficio nel periodo selezionato. \n\nQuesta azione è irreversibile. Procedere?')) return;
if (!confirm('ATTENZIONE: Stai per eliminare TUTTI GLI STATI (Presente/Assente/ecc) e relative assegnazioni per tutti gli utenti del gruppo nel periodo selezionato. \n\nQuesta azione è irreversibile. Procedere?')) return;
const dateStart = document.getElementById('testDateStart').value;
const dateEnd = document.getElementById('testDateEnd').value;
@@ -251,7 +253,7 @@ function setupEventListeners() {
// Validate office
if (!currentOffice || !currentOffice.id) {
return utils.showMessage('Errore: Nessun ufficio selezionato', 'error');
return utils.showMessage('Errore: Nessun gruppo selezionato', 'error');
}
const endDateVal = dateEnd || dateStart;
@@ -286,7 +288,7 @@ function setupEventListeners() {
// Validate office
if (!currentOffice || !currentOffice.id) {
return utils.showMessage('Errore: Nessun ufficio selezionato', 'error');
return utils.showMessage('Errore: Nessun gruppo selezionato', 'error');
}
utils.showMessage('Invio mail di test in corso...', 'warning');
@@ -329,7 +331,7 @@ function setupEventListeners() {
// Validate office
if (!currentOffice || !currentOffice.id) {
return utils.showMessage('Errore: Nessun ufficio selezionato', 'error');
return utils.showMessage('Errore: Nessun gruppo selezionato', 'error');
}
if (!dateVal) {

175
frontend/js/presence.js
View File

@@ -175,11 +175,12 @@ function renderCalendar() {
return date >= start && date <= end;
});
const isClosed = isWeeklyClosed || isSpecificClosed;
const isClosed = isHoliday || isWeeklyClosed || isSpecificClosed;
if (isClosed) {
cell.classList.add('closed');
cell.title = "Ufficio Chiuso";
if (isHoliday) cell.title = "Festività";
else cell.title = "Gruppo Chiuso";
} else if (presence) {
cell.classList.add(`status-${presence.status}`);
}
@@ -418,10 +419,10 @@ function initParkingStatus() {
if (headerDisplay) headerDisplay.textContent = currentUser.office_name;
} else {
const nameDisplay = document.getElementById('statusOfficeName');
if (nameDisplay) nameDisplay.textContent = 'Tuo Ufficio';
if (nameDisplay) nameDisplay.textContent = 'Tuo Gruppo';
const headerDisplay = document.getElementById('currentOfficeDisplay');
if (headerDisplay) headerDisplay.textContent = 'Tuo Ufficio';
if (headerDisplay) headerDisplay.textContent = 'Tuo Gruppo';
}
}
@@ -455,6 +456,34 @@ async function loadDailyStatus() {
const officeId = currentUser.office_id;
const grid = document.getElementById('spotsGrid');
const badge = document.getElementById('spotsCountBadge');
// Check if it's a closing day
const dayOfWeek = statusDate.getDay();
const isHoliday = utils.isItalianHoliday(statusDate);
const isWeeklyClosed = weeklyClosingDays.includes(dayOfWeek);
const isSpecificClosed = specificClosingDays.some(d => {
const start = new Date(d.date);
const end = d.end_date ? new Date(d.end_date) : start;
start.setHours(0, 0, 0, 0); end.setHours(0, 0, 0, 0);
const check = new Date(statusDate); check.setHours(0, 0, 0, 0);
return check >= start && check <= end;
});
if (isHoliday || isWeeklyClosed || isSpecificClosed) {
if (grid) {
grid.innerHTML = `
<div style="width:100%; text-align:center; padding:1rem 1rem; color: var(--text-secondary); background: var(--bg-hover); border-radius: 8px;">
<div style="font-size: 1.2rem; font-weight: 500;">Ufficio Chiuso</div>
<div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.8;">Nessun parcheggio disponibile in questa data.</div>
</div>`;
}
if (badge) badge.style.display = 'none';
return;
} else {
if (badge) badge.style.display = 'inline-block';
}
// Keep grid height to avoid jump if possible, or just loading styling
if (grid) grid.innerHTML = '<div style="width:100%; text-align:center; padding:2rem; color:var(--text-secondary);">Caricamento...</div>';
@@ -505,10 +534,9 @@ function renderParkingStatus(assignments) {
// Colors: Free = Green (default), Occupied = Yellow (requested)
// Yellow palette: Border #eab308, bg #fefce8, text #a16207, icon #eab308
const borderColor = isFree ? '#22c55e' : '#eab308';
const bgColor = isFree ? '#f0fdf4' : '#fefce8';
const textColor = isFree ? '#15803d' : '#a16207';
const iconColor = isFree ? '#22c55e' : '#eab308';
const borderColor = isFree ? 'var(--spot-free-border)' : 'var(--spot-occ-border)';
const bgColor = isFree ? 'var(--spot-free-bg)' : 'var(--spot-occ-bg)';
const textColor = isFree ? 'var(--spot-free-text)' : 'var(--spot-occ-text)';
const el = document.createElement('div');
el.className = 'spot-card';
@@ -527,15 +555,49 @@ function renderParkingStatus(assignments) {
transition: all 0.2s;
`;
// New Car Icon (Front Facing Sedan style or similar simple shape)
// Using a cleaner SVG path
el.innerHTML = `
<div style="font-weight: 600; font-size: 1.1rem; color: #1f2937;">${spotName}</div>
<div style="font-weight: 600; font-size: 1.1rem; color: var(--text);">${spotName}</div>
<div style="color: ${textColor}; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;" title="${statusText}">
${statusText}
</div>
`;
if (isFree && (currentUser.role === 'admin' || currentUser.role === 'manager')) {
el.style.cursor = 'pointer';
el.addEventListener('mouseenter', () => el.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)');
el.addEventListener('mouseleave', () => el.style.boxShadow = 'none');
el.title = "Clicca per assegnare manualmente";
el.addEventListener('click', () => {
openAdminAssignModal(a.spot_id, spotName);
});
}
if (!isFree && (currentUser.role === 'admin' || currentUser.role === 'manager')) {
el.style.cursor = 'pointer';
el.addEventListener('mouseenter', () => el.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)');
el.addEventListener('mouseleave', () => el.style.boxShadow = 'none');
el.title = "Clicca per liberare questo posto";
el.addEventListener('click', async () => {
if (!confirm(`Vuoi liberare il posto ${spotName} occupato da ${statusText}?`)) return;
utils.showMessage('Rilascio in corso...', 'warning');
const response = await api.post('/api/parking/reassign-spot', {
assignment_id: a.id,
new_user_id: null
});
if (response && response.ok) {
utils.showMessage('Posto liberato con successo', 'success');
loadDailyStatus();
loadParkingAssignments();
renderCalendar();
} else {
const err = await response.json();
utils.showMessage(err.detail || 'Impossibile liberare il posto', 'error');
}
});
}
grid.appendChild(el);
});
@@ -569,6 +631,97 @@ function setupStatusListeners() {
loadDailyStatus();
}
});
setupAdminAssignModal();
}
// ----------------------------------------------------------------------------
// Admin Manual Assign Logic
// ----------------------------------------------------------------------------
let currentManualSpotId = null;
function setupAdminAssignModal() {
const closeBtn = document.getElementById('closeAdminAssignModal');
const cancelBtn = document.getElementById('cancelAdminAssign');
const form = document.getElementById('adminAssignForm');
const modal = document.getElementById('adminAssignSpotModal');
if (closeBtn) closeBtn.addEventListener('click', () => modal.style.display = 'none');
if (cancelBtn) cancelBtn.addEventListener('click', () => modal.style.display = 'none');
if (form) {
form.addEventListener('submit', async (e) => {
e.preventDefault();
const targetUserId = document.getElementById('adminAssignUser').value;
if (!targetUserId || !currentManualSpotId) return;
const dateStr = utils.formatDate(statusDate);
utils.showMessage('Assegnazione in corso...', 'warning');
const response = await api.post('/api/parking/manual-assign', {
date: dateStr,
user_id: targetUserId,
spot_id: currentManualSpotId,
office_id: currentUser.office_id
});
if (response && response.ok) {
utils.showMessage('Posto assegnato con successo', 'success');
modal.style.display = 'none';
loadDailyStatus(); // refresh parking status grid
// optionally refresh my presences if it affected the logged in admin
loadParkingAssignments();
} else {
const err = await response.json();
utils.showMessage(err.detail || 'Impossibile assegnare il parcheggio', 'error');
}
});
}
}
async function openAdminAssignModal(spotId, spotName) {
currentManualSpotId = spotId;
const modal = document.getElementById('adminAssignSpotModal');
const infoDisplay = document.getElementById('adminAssignSpotInfo');
const selectUser = document.getElementById('adminAssignUser');
const dateStr = utils.formatDate(statusDate);
infoDisplay.innerHTML = `Seleziona l'utente a cui assegnare il posto <strong>${spotName}</strong> per la giornata del <strong>${dateStr}</strong>.`;
selectUser.innerHTML = '<option value="">Caricamento...</option>';
modal.style.display = 'flex';
// Fetch team presences for the office effectively identifying people physically present but without parking
try {
const response = await api.get(`/api/presence/team?start_date=${dateStr}&end_date=${dateStr}&office_id=${currentUser.office_id}`);
if (response && response.ok) {
const result = await response.json();
const members = Array.isArray(result) ? result : [];
// Filter out people who already have parking
const availableMembers = members.filter(m => {
const presence = m.presences && m.presences.find(p => p.date === dateStr);
const hasParking = m.parking_dates && m.parking_dates.includes(dateStr);
return presence && presence.status === 'present' && !hasParking;
});
if (availableMembers.length === 0) {
selectUser.innerHTML = '<option value="">Nessun utente presente e senza parcheggio oggi...</option>';
} else {
selectUser.innerHTML = '<option value="">Seleziona utente...</option>';
availableMembers.forEach(user => {
const option = document.createElement('option');
option.value = user.id;
option.textContent = `${user.name}`;
selectUser.appendChild(option);
});
}
}
} catch (e) {
console.error("Errore fetch team presences:", e);
console.error(e);
selectUser.innerHTML = '<option value="">Errore caricamento utenti</option>';
}
}

24
frontend/js/team-calendar.js
View File

@@ -48,7 +48,7 @@ function updateOfficeDisplay() {
// If user is employee, show their office name directly
if (currentUser.role === 'employee') {
display.textContent = currentUser.office_name || "Mio Ufficio";
display.textContent = currentUser.office_name || "Mio Gruppo";
return;
}
@@ -63,10 +63,10 @@ function updateOfficeDisplay() {
// let text = option.textContent.split('(')[0].trim();
display.textContent = option.textContent;
} else {
display.textContent = "Tutti gli Uffici";
display.textContent = "Tutti i Gruppi";
}
} else {
display.textContent = "Tutti gli Uffici";
display.textContent = "Tutti i Gruppi";
}
}
@@ -312,7 +312,7 @@ function renderCalendar() {
// Build header row
const dayNames = ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'];
let headerHtml = '<th>Nome</th><th>Ufficio</th>';
let headerHtml = '<th>Nome</th><th>Gruppo</th>';
for (let i = 0; i < dayCount; i++) {
const date = new Date(startDate);
@@ -348,8 +348,20 @@ function renderCalendar() {
let bodyHtml = '';
teamData.forEach(member => {
let nameHtml = member.name || 'Unknown';
if (member.ratio !== undefined && member.ratio !== null) {
nameHtml += `
<span style="margin-left: 6px; font-size: 0.8rem; color: var(--text-secondary); cursor: help;" title="(Giorni in cui hai avuto parcheggio) / (Giorni in sede)">
<svg style="vertical-align: text-bottom; margin-right: 2px;" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
${member.ratio.toFixed(2)}
</span>
`;
}
bodyHtml += `<tr>
<td class="member-name">${member.name || 'Unknown'}</td>
<td class="member-name" style="text-align: left; padding-left: 1rem;">${nameHtml}</td>
<td class="member-manager">${member.office_name || '-'}</td>`;
for (let i = 0; i < dayCount; i++) {
@@ -384,7 +396,7 @@ function renderCalendar() {
// (Already have dateStr)
const memberRules = officeClosingRules[member.office_id];
let isClosed = false;
let isClosed = isHoliday;
if (memberRules) {
// Check weekly

3
frontend/js/team-rules.js
View File

@@ -134,6 +134,7 @@ async function saveWeeklyClosingDays() {
await Promise.all(promises);
utils.showMessage('Giorni di chiusura aggiornati', 'success');
api.invalidateCache(`/api/offices/${currentOfficeId}/weekly-closing-days`);
await loadWeeklyClosingDays(currentOfficeId);
} catch (error) {
console.error(error);
@@ -176,6 +177,7 @@ async function loadClosingDays(officeId) {
async function addClosingDay(data) {
const response = await api.post(`/api/offices/${currentOfficeId}/closing-days`, data);
if (response && response.ok) {
api.invalidateCache(`/api/offices/${currentOfficeId}/closing-days`);
await loadClosingDays(currentOfficeId);
document.getElementById('closingDayModal').style.display = 'none';
document.getElementById('closingDayForm').reset();
@@ -189,6 +191,7 @@ async function deleteClosingDay(id) {
if (!confirm('Eliminare questo giorno di chiusura?')) return;
const response = await api.delete(`/api/offices/${currentOfficeId}/closing-days/${id}`);
if (response && response.ok) {
api.invalidateCache(`/api/offices/${currentOfficeId}/closing-days`);
await loadClosingDays(currentOfficeId);
}
}

14
frontend/pages/admin-offices.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestione Uffici - Parking Manager</title>
<title>Gestione Gruppi - Parking Manager</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/css/styles.css">
</head>
@@ -42,7 +42,7 @@
<main class="main-content">
<header class="page-header">
<h2>Gestione Uffici</h2>
<h2>Gestione Gruppi</h2>
<div class="header-actions">
</div>
</header>
@@ -50,8 +50,8 @@
<div class="content-wrapper">
<div class="card">
<div style="padding-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
<h3 style="margin: 0;">Lista Uffici</h3>
<button class="btn btn-dark" id="addOfficeBtn">Nuovo Ufficio</button>
<h3 style="margin: 0;">Lista Gruppi</h3>
<button class="btn btn-dark" id="addOfficeBtn">Nuovo Gruppo</button>
</div>
<div class="data-table-container">
<table class="data-table" id="officesTable">
@@ -75,7 +75,7 @@
<div class="modal" id="officeModal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h3 id="officeModalTitle">Nuovo Ufficio</h3>
<h3 id="officeModalTitle">Nuovo Gruppo</h3>
<button class="modal-close" id="closeOfficeModal">&times;</button>
</div>
<div class="modal-body">
@@ -83,14 +83,14 @@
<input type="hidden" id="officeId">
<div class="form-group">
<label for="officeName">Nome Ufficio</label>
<label for="officeName">Nome Gruppo</label>
<input type="text" id="officeName" required>
</div>
<div class="form-group">
<label for="officeQuota">Quota Parcheggio</label>
<input type="number" id="officeQuota" min="0" value="0" required>
<small class="text-muted">Numero totale di posti auto assegnati a questo ufficio</small>
<small class="text-muted">Numero totale di posti auto assegnati a questo gruppo</small>
</div>
<div class="form-group">

2
frontend/pages/admin-users.html
View File

@@ -64,7 +64,7 @@
class="sort-icon"></span></th>
<th class="sortable" data-sort="role" style="cursor: pointer;">Ruolo <span
class="sort-icon"></span></th>
<th class="sortable" data-sort="office_name" style="cursor: pointer;">Ufficio <span
<th class="sortable" data-sort="office_name" style="cursor: pointer;">Gruppo <span
class="sort-icon"></span></th>
<th class="sortable" data-sort="parking_ratio" style="cursor: pointer;">Punteggio <span
class="sort-icon"></span></th>

35
frontend/pages/parking-settings.html
View File

@@ -42,7 +42,7 @@
<main class="main-content">
<header class="page-header">
<h2>Impostazioni Ufficio</h2>
<h2>Impostazioni Gruppo</h2>
</header>
<div class="content-wrapper">
@@ -60,49 +60,54 @@
<div id="settingsContent" style="display: none;">
<!-- Card 1: Batch Scheduling Settings -->
<!-- Card: Algorithm Settings -->
<div class="card">
<div class="card-header">
<h3>Schedulazione Automatica</h3>
<h3>Impostazioni Algoritmo Parcheggio</h3>
</div>
<div class="card-body">
<form id="scheduleForm">
<div class="form-group" style="padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1rem;">
<label style="font-weight: 500; display: block; margin-bottom: 0.5rem;">Modalità Assegnazione</label>
<p class="text-muted" style="margin-bottom: 0.5rem;">Scegli la modalità con cui assegnare i posti auto ai membri del gruppo.</p>
<select id="assignmentModeSelect" class="form-select" style="max-width: 300px;">
<option value="fairness">Punteggio (Fairness)</option>
<option value="random">Completamente Random</option>
</select>
</div>
<div class="form-group">
<label class="toggle-label">
<span>Abilita Assegnazione Batch</span>
<span style="font-weight: 500;">Abilita Assegnazione Batch</span>
<label class="toggle-switch">
<input type="checkbox" id="bookingWindowEnabled">
<span class="toggle-slider"></span>
</label>
</label>
<small class="text-muted">Se abilitato, l'assegnazione dei posti avverrà solo dopo
l'orario
di cut-off del giorno precedente.</small>
<small class="text-muted">Se abilitato, l'assegnazione dei posti avverrà solo dopo l'orario di cut-off del giorno precedente.</small>
</div>
<div class="form-group" id="cutoffTimeGroup">
<label>Orario di Cut-off (Giorno Precedente)</label>
<div style="display: flex; gap: 0.5rem; align-items: center;">
<label style="font-weight: 500;">Orario di Cut-off (Giorno Precedente)</label>
<div style="display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem;">
<select id="bookingWindowHour" style="width: 80px;">
<!-- Populated by JS -->
</select>
<span>:</span>
<select id="bookingWindowMinute" style="width: 80px;">
<!-- Populated by JS -->
</select>
</div>
<small class="text-muted">Le presenze inserite prima di questo orario saranno messe in
attesa.</small>
<small class="text-muted">Le presenze inserite prima di questo orario saranno messe in attesa.</small>
</div>
<div class="form-actions">
<div class="form-actions" style="margin-top: 1.5rem;">
<button type="submit" class="btn btn-dark">Salva Impostazioni</button>
</div>
</form>
</div>
</div>
<!-- Card 2: Testing Tools -->
<!-- Card: Testing Tools -->
<div class="card">
<div class="card-header"
style="display: flex; justify-content: space-between; align-items: center;">

35
frontend/pages/presence.html
View File

@@ -108,7 +108,7 @@
<!-- Date Navigation (Centered) -->
<div style="display: flex; justify-content: center; margin-bottom: 2rem;">
<div
style="display: flex; align-items: center; gap: 0.5rem; background: white; padding: 0.5rem; border-radius: 8px; border: 1px solid var(--border);">
style="display: flex; align-items: center; gap: 0.5rem; background: transparent; padding: 0.5rem; border-radius: 8px;">
<button class="btn-icon" id="statusPrevDay"
style="border: none; width: 32px; height: 32px;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -117,11 +117,11 @@
</svg>
</button>
<div style="position: relative; text-align: center; min-width: 200px;">
<div style="position: relative; text-align: center; min-width: 250px; cursor: pointer;">
<div id="statusDateDisplay"
style="font-weight: 600; font-size: 1rem; text-transform: capitalize;"></div>
style="font-weight: 600; font-size: 1.1rem; text-transform: capitalize; color: var(--text);"></div>
<input type="date" id="statusDatePicker"
style="position: absolute; inset: 0; opacity: 0; cursor: pointer;">
style="position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;">
</div>
<button class="btn-icon" id="statusNextDay"
@@ -139,7 +139,7 @@
<div
style="display: flex; align-items: center; justify-content: flex-start; gap: 1rem; margin-bottom: 1.5rem;">
<div style="font-weight: 600; font-size: 1.1rem; color: var(--text);">
Ufficio: <span id="currentOfficeDisplay" style="color: var(--primary);">...</span>
Gruppo: <span id="currentOfficeDisplay" style="color: var(--primary);">...</span>
</div>
<span class="badge"
style="background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; padding: 0.35rem 0.75rem; font-size: 0.85rem;">
@@ -367,7 +367,30 @@
</div>
<!-- Admin Manual Assign Spot Modal -->
<div class="modal" id="adminAssignSpotModal" style="display: none;">
<div class="modal-content modal-small">
<div class="modal-header">
<h3>Assegna Posto Manualmente</h3>
<button class="modal-close" id="closeAdminAssignModal">&times;</button>
</div>
<div class="modal-body">
<p id="adminAssignSpotInfo" style="margin-bottom: 1rem;"></p>
<form id="adminAssignForm">
<div class="form-group" style="margin-bottom: 1rem;">
<label for="adminAssignUser">Seleziona Utente (Presente in Sede)</label>
<select id="adminAssignUser" class="form-control" required style="width: 100%;">
<option value="">Caricamento utenti...</option>
</select>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" id="cancelAdminAssign">Annulla</button>
<button type="submit" class="btn btn-dark">Assegna</button>
</div>
</form>
</div>
</div>
</div>
<script src="/js/api.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/nav.js"></script>

4
frontend/pages/profile.html
View File

@@ -74,9 +74,9 @@
<small class="text-muted">Il ruolo è assegnato dal tuo amministratore</small>
</div>
<div class="form-group">
<label for="manager">Ufficio</label>
<label for="manager">Gruppo</label>
<input type="text" id="manager" disabled>
<small class="text-muted">Il tuo ufficio è assegnato dall'amministratore</small>
<small class="text-muted">Il tuo gruppo è assegnato dall'amministratore</small>
</div>
<div class="form-actions" id="profileActions">
<button type="submit" class="btn btn-dark">Salva Modifiche</button>

31
frontend/pages/settings.html
View File

@@ -47,7 +47,23 @@
<div class="content-wrapper">
<!-- Theme Settings Card -->
<div class="card" style="margin-bottom: 2rem;">
<div class="card-header">
<h3>Tema</h3>
</div>
<div class="card-body">
<div class="form-group">
<label style="font-weight: 500; display: block; margin-bottom: 0.5rem;">Tema dell'applicazione</label>
<select id="themeSelect" class="form-select" style="max-width: 300px;">
<option value="system">Sistema (Predefinito)</option>
<option value="light">Chiaro</option>
<option value="dark">Scuro</option>
</select>
<small class="text-muted" style="display: block; margin-top: 0.5rem;">Scegli il tema preferito da utilizzare nell'applicazione.</small>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Notifiche Parcheggio</h3>
@@ -138,6 +154,10 @@
document.getElementById('notifyParkingChanges').checked = currentUser.notify_parking_changes !== 0;
updateDailyTimeVisibility();
// Populate Theme
const savedTheme = localStorage.getItem('theme') || 'system';
document.getElementById('themeSelect').value = savedTheme;
}
function updateDailyTimeVisibility() {
@@ -173,6 +193,15 @@
// Toggle daily time visibility
document.getElementById('notifyDailyParking').addEventListener('change', updateDailyTimeVisibility);
// Save Theme dynamically
document.getElementById('themeSelect').addEventListener('change', (e) => {
const theme = e.target.value;
if (typeof applyTheme === 'function') {
applyTheme(theme);
utils.showMessage('Tema aggiornato', 'success');
}
});
}
</script>
</body>

4
frontend/pages/team-calendar.html
View File

@@ -55,14 +55,14 @@
<option value="month">Mese</option>
</select>
<select id="officeFilter" class="form-select" style="min-width: 200px;">
<option value="">Tutti gli Uffici</option>
<option value="">Tutti i Gruppi</option>
</select>
</div>
<div id="office-display-header"
style="margin-bottom: 1rem; font-weight: 600; font-size: 1.1rem; color: var(--text);">
Ufficio: <span id="currentOfficeNameDisplay" style="color: var(--primary);">Loading...</span>
Gruppo: <span id="currentOfficeNameDisplay" style="color: var(--primary);">Loading...</span>
</div>
<div class="calendar-header">

3
frontend/pages/team-rules.html
View File

@@ -60,6 +60,7 @@
</div>
<div id="rulesContent" style="display: none;">
<!-- Weekly Closing Days -->
<div class="card">
<div class="card-header">
@@ -124,7 +125,7 @@
<div id="noOfficeMessage">
<div class="card">
<div class="card-body text-center">
<p>Seleziona un ufficio sopra per gestirne le regole di parcheggio</p>
<p>Seleziona un gruppo sopra per gestirne le regole di parcheggio</p>
</div>
</div>
</div>