updates to today and clock

app/app.js

@@ -257,7 +257,8 @@
     status = (obj.eta == "On Time") ? 'delayed' : 'ontime';
 
     elm.html(output);
-    elm.prop('class', status);
+    elm.removeClass('delayed').removeClass('ontime').addClass( status);
+    //elm.addClass( status);
   };
 
   var getTrainsCB = function (results) {
@@ -384,7 +385,7 @@ var popitout = function (url) {
 var popitoutSmall = function (url) {
   var newwindow = window.open(url, 'name', 'height=400,width=520');
   if (window.focus) {
-    newwindow.focus()
+    newwindow.focus();
   }
   return false;
 };

app/css/clock.css

@@ -11,7 +11,8 @@
         width: 800px;
         height: 300px;
         background-color: #212121;
-        font-size: 180px;
+        /*font-size: 180px;*/
+        font-size:20vw;
         text-align: center;
         vertical-align: middle;
         color: #fff;
@@ -67,7 +68,8 @@
         width: 1024px;
         height: 384px;
         background-color: #212121;
-        font-size: 180px;
+        /*font-size: 180px;*/
+        font-size:25vw;
         text-align: center;
         vertical-align: middle;
         color: #fff;
@@ -124,7 +126,8 @@
         width: 100%;
         height: 512px;
         background-color: #212121;
-        font-size: 300px;
+        /*font-size: 300px;*/
+        font-size:25vw;
         text-align: center;
         vertical-align: middle;
         color: #fff;

app/css/custom.scss

@@ -0,0 +1,67 @@
+// import MUI colors
+@import "../../bower_components/mui/src/sass/mui/colors";
+
+// customize MUI variables
+$mui-primary-color:       mui-color('teal', '500');
+$mui-primary-color-dark:  mui-color('teal', '700');
+$mui-primary-color-light: mui-color('teal', '100');
+
+$mui-accent-color:        mui-color('deep-purple', '900');
+$mui-accent-color-dark:   mui-color('indigo', 'A100');
+$mui-accent-color-light:  mui-color('indigo', 'A400');
+
+$mui-base-font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, Verdana,"Trebuchet MS";
+
+// import MUI SASS
+@import "../../bower_components/mui/src/sass/mui";
+
+////
+
+#header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 2;
+    transition: left 0.2s;
+}
+
+
+ul {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    display: inline;
+    margin: 0;
+    padding: 0 4px 0 0;
+}
+
+.dates {
+    padding: 2px;
+    border: solid 1px #80007e;
+    background-color: #ffffff;
+}
+
+#btc, #fx {
+    font-size: 85%;
+}
+
+.up, .ontime {
+    color: mui-color('green') !important;
+}
+
+.down, .delayed {
+    color: mui-color('red') !important;
+}
+
+.nochange {
+    color: #000000;
+}
+.password {
+    border: 1px solid mui-color('grey','400');
+    background-color: mui-color('grey','200');
+    font-family: monospace;
+    white-space: pre;
+}

app/js/clock.js

