Testing trying not to just refresh the page
This commit is contained in:
parent
5496f8b024
commit
f750b786af
12
index.html
12
index.html
@ -20,17 +20,17 @@
|
||||
</header>
|
||||
|
||||
<div class="container p-3">
|
||||
<h2>Events Happening Now</h2>
|
||||
<div class="row bg-light rounded" id="happeningNow">
|
||||
</div>
|
||||
<h2>Happening Now</h2>
|
||||
<ul class="list-group bg-light rounded" id="happeningNow">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="container p-3">
|
||||
<h2>Events Happening Next</h2>
|
||||
<div class="row bg-light rounded" id="happeningNext">
|
||||
</div>
|
||||
<h2>Happening Next</h2>
|
||||
<ul class="list-group bg-light rounded" id="happeningNext">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
175
plugin-api.js
175
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");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user