update dashboard clock performance

- use pure js for all operation except the on click event to change the class for twentyfourhours

web/libs/js/clock.js

@@ -1,26 +1,50 @@
 $(document).ready(function() {
     var monthNames = [ lang.January, lang.February, lang.March, lang.April, lang.May, lang.June, lang.July, lang.August, lang.September, lang.October, lang.November, lang.December ];
     var dayNames= [lang.Sunday, lang.Monday, lang.Tuesday, lang.Wednesday, lang.Thursday, lang.Friday, lang.Saturday]
-
+    var timeMin = document.getElementById("time-min")
+    var timeSec = document.getElementById("time-sec")
+    var timeHour = document.getElementById("time-hours")
+    var timeDate = document.getElementById("time-date")
     var newDate = new Date();
     newDate.setDate(newDate.getDate());
-    $('#time-date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
+    var updateDate = function(){
-
+        timeDate.innerHTML = dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear();
-    var second=function() {
+    }
-	   var seconds = new Date().getSeconds();
+    var second = function(theDate) {
-	   document.getElementById("time-sec").innerHTML=( seconds < 10 ? "0" : "" ) + seconds;
+	   var seconds = theDate.getSeconds();
+	   timeSec.innerHTML=( seconds < 10 ? "0" : "" ) + seconds;
 	}
-    var minute=function() {
+    var minute = function(theDate) {
-    	var minutes = new Date().getMinutes();
+    	var minutes = theDate.getMinutes();
-        document.getElementById("time-min").innerHTML=(( minutes < 10 ? "0" : "" ) + minutes);
+        timeMin.innerHTML=(( minutes < 10 ? "0" : "" ) + minutes);
     }
-    var hour=function() {
+    var hour = function(theDate) {
-        var hours = new Date().getHours();
+        var hours = theDate.getHours();
-        var element=$("#time-hours");
         hours = ( hours < 10 ? "0" : "" ) + hours;
-        if(element.hasClass('twentyfour')&&hours>12){hours=hours-12}
+        if(timeHour.classList.contains('twentyfour') && hours > 12)hours = hours - 12;
-        element.html(hours);
+        timeHour.innerHTML = hours
     }
-    setInterval(function(){second(),minute(),hour();},1000);
+    var setAll = function(){
-    second(),minute(),hour();
+        var theDate = new Date()
+        second(theDate)
+        if(currentMinute !== theDate.getMinutes())minute(theDate)
+        if(currentHour !== theDate.getHours())hour(theDate)
+        if(currentDay !== theDate.getDay())updateDate()
+    }
+    setAll()
+    var currentHour = newDate.getHours()
+    var currentMinute = newDate.getMinutes()
+    var currentDay = newDate.getDay()
+    setInterval(function(){
+        setAll()
+    },1000);
+    setInterval(function(){
+        updateDate()
+    },1000 * 60 * 60);
+    updateDate()
+    $('#clock').click(function(){
+        timeHour.classList.toggle('twentyfour')
+        setAll()
+        updateDate()
+    })
 });

web/pages/home.ejs

@@ -90,7 +90,7 @@
           <div class="mdl-layout-spacer"></div>
             <ul class="nav navbar-nav navbar-right">
                 <li role="presentation" class="dropdown">
-                <div id="clock" class_toggle="twentyfour" data-target="#time-hours">
+                <div id="clock" data-target="#time-hours" style="cursor:pointer">
                     <div id="time-date"></div>
                     <ul>
                         <li id="time-hours"></li>