From 33d93086b863f0ae8ad45cb5362ddd9a605595e9 Mon Sep 17 00:00:00 2001
From: Michael Teeuw <michael@xonaymedia.nl>
Date: Mon, 21 Apr 2014 16:51:21 +0200
Subject: [PATCH] Add dishwasher notification

---
 css/main.css | 10 ++++++++++
 index.php    |  2 ++
 js/main.js   |  9 +++++++++
 3 files changed, 21 insertions(+)

diff --git a/css/main.css b/css/main.css
index 66cd1317..fed22c1b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -174,6 +174,16 @@ body, html {
 	text-align: right;
 }
 
+.dishwasher {
+	background-color: white;
+	color: black;
+	margin: 0 200px;	
+	font-size: 60px;	
+	border-radius: 1000px;
+	border-radius: 1200px;
+	display: none;
+}
+
 @font-face {
   font-family: 'HelveticaNeue-UltraLight';
   src: url('font/HelveticaNeue-UltraLight.eot'); /* IE9 Compat Modes */
diff --git a/index.php b/index.php
index 6a74a336..250dcf61 100644
--- a/index.php
+++ b/index.php
@@ -13,6 +13,7 @@
 
 	<div class="top left"><div class="date small dimmed"></div><div class="time"></div><div class="calendar xxsmall"></div></div>
 	<div class="top right"><div class="windsun small dimmed"></div><div class="temp"></div><div class="forecast small dimmed"></div></div>
+	<div class="center-ver center-hor"><div class="dishwasher light">Vaatwasser is klaar!</div></div>
 	<div class="lower-third center-hor"><div class="compliment light"></div></div>
 	<div class="bottom center-hor"><div class="news medium"></div></div>
 
@@ -23,6 +24,7 @@
 <script src="js/ical_parser.js"></script>
 <script src="js/moment-with-langs.min.js"></script>
 <script src="js/main.js?nocache=<?php echo md5(microtime()) ?>"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 660eb52e..bbcbf855 100644
--- a/js/main.js
+++ b/js/main.js
@@ -47,6 +47,15 @@ jQuery(document).ready(function($) {
 	var compliment;
 
 
+	var socket = io.connect('http://rpi-development.local:8080');
+	socket.on('dishwasher', function (dishwasherReady) {
+		if (dishwasherReady) {
+			$('.dishwasher').fadeIn();
+		} else {
+			$('.dishwasher').fadeOut();
+		}
+	});
+
 
 	var weatherParams = {
 		'q':'Baarn,Netherlands',