initial commit

cssbristol · Dec 20, 2022 · 45dc360 · 45dc360
commit 45dc360
Show file tree

Hide file tree

Showing 7 changed files with 348 additions and 0 deletions.
diff --git a/background-check.min.js b/background-check.min.js
diff --git a/default_background.png b/default_background.png
diff --git a/front-matter.js b/front-matter.js
@@ -0,0 +1,76 @@
+var optionalByteOrderMark = '\\ufeff?'
+var platform = typeof process !== 'undefined' ? process.platform : ''
+var pattern = '^(' +
+  optionalByteOrderMark +
+  '(= yaml =|---)' +
+  '$([\\s\\S]*?)' +
+  '^(?:\\2|\\.\\.\\.)\\s*' +
+  '$' +
+  (platform === 'win32' ? '\\r?' : '') +
+  '(?:\\n)?)'
+// NOTE: If this pattern uses the 'g' flag the `regex` variable definition will
+// need to be moved down into the functions that use it.
+var regex = new RegExp(pattern, 'm')
+
+function extractor (string, options) {
+  string = string || ''
+  var defaultOptions = { allowUnsafe: false }
+  options = options instanceof Object ? { ...defaultOptions, ...options } : defaultOptions
+  options.allowUnsafe = Boolean(options.allowUnsafe)
+  var lines = string.split(/(\r?\n)/)
+  if (lines[0] && /= yaml =|---/.test(lines[0])) {
+    return parse(string, options.allowUnsafe)
+  } else {
+    return {
+      attributes: {},
+      body: string,
+      bodyBegin: 1
+    }
+  }
+}
+
+function computeLocation (match, body) {
+  var line = 1
+  var pos = body.indexOf('\n')
+  var offset = match.index + match[0].length
+
+  while (pos !== -1) {
+    if (pos >= offset) {
+      return line
+    }
+    line++
+    pos = body.indexOf('\n', pos + 1)
+  }
+
+  return line
+}
+
+function parse (string, allowUnsafe) {
+  var match = regex.exec(string)
+  if (!match) {
+    return {
+      attributes: {},
+      body: string,
+      bodyBegin: 1
+    }
+  }
+
+  var loader = jsyaml.load;
+  var yaml = match[match.length - 1].replace(/^\s+|\s+$/g, '')
+  var attributes = loader(yaml) || {}
+  var body = string.replace(match[0], '')
+  var line = computeLocation(match, string)
+
+  return {
+    attributes: attributes,
+    body: body,
+    bodyBegin: line,
+    frontmatter: yaml
+  }
+}
+
+function test (string) {
+  string = string || ''
+
+  return regex.test(string)
+}
diff --git a/index.css b/index.css
@@ -0,0 +1,70 @@
+/* font-family: 'Noto Sans', sans-serif;
+font-family: 'Noto Sans Display', sans-serif; */
+
+html, body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: 'Noto Sans', sans-serif;
+}
+
+body {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url("default_background.png");
+    background-color: #000000;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+h1 {
+    font-family: 'Noto Sans Display', sans-serif;
+    font-size: 50px;
+    margin: 10px 0;
+}
+
+.main-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 20px;
+    gap: 20px;
+    justify-content: space-between;
+}
+.main-container > * {
+    margin-top: auto;
+    height: fit-content;
+}
+
+#starting-in {
+    background-color: red;
+    width: fit-content;
+    padding: 5px 10px;
+    border-radius: 7px;
+    color: white;
+    font-weight: 600;
+}
+
+.date-time-location {
+    font-weight: 600;
+}
+
+#description {
+    max-width: 800px;
+}
+
+#qr-code {
+    background: white;
+    padding: 10px;
+    border-radius: 10px;
+}
+
+.background--light {
+    color: #101010;
+}
+.background--dark {
+    color: #F0F0F0;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+    <head>
+        <title>CSS Kiosk</title>
+        <link rel="stylesheet" href="index.css">
+
+        <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@900&family=Noto+Sans:wght@400;600&display=swap" rel="stylesheet">
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js" integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script src="background-check.min.js"></script>
+        <script src="qrcode.min.js"></script>
+        <script src="front-matter.js"></script>
+        <script src="index.js"></script>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="utf-8">
+    </head>
+    <body class="background">
+        <div class="main-container">
+            <div>
+                <div id="sponsors"></div>
+                <h1 id="event-title" class="bg-check-target">Random Event Title</h1>
+                <p id="starting-in" style="display: none;">Starting in 10 minutes</p>
+                <p class="date-time-location">
+                    <span id="single-day" style="display: none;">
+                        <span id="date" class="bg-check-target">20/12/2022</span>
+                        <span class="bg-check-target"> | </span>
+                        <span id="time" class="bg-check-target">6pm to 8pm</span>
+                    </span>
+                    <span id="multi-day" style="display: initial;">
+                        <span id="start-date" class="bg-check-target">20/12/2022 5am</span>
+                        <span class="bg-check-target"> to </span>
+                        <span id="end-date" class="bg-check-target">21/12/2022 8:30pm</span>
+                    </span>
+                    <span class="bg-check-target"> | </span>
+                    <span id="location" class="bg-check-target">MVB 1.11/1.12</span>
+                </p>
+                <p id="description" class="bg-check-target">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores totam nostrum vero omnis numquam sit ipsam repellendus possimus aliquam, quaerat at ex accusamus esse eum iure dignissimos laborum quia quis.</p>
+            </div>
+
+            <div id="qr-code"></div>
+        </div>
+    </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,152 @@
+let events = [];
+let eventsToDisplay = [];
+
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
+window.addEventListener("load", () => {
+    BackgroundCheck.init({
+        targets: ".bg-check-target",
+        images: ".background"
+    });
+
+    main()
+});
+
+async function main() {
+    events = await loadEvents();
+    eventsToDisplay = await loadEventsToDisplay();
+
+    setInterval(async () => {
+        events = await loadEvents();
+        eventsToDisplay = await loadEventsToDisplay();
+    }, 5 * 60 * 1000);
+
+    while (true) {
+        if (eventsToDisplay.length > 0)
+            await displayEvents();
+        else
+            await delay(1000);
+    }
+}
+
+async function loadEvents() {
+    let r = await fetch("https://api.github.com/repos/cssbristol/cssbristol.github.io/contents/_events");
+    let events = await r.json();
+    let promises = [];
+    for (let event of events) {
+        let promise = fetch(event.download_url)
+        .then(r => r.text())
+        .then(text => {
+            event.text = text;
+            let data = extractor(event.text);
+            event.attributes = data.attributes;
+            event.attributes.date = new Date(event.attributes.date);
+            event.attributes.date_end = new Date(event.attributes.date_end);
+            event.body = data.body;
+        });
+        promises.push(promise);
+    }
+    await Promise.all(promises);
+    return events;
+}
+
+async function loadEventsToDisplay() {
+    let eventsToDisplay = [];
+    const now = new Date();
+    for (let event of events) {
+        if (now < event.attributes.date_end) {
+            eventsToDisplay.push(event);
+        }
+    }
+
+    return eventsToDisplay;
+}
+
+async function displayEvents() {
+    let yetToDisplay = [...eventsToDisplay];
+    while (yetToDisplay.length > 0) {
+        let event = yetToDisplay.pop();
+        displayEvent(event);
+        await delay(15 * 1000);
+    }
+}
+
+function displayEvent(event) {
+    const now = new Date();
+    let body = document.body;
+    let QRCodeElement = document.getElementById("qr-code");
+    let eventTitleElement = document.getElementById("event-title");
+    let descriptionElement = document.getElementById("description");
+    let startingInElement = document.getElementById("starting-in");
+    let singleDayContainer = document.getElementById("single-day");
+    let multiDayContainer = document.getElementById("multi-day");
+    let dateElement = document.getElementById("date");
+    let timeElement = document.getElementById("time");
+    let startElement = document.getElementById("start-date");
+    let endElement = document.getElementById("end-date");
+    let locationElement = document.getElementById("location");
+
+    const kioskDefault = {
+        background: "https://cssbristol.co.uk/assets/images/contrib/events/" + event.attributes.banner || "assets/default_background.png",
+        short_description: event.body.substring(0, 150) + "..." || "",
+        kiosk_title: event.attributes.title || "",
+        show_sponsors: true,
+        show_date: true
+    }
+    let kioskOptions = {...event.attributes.kiosk, ...kioskDefault};
+
+    body.style.backgroundImage = `url(${kioskOptions.background}), url(default_background.png)`;
+
+    eventTitleElement.innerText = kioskOptions.kiosk_title;
+
+    let timeToStart = Math.abs(event.attributes.date - now);
+    if (timeToStart < 0) {
+        startingInElement.style.display = "";
+        startingInElement.innerText = "In progress";
+    } else if (timeToStart < 60 * 60 * 1000) {
+        startingInElement.style.display = "";
+        let minutes = Math.abs(timeToStart / 60 / 1000);
+        startingInElement.innerText = `Starting in ${minutes} minute` + (minutes ? "s" : "");
+    } else if (timeToStart < 24 * 60 * 60 * 1000) {
+        startingInElement.style.display = "";
+        let hours = Math.abs(timeToStart / 60 / 60 / 1000);
+        startingInElement.innerText = `Starting in ${hours} hours` + (hours ? "s" : "");
+    } else {
+        startingInElement.style.display = "none";
+    }
+
+    let startDate = event.attributes.date.toLocaleDateString("en-GB");
+    let endDate = event.attributes.date_end.toLocaleDateString("en-GB");
+    let startTime = event.attributes.date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }).replace(" ", "").toLowerCase();
+    let endTime = event.attributes.date_end.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }).replace(" ", "").toLowerCase();
+    if (startDate === endDate) {
+        singleDayContainer.style.display = "";
+        multiDayContainer.style.display = "none";
+        dateElement.innerText = startDate;
+        timeElement.innerText = `${startTime} to ${endTime}`;
+    } else {
+        singleDayContainer.style.display = "none";
+        multiDayContainer.style.display = "";
+        startElement = `${startDate} ${startTime}`;
+        endElement = `${endDate} ${endTime}`;
+    }
+
+    locationElement.innerText = event.attributes.location;
+
+    descriptionElement.innerText = kioskOptions.short_description;
+
+    let url = "https://cssbristol.co.uk/events/" + event.name.replace(".md", "");
+    QRCodeElement.innerHTML = "";
+    new QRCode(QRCodeElement, {
+        text: url,
+        width: 220,
+	    height: 220,
+    });
+
+    let img = new Image();
+    img.src = kioskOptions.background;
+    img.onload = () => {
+        BackgroundCheck.refresh();
+    }
+    if (img.complete) img.onload();
+}
diff --git a/qrcode.min.js b/qrcode.min.js