Working without nice updating

index.html

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

plugin-api.js

@@ -16,8 +16,6 @@ grist.onRecords(function (records) {
 
   var i = 0;
 
-  console.info(records);
-
   for (const r of records) {
     let privacy = r["video_privacy"];
     let videoNeeded = r["Video_team_attending"];
@@ -50,10 +48,8 @@ grist.onRecords(function (records) {
     return (e1.timeUntilStart() > e2.timeUntilStart()) ? 1 : ((e2.timeUntilStart() > e1.timeUntilStart()) ? -1 : 0)
   });
 
-  console.log(eventsOnNext);
+  populateList("happeningNow", eventsOnNow, false);
-
+  populateList("happeningNext", eventsOnNext, true);
-  populateList("happeningNow", eventsOnNow);
-  populateList("happeningNext", eventsOnNext);
 
   window.setInterval(() => handleCountdown(), 1000);
 });
@@ -99,21 +95,15 @@ 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));
-  if (hours < 10) {
-    hours = "0" + hours
-  }
-
   let minutes = time.getMinutes();
-  if (minutes < 10) {
+
-    minutes = "0" + minutes
+  return hours + " hours, " + minutes + " minutes";
-  }
-  return hours + ":" + minutes;
 }
 
-function populateList(elementName, items) {
+function populateList(elementName, items, getStartsIn) {
   for (const i of items) {
     const col = document.createElement("div");
-    col.setAttribute("class", "col-sm-12 col-bg-12")
+    col.setAttribute("class", "col-sm-12 col-md-3")
 
     const card = document.createElement("div");
     card.setAttribute("class", "card m-3")
@@ -131,21 +121,32 @@ function populateList(elementName, items) {
     var videoNeeded = document.createElement("ul");
     var privacy = document.createElement("ul");
     var comments = document.createElement("ul");
-    var startsIn = 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");
-    startsIn.setAttribute("class", "list-group-item");
-
-    startsIn.setAttribute("id", i.id + "_time");
 
     venue.innerHTML = "Venue: " + i.venue;
     videoNeeded.innerHTML = "Video Team Present: " + i.videoNeeded;
     privacy.innerHTML = "Privacy: " + i.privacy;
     comments.innerHTML = "Comment: " + i.comments;
-    startsIn.innerHTML = "Starts In: " + convertTimeToString(i.timeUntilStart()) + "(" + i.startTime.toLocaleString("en-GB", { timeZone: "UTC" }) + ")";
+
+    timer.setAttribute("class", "list-group-item");
+    timer.setAttribute("id", i.id + "_time");
+    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");
+      }
+    } else {
+      timer.innerHTML = "Ends In: " + convertTimeToString(i.timeUntilEnd()) + " (" + new Date(i.endTime).toLocaleString("en-GB", { timeZone: "UTC" }) + ")";
+    }
 
     list.appendChild(venue);
     list.appendChild(videoNeeded);
@@ -153,7 +154,7 @@ function populateList(elementName, items) {
     if (i.comments) {
       list.appendChild(comments);
     }
-    list.appendChild(startsIn);
+    list.appendChild(timer);
 
     // Colour in any rows
     if (i.privacy != "public") {
@@ -168,7 +169,6 @@ function populateList(elementName, items) {
 
     if (i.comments) {
       comments.setAttribute("class", "list-group-item bg-info");
-      console.log(i.comments);
       comments.innerHTML = makeTextBold(comments.innerHTML);
     }
 
@@ -186,28 +186,11 @@ function populateList(elementName, items) {
   }
 }
 
-function refreshTables() {
-  var toDelete = [];
-
-  now = Date.now();
-  for (const nowItem of eventsOnNow) {
-    let timeUntilEnd = nowItem.timeUntilEnd();
-
-    let timeField = document.getElementById(nowItem.id + "_time");
-    timeField.innerHTML = convertTimeToString(nowItem.timeUntilEnd());
-  }
-
-  for (const nextItem of eventsOnNext) {
-    let timeField = document.getElementById(nextItem.id + "_time");
-    timeField.innerHTML = convertTimeToString(nextItem.timeUntilEnd());
-  }
-}
-
 function handleCountdown() {
   countdown--;
   if (countdown == 0) {
     countdown = MAX_COUNTDOWN;
-    window.reload();
+    window.location.reload();
   }
 
   let counterElement = document.getElementById("counter");