Add Fahrplan + other fixes
This commit is contained in:
octycs
parent
5f1b207d6a
commit
a6d0ea52f4
133
index.css
133
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 {
|
body {
|
||||||
background: #000;
|
background: #000;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
font-family: sans-serif;
|
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 {
|
#bottom-bar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
/*left: 0;*/
|
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
overflow: hidden;
|
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 {
|
#ticker-wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 100%; /* Push contents to right side of screen */
|
padding-left: 100%; /* Push contents to right side of screen */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* INNER CONTAINER */
|
|
||||||
@keyframes ticker {
|
@keyframes ticker {
|
||||||
0% { transform: translate3d(-20%, 0, 0); }
|
0% { transform: translate3d(-20%, 0, 0); }
|
||||||
100% { transform: translate3d(-100%, 0, 0); }
|
100% { transform: translate3d(-100%, 0, 0); }
|
||||||
}
|
}
|
||||||
|
|
||||||
#ticker {
|
#ticker {
|
||||||
/* Basically move items from right side of screen to left in infinite loop */
|
/* Basically move items from right side of screen to left in infinite loop */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding-right: 100%;
|
padding-right: 100%;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
animation-timing-function: linear;
|
animation-timing-function: linear;
|
||||||
animation-name: ticker;
|
animation-name: ticker;
|
||||||
animation-duration: 120s;
|
animation-duration: 120s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ITEMS */
|
#ticker > .item{
|
||||||
.item{
|
display: inline-block; /* Lay items in a horizontal line */
|
||||||
display: inline-block; /* Lay items in a horizontal line */
|
padding: 10px 36px;
|
||||||
padding: 10px 36px;
|
|
||||||
|
font-size: 22px;
|
||||||
font-size: 22px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.item > img {
|
#ticker > .item > img {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item > span.user {
|
#ticker > .item > span.user {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin: 0 20px;
|
margin: 0 20px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item > span.content {
|
#ticker > .item > span.content {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
77
index.html
77
index.html
|
|
@ -10,6 +10,29 @@
|
||||||
</head>
|
</head>
|
||||||
<body style="background:#000">
|
<body style="background:#000">
|
||||||
<main>
|
<main>
|
||||||
|
<div id="schedule">
|
||||||
|
<div id="schedule-here-container">
|
||||||
|
<div class="header">
|
||||||
|
Next up here:
|
||||||
|
</div>
|
||||||
|
<div class="list" id="schedule-here">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="schedule-main-container">
|
||||||
|
<div class="header">
|
||||||
|
Next up on Main:
|
||||||
|
</div>
|
||||||
|
<div class="list" id="schedule-main">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="schedule-other-container">
|
||||||
|
<div class="header">
|
||||||
|
Next up on other channels:
|
||||||
|
</div>
|
||||||
|
<div class="list" id="schedule-other">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div id="bottom-bar" class="visible">
|
<div id="bottom-bar" class="visible">
|
||||||
<div id="ticker-wrap">
|
<div id="ticker-wrap">
|
||||||
<div id="ticker">
|
<div id="ticker">
|
||||||
|
|
@ -18,58 +41,6 @@
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script src="index.js"></script>
|
||||||
var tweets = {};
|
|
||||||
|
|
||||||
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 {
|
|
||||||
// We reached our target server, but it returned an error
|
|
||||||
console.log(this);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
request.onerror = function(e) {
|
|
||||||
console.log(e);
|
|
||||||
};
|
|
||||||
request.send();
|
|
||||||
}
|
|
||||||
|
|
||||||
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";
|
|
||||||
|
|
||||||
var img = document.createElement("img");
|
|
||||||
img.src = tweets.includes.users[i].profile_image_url;
|
|
||||||
item.appendChild(img);
|
|
||||||
|
|
||||||
var user = document.createElement("span");
|
|
||||||
user.className = "user";
|
|
||||||
var uname = tweets.includes.users[i].username;
|
|
||||||
user.innerText = "@" + uname;
|
|
||||||
item.appendChild(user);
|
|
||||||
|
|
||||||
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();
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
Loading…
Reference in New Issue