Testing trying not to just refresh the page

This commit is contained in:
Qumarth Jash 2026-07-16 17:23:56 +01:00
parent 5496f8b024
commit f750b786af
2 changed files with 92 additions and 95 deletions

View File

@ -20,17 +20,17 @@
</header> </header>
<div class="container p-3"> <div class="container p-3">
<h2>Events Happening Now</h2> <h2>Happening Now</h2>
<div class="row bg-light rounded" id="happeningNow"> <ul class="list-group bg-light rounded" id="happeningNow">
</div> </ul>
</div> </div>
<hr /> <hr />
<div class="container p-3"> <div class="container p-3">
<h2>Events Happening Next</h2> <h2>Happening Next</h2>
<div class="row bg-light rounded" id="happeningNext"> <ul class="list-group bg-light rounded" id="happeningNext">
</div> </ul>
</div> </div>
</body> </body>

View File

@ -12,21 +12,17 @@ grist.ready({
grist.onRecords(function (records) { grist.onRecords(function (records) {
eventsOnNow = []; eventsOnNow = [];
eventsOnNext = []; eventsOnNext = [];
now = Date.now(); now = Date.now() + (60 + 50) * 60 * 1000;
var i = 0; var i = 0;
for (const r of records) { for (const r of records) {
let privacy = r["video_privacy"];
let videoNeeded = r["Video_team_attending"];
if (privacy == "none" || videoNeeded == true) {
let e = new Event( let e = new Event(
i++, i++,
r["title"], r["title"],
r["venue"], r["venue"],
videoNeeded, r["video_privacy"],
privacy, r["Record_override"],
r["Comments"], r["Comments"],
Date.parse(r["start_date"]), Date.parse(r["start_date"]),
Date.parse(r["end_date"]) Date.parse(r["end_date"])
@ -38,7 +34,6 @@ grist.onRecords(function (records) {
eventsOnNext.push(e); eventsOnNext.push(e);
} }
} }
}
eventsOnNow.sort((e1, e2) => { eventsOnNow.sort((e1, e2) => {
return (e1.timeUntilEnd() > e2.timeUntilEnd()) ? 1 : ((e2.timeUntilEnd() > e1.timeUntilEnd()) ? -1 : 0) return (e1.timeUntilEnd() > e2.timeUntilEnd()) ? 1 : ((e2.timeUntilEnd() > e1.timeUntilEnd()) ? -1 : 0)
@ -60,12 +55,12 @@ grist.onOptions(function(options, interaction) {
}); });
class Event { class Event {
constructor(id, name, venue, videoNeeded, privacy, comments, startTime, endTime) { constructor(id, name, venue, privacy, recordOverride, comments, startTime, endTime) {
this.id = id; this.id = id;
this.name = name; this.name = name;
this.venue = venue; this.venue = venue;
this.videoNeeded = videoNeeded;
this.privacy = privacy; this.privacy = privacy;
this.recordOverride = recordOverride;
this.comments = comments; this.comments = comments;
this.startTime = startTime; this.startTime = startTime;
this.endTime = endTime; this.endTime = endTime;
@ -95,94 +90,93 @@ function makeTextBold(text) {
function convertTimeToString(time) { function convertTimeToString(time) {
// Using getHours() is bullshit for this usage, it won't include any days in the hours // Using getHours() is bullshit for this usage, it won't include any days in the hours
let hours = Math.floor(time / (1000 * 60 * 60)); let hours = Math.floor(time / (1000 * 60 * 60));
let minutes = time.getMinutes(); let minutes = Math.ceil((time - (hours * 60 * 60 * 1000)) / (1000 * 60));
return hours + " hours, " + minutes + " minutes"; return hours + " hours, " + minutes + " minutes";
} }
function populateList(elementName, items, getStartsIn) { function populateList(elementName, items, getStartsIn) {
document.getElementById(elementName).innerHTML = "";
for (const i of items) { for (const i of items) {
const col = document.createElement("div"); var listItem = document.createElement("li");
col.setAttribute("class", "col-sm-12 col-md-3")
const card = document.createElement("div"); listItem.setAttribute("class", "list-group-item shadow-sm d-flex flex-wrap align-items-center m-2 rounded-3")
card.setAttribute("class", "card m-3") listItem.setAttribute("id", i.id);
const cardHeader = document.createElement("div"); // Basic info of event name, venue and time
cardHeader.setAttribute("class", "card-header") var title = document.createElement("h4");
cardHeader.innerHTML = i.name; title.setAttribute("class", "me-auto")
title.innerHTML = i.name;
const list = document.createElement("ul"); var venue = document.createElement("small");
list.setAttribute("class", "list-group list-group-flush") venue.setAttribute("class", "text-body-secondary");
venue.innerHTML = " " + i.venue + " | ";
list.setAttribute("id", i.id); var time = document.createElement("small");
time.setAttribute("id", i.id + "_time");
var venue = document.createElement("ul"); time.setAttribute("class", "text-body-secondary");
var videoNeeded = document.createElement("ul");
var privacy = document.createElement("ul");
var comments = document.createElement("ul");
var timer = document.createElement("ul");
venue.setAttribute("class", "list-group-item");
videoNeeded.setAttribute("class", "list-group-item");
privacy.setAttribute("class", "list-group-item");
comments.setAttribute("class", "list-group-item");
venue.innerHTML = "Venue: " + i.venue;
videoNeeded.innerHTML = "Video Team Present: " + i.videoNeeded;
privacy.innerHTML = "Privacy: " + i.privacy;
comments.innerHTML = "Comment: " + i.comments;
timer.setAttribute("class", "list-group-item");
timer.setAttribute("id", i.id + "_time");
if (getStartsIn) { if (getStartsIn) {
timer.innerHTML = "Starts In: " + convertTimeToString(i.timeUntilStart()) + " (" + new Date(i.startTime).toLocaleString("en-GB", { timeZone: "UTC" }) + ")"; time.innerHTML = convertTimeToString(i.timeUntilStart());
} else {
time.innerHTML = "(ends in) " + convertTimeToString(i.timeUntilEnd());
}
// Red border if show starts in 15 minutes // Red border if show starts in 15 minutes
if (getStartsIn) {
if (i.timeUntilStart() <= 15 * 60 * 1000){ if (i.timeUntilStart() <= 15 * 60 * 1000){
card.setAttribute("class", "card m-3 border border-5 border-danger"); listItem.setAttribute("class", listItem.getAttribute("class") + " border-2 border-danger");
timer.setAttribute("class", "list-group-item text-danger"); time.setAttribute("class", "text-danger");
} }
} else {
timer.innerHTML = "Ends In: " + convertTimeToString(i.timeUntilEnd()) + " (" + new Date(i.endTime).toLocaleString("en-GB", { timeZone: "UTC" }) + ")";
} }
list.appendChild(venue); title.appendChild(venue);
list.appendChild(videoNeeded); title.appendChild(time);
list.appendChild(privacy); listItem.appendChild(title);
if (i.comments) {
list.appendChild(comments); // Badges
} var privacyBadge = document.createElement("span");
list.appendChild(timer);
// Colour in any rows
if (i.privacy != "public") {
if (i.privacy == "none") { if (i.privacy == "none") {
privacy.setAttribute("class", "list-group-item bg-danger") privacyBadge.innerHTML = "Do not record"
privacy.innerHTML = makeTextBold("Privacy: Do not record!"); privacyBadge.setAttribute("class", "badge text-bg-danger rounded-pill")
} else if (i.privacy == "review") { } else if (i.privacy == "review") {
privacy.setAttribute("class", "list-group-item bg-warning") privacyBadge.innerHTML = "Review"
privacy.innerHTML = makeTextBold(privacy.innerHTML); privacyBadge.setAttribute("class", "badge text-bg-warning rounded-pill")
} else {
privacyBadge.innerHTML = "Record";
privacyBadge.setAttribute("class", "badge text-bg-success rounded-pill")
} }
listItem.appendChild(privacyBadge);
if (i.recordOverride) {
var recordOverrideBadge = document.createElement("span");
recordOverrideBadge.innerHTML = "Record override";
recordOverrideBadge.setAttribute("class", "badge text-bg-primary rounded-pill border border-danger")
listItem.appendChild(recordOverrideBadge);
} }
if (i.comments) { if (i.comments) {
comments.setAttribute("class", "list-group-item bg-info"); var commentsBadge = document.createElement("span");
comments.innerHTML = makeTextBold(comments.innerHTML); commentsBadge.innerHTML = i.comments
commentsBadge.setAttribute("class", "badge text-bg-info rounded-pill")
listItem.appendChild(commentsBadge);
} }
if (i.videoNeeded == true) { document.getElementById(elementName).appendChild(listItem);
videoNeeded.setAttribute("class", "list-group-item bg-warning"); }
videoNeeded.innerHTML = makeTextBold(videoNeeded.innerHTML); }
function refreshLists() {
// Clear anything that's finished
while (eventsOnNow.length >0 && eventsOnNow.at(0).hasEnded()) {
eventsOnNow.shift();
} }
card.appendChild(cardHeader); // Get anything that's started and add it to the "Happening now" list
card.appendChild(list); while (eventsOnNext.length > 0 && eventsOnNext.at(0).hasStarted()) {
eventsOnNow.push(eventsOnNext.shift());
col.append(card);
document.getElementById(elementName).appendChild(col);
} }
} }
@ -190,7 +184,10 @@ function handleCountdown() {
countdown--; countdown--;
if (countdown == 0) { if (countdown == 0) {
countdown = MAX_COUNTDOWN; countdown = MAX_COUNTDOWN;
window.location.reload();
refreshLists();
populateList("happeningNow", eventsOnNow, false);
populateList("happeningNext", eventsOnNext, true);
} }
let counterElement = document.getElementById("counter"); let counterElement = document.getElementById("counter");