Merge pull request #7 from yuki/master

Added few improvements to make MagicMirror better

README.md

@@ -2,3 +2,5 @@ MagicMirror
 ===========
 
 The super magic interface of my personal Magic Mirror. More information about this project can be found on my [blog](http://michaelteeuw.nl/tagged/magicmirror).
+
+Modify js/config.js to change some general variables (language, wather location, compliments) and calendar.php to add your own ICS calendar

index.php

@@ -25,6 +25,7 @@
 <script src="js/jquery.feedToJSON.js"></script>
 <script src="js/ical_parser.js"></script>
 <script src="js/moment-with-langs.min.js"></script>
+<script src="js/config.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>
 

js/config.js

@@ -0,0 +1,23 @@
+// for navigator language
+var lang = window.navigator.language;
+// you can change the language
+//var lang = 'en';
+
+//change weather params here:
+var weatherParams = {
+    'q':'Baarn,Netherlands',
+    'units':'metric',
+    'lang':lang
+};
+
+// compliments:
+var compliments = [
+            'Hey, handsome!',
+            'Hi, sexy!',
+            'Hello, beauty!',
+            'You look sexy!',
+            'Wow, you look hot!',
+            'Looking good today!',
+            'You look nice!',
+            'Enjoy your day!'
+        ];

js/main.js

@@ -46,49 +46,7 @@ jQuery(document).ready(function($) {
 	var lastCompliment;
 	var compliment;
 
-    // multi-langugage support according to browser-lang
+    moment.lang(lang);
-    var lang = window.navigator.language;
-    switch (lang)
-    {
-        case 'de':
-            var days = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];
-            var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
-            var dayAbbr = ['So','Mo','Di','Mi','Do','Fr','Sa'];
-            var today = 'heute';
-            var tomorrow = 'morgen';
-            var in_days = 'Tage';
-            break;
-        case 'nl':
-            var days = ['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'];
-            var months = ['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'];
-            var dayAbbr = ['zo','ma','di','wo','do','vr','za'];
-            var today = 'vandaag';
-            var tomorrow = 'morgen';
-            var in_days = 'dagen';
-            break;
-       case 'fr':
-            var days = ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'];
-            var months = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
-            var dayAbbr = ['dim','lun','mar','mer','jeu','ven','sam'];
-            var today = 'aujourd\'hui';
-            var tomorrow = 'demain';
-            var in_days = 'jour(s)';
-            break;            
-	case 'no':
-	    var days = ['søndag','mandag','tirsdag','onsdag','torsdag','fredag','lørdag'];
-            var months = ['januar','februar','mars','april','mai','juni','juli','august','september','oktober','november','desember'];
-            var dayAbbr = ['søn','man','tirs','ons','tors','fre','lør'];
-            var today = 'i dag';
-            var tomorrow = 'i morgen';
-            var in_days = 'dager';
-        default:
-            var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
-            var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
-            var dayAbbr = ['Sun','Mon','Tues','Wed','Thur','Fri','Sat'];
-            var today = 'Today';
-            var tomorrow = 'Tomorrow';
-            var in_days = 'days';
-    }
 
 	//connect do Xbee monitor
 	var socket = io.connect('http://rpi-development.local:8080');
@@ -103,12 +61,6 @@ jQuery(document).ready(function($) {
 	});
 
 
-	var weatherParams = {
-		'q':'Baarn,Netherlands',
-		'units':'metric',
-		'lang':lang
-	};
-	
 	(function checkVersion()
 	{
 		$.getJSON('githash.php', {}, function(json, textStatus) {
@@ -126,18 +78,12 @@ jQuery(document).ready(function($) {
 
 	(function updateTime()
 	{
-		var now = new Date();
+        var now = moment();
-
+        var date = now.format('LLLL').split(' ',4);
-		var day = now.getDay();
+        date = date[0] + ' ' + date[1] + ' ' + date[2] + ' ' + date[3];
-		var date = now.getDate();
-		var month = now.getMonth();
-		var year = now.getFullYear();
-
-		var date = days[day] + ', ' + date+' ' + months[month] + ' ' + year;
-
 
 		$('.date').html(date);
-		$('.time').html(now.toTimeString().substring(0,5) + '<span class="sec">'+now.toTimeString().substring(6,8)+'</span>');
+		$('.time').html(now.format('HH') + ':' + now.format('mm') + '<span class="sec">'+now.format('ss')+'</span>');
 
 		setTimeout(function() {
 			updateTime();
@@ -173,17 +119,29 @@ jQuery(document).ready(function($) {
 					}
         		}
 
+                if (e.startDate == undefined){
+                    //some old events in Gmail Calendar is "start_date"
+                    //FIXME: problems with Gmail's TimeZone
+            		var days = moment(e.DTSTART).diff(moment(), 'days');
+            		var seconds = moment(e.DTSTART).diff(moment(), 'seconds');
+                    var startDate = moment(e.DTSTART);
+                } else {
+            		var days = moment(e.startDate).diff(moment(), 'days');
+            		var seconds = moment(e.startDate).diff(moment(), 'seconds');
+                    var startDate = moment(e.startDate);
+                }
 
-        		var now = new Date();
+        		//only add fututre events, days doesn't work, we need to check seconds
-        		var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        		if (seconds >= 0) {
-        		var days = moment(e.startDate).diff(moment(today), 'days');
+                    if (seconds <= 60*60*5 || seconds >= 60*60*24*2) {
-
+                        var time_string = moment(startDate).fromNow();
-        		//only add fututre events
+                    }else {
-        		if (days >= 0) {
+                        var time_string = moment(startDate).calendar()
-	        		eventList.push({'description':e.SUMMARY,'days':days});
+                    }
+	        		eventList.push({'description':e.SUMMARY,'seconds':seconds,'days':time_string});
         		}
         	};
-        	eventList.sort(function(a,b){return a.days-b.days});
+        	eventList.sort(function(a,b){return a.seconds-b.seconds});
 
         	setTimeout(function() {
         		updateCalendarData();
@@ -199,16 +157,10 @@ jQuery(document).ready(function($) {
 
 		for (var i in eventList) {
 			var e = eventList[i];
-			var days = e.days;
-
-			var daysString = (days == 1) ? tomorrow :  days + ' ' + in_days;
-    		if (days == 0) {
-    			daysString = today;
-    		}
 
 			var row = $('<tr/>').css('opacity',opacity);
 			row.append($('<td/>').html(e.description).addClass('description'));
-			row.append($('<td/>').html(daysString).addClass('days dimmed'));
+			row.append($('<td/>').html(e.days).addClass('days dimmed'));
 			table.append(row);
 
 			opacity -= 1 / eventList.length;
@@ -223,18 +175,7 @@ jQuery(document).ready(function($) {
 
 	(function updateCompliment()
 	{
-
+        //see compliments.js
-		var compliments = [
-			'Hey, handsome!',
-			'Hi, sexy!',
-			'Hello, beauty!',
-			'You look sexy!',
-			'Wow, you look hot!',
-			'Looking good today!',
-			'You look nice!',
-			'Enjoy your day!'
-		];
-
 		while (compliment == lastCompliment) {
 			compliment = Math.floor(Math.random()*compliments.length);
 		}
@@ -337,7 +278,7 @@ jQuery(document).ready(function($) {
 				var dt = new Date(forecast.timestamp);
 				var row = $('<tr />').css('opacity', opacity);
 
-				row.append($('<td/>').addClass('day').html(dayAbbr[dt.getDay()]));
+				row.append($('<td/>').addClass('day').html(moment.weekdaysShort(dt.getDay())));
 				row.append($('<td/>').addClass('temp-max').html(roundVal(forecast.temp_max)));
 				row.append($('<td/>').addClass('temp-min').html(roundVal(forecast.temp_min)));