Merge pull request #31 from c-base/35c3-fahrplan

35c3 fahrplan screen

35c3-events/calendar.js

@@ -0,0 +1,157 @@
+import dateformat from 'dateformat';
+import '../elements/time';
+
+function sortEvents(a, b) {
+  if (a.start < b.start) {
+    return -1;
+  }
+  if (a.start > b.start) {
+    return 1;
+  }
+  return 0;
+}
+
+function getEvents(number) {
+  const now = new Date();
+  return fetch('http://c-flo.cbrp3.c-base.org/35c3/fahrplan')
+    .then(res => res.json())
+    .then((res) => {
+      // res.schedule.conference.days[0].rooms.Adams[0]
+      const talks = [];
+      res.schedule.conference.days.forEach((day) => {
+        const dayEnd = new Date(day.day_end);
+        if (dayEnd < now) {
+          // Already done with this day
+          return;
+        }
+        Object.keys(day.rooms).forEach((room) => {
+          day.rooms[room].forEach((slot) => {
+            const start = new Date(slot.date);
+            const [durationH, durationM] = slot.duration.split(':').map(val => parseInt(val, 10));
+            const end = new Date(slot.date);
+            end.setHours(end.getHours() + durationH);
+            end.setMinutes(end.getMinutes() + durationM);
+            if (end < now) {
+              // This event is already over
+              return;
+            }
+            talks.push({
+              allDay: false,
+              start: start.toISOString(),
+              end: end.toISOString(),
+              title: slot.title,
+              id: room,
+            });
+          });
+        });
+      });
+      return talks;
+    })
+    .then(talks => fetch('https://launchlibrary.net/1.3/launch/next/2')
+      .then(res => res.json())
+      .then((res) => {
+        const launches = res.launches.map((launch) => {
+          const start = new Date(launch.windowstart);
+          const end = new Date(launch.windowend);
+          return {
+            allDay: false,
+            start: start.toISOString(),
+            end: end.toISOString(),
+            title: launch.name,
+            id: launch.lsp.abbrev,
+            type: 'launch',
+          };
+        });
+        return launches;
+      })
+      .then((launches) => {
+        console.log(launches, talks);
+        const allEvents = talks.concat(launches);
+        allEvents.sort(sortEvents);
+        return allEvents.slice(0, number);
+      }));
+}
+
+let prevDate = new Date();
+function renderEvent(event, container) {
+  const now = new Date();
+  const row = document.createElement('tr');
+  const time = document.createElement('td');
+  time.className = 'time';
+  const destination = document.createElement('td');
+  destination.className = 'destination';
+  const code = document.createElement('td');
+  code.className = 'code';
+  const status = document.createElement('td');
+  status.className = 'status';
+  const startDate = new Date(event.start);
+  const pad = (t) => {
+    let val = `${t}`;
+    if (val.length === 1) {
+      val = `0${val}`;
+    }
+    if (val.length === 2) {
+      val = `0${val}`;
+    }
+    return val;
+  };
+  const cleanTitle = (title) => {
+    let cleaned = title.replace(/\sBerlin$/, '');
+    cleaned = cleaned.replace(/\sUser Group/, ' UG');
+    return cleaned;
+  };
+  const timeFormat = 'HH:MM';
+  if (event.allDay) {
+    time.innerHTML = '--:--';
+  } else {
+    time.innerHTML = dateformat(startDate, timeFormat);
+  }
+
+  if (typeof event.id === 'number') {
+    code.innerHTML = `C${pad(event.id)}`;
+  } else {
+    code.innerHTML = event.id;
+  }
+  destination.innerHTML = cleanTitle(event.title);
+  if (event.type === 'launch') {
+    destination.classList.add('launch');
+  }
+
+  if (startDate.toDateString() !== prevDate.toDateString()) {
+    status.innerHTML = dateformat(startDate, 'dd.mm.');
+  }
+  if (startDate.toDateString() === now.toDateString()) {
+    row.classList.add('today');
+    if (startDate < now) {
+      status.innerHTML = 'Ongoing';
+      status.classList.add('ongoing');
+    } else {
+      status.innerHTML = 'Today';
+    }
+  }
+
+  row.appendChild(status);
+  row.appendChild(time);
+  row.appendChild(destination);
+  row.appendChild(code);
+  container.appendChild(row);
+  prevDate = startDate;
+}
+
+function render() {
+  const table = document.getElementById('events');
+  getEvents(17)
+    .then((events) => {
+      while (table.firstChild) {
+        table.removeChild(table.firstChild);
+      }
+      events.forEach(event => renderEvent(event, table));
+    });
+}
+
+function onPageReady() {
+  window.removeEventListener('load', onPageReady, false);
+  render();
+  setInterval(render, 30000);
+}
+window.addEventListener('load', onPageReady, false);

