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");