Ayobami
59 lines
1.9 KiB
Plaintext
59 lines
1.9 KiB
Plaintext
<%- include('partials/header') %>
|
|
<div style="padding: 32px; max-width: 1100px; margin: 0 auto">
|
|
<h3>Pick a date and time</h3>
|
|
<p><b>Duration:</b> 1 hour</p>
|
|
<p>Your timezone: <%= selectedTimezone %> <a href="/timezone">(Change)</a></p>
|
|
<div style="overflow-x: auto; margin-top: 32px">
|
|
<table style="width: 100%; border-collapse: collapse">
|
|
<thead>
|
|
<tr>
|
|
<% weekDays.forEach(function(day) { %>
|
|
<th style="padding: 8px 12px; border-bottom: 2px solid #eee">
|
|
<div style="font-weight: bold; font-size: 1.1em">
|
|
<%= day.label %>
|
|
</div>
|
|
<div style="font-size: 0.95em; color: #888"><%= day.date %></div>
|
|
</th>
|
|
<% }) %>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% for (let i = 0; i < maxSlots; i++) { %>
|
|
<tr>
|
|
<% weekDays.forEach(function(day) { %>
|
|
<td style="padding: 8px 12px; text-align: center">
|
|
<% if (day.slots[i]) { %>
|
|
<form action="/book" method="GET" style="display: inline">
|
|
<input type="hidden" name="date" value="<%= day.dateISO %>" />
|
|
<input type="hidden" name="time" value="<%= day.slots[i] %>" />
|
|
<button
|
|
type="submit"
|
|
style="
|
|
background: #fff;
|
|
border: 1px solid #063970;
|
|
color: #063970;
|
|
border-radius: 4px;
|
|
padding: 4px 12px;
|
|
cursor: pointer;
|
|
"
|
|
>
|
|
<%= day.slots[i] %>
|
|
</button>
|
|
</form>
|
|
<% } %>
|
|
</td>
|
|
<% }) %>
|
|
</tr>
|
|
<% } %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style="margin-top: 16px">
|
|
<% if (showPrevWeek) { %>
|
|
<a href="/calendar?week=prev">Previous Week</a>
|
|
<% } %>
|
|
<a href="/calendar?week=next" style="margin-left: 24px">Next Week</a>
|
|
</div>
|
|
</div>
|
|
<%- include('partials/footer') %>
|