##// END OF EJS Templates
radarsys
RSS
Scheduler funcional
Scheduler funcional
Renato Huallpa - - Load All Authors

File last commit:

r392:70274e275276
r395:cfb0f9955b15
Show More
atrad_conf.html
269 lines | 8.9 KiB | text/html | HtmlDjangoLexer
/ apps / atrad / templates / atrad_conf.html
History | Annotation | Raw |Copy content |Copy permalink
{% extends "dev_conf.html" %}
{% load static %}
{% block extra-head %}
<style>
.dot {
height: 25px;
width: 25px;
background-color: #b0b3af;
border-radius: 50%;
display: inline-block;
}
.row{
margin-top: 3px;
margin-bottom: 3px;
}
.th {
vertical-align: middle;
}
</style>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
{% endblock %}
{% block content-graph %}
<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">
<h1 class="py-4 text-center" >ATRAD Monitoring</h1>
<!-- 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>
</div>
</div>
</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">
<tbody>
<tr>
<th scope="row">Tx1</th>
<td><span id="status1" class="dot"></span></td>
<td><p id="status-text1" class="font-weight-bold">No data</p></td>
</tr>
<tr>
<th scope="row">Tx2</th>
<td><span id="status2" class="dot"></span></td>
<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>
</tr>
</tbody>
</table>
</div>
</div>
<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>
</div>
</div>
<!-- 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>
</div>
</div>
</div>
</div>
</div>
</div>
<!--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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Modales-->
<div class="modal fade" id="Pot-1" role="dialog">
<div class="modal-dialog modal-lg" style="max-width:50%;min-width:750px">
<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">&times;</button>
</div>
<div class="modal-body">
<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>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Pot-2" role="dialog">
<div class="modal-dialog modal-lg" style="max-width:50%;min-width:750px">
<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">&times;</button>
</div>
<div class="modal-body">
<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>
</div>
</div>
</div>
</div>
</div>
<script src="{% static 'js/atrad-conf.js' %}"></script>
{% endblock %}