65 lines
3.3 KiB
HTML
65 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head><meta charset="utf-8"><title>Fixture gym my bookings</title></head>
|
|
<body>
|
|
<nav><a id="my-bookings-link" href="my_bookings.html">My Bookings</a></nav>
|
|
<div id="my-bookings-page" data-bookings-count="0" data-waitlist-count="0" data-loading="true">
|
|
<h1>My Bookings</h1>
|
|
<p id="loading-placeholder">Loading your bookings...</p>
|
|
<div id="content"></div>
|
|
</div>
|
|
<script>
|
|
// Imitates the site: a loading text, then the page for the state in the query
|
|
// (?state=empty or ?state=error; anything else shows two bookings and a waitlist entry;
|
|
// ?extra=future adds three more Tuesday and Thursday 6pm bookings after the others).
|
|
const params = new URLSearchParams(window.location.search);
|
|
const state = params.get("state");
|
|
// ?fail=N shows the error for the first N loads of the page in this tab (the network
|
|
// simulation); the count lives in sessionStorage because every load starts a new page.
|
|
const loads = parseInt(sessionStorage.getItem("loads") || "0", 10);
|
|
const dropped = loads < parseInt(params.get("fail") || "0", 10);
|
|
sessionStorage.setItem("loads", String(loads + 1));
|
|
// The nav link keeps the state, so opening the page from here shows the same state again.
|
|
document.getElementById("my-bookings-link").href = "my_bookings.html" + window.location.search;
|
|
function futureBookings() {
|
|
const whens = ["Thu, Aug 21, 6:00 PM", "Tue, Aug 26, 6:00 PM", "Thu, Aug 28, 6:00 PM"];
|
|
return whens.map(function (when, i) {
|
|
return '<div id="booking-card-' + (13 + i) + '" data-booking-status="confirmed">' +
|
|
'<h3 id="booking-class-name-' + (13 + i) + '">Spin Class</h3>' +
|
|
'<p><strong>When:</strong> ' + when + '</p></div>';
|
|
}).join("");
|
|
}
|
|
const page = document.getElementById("my-bookings-page");
|
|
const content = document.getElementById("content");
|
|
setTimeout(function () {
|
|
document.getElementById("loading-placeholder").remove();
|
|
page.dataset.loading = "false";
|
|
if (state === "error" || dropped) {
|
|
content.innerHTML = '<div id="error-message">Failed to load bookings</div>';
|
|
} else if (state === "empty") {
|
|
content.innerHTML = '<div id="empty-bookings-state">You have no bookings yet</div>';
|
|
} else {
|
|
const extra = params.get("extra") === "future" ? futureBookings() : "";
|
|
page.dataset.bookingsCount = params.get("extra") === "future" ? "5" : "2";
|
|
page.dataset.waitlistCount = "1";
|
|
content.innerHTML =
|
|
'<div id="confirmed-bookings-section">' +
|
|
'<div id="booking-card-11" data-booking-status="confirmed">' +
|
|
'<h3 id="booking-class-name-11">Spin Class</h3>' +
|
|
'<p><strong>When:</strong> Tue, Aug 12, 6:00 PM</p></div>' +
|
|
'<div id="booking-card-12" data-booking-status="confirmed">' +
|
|
'<h3 id="booking-class-name-12">Yoga Class</h3>' +
|
|
'<p><strong>When:</strong> Wed, Aug 13, 7:00 AM</p></div>' +
|
|
extra +
|
|
'</div>' +
|
|
'<div id="waitlist-section">' +
|
|
'<div id="waitlist-card-21" data-booking-status="waitlisted">' +
|
|
'<h3 id="waitlist-class-name-21">HIIT Class (Waitlist)</h3>' +
|
|
'<p><strong>When:</strong> Thu, Aug 14, 6:00 PM</p></div>' +
|
|
'</div>';
|
|
}
|
|
}, 200);
|
|
</script>
|
|
</body>
|
|
</html>
|