From a6d0ea52f4cfe44ad6775c26e0adf453223d186c Mon Sep 17 00:00:00 2001 From: octycs Date: Tue, 22 Dec 2020 21:03:54 +0100 Subject: [PATCH] Add Fahrplan + other fixes --- index.css | 133 ++++++++++++++++++++++++++++++++++++------------- index.html | 77 +++++++++------------------- index.js | 144 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 267 insertions(+), 87 deletions(-) create mode 100644 index.js diff --git a/index.css b/index.css index 3762daf..734ae83 100644 --- a/index.css +++ b/index.css @@ -1,71 +1,136 @@ +@font-face { + font-family: orbitron-bold; + src: url(assets/Orbitron-Bold.ttf); +} +@font-face { + font-family: montserrat; + src: url(assets/Montserrat-Regular.ttf); +} + +* { box-sizing: border-box; } + body { background: #000; color: #FFF; font-family: sans-serif; } +/* === FAHRPLAN === */ +#schedule { + position: fixed; + left: 5%; + right: 5%; + top: 10%; + bottom: 10%; + + font-family: orbitron-bold; + font-size: 30px; +} + +#schedule .header { + margin-bottom: 40px; +} + +#schedule .list .item { + margin-bottom: 10px; +} + +#schedule .list .item .title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#schedule .list .item .sub { + color: #7b7b7b; + font-size: 24px; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#schedule-here-container { + position: absolute; + right: 52%; + left: 0; +} + +#schedule-main-container { + position: absolute; + right: 52%; + left: 0; + top: 50%; +} + +#schedule-other-container { + position: absolute; + left: 52%; + right: 0; +} + +#schedule-here-container .header { + color: #b145fb; +} +#schedule-main-container .header { + color: #6820e4; +} +#schedule-other-container .header { + color: #45b5e3; +} + + +/* === TICKER === */ #bottom-bar { position: fixed; bottom: 0; - /*left: 0;*/ margin-bottom: 20px; font-size: 14px; + width: 100%; overflow: hidden; - /*padding-left: 100%; - box-sizing: content-box;*/ -} - -* { box-sizing: border-box; } - -/* OUTER CONTAINER */ -#bottom-bar { - width: 100%; - overflow: hidden; /* Hide scroll bar */ } -/* MIDDLE CONTAINER */ #ticker-wrap { - width: 100%; - padding-left: 100%; /* Push contents to right side of screen */ + width: 100%; + padding-left: 100%; /* Push contents to right side of screen */ } -/* INNER CONTAINER */ @keyframes ticker { - 0% { transform: translate3d(-20%, 0, 0); } - 100% { transform: translate3d(-100%, 0, 0); } + 0% { transform: translate3d(-20%, 0, 0); } + 100% { transform: translate3d(-100%, 0, 0); } } + #ticker { - /* Basically move items from right side of screen to left in infinite loop */ - display: inline-block; - white-space: nowrap; - padding-right: 100%; - animation-iteration-count: infinite; - animation-timing-function: linear; - animation-name: ticker; - animation-duration: 120s; + /* Basically move items from right side of screen to left in infinite loop */ + display: inline-block; + white-space: nowrap; + padding-right: 100%; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-name: ticker; + animation-duration: 120s; } -/* ITEMS */ -.item{ - display: inline-block; /* Lay items in a horizontal line */ - padding: 10px 36px; - - font-size: 22px; +#ticker > .item{ + display: inline-block; /* Lay items in a horizontal line */ + padding: 10px 36px; + + font-size: 22px; } -.item > img { +#ticker > .item > img { height: 32px; vertical-align: middle; } -.item > span.user { +#ticker > .item > span.user { color: #fff; margin: 0 20px; vertical-align: middle; } -.item > span.content { +#ticker > .item > span.content { color: #fff; vertical-align: middle; } diff --git a/index.html b/index.html index 5a48ea6..40f6e04 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,29 @@
+
+
+
+ Next up here: +
+
+
+
+
+
+ Next up on Main: +
+
+
+
+
+
+ Next up on other channels: +
+
+
+
+
@@ -18,58 +41,6 @@
- + diff --git a/index.js b/index.js new file mode 100644 index 0000000..dd40f0a --- /dev/null +++ b/index.js @@ -0,0 +1,144 @@ +var channel_here = "60dd7f55-9f88-4de6-ad98-b9c4e2810300"; +var channel_main_1 = "rc1"; +var channel_main_2 = "rc2"; + +var fahrplan = {}; +var tweets = {}; + +/* === EXTERNAL DATA === */ +function update_tweets() { + var request = new XMLHttpRequest(); + request.open('GET', 'https://api.oct.re/tweets-rc3.json', true); + request.onload = function() { + if (this.status >= 200 && this.status < 400) { + tweets = JSON.parse(this.response); + update_tweet_ticker(); + } else { console.log(this); } + }; + request.onerror = function(e) { console.log(e); }; + request.send(); +} + +function update_fahrplan() { + var request = new XMLHttpRequest(); + request.open('GET', 'https://api.oct.re/fahrplan.json', true); + request.onload = function() { + if (this.status >= 200 && this.status < 400) { + fahrplan = JSON.parse(this.response); + update_fahrplan_html(); + } else { console.log(this); } + }; + request.onerror = function(e) { console.log(e); }; + request.send(); +} + +/* === FAHRPLAN === */ +var n_here = 3; +var n_main = 3; +var n_other = 7; + +function parse_schedule() { + var fahrplan_parsed = { + "here": [], + "main": [], + "other": [], + } + + for (var i in fahrplan) { + if (fahrplan_parsed.here.length < n_here + && (fahrplan[i].roomguid == channel_here || fahrplan[i].room == channel_here)) { + fahrplan_parsed.here.push({ + title: fahrplan[i].title, + sub: fahrplan[i].start + " D" + fahrplan[i].day + ", " + fahrplan[i].personnames, + }); + } else if (fahrplan_parsed.main.length < n_main + && (fahrplan[i].roomguid == channel_main_1 || fahrplan[i].room == channel_main_1 + || fahrplan[i].roomguid == channel_main_2 || fahrplan[i].room == channel_main_2)) { + fahrplan_parsed.main.push({ + title: fahrplan[i].title, + sub: fahrplan[i].start + " D" + fahrplan[i].day + " @ " + fahrplan[i].room + ", " + fahrplan[i].personnames, + }); + } else if (fahrplan_parsed.other.length < n_other) { + fahrplan_parsed.other.push({ + title: fahrplan[i].title, + sub: fahrplan[i].start + " D" + fahrplan[i].day + " @ " + fahrplan[i].room, + }); + } + } + + return fahrplan_parsed; +} + +function update_fahrplan_html() { + fahrplan_parsed = parse_schedule(); + var els = { + here: document.getElementById("schedule-here"), + main: document.getElementById("schedule-main"), + other: document.getElementById("schedule-other"), + } + + els.here.innerHTML = ""; + els.main.innerHTML = ""; + els.other.innerHTML = ""; + + for (var group in els) { + for (var i in fahrplan_parsed[group]) { + var el = document.createElement("div"); + el.className = "item"; + + var title = document.createElement("div"); + title.className = "title"; + title.innerText = fahrplan_parsed[group][i].title; + el.appendChild(title); + + var sub = document.createElement("div"); + sub.className = "sub"; + sub.innerText = fahrplan_parsed[group][i].sub; + el.appendChild(sub); + + els[group].appendChild(el); + } + } +} + +update_fahrplan(); + + +/* === TWEETS === */ +function update_tweet_ticker() { + var ticker = document.getElementById("ticker"); + ticker.innerHTML = ""; + for (var i in tweets.data) { + //console.log(tweets.data[i].text); + var item = document.createElement("div"); + item.className = "item"; + + // Look up user + var user; + for (var useri in tweets.includes.users) { + if (tweets.includes.users[useri].id == tweets.data[i].author_id) + user = tweets.includes.users[useri]; + } + + var img = document.createElement("img"); + img.src = user.profile_image_url; + item.appendChild(img); + + var user_el = document.createElement("span"); + user_el.className = "user"; + var uname = user.username; + user_el.innerText = "@" + uname; + item.appendChild(user_el); + + var content = document.createElement("span"); + content.className = "content"; + var text = tweets.data[i].text; + text = text.replace(/\n/g, "↲"); + content.innerText = text; + item.appendChild(content); + + ticker.appendChild(item); + } +} + +update_tweets();