forked from OpenPDU/openpdu
bella mqtt quasi va
This commit is contained in:
242
templates/settings_mqtt.html
Normal file
242
templates/settings_mqtt.html
Normal file
@@ -0,0 +1,242 @@
|
||||
<!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>
|
||||
|
||||
Reference in New Issue
Block a user