Streams-R-Us/video-privacy-today
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use bootstrap cards

Browse Source
This commit is contained in:
Qumarth Jash 2026-07-16 11:50:26 +02:00
parent 61f9d04750
commit d3ff438d2f
2 changed files with 73 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -11,45 +11,27 @@
</head>
<body>
<header class="bd-header bg-primary py-3 d-flex align-items-stretch border-bottom border-dark">
<div class="container-fluid d-flex align-items-center">
<h1 class="d-flex align-items-center fs-4 text-white mb-0" id="counter">
Next refresh in 60
</h1>
</div>
</header>
<div class="container bg-primary text-white padding-3" id="counter">
<h2 id="refresh_counter_text">Next refresh in 60</h2>
</div>
<div class="container" id="happeningNow">
<div class="container" >
<h2>Events Happening Now</h2>
<table class="table table-bordered" id="now">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Venue</th>
<th scope="col">Video Team Needed</th>
<th scope="col">Privacy</th>
<th scope="col">Comments</th>
<th scope="col">Ends In</th>
</tr>
</thead>
<div class="row" id="happeningNow">
</div>
</div>
<tbody></tbody>
</table>
</div>
<hr />
<div class="container" id="happeningNext">
<div class="container" >
<h2>Events Happening Next</h2>
<table class="table table-bordered" id="next">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Venue</th>
<th scope="col">Video Team Needed</th>
<th scope="col">Privacy</th>
<th scope="col">Comments</th>
<th scope="col">Starts In</th>
</tr>
</thead>
<div class="row" id="happeningNext">
</div>
</div>
<tbody></tbody>
</table>
</div>
</body>
</html>

88
plugin-api.js
View File

@ -52,8 +52,8 @@ grist.onRecords(function (records) {
console.log(eventsOnNext);
populateTable("now", eventsOnNow);
populateTable("next", eventsOnNext);
populateList("happeningNow", eventsOnNow);
populateList("happeningNext", eventsOnNext);
window.setInterval(() => handleCountdown(), 1000);
});
@ -110,57 +110,79 @@ function convertTimeToString(time) {
return hours + ":" + minutes;
}
function populateTable(elementName, items) {
function populateList(elementName, items) {
for (const i of items) {
const tableRow = document.createElement("tr");
const col = document.createElement("div");
col.setAttribute("class", "col-sm-12 col-bg-12")
tableRow.setAttribute("id", i.id);
const card = document.createElement("div");
card.setAttribute("class", "card m-3")
var name = document.createElement("td");
var venue = document.createElement("td");
var videoNeeded = document.createElement("td");
var privacy = document.createElement("td");
var comments = document.createElement("td");
var startsIn = document.createElement("td");
const cardHeader = document.createElement("div");
cardHeader.setAttribute("class", "card-header")
cardHeader.innerHTML = i.name;
const list = document.createElement("ul");
list.setAttribute("class", "list-group list-group-flush")
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 startsIn = 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");
name.innerHTML = i.name;
venue.innerHTML = i.venue;
videoNeeded.innerHTML = i.videoNeeded;
privacy.innerHTML = i.privacy;
comments.innerHTML = i.comments;
startsIn.innerHTML = convertTimeToString(i.timeUntilStart());
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" }) + ")";
tableRow.appendChild(name);
tableRow.appendChild(venue);
tableRow.appendChild(videoNeeded);
tableRow.appendChild(privacy);
tableRow.appendChild(comments);
tableRow.appendChild(startsIn);
list.appendChild(venue);
list.appendChild(videoNeeded);
list.appendChild(privacy);
if (i.comments) {
list.appendChild(comments);
}
list.appendChild(startsIn);
// Colour in any rows
if (i.privacy != "public") {
privacy.innerHTML = makeTextBold(privacy.innerHTML);
if (i.privacy == "none") {
tableRow.setAttribute("class", "table-danger");
privacy.setAttribute("class", "list-group-item bg-danger")
privacy.innerHTML = makeTextBold("Privacy: Do not record!");
} else if (i.privacy == "review") {
tableRow.setAttribute("class", "table-warning");
privacy.setAttribute("class", "list-group-item bg-warning")
privacy.innerHTML = makeTextBold(privacy.innerHTML);
}
}
if (i.comments != "") {
if (i.comments) {
comments.setAttribute("class", "list-group-item bg-info");
console.log(i.comments);
comments.innerHTML = makeTextBold(comments.innerHTML);
tableRow.setAttribute("class", "table-danger");
}
if (i.videoNeeded == true) {
videoNeeded.setAttribute("class", "list-group-item bg-warning");
videoNeeded.innerHTML = makeTextBold(videoNeeded.innerHTML);
tableRow.setAttribute("class", "table-danger");
}
document.getElementById(elementName).getElementsByTagName("tbody")[0].append(tableRow);
card.appendChild(cardHeader);
card.appendChild(list);
col.append(card);
document.getElementById(elementName).appendChild(col);
}
}
@ -185,9 +207,9 @@ function handleCountdown() {
countdown--;
if (countdown == 0) {
countdown = MAX_COUNTDOWN;
refreshTables();
window.reload();
}
let counterElement = document.getElementById("refresh_counter_text");
let counterElement = document.getElementById("counter");
counterElement.innerHTML = "Next refresh in " + countdown;
}