paspo/openpdu
1
0
Fork 0
forked from OpenPDU/openpdu
Code Issues Pull Requests Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Paolo Asperti
2019-08-21 23:47:24 +02:00
parent 969ae63d02
commit bd0b562dcd
21 changed files with 495 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
templates/status.html
View File

@@ -1,49 +1,47 @@
{% with pagetitle="Outlet status" pageselected="status" %}
{% include "common/layout-before.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="status" %}
{% include "common/sidebar-menu.html" %}
{% endwith %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Outlet status
</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<!-- /.box-header -->
<div class="box-body no-padding">
<table class="table table-condensed">
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th style="width: 15px">#</th>
<th>Plug name</th>
<th style="width: 30px">Status</th>
<th>Power load</th>
<th style="width: 100px">Command</th>
<th style="width: 300px">Power load</th>
<th style="width: 150px">Command</th>
</tr>
</thead>
<tbody>
{% for plug in pluglist %}
<tr>
<td>{{ plug.id }}</td>
<td>{{ plug.description }}</td>
<td>off</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-info">Toggle</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">On</a></li>
<li><a href="#">Off</a></li>
<li class="divider"></li>
<li><a href="#">Edit</a></li>
</ul>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- /.box-body -->
@@ -54,5 +52,67 @@
</div>
<!-- /.row -->
{% include "common/layout-after.html" %}
{% endwith %}
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
{% include "common/footer.html" %}
</div>
<!-- ./wrapper -->
{% 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>
$(function () {
var btnhtml = `<div class="btn-group">
<button type="button" class="btn btn-info" script="toggle">Toggle</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">On</a></li>
<li><a href="#">Off</a></li>
<li class="divider"></li>
<li><a href="#">Edit</a></li>
</ul>
</div>`;
$('#example2').DataTable({
'ajax': '/json/status',
"columns" : [
{ "data" : 0 },
{ "data" : 1 },
{ "data" : 2 },
{ "data" : null, "defaultContent": "<div class='progress progress-xs'><div class='progress-bar progress-bar-danger' style='width: 55%'></div></div>"},
{ "data" : null, "defaultContent":btnhtml }
],
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true
});
// fa-toggle-off
$('#example2 tbody').on( 'click', '[script="toggle"]', function () {
alert( 'ciao' );
});
} );
</script>
</body>
</html>