From 6844a47bf5704b880325adff17dc1411b7e0ac77 Mon Sep 17 00:00:00 2001
From: Jack Morgan <jackmorgannz@gmail.com>
Date: Mon, 13 Jul 2015 17:02:22 +1200
Subject: [PATCH] Added display page for large screens

This page is designed for large screens,
and most importantly, the 3x3 screen setup
in NZi3.

This page shows:
- Upcoming events (page refreshes every
  5 minutes to get next events)
- Update Twitter feed
- #CS4HSchch Twitter feed
- Sponsor logos

It would be nice to center the sponsor
logos in the slideshow, however this may
require rewriting the slideshow code.
---
 css/display.css            |  50 +++++++++++
 display.html               | 170 +++++++++++++++++++++++++++++++++++++
 js/responsiveslides.min.js |   8 ++
 3 files changed, 228 insertions(+)
 create mode 100644 css/display.css
 create mode 100644 display.html
 create mode 100644 js/responsiveslides.min.js

diff --git a/css/display.css b/css/display.css
new file mode 100644
index 0000000..5897965
--- /dev/null
+++ b/css/display.css
@@ -0,0 +1,50 @@
+#row-content{
+  padding-top: 5rem;
+}
+.row {
+  max-width: 100%;
+}
+.tab-bar {
+  visibility: visible;
+  height: 5rem;
+}
+.tab-bar h1 {
+  font-size: 5rem;
+  line-height: 5rem;
+}
+.event-day {
+  padding-top: 0px;
+}
+#sponsor-slideshow {
+  height: 10rem;
+}
+.rslides {
+  position: relative;
+  list-style: none;
+  overflow: hidden;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.rslides li {
+  -webkit-backface-visibility: hidden;
+  position: absolute;
+  display: none;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.rslides li:first-child {
+  position: relative;
+  display: block;
+  float: left;
+}
+
+.rslides img {
+  height: auto;
+  width: auto;
+  border: 0;
+}
diff --git a/display.html b/display.html
new file mode 100644
index 0000000..f54d736
--- /dev/null
+++ b/display.html
@@ -0,0 +1,170 @@
+{% extends 'layout.html' %}
+
+{% block title %}CS4HS Christchurch 2015{% endblock %}
+
+{% block head %}
+  {{ super() }}
+  <link rel="stylesheet" href="css/display.css">
+  <!-- Reload page every 5 minutes to refresh timetable -->
+  <meta http-equiv="refresh" content="300">
+{% endblock head %}
+
+{% block body %}
+<nav class="tab-bar">
+    <section class="middle tab-bar-section">
+      <h1 class="title">CS<span class="logo-number">4</span>HS</h1>
+    </section>
+</nav>
+<div class="row" id="row-content">
+<div class="small-4 columns text-center">
+  <h2>Sponsors</h2>
+  <ul id="sponsor-slideshow" class="text-center">
+    <li><img src="./img/google-logo.png"></img></li>
+    <li><img src="./img/canterbury-logo.png"></img></li>
+    <li><img src="./img/nzacditt-logo.png"></img></li>
+  </ul>
+
+  <h2>Updates</h2>
+  <a class="twitter-timeline"
+     href="https://twitter.com/UCCSEd"
+     data-widget-id="525448302553083904"
+     data-chrome="noheader nofooter noscrollbar transparent"
+     height="1200">
+  </a>
+</div>
+<div class="small-4 columns">
+    {% raw %}
+    <div id="current">
+    <script id="schedule-template" type="text/x-handlebars-template">
+      <div class="event">
+      {{#ifSameDate cells.DateTimeStart}}
+      <h2 class="text-center event-day">{{prettifyDate cells.DateTimeStart "dddd Do MMMM"}}</h3>
+      {{/ifSameDate}}
+      {{#ifDifferentTimeLine cells.DateTimeStart}}
+      <span class="small-12 columns underline"></span>
+      {{else}}
+      <span class="small-8 small-offset-2 medium-10 medium-offset-2 columns underline"></span>
+      {{/ifDifferentTimeLine}}
+      <div class="row current-event">
+          <span class="small-12 medium-4 columns medium-text-right">
+              {{#ifDifferentTime cells.DateTimeStart}}
+              <h3 class="event-time">{{prettifyDate cells.DateTimeStart "h:mma"}}<br>
+              <small>until {{prettifyDate cells.DateTimeEnd "h:mma"}}</small></h3>
+              {{else}}
+              <h4 class="text-center">or</h4>
+              {{/ifDifferentTime}}
+              <p>
+              {{#if cells.Location}}
+              <b>Location:</b> {{cells.Location}}
+              {{/if}}
+              {{#if cells.Speaker}}
+              <br><b>Presenter:</b> {{cells.Speaker}}
+              {{/if}}
+              </p>
+          </span>
+          <span class="small-12 medium-8 columns">
+              <h4>{{cells.Title}}</h4>
+              <p class="description">{{cells.Description}}</p>
+          </span>
+      </div>
+      </div>
+    </script>
+    </div>
+    {% endraw %}
+    <div id="schedule-loading">
+        <h3 class="text-center">Loading events...</h3>
+    </div>
+</div>
+
+<div class="small-4 columns text-center">
+  <h2>#CS4HSchch</h2>
+  <a class="twitter-timeline"
+     data-dnt="true"
+     href="https://twitter.com/hashtag/CS4HSchch"
+     data-widget-id="522159625521487872"
+     data-chrome="noheader nofooter noscrollbar transparent"
+     height="1200">
+  </a>
+</div>
+</div>
+{% endblock body %}
+
+{% block scripts %}
+<!-- Load Handlebars.js -->
+<script src="./js/sheetrock.min.js"></script>
+<!-- Load Handlebars.js -->
+<script src="./js/handlebars.min.js"></script>
+<!-- Load Moment.js -->
+<script src="./js/moment.min.js"></script>
+<script type="text/javascript">
+  // Compile the Handlebars template.
+  var source = $('#schedule-template').html();
+  var CurrentTemplate = Handlebars.compile(source);
+
+  var SameDate = "";
+  var SameDateTime = "";
+  var Time = "";
+  var TimeLine = "";
+
+  Handlebars.registerHelper("prettifyDate", function(timestamp, formatString) {
+      return moment(new Date(timestamp)).format(formatString);
+  });
+
+  Handlebars.registerHelper('ifSameDate', function(v1, options) {
+      if(v1.substring(0, 5) !== SameDate.substring(0, 5)) {
+          SameDate = v1;
+          return options.fn(this);
+      }
+  });
+
+  Handlebars.registerHelper('ifDifferentTime', function(v1, options) {
+      if(v1 !== Time) {
+          Time = v1;
+          return options.fn(this);
+      } else {
+          return options.inverse(this);
+      }
+  });
+
+  Handlebars.registerHelper('ifDifferentTimeLine', function(v1, options) {
+      if(v1 !== TimeLine) {
+          TimeLine = v1;
+          return options.fn(this);
+      } else {
+          return options.inverse(this);
+      }
+  });
+
+  var now = moment().subtract(10, 'minutes').format('YYYY-MM-DD HH:mm:ss');
+
+  // Load an entire sheet.
+  $('#current').sheetrock({
+      url: 'https://docs.google.com/spreadsheets/d/15y3r_9IPnL9d6fa61T7-RtTQqyJc_Y2gXIJ9oGc_Y_w/edit#gid=0',
+      query: 'select A,B,C,D,E,F where A >= datetime "' + now + '"',
+      rowTemplate: CurrentTemplate,
+      callback: removeLoading
+  });
+
+  function removeLoading() {
+      $("#schedule-loading").addClass('hide');
+  }
+</script>
+<!-- Twitter script -->
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+<!-- Slideshow script -->
+<script type="text/javascript" src="./js/responsiveslides.min.js"></script>
+<script>
+  $(function() {
+    $("#sponsor-slideshow").responsiveSlides({
+      auto: true,             // Boolean: Animate automatically, true or false
+      speed: 500,             // Integer: Speed of the transition, in milliseconds
+      timeout: 10000,         // Integer: Time between slide transitions, in milliseconds
+      pager: false,           // Boolean: Show pager, true or false
+      nav: false,             // Boolean: Show navigation, true or false
+      random: false,          // Boolean: Randomize the order of the slides, true or false
+      pause: false,           // Boolean: Pause on hover, true or false
+      pauseControls: false    // Boolean: Pause when hovering controls, true or false
+  });
+});
+</script>
+{% endblock scripts %}
diff --git a/js/responsiveslides.min.js b/js/responsiveslides.min.js
new file mode 100644
index 0000000..21d4832
--- /dev/null
+++ b/js/responsiveslides.min.js
@@ -0,0 +1,8 @@
+/*! http://responsiveslides.com v1.54 by @viljamis */
+(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
+w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
+n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
+h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
+k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
+a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
+a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);