Changed a lot (Button for Notifications etc.)

node/public/css/style.css

@@ -43,3 +43,76 @@ h2 {
     display: inline-block;
     margin: 0;
 }
+
+.btn-block {
+
+    margin-top: 5px;
+
+}
+.btn-danger.focus, .btn-danger:focus {
+
+    color: #FFF;
+    background-color: #C9302C;
+    border-color: #761C19;
+
+}
+.btn.focus, .btn:focus, .btn:hover {
+
+    color: #333;
+    text-decoration: none;
+
+}
+.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus {
+
+    outline: thin dotted;
+    outline-offset: -2px;
+
+}
+a:focus {
+
+    outline: thin dotted;
+    outline-offset: -2px;
+
+}
+a:focus, a:hover {
+
+    color: #23527C;
+    text-decoration: underline;
+
+}
+.btn-block {
+
+    display: block;
+    width: 100%;
+
+}
+.btn-danger {
+
+    color: #FFF;
+    background-color: #D9534F;
+    border-color: #D43F3A;
+
+}
+.btn-success {
+    color: #FFF;
+    background-color: #5CB85C;
+    border-color: #4CAE4C;
+}
+.btn {
+
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    -moz-user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+
+}

node/public/js/app.js

@@ -86,13 +86,24 @@ gpower = new JustGage({
 });
 
 function stateNotification(state) {
-	if (state == true && laststate != true && laststate != null) {
+	if (state == true && laststate != true && laststate != null && enabledNotifications) {
 		laststate = true;
 		showNotification("CTDO - Status", "Der Chaostreff ist nun offen.", "/img/green.png", 4);
-	} else if (state == false && laststate != false && laststate != null) {
+	} else if (state == false && laststate != false && laststate != null && enabledNotifications) {
 		laststate = false;
 		showNotification("CTDO - Staus", "Der Chaostreff ist nun geschlossen", "/img/red.png", 4);
 	} else {
 	laststate = state;
 	}
 }
+
+function toggle() {
+    toggleNotifications();
+    if (enabledNotifications === true) {
+        document.getElementById("notificationButton").innerHTML = "Statusbenachrichtigungen an";
+        document.getElementById("notificationButton").className = "btn btn-block btn-success";
+    } else {
+        document.getElementById("notificationButton").innerHTML = "Statusbenachrichtigungen aus";
+        document.getElementById("notificationButton").className = "btn btn-block btn-danger";
+    }
+}

node/public/js/vendor/notification.js

@@ -1,8 +1,28 @@
 var Notification = window.Notification || window.mozNotification || window.webkitNotification;
+var enabledNotifications,
+    grantedPermission;
 
+function askPermission () {
     Notification.requestPermission(function (permission) {
         // console.log(permission);
+	if (permission == "granted") {
+            grantedPermission = true;
+        }
+    else {
+        grantedPermission = false;
+    }
     });
+}
+
+function toggleNotifications() {
+    if (enabledNotifications === true) {
+        enabledNotifications = false;
+    } else if (!enabledNotifications && grantedPermission === true){
+        enabledNotifications = true;
+    } else {
+        askPermission();
+    }
+}
 
 
 function showNotification(name, body, icon, timeout) {

node/statusbot.js

@@ -152,7 +152,9 @@ app.get('/', routes.index);
 
 //server.listen(3000, 'localhost');
 var server = server.listen(port, address, function(err) {
-   if(err) throw err;
+   if(err){
+    console.log(err);
+   }
 
    var message = 'Server is running @ http://' + address + ':' + port;
    console.log(message);

node/views/index.jade

@@ -7,7 +7,8 @@ block content
             | Hier siehst du den aktuellen Status von uns. Die Daten werden vom Router und unserem Flukso
             | eingesammelt. Die Anzahl der Geräte und der Status selber werden Minütlich abgefragt. Unseren
             | Energieverbrauch bekommst du alle fünf Sekunden neu. Den Status "geöffnet" oder "geschlossen"
-            | bestimmt das Programm mit einem ping auf den Switch im Raum.
+            | bestimmt das Programm mit einem ping auf den Switch im Raum. Mit dem Knopf unter dem Stromverbrauch
+            | kannst du einschalten, dass du eine Benachrichtigung bei einer Änderung bekommst. Der Tab muss dafür offen bleiben.
 
     .ink-grid(ng-controller='StatusCtrl')
         .column-group.gutters
@@ -47,7 +48,7 @@ block content
                 h2 Energieverbrauch
 
                 #gauge.power
-
+                button(type="button", onclick="toggle();", class="btn btn-block btn-danger", id="notificationButton") Statusbenachrichtigungen aus
 
 
 block scripts
@@ -58,6 +59,4 @@ block scripts
     script(type="text/javascript",src="/js/graph.js")
     script(type="text/javascript",src="/js/vendor/raphael.2.1.0.min.js")
     script(type="text/javascript",src="/js/vendor/justgage.1.0.1.min.js")
-    script(type="text/javascript",src="/js/vendor/cheet.min.js")
+
-    script(type="text/javascript",src="/js/vendor/notification.js")
-    script(type="text/javascript",src="/js/easter.js")

node/views/layout.jade

@@ -42,5 +42,8 @@ html(ng-app="roomstateapp")
         //script(type="text/javascript",src="/js/vendor/prettify.js")
         //script(type="text/javascript",src="/js/vendor/modernizr.js")
         script(type="text/javascript",src="/js/app.js")
+        script(type="text/javascript",src="/js/vendor/cheet.min.js")
+        script(type="text/javascript",src="/js/vendor/notification.js")
+        script(type="text/javascript",src="/js/easter.js")
 
         block scripts