hyperion.ng/assets/webconfig/content/huebridge.html
2016-09-06 09:53:28 +02:00

120 lines
3.7 KiB
HTML

<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" lang="en" data-lang-token="main_menu_huebridge_token">Hue Bridge</h1>
<div class="col-lg-12" >
<div class="col-lg-6" >
<span id="ip_alert" style="display:none; color:red; font-weight: bold;" lang="en" data-lang-token="hue_failure_ip_token">Please check your IP Address.</span>
<span id="abortConnection" style="display:none; color:red; font-weight: bold;" lang="en" data-lang-token="hue_failure_connection_token">Connection Timeout. Please press the button in time.</span>
<div class="form-group">
<label for="ip">IP:</label>
<input type="text" class="form-control" id="ip">
<label for="user" lang="en" data-lang-token="hue_label_username">Username:</label>
<input type="text" class="form-control" id="user" disabled>
<br />
<button type="button" class="btn btn-success" id="create_user"> <i class="fa fa-floppy-o"></i><span lang="en" data-lang-token="hue_button_create_user_token"> Create User</span></button>
</div>
</div>
</div>
</div>
</div>
<hr />
<div id="hue_lights" class="row">
</div>
</div>
<div class="modal fade bs-pair-modal-lg" id="pairmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Hue Bridge</h4>
</div>
<div class="modal-body">
<span lang="en" data-lang-token="hue_press_link_modal">Please press link button on the Hue Bridge.</span> <br /><br />
<center>
<span id="connectionTime"></span><br />
<img src="/img/hyperion/ring-alt.svg">
<center>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script>
$(document).ready( function() {
if($("#ip").val() != '' && $("#user").val() != '') {
get_hue_lights();
}
$("#create_user").on("click", function() {
var connectionRetries = 15;
var data = {"devicetype":"hyperion#"+Date.now()};
var UserInterval = setInterval(function(){
$.ajax({
type: "POST",
url: 'http://'+$("#ip").val()+'/api',
processData: false,
timeout: 1000,
contentType: 'application/json',
data: JSON.stringify(data),
success: function(r) {
connectionRetries--;
$("#connectionTime").html(connectionRetries);
if(connectionRetries == 0) {
abortConnection(UserInterval);
}
else{
$("#abortConnection").hide();
$('#pairmodal').modal('show');
$("#ip_alert").hide();
if (typeof r[0].error != 'undefined') {
console.log("link not pressed");
}
if (typeof r[0].success != 'undefined') {
$('#pairmodal').modal('hide');
$('#user').val(r[0].success.username);
get_hue_lights();
clearInterval(UserInterval);
}
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#ip_alert").show();
clearInterval(UserInterval);
}
});
},1000);
});
function abortConnection(UserInterval){
clearInterval(UserInterval);
$("#abortConnection").show();
$('#pairmodal').modal('hide');
}
function get_hue_lights(){
$.ajax({
type: "GET",
url: 'http://'+$("#ip").val()+'/api/'+$("#user").val()+'/lights',
processData: false,
contentType: 'application/json',
success: function(r) {
for(var lightid in r){
//console.log(r[lightid].name);
$('#hue_lights').append('ID: '+lightid+' Name: '+r[lightid].name+'<br />');
}
}
});
}
});
</script>