From f750b786af774ce7ea75375777e308f7f6d754f4 Mon Sep 17 00:00:00 2001 From: Qumarth Jash Date: Thu, 16 Jul 2026 17:23:56 +0100 Subject: [PATCH] Testing trying not to just refresh the page --- index.html | 12 ++-- plugin-api.js | 175 +++++++++++++++++++++++++------------------------- 2 files changed, 92 insertions(+), 95 deletions(-) diff --git a/index.html b/index.html index 8a74fec..5111099 100644 --- a/index.html +++ b/index.html @@ -20,17 +20,17 @@
-

Events Happening Now

-
-
+

Happening Now

+
-

Events Happening Next

-
-
+

Happening Next

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