378 lines
18 KiB
HTML
378 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>My Presence - Parking Manager</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h1>Gestione Parcheggi</h1>
|
|
</div>
|
|
<nav class="sidebar-nav"></nav>
|
|
<div class="sidebar-footer">
|
|
<div class="user-menu">
|
|
<button class="user-button" id="userMenuButton">
|
|
<div class="user-avatar">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="user-info">
|
|
<div class="user-name" id="userName">Caricamento...</div>
|
|
<div class="user-role" id="userRole">-</div>
|
|
</div>
|
|
</button>
|
|
<div class="user-dropdown" id="userDropdown" style="display: none;">
|
|
<a href="/profile" class="dropdown-item">Profilo</a>
|
|
<a href="/settings" class="dropdown-item">Impostazioni</a>
|
|
<hr class="dropdown-divider">
|
|
<button class="dropdown-item" id="logoutButton">Esci</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<header class="page-header">
|
|
<h2>Dashboard</h2>
|
|
<div class="header-actions">
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="card presence-card">
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<h3>Calendario</h3>
|
|
</div>
|
|
<div class="calendar-header">
|
|
<button class="btn-icon" id="prevMonth">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2">
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|
</svg>
|
|
</button>
|
|
<h3 id="currentMonth">Caricamento...</h3>
|
|
<button class="btn-icon" id="nextMonth">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</button>
|
|
<div style="display: flex; gap: 0.5rem; align-items: center;">
|
|
<button class="btn btn-dark btn-sm" id="quickEntryBtn" style="font-size: 0.85rem;">
|
|
Inserimento Veloce
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calendar-grid" id="calendarGrid"></div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-color status-present"></div>
|
|
<span>In sede</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color status-remote"></div>
|
|
<span>Remoto</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color status-absent"></div>
|
|
<span>Ferie</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color status-business_trip"></div>
|
|
<span>Trasferta</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parking Status Section -->
|
|
<div class="card" id="parkingStatusCard" style="margin-top: 2rem;">
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<h3>Stato Parcheggio</h3>
|
|
</div>
|
|
|
|
<!-- Daily View Controls -->
|
|
<div id="dailyViewControls">
|
|
|
|
<!-- 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);">
|
|
<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"
|
|
stroke-width="2">
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|
</svg>
|
|
</button>
|
|
|
|
<div style="position: relative; text-align: center; min-width: 200px;">
|
|
<div id="statusDateDisplay"
|
|
style="font-weight: 600; font-size: 1rem; text-transform: capitalize;"></div>
|
|
<input type="date" id="statusDatePicker"
|
|
style="position: absolute; inset: 0; opacity: 0; cursor: pointer;">
|
|
</div>
|
|
|
|
<button class="btn-icon" id="statusNextDay"
|
|
style="border: none; width: 32px; height: 32px;">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Office Header (No Logo) -->
|
|
<!-- Office Header (No Logo) -->
|
|
<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>
|
|
</div>
|
|
<span class="badge"
|
|
style="background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; padding: 0.35rem 0.75rem; font-size: 0.85rem;">
|
|
Liberi: <span id="spotsCountBadge">0/0</span>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Spots Grid -->
|
|
<div id="spotsGrid" style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0;">
|
|
<!-- Spots injected here -->
|
|
<div style="width: 100%; text-align: center; color: var(--text-secondary); padding: 2rem;">
|
|
Caricamento posti...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Exclusion Card -->
|
|
<div class="card" id="exclusionCard" style="margin-top: 2rem;">
|
|
<div class="card-header">
|
|
<h3>Esclusione Assegnazione</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted" style="margin-bottom: 1rem;">
|
|
Puoi decidere di escluderti automaticamente dalla logica di assegnazione dei posti auto.
|
|
Le richieste di esclusione sono visibili agli amministratori.
|
|
</p>
|
|
|
|
<div id="exclusionStatusDisplay"
|
|
style="display: none; padding: 1rem; border-radius: 6px; margin-bottom: 1rem; background-color: #f3f4f6; border: 1px solid #e5e7eb;">
|
|
<!-- Filled by JS -->
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<button class="btn btn-dark" id="manageExclusionBtn">Gestisci Esclusione</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card parking-map-card" style="margin-top: 2rem;">
|
|
<h3>Mappa Parcheggio</h3>
|
|
<img src="/assets/parking-map.png" alt="Mappa Parcheggio"
|
|
style="width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--border);">
|
|
</div> <!-- End parking-map-card -->
|
|
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Quick Entry Modal -->
|
|
<div class="modal" id="quickEntryModal" style="display: none;">
|
|
<div class="modal-content modal-small">
|
|
<div class="modal-header">
|
|
<h3>Inserimento Veloce</h3>
|
|
<button class="modal-close" id="closeQuickEntryModal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="quickEntryForm">
|
|
<div class="form-group">
|
|
<label>Range di Date</label>
|
|
<div style="display: flex; gap: 1rem;">
|
|
<div style="flex: 1;">
|
|
<small>Da:</small>
|
|
<input type="date" id="qeStartDate" class="form-control" required>
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<small>A (incluso):</small>
|
|
<input type="date" id="qeEndDate" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Stato da applicare</label>
|
|
<div class="status-buttons">
|
|
<button type="button" class="status-btn qe-status-btn" data-status="present">
|
|
<div class="status-icon status-present"></div>
|
|
<span>In sede</span>
|
|
</button>
|
|
<button type="button" class="status-btn qe-status-btn" data-status="remote">
|
|
<div class="status-icon status-remote"></div>
|
|
<span>Remoto</span>
|
|
</button>
|
|
<button type="button" class="status-btn qe-status-btn" data-status="absent">
|
|
<div class="status-icon status-absent"></div>
|
|
<span>Ferie</span>
|
|
</button>
|
|
<button type="button" class="status-btn qe-status-btn" data-status="business_trip">
|
|
<div class="status-icon status-business_trip"></div>
|
|
<span>Trasferta</span>
|
|
</button>
|
|
<button type="button" class="status-btn qe-status-btn" data-status="clear">
|
|
<div class="status-icon"
|
|
style="border: 2px solid #ef4444; background: #fee2e2; display: flex; align-items: center; justify-content: center;">
|
|
<span style="color: #ef4444; font-weight: bold; font-size: 1.2rem;">×</span>
|
|
</div>
|
|
<span>Rimuovi</span>
|
|
</button>
|
|
</div>
|
|
<input type="hidden" id="qeStatus" required>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" id="cancelQuickEntry">Annulla</button>
|
|
<button type="submit" class="btn btn-dark">Applica</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Day Modal -->
|
|
<div class="modal" id="dayModal" style="display: none;">
|
|
<div class="modal-content modal-small">
|
|
<div class="modal-header">
|
|
<h3 id="dayModalTitle">Segna presenza</h3>
|
|
<button class="modal-close" id="closeDayModal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="dayModalUser" style="display:none; margin-bottom: 1rem; font-weight: 500;"></p>
|
|
<div class="status-buttons">
|
|
<button class="status-btn" data-status="present">
|
|
<div class="status-icon status-present"></div>
|
|
<span>In sede</span>
|
|
</button>
|
|
<button class="status-btn" data-status="remote">
|
|
<div class="status-icon status-remote"></div>
|
|
<span>Remoto</span>
|
|
</button>
|
|
<button class="status-btn" data-status="absent">
|
|
<div class="status-icon status-absent"></div>
|
|
<span>Ferie</span>
|
|
</button>
|
|
<button class="status-btn" data-status="business_trip">
|
|
<div class="status-icon status-business_trip"></div>
|
|
<span>Trasferta</span>
|
|
</button>
|
|
</div>
|
|
|
|
<button class="btn btn-secondary btn-full" id="clearDayBtn" style="margin-top: 1rem;">Cancella
|
|
presenza</button>
|
|
|
|
<div id="parkingSection"
|
|
style="display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);">
|
|
<div id="parkingInfo" style="margin-bottom: 0.75rem; font-size: 0.9rem;"></div>
|
|
|
|
<div id="parkingActions" style="display: flex; gap: 0.5rem;">
|
|
<button class="btn btn-secondary" style="flex: 1;" id="reassignParkingBtn">Cedi posto</button>
|
|
<button class="btn btn-secondary" style="flex: 1;" id="releaseParkingBtn">Lascia libero</button>
|
|
</div>
|
|
|
|
<div id="reassignForm"
|
|
style="display: none; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem;">
|
|
<div class="form-group" style="margin-bottom: 0.5rem;">
|
|
<label for="reassignUser" style="font-size: 0.9rem;">Assegna a</label>
|
|
<select id="reassignUser" class="form-control" style="width: 100%;">
|
|
<option value="">Seleziona utente...</option>
|
|
</select>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<button type="button" class="btn btn-secondary" style="flex: 1;"
|
|
id="cancelReassign">Annulla</button>
|
|
<button type="button" class="btn btn-dark" style="flex: 1;"
|
|
id="confirmReassign">Riassegna</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Exclusion Modal -->
|
|
<div class="modal" id="userExclusionModal" style="display: none;">
|
|
<div class="modal-content modal-small">
|
|
<div class="modal-header">
|
|
<h3>Gestisci Esclusione</h3>
|
|
<button class="modal-close" id="closeUserExclusionModal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="userExclusionForm">
|
|
<div class="form-group">
|
|
<label style="font-weight: 500; margin-bottom: 0.5rem; display: block;">Durata
|
|
Esclusione</label>
|
|
<div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
|
|
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
|
<input type="radio" name="exclusionType" value="forever" checked>
|
|
<span>Tempo Indeterminato</span>
|
|
</label>
|
|
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
|
<input type="radio" name="exclusionType" value="range">
|
|
<span>Periodo Specifico</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="exclusionDateRange" style="display: none;">
|
|
<div class="form-group">
|
|
<label for="ueStartDate">Data Inizio</label>
|
|
<input type="date" id="ueStartDate" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ueEndDate">Data Fine</label>
|
|
<input type="date" id="ueEndDate" class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="ueNotes">Motivo (opzionale)</label>
|
|
<textarea id="ueNotes" class="form-control" rows="2"
|
|
placeholder="Es. Lavoro da remoto per un mese..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-danger" id="deleteExclusionBtn"
|
|
style="display: none; margin-right: auto;">Rimuovi</button>
|
|
<button type="button" class="btn btn-secondary" id="cancelUserExclusion">Annulla</button>
|
|
<button type="submit" class="btn btn-dark">Salva</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script src="/js/api.js"></script>
|
|
<script src="/js/utils.js"></script>
|
|
<script src="/js/nav.js"></script>
|
|
<script src="/js/modal-logic.js"></script>
|
|
<script src="/js/presence.js"></script>
|
|
</body>
|
|
|
|
</html> |