c74a0ed350
Features: - Manager-centric parking spot management - Fair assignment algorithm (parking/presence ratio) - Presence tracking calendar - Closing days (specific & weekly recurring) - Guarantees and exclusions - Authelia/LLDAP integration for SSO Stack: - FastAPI backend - SQLite database - Vanilla JS frontend - Docker deployment
216 lines
9.5 KiB
HTML
216 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Office Rules - 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>Parking Manager</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">Loading...</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">Profile</a>
|
|
<a href="/settings" class="dropdown-item">Settings</a>
|
|
<hr class="dropdown-divider">
|
|
<button class="dropdown-item" id="logoutButton">Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<header class="page-header">
|
|
<h2>Office Rules</h2>
|
|
<div class="header-actions">
|
|
<select id="officeSelect" class="form-select">
|
|
<option value="">Select Manager</option>
|
|
</select>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content-wrapper" id="rulesContent" style="display: none;">
|
|
<!-- Weekly Closing Days -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Weekly Closing Days</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted" style="margin-bottom: 1rem;">Days of the week the office is regularly closed</p>
|
|
<div class="weekday-checkboxes" id="weeklyClosingDays">
|
|
<label><input type="checkbox" data-weekday="0"> Sunday</label>
|
|
<label><input type="checkbox" data-weekday="1"> Monday</label>
|
|
<label><input type="checkbox" data-weekday="2"> Tuesday</label>
|
|
<label><input type="checkbox" data-weekday="3"> Wednesday</label>
|
|
<label><input type="checkbox" data-weekday="4"> Thursday</label>
|
|
<label><input type="checkbox" data-weekday="5"> Friday</label>
|
|
<label><input type="checkbox" data-weekday="6"> Saturday</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Specific Closing Days -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Specific Closing Days</h3>
|
|
<button class="btn btn-secondary btn-sm" id="addClosingDayBtn">Add</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted">Specific dates when the office is closed (holidays, etc.)</p>
|
|
<div id="closingDaysList" class="rules-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parking Guarantees -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Parking Guarantees</h3>
|
|
<button class="btn btn-secondary btn-sm" id="addGuaranteeBtn">Add</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted">Users guaranteed a parking spot when present</p>
|
|
<div id="guaranteesList" class="rules-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parking Exclusions -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Parking Exclusions</h3>
|
|
<button class="btn btn-secondary btn-sm" id="addExclusionBtn">Add</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted">Users excluded from parking assignment</p>
|
|
<div id="exclusionsList" class="rules-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-wrapper" id="noOfficeMessage">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<p>Select a manager to manage their office rules</p>
|
|
</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>Add Closing Day</h3>
|
|
<button class="modal-close" id="closeClosingDayModal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="closingDayForm">
|
|
<div class="form-group">
|
|
<label for="closingDate">Date</label>
|
|
<input type="date" id="closingDate" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="closingReason">Reason (optional)</label>
|
|
<input type="text" id="closingReason" placeholder="e.g., Company holiday">
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" id="cancelClosingDay">Cancel</button>
|
|
<button type="submit" class="btn btn-dark">Add</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>Add Parking Guarantee</h3>
|
|
<button class="modal-close" id="closeGuaranteeModal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="guaranteeForm">
|
|
<div class="form-group">
|
|
<label for="guaranteeUser">User</label>
|
|
<select id="guaranteeUser" required>
|
|
<option value="">Select user...</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="guaranteeStartDate">Start Date (optional)</label>
|
|
<input type="date" id="guaranteeStartDate">
|
|
<small>Leave empty for no start limit</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="guaranteeEndDate">End Date (optional)</label>
|
|
<input type="date" id="guaranteeEndDate">
|
|
<small>Leave empty for no end limit</small>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" id="cancelGuarantee">Cancel</button>
|
|
<button type="submit" class="btn btn-dark">Add</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>Add Parking Exclusion</h3>
|
|
<button class="modal-close" id="closeExclusionModal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="exclusionForm">
|
|
<div class="form-group">
|
|
<label for="exclusionUser">User</label>
|
|
<select id="exclusionUser" required>
|
|
<option value="">Select user...</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exclusionStartDate">Start Date (optional)</label>
|
|
<input type="date" id="exclusionStartDate">
|
|
<small>Leave empty for no start limit</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exclusionEndDate">End Date (optional)</label>
|
|
<input type="date" id="exclusionEndDate">
|
|
<small>Leave empty for no end limit</small>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" id="cancelExclusion">Cancel</button>
|
|
<button type="submit" class="btn btn-dark">Add</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/office-rules.js"></script>
|
|
</body>
|
|
</html>
|