`views/admin/calendar.ejs`

54 lines
<%- include('../partials/head', { title, admin: true }) %>
<%- include('partials/admin-header') %>
<section class="admin-main">
  <header class="admin-page-head"><h1>Calendar</h1><p class="muted">Set weekly availability and block time off. Customers self-book into open windows.</p></header>

  <div class="cal-layout">
    <section class="admin-section">
      <h2>Weekly availability</h2>
      <p class="muted">Recurring schedule. Slot length is set per-booking by the customer (default 60 min, 15 min buffer).</p>
      <table class="data-table availability-table">
        <thead><tr><th>Day</th><th>Start</th><th>End</th><th></th></tr></thead>
        <tbody id="availability-tbody">
          <% availability.forEach(function(a){ %>
            <tr data-id="<%= a.id %>">
              <td><%= ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][a.day_of_week] %></td>
              <td><%= a.start_time %></td>
              <td><%= a.end_time %></td>
              <td><button type="button" class="btn btn-ghost btn-sm" data-remove-availability="<%= a.id %>">Remove</button></td>
            </tr>
          <% }); %>
        </tbody>
      </table>
      <form id="add-availability" class="inline-form-row">
        <select name="day_of_week" required>
          <option value="">Day…</option>
          <option value="0">Sun</option><option value="1">Mon</option><option value="2">Tue</option>
          <option value="3">Wed</option><option value="4">Thu</option><option value="5">Fri</option><option value="6">Sat</option>
        </select>
        <input type="time" name="start_time" required>
        <input type="time" name="end_time" required>
        <button type="submit" class="btn btn-primary btn-sm">Add window</button>
      </form>
    </section>

    <section class="admin-section">
      <h2>Time off / blocks</h2>
      <ul id="time-off-list" class="time-off-list"></ul>
      <form id="add-time-off" class="inline-form-row">
        <input type="datetime-local" name="start_at" required>
        <input type="datetime-local" name="end_at" required>
        <input type="text" name="reason" placeholder="Reason (optional)">
        <button type="submit" class="btn btn-primary btn-sm">Block</button>
      </form>
    </section>

    <section class="admin-section">
      <h2>Upcoming on your calendar</h2>
      <div id="upcoming-cal-list" class="muted">Loading…</div>
    </section>
  </div>
</section>
<%- include('../partials/footer') %>
<script src="/js/calendar-installer.js" defer></script>