forked from OpenPDU/openpdu
bella mqtt quasi va
This commit is contained in:
@@ -82,8 +82,8 @@
|
||||
|
||||
|
||||
<!-- DataTables -->
|
||||
<script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
|
||||
<script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
|
||||
<script src="/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
|
||||
<script src="/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
@@ -4,16 +4,16 @@
|
||||
<!-- Tell the browser to be responsive to screen width -->
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||
<!-- Bootstrap 3.3.7 -->
|
||||
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="../../bower_components/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
|
||||
<!-- Ionicons -->
|
||||
<link rel="stylesheet" href="../../bower_components/Ionicons/css/ionicons.min.css">
|
||||
<link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
|
||||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href="adminlte/css/AdminLTE.min.css">
|
||||
<link rel="stylesheet" href="/adminlte/css/AdminLTE.min.css">
|
||||
<!-- AdminLTE Skins. Choose a skin from the css/skins
|
||||
folder instead of downloading all of them to reduce the load. -->
|
||||
<link rel="stylesheet" href="adminlte/css/skins/_all-skins.min.css">
|
||||
<link rel="stylesheet" href="/adminlte/css/skins/_all-skins.min.css">
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
@@ -23,4 +23,4 @@
|
||||
<![endif]-->
|
||||
|
||||
<!-- Google Font -->
|
||||
<link rel="stylesheet" href="../../googlefonts/fonts.css">
|
||||
<link rel="stylesheet" href="/googlefonts/fonts.css">
|
||||
@@ -1,10 +1,10 @@
|
||||
<!-- jQuery 3 -->
|
||||
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<!-- Bootstrap 3.3.7 -->
|
||||
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<!-- Slimscroll -->
|
||||
<script src="../../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
|
||||
<script src="/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
|
||||
<!-- FastClick -->
|
||||
<script src="../../bower_components/fastclick/lib/fastclick.js"></script>
|
||||
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="adminlte/js/adminlte.min.js"></script>
|
||||
<script src="/adminlte/js/adminlte.min.js"></script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<header class="main-header">
|
||||
<!-- Logo -->
|
||||
<a href="../../index2.html" class="logo">
|
||||
<a href="/" class="logo">
|
||||
<!-- mini logo for sidebar mini 50x50 pixels -->
|
||||
<span class="logo-mini">O<b>P</b></span>
|
||||
<!-- logo for regular state and mobile devices -->
|
||||
|
||||
@@ -26,19 +26,46 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
{% if pageselected == "settings" || pageselected == "settings/mqtt" %}
|
||||
<li class="treeview menu-open">
|
||||
{% else %}
|
||||
<li class="treeview">
|
||||
{% endif %}
|
||||
|
||||
<a href="#">
|
||||
<i class="fa fa-gears"></i> <span>Settings</span>
|
||||
<span class="pull-right-container">
|
||||
<i class="fa fa-angle-left pull-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="treeview-menu">
|
||||
<li><a href="/settings/lan"><i class="fa fa-circle-o"></i> LAN</a></li>
|
||||
<li><a href="/settings/mqtt"><i class="fa fa-circle-o"></i> MQTT</a></li>
|
||||
<li><a href="/settings/syslog"><i class="fa fa-circle-o"></i> syslog</a></li>
|
||||
<li><a href="/settings/backup"><i class="fa fa-circle-o"></i> backup</a></li>
|
||||
<li><a href="/settings/restore"><i class="fa fa-circle-o"></i> restore</a></li>
|
||||
|
||||
{% if pageselected == "settings" || pageselected == "settings/mqtt" %}
|
||||
<ul class="treeview-menu" style="display: block;">
|
||||
{% else %}
|
||||
<ul class="treeview-menu" style="display: none;">
|
||||
{% endif %}
|
||||
<li>
|
||||
<a href="/settings/lan"><i class="fa fa-circle-o"></i> LAN</a>
|
||||
</li>
|
||||
|
||||
{% if pageselected == "settings/mqtt" %}
|
||||
<li class="active">
|
||||
{% else %}
|
||||
<li>
|
||||
{% endif %}
|
||||
<a href="/settings/mqtt"><i class="fa fa-circle-o"></i> MQTT</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/settings/syslog"><i class="fa fa-circle-o"></i> syslog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/settings/backup"><i class="fa fa-circle-o"></i> backup</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/settings/restore"><i class="fa fa-circle-o"></i> restore</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
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>
|
||||
|
||||
@@ -65,8 +65,8 @@
|
||||
{% include "common/common-js.html" %}
|
||||
|
||||
<!-- DataTables -->
|
||||
<script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
|
||||
<script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
|
||||
<script src="/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
|
||||
<script src="/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
Reference in New Issue
Block a user