infobeamer beta

2021-12-23 21:40:48 +01:00 · 2021-12-23 21:40:48 +01:00 · eb30a69ab6
parent fcc9ccb713
commit eb30a69ab6
1 changed files with 116 additions and 0 deletions
--- a/static/infobeamer/index.html
+++ b/static/infobeamer/index.html
@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<title>
+		Infobeamer
+	</title>
+	<link rel="stylesheet" href="/../../style.css">
+    <script language="javascript" type="text/javascript">
+        main().then(() => console.log("loaded"));
+
+        function parse_duration(duration) {
+            if (duration == undefined) {
+                return 0;
+            }
+            const [hours, minutes] = duration.split(":");
+            return (hours * 60 * 60 + minutes * 60) * 1000;
+        }
+
+        function render(talk) {
+            const now = Date.parse("2021-12-27T11:35:00+01:00");
+            const max = talk.end - talk.start;
+            var value = 0;
+            if (talk.start < now && talk.end > now) {
+                value = talk.end - now;
+                value = max - value
+            } else if ( talk.end < now ) {
+                value = max;
+            }
+
+            const element = document.createElement("div")
+            element.innerHTML = talk.abstract;
+            const abstract = element.innerText;
+
+            return `
+<li class="box">
+    <h2 class="box-header">${talk.title}</h2>
+    <div class="box-content">
+        <p class="date">
+            Speakers: ${talk.persons.join(", ") || "---"}<br>
+            Stage: ${talk.room}<br>
+            Time: ${talk.start_string}<br>
+            Duration: ${talk.duration}<br>
+        </p>
+        <p>${abstract}</p>
+        <progress max="${max}" value="${value}">
+    </div>
+</li>`;
+        }
+
+        async function main() {
+            const resp = await fetch("https://static.rc3.world/schedule/everything.json");
+            const schedule = await resp.json();
+
+            const now = new Date();
+
+            var upcoming = [];
+            var content = "";
+            for (const day of schedule.schedule.conference.days) {
+                for (const [channel, talks] of Object.entries(day.rooms)) {
+                    for (const talk of talks) {
+                        talk_end = Date.parse(talk.date) + parse_duration(talk.duration);
+                        if (talk_end > now) {
+                            parsed = {
+                                start: Date.parse(talk.date),
+                                date_string: talk.date,
+                                end: talk_end,
+                                start_string: talk.start,
+                                duration: talk.duration,
+                                room: talk.room,
+                                title: talk.title,
+                                abstract: talk.abstract,
+                                persons: talk.persons.map(person => person.public_name),
+                            };
+                            upcoming.push(parsed);
+                            break;
+                        }
+                    };
+                    
+                }
+            }
+
+            upcoming.sort((a, b) => a.end - b.end);
+            for (const talk of upcoming) {
+                content += render(talk);
+            }
+
+            document.getElementById("list").innerHTML = content;
+            const hours = `${now.getHours()}`.padStart(2, '0');
+            const minutes = `${now.getMinutes()}`.padStart(2, '0');
+            document.getElementById("time").innerHTML = `${hours}:${minutes}`;
+    
+            setInterval(main, 60 * 1000);
+        }
+    </script> 
+</head>
+<body>
+	<header>
+		<nav class="nav nav-main">
+			<a class="nav-logo" href="/">
+                <img src="/../../franconianNet.svg" 
+                     alt="Logo of franconian.net">franconian.net</a>
+            <hr>
+            <a class="nav-link" href="#" id="time"></a>
+		</nav>
+	</header>
+    <main>
+        <h1>running / upcoming</h1>
+
+        <ul class="box-grid" id="list">
+        /ul>
+    </main>
+</body>
+</html>
+