Files
org-parking/frontend/pages/team-rules.html
2026-04-20 20:37:37 +02:00

345 lines
17 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regole Parcheggio - 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>Regole Parcheggio</h2>
<div class="header-actions">
</div>
</header>
<div class="content-wrapper">
<!-- Office Selection Card -->
<div class="card" id="officeSelectionCard" style="margin-bottom: 1.5rem;">
<div style="display: flex; align-items: center; gap: 1rem;">
<label for="officeSelect" style="font-weight: 500; min-width: max-content;">Seleziona
Ufficio:</label>
<select id="officeSelect" class="form-select" style="flex: 1; max-width: 300px;">
<option value="">Seleziona Ufficio</option>
</select>
</div>
</div>
<div id="rulesContent" style="display: none;">
<!-- Card: Algorithm Settings -->
<div class="card" style="margin-bottom: 1.5rem;">
<div class="card-header">
<h3>Impostazioni Algoritmo Parcheggio</h3>
</div>
<div class="card-body">
<form id="algorithmForm">
<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;">Metodo di Assegnazione</label>
<p class="text-muted" style="margin-bottom: 0.5rem;">Scegli come assegnare i posti auto ai membri del gruppo.</p>
<select id="assignmentModeSelect" class="form-select" style="max-width: 300px;">
<option value="realtime">In Tempo Reale (FIFO)</option>
<option value="random">Automatico - Casuale (Batch)</option>
<option value="fairness">Automatico - Punteggio (Batch)</option>
</select>
<small class="text-muted" style="display: block; margin-top: 0.5rem;">FIFO: assegnazione immediata. Automatico: assegnazione collettiva dopo il cut-off.</small>
</div>
<div class="form-group" id="cutoffTimeGroup">
<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;">
</select>
<span>:</span>
<select id="bookingWindowMinute" style="width: 80px;">
</select>
</div>
<small class="text-muted">Orario limite per la prenotazione del giorno successivo (solo per modalità Automatica)</small>
</div>
<div class="form-actions" style="margin-top: 1.5rem;">
<button type="submit" class="btn btn-dark">Salva Impostazioni</button>
</div>
</form>
</div>
</div>
<!-- Weekly Closing Days -->
<div class="card">
<div class="card-header">
<h3>Giorni di Chiusura Settimanale</h3>
<button class="btn btn-primary btn-sm" id="saveWeeklyClosingDaysBtn">Salva</button>
</div>
<div class="card-body">
<p class="text-muted" style="margin-bottom: 1rem;">Giorni della settimana in cui il parcheggio
non è
disponibile</p>
<div class="weekday-checkboxes" id="weeklyClosingDays">
<label><input type="checkbox" data-weekday="1"> Lunedì</label>
<label><input type="checkbox" data-weekday="2"> Martedì</label>
<label><input type="checkbox" data-weekday="3"> Mercoledì</label>
<label><input type="checkbox" data-weekday="4"> Giovedì</label>
<label><input type="checkbox" data-weekday="5"> Venerdì</label>
<label><input type="checkbox" data-weekday="6"> Sabato</label>
<label><input type="checkbox" data-weekday="0"> Domenica</label>
</div>
</div>
</div>
<!-- Specific Closing Days -->
<div class="card">
<div class="card-header">
<h3>Giorni di Chiusura Specifici</h3>
<button class="btn btn-secondary btn-sm" id="addClosingDayBtn">Aggiungi</button>
</div>
<div class="card-body">
<p class="text-muted">Date specifiche in cui il parcheggio non è disponibile (festività, ecc.)
</p>
<div id="closingDaysList" class="rules-list"></div>
</div>
</div>
<!-- Parking Guarantees -->
<div class="card">
<div class="card-header">
<h3>Garanzie di Parcheggio</h3>
<button class="btn btn-secondary btn-sm" id="addGuaranteeBtn">Aggiungi</button>
</div>
<div class="card-body">
<p class="text-muted">Utenti a cui è garantito un posto auto quando sono presenti</p>
<div id="guaranteesList" class="rules-list"></div>
</div>
</div>
<!-- Parking Exclusions -->
<div class="card">
<div class="card-header">
<h3>Esclusioni Parcheggio</h3>
<button class="btn btn-secondary btn-sm" id="addExclusionBtn">Aggiungi</button>
</div>
<div class="card-body">
<p class="text-muted">Utenti esclusi dall'assegnazione del parcheggio</p>
<div id="exclusionsList" class="rules-list"></div>
</div>
</div>
<!-- Card: Testing Tools -->
<div class="card" style="margin-top: 1.5rem;">
<div class="card-header"
style="display: flex; justify-content: space-between; align-items: center;">
<h3>Strumenti di Test</h3>
<span class="badge" style="background: #fff7ed; color: #c2410c; border: 1px solid #ffedd5; padding: 0.25rem 0.5rem; font-size: 0.75rem;">Testing Only</span>
</div>
<div class="card-body">
<p class="text-muted" style="margin-bottom: 1rem;">Usa questi strumenti per verificare il
funzionamento dell'assegnazione automatica.</p>
<div class="form-group">
<label>Range di Date di Test</label>
<div style="display: flex; gap: 1rem;">
<div>
<small>Da:</small>
<input type="date" id="testDateStart" class="form-control" style="width: 160px;">
</div>
<div>
<small>A (incluso):</small>
<input type="date" id="testDateEnd" class="form-control" style="width: 160px;">
</div>
</div>
<small class="text-muted">Lascia "A" vuoto per eseguire su un singolo giorno.</small>
</div>
<div style="display: flex; gap: 1rem; margin-top: 1rem;">
<button id="runAllocationBtn" class="btn btn-primary">
Esegui Assegnazione Ora
</button>
<button id="clearAssignmentsBtn" class="btn btn-danger">
Elimina Tutte le Assegnazioni
</button>
<button id="clearPresenceBtn" class="btn btn-danger"
title="Elimina stati e assegnazioni per i giorni selezionati">
Elimina Stati
</button>
</div>
<hr style="margin: 1.5rem 0; border: 0; border-top: 1px solid #e5e7eb;">
<div class="form-group">
<label>Test Invio Email</label>
<div style="display: flex; gap: 1rem; align-items: flex-end;">
<div style="flex: 1;">
<small>Data di Riferimento (Opzionale):</small>
<input type="date" id="testEmailDate" class="form-control">
<small class="text-muted" style="display: block; margin-top: 0.25rem;">
Se non specificata, verrà usato il primo giorno lavorativo disponibile.
</small>
</div>
<button id="testEmailBtn" class="btn btn-secondary">
Test (Solo a Me)
</button>
<button id="bulkEmailBtn" class="btn btn-warning"
title="Invia mail reale a tutti gli assegnatari">
Test (A Tutti)
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="noOfficeMessage">
<div class="card">
<div class="card-body text-center">
<p>Seleziona un gruppo sopra per gestirne le regole di parcheggio</p>
</div>
</div>
</div>
</div>
</main>
<!-- Add Closing Day Modal -->
<div class="modal" id="closingDayModal" style="display: none;">
<div class="modal-content modal-small">
<div class="modal-header">
<h3>Aggiungi Giorno di Chiusura</h3>
<button class="modal-close" id="closeClosingDayModal">&times;</button>
</div>
<div class="modal-body">
<form id="closingDayForm">
<div class="form-group">
<label for="closingDate">Data Inizio</label>
<input type="date" id="closingDate" required>
</div>
<div class="form-group">
<label for="closingEndDate">Data Fine (opzionale)</label>
<input type="date" id="closingEndDate">
<small>Lascia vuoto per singolo giorno</small>
</div>
<div class="form-group">
<label for="closingReason">Motivo (opzionale)</label>
<input type="text" id="closingReason" placeholder="es. Ferie aziendali">
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" id="cancelClosingDay">Annulla</button>
<button type="submit" class="btn btn-dark">Aggiungi</button>
</div>
</form>
</div>
</div>
</div>
<!-- Add Guarantee Modal -->
<div class="modal" id="guaranteeModal" style="display: none;">
<div class="modal-content modal-small">
<div class="modal-header">
<h3>Aggiungi Garanzia Parcheggio</h3>
<button class="modal-close" id="closeGuaranteeModal">&times;</button>
</div>
<div class="modal-body">
<form id="guaranteeForm">
<div class="form-group">
<label for="guaranteeUser">Utente</label>
<select id="guaranteeUser" required>
<option value="">Seleziona utente...</option>
</select>
</div>
<div class="form-group">
<label for="guaranteeStartDate">Data Inizio (opzionale)</label>
<input type="date" id="guaranteeStartDate">
<small>Lascia vuoto per nessun limite inziale</small>
</div>
<div class="form-group">
<input type="date" id="guaranteeEndDate">
<small>Lascia vuoto per nessun limite finale</small>
</div>
<div class="form-group">
<label for="guaranteeNotes">Note (opzionale)</label>
<textarea id="guaranteeNotes" class="form-control" rows="2"></textarea>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" id="cancelGuarantee">Annulla</button>
<button type="submit" class="btn btn-dark">Aggiungi</button>
</div>
</form>
</div>
</div>
</div>
<!-- Add Exclusion Modal -->
<div class="modal" id="exclusionModal" style="display: none;">
<div class="modal-content modal-small">
<div class="modal-header">
<h3>Aggiungi Esclusione Parcheggio</h3>
<button class="modal-close" id="closeExclusionModal">&times;</button>
</div>
<div class="modal-body">
<form id="exclusionForm">
<div class="form-group">
<label for="exclusionUser">Utente</label>
<select id="exclusionUser" required>
<option value="">Seleziona utente...</option>
</select>
</div>
<div class="form-group">
<label for="exclusionStartDate">Data Inizio (opzionale)</label>
<input type="date" id="exclusionStartDate">
<small>Lascia vuoto per nessun limite iniziale</small>
</div>
<div class="form-group">
<input type="date" id="exclusionEndDate">
<small>Lascia vuoto per nessun limite finale</small>
</div>
<div class="form-group">
<label for="exclusionNotes">Note (opzionale)</label>
<textarea id="exclusionNotes" class="form-control" rows="2"></textarea>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" id="cancelExclusion">Annulla</button>
<button type="submit" class="btn btn-dark">Aggiungi</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/team-rules.js"></script>
</body>
</html>