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

54
index.html
View File

@ -11,45 +11,27 @@
</head> </head>
<body> <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"> <div class="container" >
<h2 id="refresh_counter_text">Next refresh in 60</h2> <h2>Events Happening Now</h2>
</div> <div class="row" id="happeningNow">
</div>
</div>
<div class="container" id="happeningNow"> <hr />
<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>
<tbody></tbody> <div class="container" >
</table> <h2>Events Happening Next</h2>
</div> <div class="row" id="happeningNext">
</div>
</div>
<div class="container" id="happeningNext">
<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>
<tbody></tbody>
</table>
</div>
</body> </body>
</html> </html>

88
plugin-api.js
View File

@ -52,8 +52,8 @@ grist.onRecords(function (records) {
console.log(eventsOnNext); console.log(eventsOnNext);
populateTable("now", eventsOnNow); populateList("happeningNow", eventsOnNow);
populateTable("next", eventsOnNext); populateList("happeningNext", eventsOnNext);
window.setInterval(() => handleCountdown(), 1000); window.setInterval(() => handleCountdown(), 1000);
}); });
@ -110,57 +110,79 @@ function convertTimeToString(time) {
return hours + ":" + minutes; return hours + ":" + minutes;
} }
function populateTable(elementName, items) { function populateList(elementName, items) {
for (const i of 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"); const cardHeader = document.createElement("div");
var venue = document.createElement("td"); cardHeader.setAttribute("class", "card-header")
var videoNeeded = document.createElement("td"); cardHeader.innerHTML = i.name;
var privacy = document.createElement("td");
var comments = document.createElement("td"); const list = document.createElement("ul");
var startsIn = document.createElement("td"); 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"); startsIn.setAttribute("id", i.id + "_time");
name.innerHTML = i.name; venue.innerHTML = "Venue: " + i.venue;
venue.innerHTML = i.venue; videoNeeded.innerHTML = "Video Team Present: " + i.videoNeeded;
videoNeeded.innerHTML = i.videoNeeded; privacy.innerHTML = "Privacy: " + i.privacy;
privacy.innerHTML = i.privacy; comments.innerHTML = "Comment: " + i.comments;
comments.innerHTML = i.comments; startsIn.innerHTML = "Starts In: " + convertTimeToString(i.timeUntilStart()) + "(" + i.startTime.toLocaleString("en-GB", { timeZone: "UTC" }) + ")";
startsIn.innerHTML = convertTimeToString(i.timeUntilStart());
tableRow.appendChild(name); list.appendChild(venue);
tableRow.appendChild(venue); list.appendChild(videoNeeded);
tableRow.appendChild(videoNeeded); list.appendChild(privacy);
tableRow.appendChild(privacy); if (i.comments) {
tableRow.appendChild(comments); list.appendChild(comments);
tableRow.appendChild(startsIn); }
list.appendChild(startsIn);
// Colour in any rows // Colour in any rows
if (i.privacy != "public") { if (i.privacy != "public") {
privacy.innerHTML = makeTextBold(privacy.innerHTML);
if (i.privacy == "none") { 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") { } 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); comments.innerHTML = makeTextBold(comments.innerHTML);
tableRow.setAttribute("class", "table-danger");
} }
if (i.videoNeeded == true) { if (i.videoNeeded == true) {
videoNeeded.setAttribute("class", "list-group-item bg-warning");
videoNeeded.innerHTML = makeTextBold(videoNeeded.innerHTML); 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--; countdown--;
if (countdown == 0) { if (countdown == 0) {
countdown = MAX_COUNTDOWN; countdown = MAX_COUNTDOWN;
refreshTables(); window.reload();
} }
let counterElement = document.getElementById("refresh_counter_text"); let counterElement = document.getElementById("counter");
counterElement.innerHTML = "Next refresh in " + countdown; counterElement.innerHTML = "Next refresh in " + countdown;
} }