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 {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
77
index.html
77
index.html
|
|
@ -10,6 +10,29 @@
|
|||
</head>
|
||||
<body style="background:#000">
|
||||
<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="ticker-wrap">
|
||||
<div id="ticker">
|
||||
|
|
@ -18,58 +41,6 @@
|
|||
</div>
|
||||
</main>
|
||||
|
||||
<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>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</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