diff --git a/node/public/css/style.css b/node/public/css/style.css index d17a806..61c35d0 100644 --- a/node/public/css/style.css +++ b/node/public/css/style.css @@ -42,4 +42,77 @@ h2 { height: 200px; display: inline-block; margin: 0; -} \ No newline at end of file +} + +.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; + +} diff --git a/node/public/js/app.js b/node/public/js/app.js index dee81b3..9b7879b 100644 --- a/node/public/js/app.js +++ b/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"; + } +} \ No newline at end of file diff --git a/node/public/js/vendor/notification.js b/node/public/js/vendor/notification.js index df6baf9..d0d0cad 100644 --- a/node/public/js/vendor/notification.js +++ b/node/public/js/vendor/notification.js @@ -1,8 +1,28 @@ var Notification = window.Notification || window.mozNotification || window.webkitNotification; +var enabledNotifications, + grantedPermission; -Notification.requestPermission(function (permission) { - // console.log(permission); -}); +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) { diff --git a/node/statusbot.js b/node/statusbot.js index 1a03896..8ad660b 100755 --- a/node/statusbot.js +++ b/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); diff --git a/node/views/index.jade b/node/views/index.jade index 4cc6344..625b1c6 100644 --- a/node/views/index.jade +++ b/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") + diff --git a/node/views/layout.jade b/node/views/layout.jade index 0178d4b..b44a36b 100644 --- a/node/views/layout.jade +++ b/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