117 lines
3.8 KiB
HTML
117 lines
3.8 KiB
HTML
|
<!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>
|
||
|
|
|