web UPDATED
This commit is contained in:
Kai Wansart
0
www/test/css/main.css
Normal file
0
www/test/css/main.css
Normal file
33
www/test/html/devices.html
Normal file
33
www/test/html/devices.html
Normal file
@ -0,0 +1,33 @@
|
||||
<div class="yeelight container-fluid text-center bg-grey">
|
||||
<h2>Lampen</h2>
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-4 bg-grey">
|
||||
<p>Regal</p>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">An</button>
|
||||
<button type="button" class="btn btn-primary">Aus</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<p>Monitor</p>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">An</button>
|
||||
<button type="button" class="btn btn-primary">Aus</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 bg-grey">
|
||||
<p>Fernseher</p>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">An</button>
|
||||
<button type="button" class="btn btn-primary">Aus</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<p>Bett</p>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">An</button>
|
||||
<button type="button" class="btn btn-primary">Aus</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
18
www/test/html/settings.html
Normal file
18
www/test/html/settings.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div class="container" id="nas">
|
||||
<div class="col-xs-9">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary" id="start"><span class="glyphicon glyphicon-off"></span> Start</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary" id="shutdown"><span class="glyphicon glyphicon-off"></span> Shutdown</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary" id="reboot"><span class="glyphicon glyphicon-off"></span> Reboot</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3">
|
||||
<button type="button" class="btn btn-primary" id="update"><span class="glyphicon glyphicon-off"></span> Update</button>
|
||||
</div>
|
||||
</div>
|
||||
0
www/test/html/yeelight.html
Normal file
0
www/test/html/yeelight.html
Normal file
36
www/test/index.html
Normal file
36
www/test/index.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Theme Made By www.w3schools.com - No Copyright -->
|
||||
<title>HomeControl</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
||||
<script src="js/cm.js"></script>
|
||||
<link href="css/main.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-sm bg-light navbar-light">
|
||||
<ul id="navbarBtn" class="navbar-nav">
|
||||
<li class="navbar-brand">HomeControl</li>
|
||||
<!--<li id="pageDevices" class="nav-item active"><a class="nav-link">Geräte</a></li>-->
|
||||
<li><button id="pageDevices" type="button" class="btn btn-outline-light text-dark active">Geräte</button></li>
|
||||
<li><button id="pageSettings" type="button" class="btn btn-outline-light text-dark">Einstellungen</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="content" id="content">
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="container-fluid bg-4 text-center">
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
205
www/test/js/cm.js
Normal file
205
www/test/js/cm.js
Normal file
@ -0,0 +1,205 @@
|
||||
//------------------------------------------------------------------------------
|
||||
// CM - Hauptfunktion
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
var config = {}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
function bodyDataAction ()
|
||||
//-----------------------------------------------------------------------------------//
|
||||
{
|
||||
var menuButtons = document.getElementById("navbarBtn").
|
||||
getElementsByTagName("button");
|
||||
for (var i = 0; i < menuButtons.length; i++) {
|
||||
menuButtons[i].onclick = function(evt) {
|
||||
var res = evt.target.id;
|
||||
menu(res);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
function menu (message, request=null)
|
||||
//-----------------------------------------------------------------------------------//
|
||||
{
|
||||
var selectedId = $(".selected").attr('id');
|
||||
switch (message)
|
||||
{
|
||||
case 'pageDevices':
|
||||
console.log( "pageDevices")
|
||||
//loadContent('html/devices.html');
|
||||
generateDevices();
|
||||
document.getElementById('pageDevices').className = "btn btn-outline-light text-dark active";
|
||||
document.getElementById('pageSettings').className = "btn btn-outline-light text-dark";
|
||||
break;
|
||||
case 'pageSettings':
|
||||
console.log( "pageDevices")
|
||||
//loadContent('html/settings.html');
|
||||
document.getElementById('pageDevices').className = "btn btn-outline-light text-dark";
|
||||
document.getElementById('pageSettings').className = "btn btn-outline-light text-dark active";
|
||||
break;
|
||||
case 'switchRequest':
|
||||
console.log( request )
|
||||
switchRequest(request);
|
||||
break;
|
||||
default:
|
||||
alert ('[CM] Unbekannte Anfrage: ' + message);
|
||||
}
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
function switchRequest (request)
|
||||
//-----------------------------------------------------------------------------------//
|
||||
{
|
||||
var req = request.split(".");
|
||||
switch (req[0])
|
||||
{
|
||||
case 'yeelight':
|
||||
var bulb = req[1]
|
||||
var type = req[2]
|
||||
var value = req[3]
|
||||
var cmd = {};
|
||||
cmd[bulb] = {};
|
||||
cmd[bulb][type] = value;
|
||||
postYeelight(cmd);
|
||||
break;
|
||||
default:
|
||||
alert ('[POST] Unbekannte Anfrage: ' + req[0]);
|
||||
}
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
function generateYeelightBulbs ( data , type)
|
||||
//-----------------------------------------------------------------------------------//
|
||||
{
|
||||
$( ".content" ).append($('<div class="yeelight'+type+' container-fluid text-center bg-grey">'));
|
||||
$( ".yeelight"+type ).append($("<h3></h3>").text("Yeelight " + type));
|
||||
$( ".yeelight"+type ).append($('<div class="yeelight'+type+'row row text-center">'));
|
||||
for (bulb in data)
|
||||
{
|
||||
$( ".yeelight"+type+"row" ).append($('<div class="'+ bulb + 'col col-sm-3 bg-grey">'));
|
||||
$( "." + bulb + "col" ).append($("<p></p>").text(bulb));
|
||||
$( "." + bulb + "col" ).append($('<div class="' + bulb + 'btn btn-group">'));
|
||||
var configBulb = data[bulb]['config']
|
||||
for (setting in configBulb)
|
||||
{
|
||||
if (configBulb[setting]['state'] == "switch")
|
||||
{
|
||||
var command = "on";
|
||||
$( "." + bulb + "btn" ).append($('<button '+
|
||||
'id="yeelight.'+bulb+'.'+setting+'.on" ' +
|
||||
'type="button" class="' + bulb + 'btnAn btn btn-primary">An</button>'));
|
||||
var buttonOn = document.getElementById('yeelight.'+bulb+'.'+setting+'.on');
|
||||
buttonOn.onclick = function(evt) {
|
||||
var res = evt.target.id;
|
||||
menu('switchRequest', res);}
|
||||
var command = "off";
|
||||
$( "." + bulb + "btn" ).append($('<button '+
|
||||
'id="yeelight.'+bulb+'.'+setting+'.off" ' +
|
||||
'type="button" class="' + bulb + 'btnAn btn btn-primary">Aus</button>'));
|
||||
var buttonOff = document.getElementById('yeelight.'+bulb+'.'+setting+'.off');
|
||||
buttonOff.onclick = function(evt) {
|
||||
var res = evt.target.id;
|
||||
menu('switchRequest', res);}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
function generateYeelightGroups ( data )
|
||||
//-----------------------------------------------------------------------------------//
|
||||
{
|
||||
console.log(data);
|
||||
var groups = {}
|
||||
for (bulb in data)
|
||||
{
|
||||
for (group in data[bulb]['groups'])
|
||||
{
|
||||
if (group in groups)
|
||||
{
|
||||
//groups[group] = data[bulb];
|
||||
}
|
||||
else
|
||||
{
|
||||
groups[group] = {};
|
||||
groups[group] = data[bulb];
|
||||
}
|
||||
}
|
||||
};
|
||||
console.log(groups);
|
||||
generateYeelightBulbs(groups,"Gruppen");
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
function generateYeelight ( data )
|
||||
//-----------------------------------------------------------------------------------//
|
||||
{
|
||||
generateYeelightBulbs(data,"Bulbs");
|
||||
generateYeelightGroups(data);
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
function generateDevices ( )
|
||||
//-----------------------------------------------------------------------------------//
|
||||
{
|
||||
for (module in config)
|
||||
{
|
||||
if(module == "yeelight")
|
||||
{
|
||||
generateYeelight(config[module]);
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
function getConfig ( )
|
||||
//-----------------------------------------------------------------------------------//
|
||||
{
|
||||
$.ajax('/rest/config', {
|
||||
type : 'GET',
|
||||
dataType: "json",
|
||||
success : function(data) {
|
||||
config = data;
|
||||
bodyDataAction();
|
||||
menu("pageDevices");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
function postYeelight ( cmd )
|
||||
//-----------------------------------------------------------------------------------//
|
||||
{
|
||||
$.ajax('/rest/yeelight', {
|
||||
type : 'POST',
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
data : JSON.stringify(cmd),
|
||||
success : function(data) {
|
||||
console.log(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
function loadContent ( content )
|
||||
//-----------------------------------------------------------------------------------//
|
||||
{
|
||||
$.get( content, function( data ) {
|
||||
$( ".content" ).html( data );
|
||||
console.log( "Load was performed." );
|
||||
});
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------//
|
||||
$(function() {
|
||||
console.log("ONLOAD");
|
||||
|
||||
getConfig();
|
||||
|
||||
console.log("CM LOADED");
|
||||
});
|
||||
//-----------------------------------------------------------------------------------//
|
||||
Reference in New Issue
Block a user