Added few improvements to make MagicMirror better

Used momentjs' translations for every DateTime strings. No more need to add translations.

Added config.js to use as a central file for configurations.

Try to use Gmail's calendars and I've seen that there are some problems (with old events,
when an event has "email remembers", and with TimeZones). I'll try to solve it soon.

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)));