Changed a lot (Button for Notifications etc.)

This commit is contained in:
Tim Windelschmidt 2016-01-06 08:11:55 +01:00
parent 407e3522cd
commit 4586e7e12a
6 changed files with 120 additions and 12 deletions

View File

@ -43,3 +43,76 @@ h2 {
display: inline-block; display: inline-block;
margin: 0; 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;
}

View File

@ -86,13 +86,24 @@ gpower = new JustGage({
}); });
function stateNotification(state) { function stateNotification(state) {
if (state == true && laststate != true && laststate != null) { if (state == true && laststate != true && laststate != null && enabledNotifications) {
laststate = true; laststate = true;
showNotification("CTDO - Status", "Der Chaostreff ist nun offen.", "/img/green.png", 4); 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; laststate = false;
showNotification("CTDO - Staus", "Der Chaostreff ist nun geschlossen", "/img/red.png", 4); showNotification("CTDO - Staus", "Der Chaostreff ist nun geschlossen", "/img/red.png", 4);
} else { } else {
laststate = state; 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";
}
}

View File

@ -1,8 +1,28 @@
var Notification = window.Notification || window.mozNotification || window.webkitNotification; var Notification = window.Notification || window.mozNotification || window.webkitNotification;
var enabledNotifications,
grantedPermission;
function askPermission () {
Notification.requestPermission(function (permission) { Notification.requestPermission(function (permission) {
// console.log(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) { function showNotification(name, body, icon, timeout) {

View File

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

View File

@ -7,7 +7,8 @@ block content
| Hier siehst du den aktuellen Status von uns. Die Daten werden vom Router und unserem Flukso | 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 | 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" | 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') .ink-grid(ng-controller='StatusCtrl')
.column-group.gutters .column-group.gutters
@ -47,7 +48,7 @@ block content
h2 Energieverbrauch h2 Energieverbrauch
#gauge.power #gauge.power
button(type="button", onclick="toggle();", class="btn btn-block btn-danger", id="notificationButton") Statusbenachrichtigungen aus
block scripts block scripts
@ -58,6 +59,4 @@ block scripts
script(type="text/javascript",src="/js/graph.js") 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/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/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")

View File

@ -42,5 +42,8 @@ html(ng-app="roomstateapp")
//script(type="text/javascript",src="/js/vendor/prettify.js") //script(type="text/javascript",src="/js/vendor/prettify.js")
//script(type="text/javascript",src="/js/vendor/modernizr.js") //script(type="text/javascript",src="/js/vendor/modernizr.js")
script(type="text/javascript",src="/js/app.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 block scripts