atrad_conf.html
269 lines
| 8.9 KiB
| text/html
|
HtmlDjangoLexer
|
r380 | {% extends "dev_conf.html" %} | |
|
r391 | {% load static %} | |
|
r380 | {% block extra-head %} | |
<style> | |||
.dot { | |||
height: 25px; | |||
width: 25px; | |||
background-color: #b0b3af; | |||
border-radius: 50%; | |||
display: inline-block; | |||
} | |||
|
r391 | .row{ | |
margin-top: 3px; | |||
margin-bottom: 3px; | |||
} | |||
.th { | |||
vertical-align: middle; | |||
} | |||
|
r380 | </style> | |
|
r391 | <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet"> | |
|
r380 | {% endblock %} | |
|
r391 | {% block content-graph %} | |
|
r380 | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> | |
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script> | |||
<div class="container-fluid"> | |||
|
r391 | <h1 class="py-4 text-center" >ATRAD Monitoring</h1> | |
|
r380 | ||
|
r391 | <!-- First row : Control--> | |
<div class="row"> | |||
<div class="card border-light"> | |||
<div class="card-body"> | |||
<h3 class="card-title">Control</h3> | |||
<table class="table table-borderless"> | |||
<tbody> | |||
<tr> | |||
<th class="align-middle">Tx1</th> | |||
<td> | |||
<button type="button" class="btn btn-outline-success" id="ONBtn1"> ON </button> | |||
<button type="button" class="btn btn-outline-danger" id="OFFBtn1"> OFF </button> | |||
</td> | |||
</tr> | |||
<tr> | |||
<th class="align-middle">Tx2</th> | |||
<td> | |||
<button type="button" class="btn btn-outline-success" id="ONBtn2"> ON </button> | |||
<button type="button" class="btn btn-outline-danger" id="OFFBtn2"> OFF </button> | |||
</td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
|
r380 | </div> | |
</div> | |||
|
r391 | </div> | |
<!-- Second row : Status and alerts --> | |||
<div class="row"> | |||
<div class="card-deck"> | |||
<div class="card border-light"> | |||
<div class="card-body"> | |||
<h4 class="card-title">Status</h4> | |||
<table class="table table-borderless"> | |||
|
r380 | <tbody> | |
<tr> | |||
<th scope="row">Tx1</th> | |||
<td><span id="status1" class="dot"></span></td> | |||
|
r391 | <td><p id="status-text1" class="font-weight-bold">No data</p></td> | |
|
r380 | </tr> | |
<tr> | |||
<th scope="row">Tx2</th> | |||
<td><span id="status2" class="dot"></span></td> | |||
|
r391 | <td><p id="status-text2" class="font-weight-bold">No data</p></td> | |
</tr> | |||
</tbody> | |||
</table> | |||
</div> | |||
</div> | |||
<div class="card border-light"> | |||
<div class="card-body"> | |||
<h4 class="card-title">High Temperature Alerts</h4> | |||
<table class="table table-borderless"> | |||
<tbody> | |||
<tr> | |||
<th scope="row"><p id="alert-time1" class="font-weight-bold"></p></th> | |||
<td><p id="alert-temp1" class="font-weight-bold"></p></td> | |||
<td><p id="alert-loc1" class="font-weight-bold"></p></td> | |||
</tr> | |||
<tr> | |||
<th scope="row"><p id="alert-time2" class="font-weight-bold"></p></th> | |||
<td><p id="alert-temp2" class="font-weight-bold"></p></td> | |||
<td><p id="alert-loc2" class="font-weight-bold"></p></td> | |||
|
r380 | </tr> | |
</tbody> | |||
</table> | |||
</div> | |||
</div> | |||
|
r391 | <div class="card border-light"> | |
<div class="card-body"> | |||
<h4 class="card-title">Power Alerts</h4> | |||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quisquam cupiditate sunt eaque distinctio explicabo aliquam blanditiis illo eligendi eveniet culpa, vel laboriosam! Facilis dolores assumenda autem. Maiores, quibusdam eum. | |||
</div> | |||
</div> | |||
|
r380 | </div> | |
</div> | |||
|
r391 | <!-- Third row : power graph--> | |
<div class="row "> | |||
<div class="card border-light"> | |||
<div class="card-body"> | |||
<h3 class="card-title">Power graph</h3> | |||
<div class="row justify-content-md-center"> | |||
<div class="col-md-9"> | |||
<div id="plot-pot"></div> | |||
</div> | |||
<div class="col-md-3 text-end"> | |||
<div class="card-body"> | |||
<table class="table" style="max-width:170px;"> | |||
<tbody> | |||
<tr> | |||
<th scope="col"># Tx</th> | |||
<th scope="col">Power (kW)</th> | |||
</tr> | |||
<tr> | |||
<th scope="row">1</th> | |||
<td><p id="pot1"></p></td> | |||
</tr> | |||
<tr> | |||
<th scope="row">2</th> | |||
<td><p id="pot2"></p></td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
</div> | |||
<div class="card-body"> | |||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Pot-1">T1</button> | |||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Pot-2">T2</button> | |||
|
r380 | </div> | |
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
|
r391 | <!--Temperature Graph--> | |
<div class="row "> | |||
<div class="card border-light"> | |||
<div class="card-body"> | |||
<h3 class="card-title">Temperature graph</h3> | |||
<div class="row justify-content-md-center"> | |||
<div class="col-md-9"> | |||
<div id="plot-temp"></div> | |||
</div> | |||
<div class="col-md-3 text-end"> | |||
<div class="card-body"> | |||
<table class="table table-hover" style="max-width:170px;"> | |||
<tbody> | |||
<tr> | |||
<th scope="col"># Tx</th> | |||
<th scope="col">Temperature (°C)</th> | |||
</tr> | |||
<tr class="clickable-row" data-href="{% url 'url_tx_atrad' dev_conf.id 'tx1' %}"> | |||
<th scope="row">1</th> | |||
<td><p id="temp1"></p></td> | |||
</tr> | |||
<tr class="clickable-row" data-href="{% url 'url_tx_atrad' dev_conf.id 'tx2' %}"> | |||
<th scope="row">2</th> | |||
<td><p id="temp2"></p></td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
|
r380 | </div> | |
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!--Modales--> | |||
|
r391 | <div class="modal fade" id="Pot-1" role="dialog"> | |
<div class="modal-dialog modal-lg" style="max-width:50%;min-width:750px"> | |||
|
r380 | <div class="modal-content"> | |
<div class="modal-header"> | |||
<h4 class="modal-title">Potencia incidente - Transmisor 1</h4> | |||
<button type="button" class="close" data-dismiss="modal">×</button> | |||
</div> | |||
<div class="modal-body"> | |||
|
r391 | <div class="row"> | |
<div class="col"> | |||
<div id="plot-pot-t1"></div> | |||
</div> | |||
<div class="col"> | |||
<table class="table" style="max-width: 150px;"> | |||
<tbody> | |||
<tr> | |||
<th scope="col"># Amp</th> | |||
<th scope="col">Potencia (kW)</th> | |||
</tr> | |||
<tr> | |||
<th scope="row">P1</th> | |||
<td><p id="pot1-1"></p></td> | |||
</tr> | |||
<tr> | |||
<th scope="row">P2</th> | |||
<td><p id="pot1-2"></p></td> | |||
</tr> | |||
<tr> | |||
<th scope="row">P3</th> | |||
<td><p id="pot1-3"></p></td> | |||
</tr> | |||
<tr> | |||
<th scope="row">P4</th> | |||
<td><p id="pot1-4"></p></td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
</div> | |||
|
r380 | </div> | |
</div> | |||
</div> | |||
</div> | |||
</div> | |||
|
r391 | <div class="modal fade" id="Pot-2" role="dialog"> | |
<div class="modal-dialog modal-lg" style="max-width:50%;min-width:750px"> | |||
|
r380 | <div class="modal-content"> | |
<div class="modal-header"> | |||
<h4 class="modal-title">Potencia incidente - Transmisor 2</h4> | |||
<button type="button" class="close" data-dismiss="modal">×</button> | |||
</div> | |||
<div class="modal-body"> | |||
|
r391 | <div class="row"> | |
<div class="col"> | |||
<div id="plot-pot-t2"></div> | |||
</div> | |||
<div class="col"> | |||
<table class="table" style="max-width: 150px;"> | |||
<tbody> | |||
<tr> | |||
<th scope="col"># Amp</th> | |||
<th scope="col">Potencia (kW)</th> | |||
</tr> | |||
<tr> | |||
<th scope="row">P1</th> | |||
<td><p id="pot2-1"></p></td> | |||
</tr> | |||
<tr> | |||
<th scope="row">P2</th> | |||
<td><p id="pot2-2"></p></td> | |||
</tr> | |||
<tr> | |||
<th scope="row">P3</th> | |||
<td><p id="pot2-3"></p></td> | |||
</tr> | |||
<tr> | |||
<th scope="row">P4</th> | |||
<td><p id="pot2-4"></p></td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
</div> | |||
|
r380 | </div> | |
</div> | |||
</div> | |||
</div> | |||
</div> | |||
|
r392 | <script src="{% static 'js/atrad-conf.js' %}"></script> | |
|
r391 | ||
|
r380 | {% endblock %} |