forked from OpenPDU/openpdu
242 lines
8.4 KiB
HTML
242 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
{% include "common/common-head.html" %}
|
|
</head>
|
|
<body class="hold-transition skin-blue sidebar-mini">
|
|
<div class="wrapper">
|
|
|
|
{% include "common/page-header.html" %}
|
|
{% with pageselected="settings/mqtt" %}
|
|
{% include "common/sidebar-menu.html" %}
|
|
{% endwith %}
|
|
|
|
<!-- Content Wrapper. Contains page content -->
|
|
<div class="content-wrapper">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<h1>
|
|
MQTT configuration
|
|
</h1>
|
|
</section>
|
|
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
|
|
|
|
|
|
<div class="row" id="notification-success" style="display: none;">
|
|
<div class="col-md-12">
|
|
<div class="box box-success box-solid">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Settings saved!</h3>
|
|
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
|
|
class="fa fa-times"></i></button>
|
|
</div>
|
|
<!-- /.box-tools -->
|
|
</div>
|
|
<!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div>
|
|
<!-- /.box-body -->
|
|
</div>
|
|
<!-- /.box -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
|
|
<div class="row" id="notification-error" style="display: none;">
|
|
<div class="col-md-12">
|
|
<div class="box box-danger box-solid">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Error saving settings!</h3>
|
|
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
|
|
class="fa fa-times"></i></button>
|
|
</div>
|
|
<!-- /.box-tools -->
|
|
</div>
|
|
<!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div>
|
|
<!-- /.box-body -->
|
|
</div>
|
|
<!-- /.box -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
<!-- left column -->
|
|
<div class="col-md-12">
|
|
<!-- general form elements -->
|
|
<div class="box box-primary">
|
|
<!-- form start -->
|
|
<form role="form" id="theform" class="form-horizontal">
|
|
|
|
<div class="box-body">
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label" for="brokerip">Broker IP address</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="brokerip" placeholder="MQTT broker IP address or hostname" value="{{ r_brokerip }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label" for="brokerport">Broker port</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="brokerport" placeholder="MQTT broker port" value="{{ r_brokerport }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label" for="clientid">MQTT Client ID</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="clientid" placeholder="MQTT client ID" value="{{ r_clientid }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label" for="username">Username</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="username" placeholder="MQTT broker username" value="{{ r_username }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label" for="password">Password</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="password" placeholder="MQTT broker password" value="{{ r_password }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label" for="topic">Topic</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="topic" placeholder="MQTT topic" value="{{ r_topic }}">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-2 col-sm-10">
|
|
<div class="checkbox">
|
|
<label>
|
|
<!-- value !!!! -->
|
|
<input type="checkbox" id="cleansession"> Clean session
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-2 col-sm-10">
|
|
<div class="checkbox">
|
|
<label>
|
|
<!-- value !!!! -->
|
|
<input type="checkbox" id="homeassistant"> HomeAssistant auto discovery
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- /.box-body -->
|
|
|
|
|
|
|
|
|
|
<div class="box-footer">
|
|
<button type="submit" class="btn btn-primary pull-right">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- /.box -->
|
|
|
|
</div>
|
|
<!--/.col (right) -->
|
|
</div>
|
|
<!-- /.row -->
|
|
|
|
|
|
|
|
</section>
|
|
<!-- /.content -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
|
|
{% include "common/footer.html" %}
|
|
|
|
</div>
|
|
<!-- ./wrapper -->
|
|
|
|
{% include "common/common-js.html" %}
|
|
|
|
|
|
<script>
|
|
$(function () {
|
|
$('#brokerip').select();
|
|
$('#theform').on( 'submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
$.ajax({
|
|
url: '/json/settings/mqtt',
|
|
type: 'post',
|
|
data: {
|
|
'brokerip': $('#brokerip').val(),
|
|
'brokerport': $('#brokerport').val(),
|
|
'clientid': $('#clientid').val(),
|
|
'username': $('#username').val(),
|
|
'password': $('#password').val(),
|
|
'topic': $('#topic').val(),
|
|
'cleansession': $('#cleansession').val(),
|
|
'homeassistant': $('#homeassistant').val(),
|
|
},
|
|
})
|
|
.done(function(r) {
|
|
if (r.result=='ok') {
|
|
$('#notification-success .box-body').text('MQTT settings saved.');
|
|
$("#notification-success").show("fast");
|
|
setTimeout(function(){
|
|
$("#notification-success").fadeOut("slow");
|
|
},1000);
|
|
} else {
|
|
$('#notification-error .box-body').text('Error saving MQTT settings.');
|
|
$("#notification-error").show("fast");
|
|
setTimeout(function(){
|
|
$("#notification-error").fadeOut("slow");
|
|
},5000);
|
|
}
|
|
})
|
|
.fail(function(jqXHR, textStatus, errorThrown) {
|
|
var responseText = jQuery.parseJSON(jqXHR.responseText);
|
|
$('#notification-error .box-body').text('Something went wrong. Settings not saved.');
|
|
$("#notification-error").show("fast");
|
|
setTimeout(function(){
|
|
$("#notification-error").fadeOut("slow");
|
|
},5000);
|
|
|
|
});
|
|
|
|
});
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|