110 lines
6.2 KiB
HTML
110 lines
6.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>FreeSched Admin - Manage Availability</title>
|
||
|
|
<!-- Bootstrap CSS -->
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="/styles.css">
|
||
|
|
<!-- Bootstrap Icons -->
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container-fluid p-0">
|
||
|
|
<div class="row g-0">
|
||
|
|
<div class="col-md-4 sidebar bg-light border-end border-gray-300">
|
||
|
|
<div class="d-flex flex-column align-items-center p-4">
|
||
|
|
<img src="/avatar.jpg" alt="Doug Masiero" class="profile-pic rounded-circle mb-3 shadow-sm">
|
||
|
|
<h2 class="fs-5 text-dark fw-bold mb-2">Doug Masiero</h2>
|
||
|
|
<h3 class="fs-6 text-muted mb-2">30 Minute Meeting</h3>
|
||
|
|
<p class="text-muted fs-6">30 min</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-8 main-content p-4">
|
||
|
|
<div class="calendar-header d-flex justify-content-between align-items-center text-dark fs-5 mb-3">
|
||
|
|
<button id="adminPrevMonth" class="btn btn-link p-0 text-decoration-none"><i class="bi bi-chevron-left"></i></button>
|
||
|
|
<span id="adminMonthYear" class="fw-bold"></span>
|
||
|
|
<button id="adminNextMonth" class="btn btn-link p-0 text-decoration-none"><i class="bi bi-chevron-right"></i></button>
|
||
|
|
</div>
|
||
|
|
<div class="calendar mb-4">
|
||
|
|
<div class="days-of-week d-grid gap-2 mb-2" style="grid-template-columns: repeat(7, 1fr);">
|
||
|
|
<span class="text-muted fw-bold text-center p-2">SUN</span>
|
||
|
|
<span class="text-muted fw-bold text-center p-2">MON</span>
|
||
|
|
<span class="text-muted fw-bold text-center p-2">TUE</span>
|
||
|
|
<span class="text-muted fw-bold text-center p-2">WED</span>
|
||
|
|
<span class="text-muted fw-bold text-center p-2">THU</span>
|
||
|
|
<span class="text-muted fw-bold text-center p-2">FRI</span>
|
||
|
|
<span class="text-muted fw-bold text-center p-2">SAT</span>
|
||
|
|
</div>
|
||
|
|
<div id="adminCalendarDates" class="dates d-grid gap-2" style="grid-template-columns: repeat(7, 1fr);">
|
||
|
|
<!-- Dates will be dynamically generated by JavaScript -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="uid-section mb-4">
|
||
|
|
<h2 class="fs-4 text-dark fw-bold mb-3">Manage Schedule UIDs</h2>
|
||
|
|
<div class="row g-3 mb-4">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<select class="form-select form-select-lg" id="uidSelect">
|
||
|
|
<option value="">Select a Schedule UID...</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<button class="btn btn-warning btn-lg w-100" id="flushDatabase" disabled>Clear UID</button>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<button class="btn btn-danger btn-lg w-100" id="deleteUid" disabled>Delete UID</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row g-3 mb-4">
|
||
|
|
<div class="col-md-9">
|
||
|
|
<div class="mb-2">
|
||
|
|
<div class="input-group input-group-lg gap-2">
|
||
|
|
<input type="text" class="form-control" id="newUid" placeholder="Enter new UID (e.g., john-1on1)">
|
||
|
|
<button class="btn btn-success" id="createUid" style="min-width: 120px;">Create UID</button>
|
||
|
|
</div>
|
||
|
|
<div class="form-text">UIDs should be lowercase letters, numbers, and hyphens only</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row g-3 mb-4">
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="form-control-lg bg-light p-3">
|
||
|
|
<small class="d-block text-muted mb-1">Selected UID URL:</small>
|
||
|
|
<a id="uidUrl" href="#" target="_blank" class="text-decoration-none text-break">Select a UID first</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="availability-section">
|
||
|
|
<div id="selectedDateDisplay" class="mb-3 text-muted fs-6"></div>
|
||
|
|
<div class="time-grid mb-3">
|
||
|
|
<div class="time-slots" id="timeSlots">
|
||
|
|
<!-- Time slots will be dynamically populated by JavaScript -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="powered-by">
|
||
|
|
<a href="https://github.com/moeny/freesched" target="_blank" class="text-decoration-none text-muted">Powered by FreeSched</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container-fluid p-0">
|
||
|
|
<div class="danger-zone border border-danger rounded p-4">
|
||
|
|
<h2 class="fs-4 text-danger fw-bold mb-3">⚠️ Danger Zone</h2>
|
||
|
|
<p class="text-muted mb-4">The actions in this section can cause irreversible changes to the database. Please proceed with caution.</p>
|
||
|
|
<button class="btn btn-outline-danger w-100 mb-2" id="resetDatabase">Reset Global Database</button>
|
||
|
|
<div class="text-muted">This will permanently delete all UIDs and their associated availability data.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Bootstrap JS and Popper.js -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
|
||
|
|
<script src="/admin.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|