@@ -6,11 +6,13 @@
 (function() {
 
   var storedData;
-  var self = this;
   var weatherCount = 0;
   var skycons = new Skycons({"color": "white"});
+  var refreshTimer = 0;
+  var viewTimer = 0;
+  var eventBus = {};
 
-  MicroEvent.mixin(this);
+  MicroEvent.mixin(eventBus);
 
   function getData() {
     $.ajax({
@@ -76,18 +78,18 @@
 
   // event bus
 
-  this.bind('switchWeather', function() {
+  eventBus.bind('switchWeather', function() {
     switchWeather();
   });
 
   // timers
-  function startWeather() {
+  function refreshWeatherView() {
+    eventBus.trigger('switchWeather');
+    var now = new Date();
+       var mod = 10000 - (now.getTime() % 10000);
 
-    updateWeather();
+       viewTimer = setTimeout(function() {refreshWeatherView();}, mod + 10);
-    setInterval(function() {
-      self.trigger('switchWeather');
 
-    }, 10000);
   }
 
   function updateClock() {
@@ -98,7 +100,7 @@
   function clock() {
     'use strict';
     updateClock();
-    var now = new Date;
+    var now = new Date();
     var mod = 60000 - (now.getTime() % 60000);
 
     setTimeout(function() {clock();}, mod + 10);
@@ -106,14 +108,18 @@
   }
 
   function refresh() {
-    setInterval(function() {
+    getData();
-      getData()
+    var now = new Date();
-    }, 900000);
+    var mod = 600000 - (now.getTime() % 600000);
+
+    refreshTimer = setTimeout(function() {refresh();}, mod + 10);
+
   }
 
   clock();
-  getData();
+//  getData();
   refresh();
+  refreshWeatherView();
   $('#misc').html($(window).width());
 
 })();

lib/today.js

@@ -4,7 +4,7 @@
 var http = require('http'), request = require('request'), cheerio = require('cheerio'), util = require('util'),  cron = require('node-cron');
 var dateFormat = require('dateformat');
 var jsonfile = require('jsonfile'), fs = require('fs');
-var nano = require('nano')('http://localhost:5984');
+var nano = require('nano')('http://martind2000:1V3D4m526i@localhost:5984');
 var log4js = require('log4js');
 var logger = log4js.getLogger();
 var calHandler = require('./today/calHandler');

views/pages/slack.ejs

@@ -1,8 +1,15 @@
 <% include ../partials/head %>
+<!-- Slack - I have plenty of talent and vision I just don't give a damn -->
+<header id="header">
+    <div class="mui-appbar mui--appbar-line-height">
+        <div class="mui-container-fluid">
+            Slack
+        </div>
+    </div>
 
+</header>
 <div class="mui-container">
-    <div class="mui-panel">
+    <div class="mui--appbar-height">
-        <div class="mui--text-headline mui--text-accent">Slack - I have plenty of talent and vision I just don't give a damn</div>
     </div>
     <div id="container" class="mui-panel">
         <div class="mui-row">
@@ -16,7 +23,7 @@
     <div class="mui-panel">
         <div class="mui-row">
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Starting Points/Metasites</div>
+                <div class="mui--text-title mui-text-black">Starting Points/Metasites</div>
                 <ul>
                     <li><a href="https://www.silvrtree.co.uk/today">Today</a></li>
                     <li><a href="https://www.silvrtree.co.uk/events">Events</a></li>
@@ -32,7 +39,7 @@
                 </ul>
             </div>
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Tools</div>
+                <div class="mui--text-title mui-text-black">Tools</div>
                 <ul>
                     <li><a href='https://kanbanflow.com'>Kanban Flow</a></li>
                     <li><a href="https://www.linode.com/">Linode</a></li>
@@ -71,7 +78,7 @@
                 <div id='passwordOut' class='password' style='display:none;'></div>
             </div>
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Bitcoin <span id="btc"></span></div>
+                <div class="mui--text-title mui-text-black">Bitcoin <span id="btc"></span></div>
                 <ul>
                     <li><a href="https://www.bitstamp.net">Bitstamp</a></li>
                     <li><a href="https://www.kraken.net">Kraken</a></li>
@@ -96,12 +103,12 @@
 
         <div class="mui-row">
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Package Tracking</div>
+                <div class="mui--text-title mui-text-black">Package Tracking</div>
                 <!-- Computer News -->
                 <ul><li><a href="http://m.ups.com/">UPS</a></li></ul>
             </div>
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Weather</div>
+                <div class="mui--text-title mui-text-black">Weather</div>
                 <ul>
                     <li>
                         <a href="http://www.accuweather.com/ukie/index-forecast.asp?postalcode=G82%201RG">Dumbarton
@@ -149,7 +156,7 @@
 
             </div>
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Free Email WEBpages</div>
+                <div class="mui--text-title mui-text-black">Free Email WEBpages</div>
                 <!-- Free Email WEBpages -->
                 <ul>
                     <li><a href="http://gmail.google.com/">Gmail</a></li>
@@ -170,7 +177,7 @@
 
         <div class="mui-row">
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Contracting</div>
+                <div class="mui--text-title mui-text-black">Contracting</div>
                 <ul>
                     <li><a href='https://outsauce.backofficeportal.com/Secure/Candidate/Default.aspx'>Outsauce Timesheets</a></li>
                     <li><a href='https://worksheets.computerfutures.com/'>CF Timesheets</a></li>
@@ -187,7 +194,7 @@
             </div>
 
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Entertainment</div>
+                <div class="mui--text-title mui-text-black">Entertainment</div>
                 <!-- Entertainment -->
                 <ul>
                     <li>
@@ -219,7 +226,7 @@
             </div>
 
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Travel <span id="fx"></div>
+                <div class="mui--text-title mui-text-black">Travel <span id="fx"></div>
                 <!-- Travel -->
                 <span>DBEGLQ: <button class="mui-btn mui-btn--flat" id="dbeglq"></button></span> <span>GLQDBE: <button class="mui-btn mui-btn--flat" id="glqdbe"></button></span>
                 <div id='trainResults' style='display:none'></div>
@@ -289,7 +296,7 @@
 
         <div class="mui-row">
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Computer Software, etc.</div>
+                <div class="mui--text-title mui-text-black">Computer Software, etc.</div>
                 <ul>
                     <li><a href="">Portable Apps</a></li>
                     <li><a href="http://www.newfreeware.com/">NewFreeware</a></li>
@@ -303,7 +310,7 @@
             </div>
 
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Reference &amp; Special sites</div>
+                <div class="mui--text-title mui-text-black">Reference &amp; Special sites</div>
                 <!-- Reference and Special sites -->
                 <ul>
                     <li><a href="http://www.glossarist.com/default.asp">Glossaries</a>
@@ -337,7 +344,7 @@
             </div>
 
             <div class="mui-col-md-4">
-                <div class="mui-text-title mui-text-black">Earth and Beyond</div>
+                <div class="mui--text-title mui-text-black">Earth and Beyond</div>
                 <!-- Good Reading Misc. -->
                 <ul>
                     <li><a href="http://enbarsenal.com">ENB Arsenal</a></li>

views/pages/today.ejs

@@ -1,8 +1,15 @@
 <% include ../partials/head %>
+<header id="header">
+    <div class="mui-appbar mui--appbar-line-height">
+        <div class="mui-container-fluid">
+            Today
+        </div>
+    </div>
 
+</header>
 <div class="mui-container">
-    <div class="mui-panel">
+    <div class="mui--appbar-line-height">
-        <div class="mui-text-headline mui-text-accent">Today</div>
+
     </div>
 
     <% include ../partials/weather %>

views/partials/head.ejs

@@ -9,54 +9,7 @@
 
     <meta name="Author" content="" />
     <link href="//fonts.googleapis.com/css?family=Roboto+Slab:400,300,700" rel="stylesheet" type="text/css">
-    <link href="css/mui.min.css" rel="stylesheet" type="text/css" />
+    <link href="css/custom.css" rel="stylesheet" type="text/css" />
-    <style>
-        body {
-            font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial;
-        }
-        ul {
-            margin: 0;
-            padding: 0;
-        }
-
-        li {
-            display: inline;
-            margin: 0;
-            padding: 0 4px 0 0;
-        }
-
-        .dates {
-            padding: 2px;
-            border: solid 1px #80007e;
-            background-color: #ffffff;
-        }
-
-        #btc, #fx {
-            font-size: 85%;
-        }
-
-        .up, .ontime {
-            color: darkgreen;
-        }
-
-        .down, .delayed {
-            color: darkred;
-        }
-
-        .nochange {
-            color: #000000;
-        }
-        .password {
-            border: 1px solid #cccccc;
-            background-color: #efefef;
-            font-family: monospace;
-            white-space: pre;
-        }
-
-        .mui--text-danger {
-            color: #F44336;
-        }
-    </style>
     <script src="libs/zepto.min.js"></script>
 
   <script src="libs/microevent.js"></script></head>