35c3-events/index.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>35c3 event calendar</title>
+    <script src="../vendor/webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../vendor/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="../lib/35c3-calendar.js"></script>
+    <link rel="stylesheet" href="../theme/c-base.css">
+    <style>
+      #events {
+        display: block;
+        height: 90vh;
+        margin-left: auto;
+        margin-right: auto;
+        overflow-y: hidden;
+        margin-left: 3vw;
+        margin-right: 3vw;
+      }
+      #events td {
+        font-size: 7vmin;
+        vertical-align: top;
+        text-shadow: #000000 1px 0 10px;
+      }
+      #events tr {
+        margin-bottom: 16vh;
+      }
+      #events tr.today {
+        color: #fff;
+      }
+      #events td.destination {
+        color: hsl(35, 98%, 36%);
+        font-weight: bold;
+        max-width: 53vw;
+        max-height: 17vmin;
+        padding-right: 2vw;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      #events td.destination.launch {
+        color: hsl(210, 98%, 36%);
+      }
+      #events tr.today td.destination {
+        color: hsl(35, 98%, 46%);
+      }
+      #events tr.today td.destination.launch {
+        color: hsl(210, 98%, 46%);
+      }
+      #events td.code {
+        font-family: 'ceva', sans-serif;
+      }
+      #events td.time {
+        padding-left: 2vw;
+        padding-right: 2vw;
+      }
+      #events td.status {
+        text-align: right;
+        text-transform: lowercase;
+        white-space: nowrap;
+        padding-left: 1vw;
+        padding-right: 1vw;
+        padding-top: 2vmin;
+        font-size: 5vmin;
+      }
+      #events tr.today td.status {
+        background-color: hsl(35, 98%, 46%);
+        text-align: center;
+        text-shadow: none;
+        padding-top: 1vmin;
+        color: #000;
+      }
+      #events tr.today td.status.ongoing {
+        background-color: #73d216;
+      }
+      cbase-time, h1 {
+        font-family: 'ceva', sans-serif;
+        font-weight: normal;
+        font-size: 6vmin;
+        line-height: 10vh;
+        color: #fff;
+        margin: 0px;
+        padding: 0px;
+      }
+      #screen-title {
+        text-align: left;
+        position: absolute;
+        left: 0px;
+        bottom: 0px;
+        margin-left: 3vw;
+      }
+      #current-time {
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        text-align: right;
+        margin-right: 3vw;
+      }
+      @media (orientation: portrait) {
+        #events td.code {
+          display: none;
+        }
+      }
+      @media (max-width: 1140px) {
+        #events td.code {
+          display: none;
+        }
+      }
+    </style>
+  </head>
+  <body class="station">
+    <h1 id="screen-title">c-base @ 35C3</h1>
+    <table id="events">
+    </table>
+    <cbase-time id="current-time" interval="1" format="HH:MM"></cbase-time>
+  </body>
+</html>
+

Dockerfile

@@ -1,2 +1,21 @@
-FROM nginx
+FROM node:10-alpine
-COPY dist /usr/share/nginx/html
+
+# Reduce npm install verbosity, overflows Travis CI log view
+ENV NPM_CONFIG_LOGLEVEL warn
+ENV NODE_ENV production
+
+EXPOSE 8080
+
+RUN mkdir -p /var/infoscreens
+WORKDIR /var/infoscreens
+COPY package.json /var/infoscreens
+COPY server /var/infoscreens/server
+COPY dist /var/infoscreens/dist
+
+# Install NoFlo and dependencies
+RUN npm install --only=production
+
+# Map the volumes
+VOLUME /var/infoscreens/dist
+
+CMD npm start

docker-compose.yml

@@ -8,8 +8,8 @@ services:
   infoscreens:
     image: cbase/infoscreens
     ports:
-      - '8080:80'
+      - '8080:8080'
     links:
       - mqtt-infoscreens
     volumes:
-      - .:/usr/share/nginx/html
+      - ./dist:/var/infoscreens/dist

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "build": "webpack",
     "pretest": "eslint index.js lib/*.js elements/*.js infodisplay/*.js events/*.js",
-    "start": "webpack-dev-server",
+    "dev": "webpack-dev-server",
+    "start": "node server",
     "test": "npm run build"
   },
   "author": "Henri Bergius <henri.bergius@iki.fi>",
@@ -16,6 +17,11 @@
     "color-interpolate": "^1.0.2",
     "d3": "^4.12.0",
     "dateformat": "^3.0.2",
+    "isomorphic-fetch": "^2.2.1",
+    "koa": "^2.6.2",
+    "koa-cors": "0.0.16",
+    "koa-router": "^7.4.0",
+    "koa-static": "^5.0.0",
     "msgflo-browser": "^0.2.0",
     "plotly.js": "^1.31.2",
     "skatejs": "^5.0.0-beta.4"

server/index.js

@@ -0,0 +1,23 @@
+const Koa = require('koa');
+const Router = require('koa-router');
+const Static = require('koa-static');
+const Cors = require('koa-cors');
+const path = require('path');
+
+const route35c3 = require('./route/35c3');
+
+const app = new Koa();
+const router = new Router();
+
+route35c3(router);
+
+app
+  .use(Cors())
+  .use(router.routes())
+  .use(router.allowedMethods())
+  .use(Static(path.resolve(__dirname, '../dist'), {}));
+
+module.exports = app;
+if (!module.parent) {
+  app.listen(8080);
+}

server/route/35c3.js

@@ -0,0 +1,10 @@
+require('isomorphic-fetch');
+
+module.exports = (router) => {
+  router.get('/35c3/fahrplan', async (ctx) => {
+    const res = await fetch('https://fahrplan.events.ccc.de/congress/2018/Fahrplan/schedule.json');
+    ctx.assert((res.status === 200), res.status);
+    const body = await res.json();
+    ctx.body = body;
+  });
+};

webpack.config.js

@@ -6,6 +6,7 @@ module.exports = {
     infoscreens: './index.js',
     infodisplay: './infodisplay/infodisplay.js',
     calendar: './events/calendar.js',
+    '35c3-calendar': './35c3-events/calendar.js',
   },
   output: {
     path: path.resolve(__dirname, 'dist'),