##// END OF EJS Templates
radarsys
RSS
Improve abs pattern views, templates and plots....
Improve abs pattern views, templates and plots. git-svn-id: http://jro-dev.igp.gob.pe/svn/jro_hard/radarsys/trunk/webapp@203 aa17d016-51d5-4e8b-934c-7b2bbb1bbe71
Fiorella Quino - - Load All Authors

File last commit:

r166:d72e9c99e97e
r180:d4783015f56a
Show More
abs_conf.html
462 lines | 14.7 KiB | text/html | HtmlDjangoLexer
/ apps / abs / templates / abs_conf.html
History | Source | Raw |Copy content |Copy permalink
Fiorella Quino
Task #714: Modulo web del ABS ...
 r166 {% extends "dev_conf.html" %}
{% block extra-menu-actions %}
<li><a href="{{ dev_conf.get_absolute_url_plot }}" target="_blank"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> View Patterns </a></li>
<li><a href="{{ dev_conf.get_absolute_url_write }}"><span class="glyphicon glyphicon-download" aria-hidden="true"></span> Write</a></li>
{% endblock %}
{% block extra-content %}
<style>
.abs {
border: 2px solid #00334d;
vertical-align: center;
display: inline-block;
}
.abs tr:nth-child(1){
border-bottom: 1px dashed #00334d;
}
.abs tr{
border-bottom: 0px solid #00334d;
}
.abs td {
border-right: 1px dashed #00334d;
text-align: center;
padding: 5px;
}
.legend {
margin-left: 15px;
display: inline-block;
border: 2px solid #00334d;
vertical-align: top;
}
.legend th{
border-bottom: 1px dashed #00334d;
font-weight: bold;
vertical-align: center;
text-align: center;
}
.legend td {
padding: 2px;
text-align: center;
}
.north {
border: 2px solid #00334d;
vertical-align: center;
font-weight: bold;
}
.north tr{
border: 1px solid #ffffff;
background-color: #FF0000;
}
.north td{
border: 2px solid #e2e2e7;
text-align: center;
padding: 1px 15px 1px 15px;
}
.north tr:nth-child(even) td:nth-child(n){
border-bottom: 12px solid #e2e2e7;
}
.north td:nth-child(n) {
border-right: 12px solid #e2e2e7;
}
.north td:nth-last-child(4n+1) {
border-right: 2px solid #e2e2e7;
}
.north tr:nth-last-child(1) td:nth-child(n){
border-bottom: 3px solid #e2e2e7;
}
.north tr:nth-child(2) td:nth-child(2){
background-color: #00cc00;
}
.north tr:nth-child(2) td:nth-child(4){
background-color: #ee902c;
}
.east {
border: 2px solid #00334d;
vertical-align: center;
font-weight: bold;
}
.east tr{
border: 1px solid #ffffff;
background-color: #FF0000;
}
.east td{
border: 2px solid #e2e2e7;
text-align: center;
padding: 1px 15px 1px 15px;
}
.east tr:nth-child(even) td:nth-child(n){
border-bottom: 12px solid #e2e2e7;
}
.east td:nth-child(n) {
border-right: 12px solid #e2e2e7;
}
.east td:nth-last-child(4n+1) {
border-right: 2px solid #e2e2e7;
}
.east tr:nth-last-child(1) td:nth-child(n){
border-bottom: 3px solid #e2e2e7;
}
.east tr:nth-child(2) td:nth-child(2){
background-color: #00cc00;
}
.east tr:nth-child(2) td:nth-child(4){
background-color: #ee902c;
}
.west {
border: 2px solid #00334d;
vertical-align: center;
font-weight: bold;
}
.west tr{
border: 1px solid #ffffff;
background-color: #FF0000;
}
.west td{
border: 2px solid #e2e2e7;
text-align: center;
padding: 1px 15px 1px 15px;
}
.west tr:nth-child(even) td:nth-child(n){
border-bottom: 12px solid #e2e2e7;
}
.west td:nth-child(n) {
border-right: 12px solid #e2e2e7;
}
.west td:nth-last-child(4n+1) {
border-right: 2px solid #e2e2e7;
}
.west tr:nth-last-child(1) td:nth-child(n){
border-bottom: 3px solid #e2e2e7;
}
.west tr:nth-child(2) td:nth-child(2){
background-color: #00cc00;
}
.west tr:nth-child(2) td:nth-child(4){
background-color: #ee902c;
}
.south {
border: 2px solid #00334d;
vertical-align: center;
font-weight: bold;
}
.south tr{
border: 1px solid #ffffff;
background-color: #FF0000;
}
.south td{
border: 2px solid #e2e2e7;
text-align: center;
padding: 1px 15px 1px 15px;
}
.south tr:nth-child(even) td:nth-child(n){
border-bottom: 12px solid #e2e2e7;
}
.south td:nth-child(n) {
border-right: 12px solid #e2e2e7;
}
.south td:nth-last-child(4n+1) {
border-right: 2px solid #e2e2e7;
}
.south tr:nth-last-child(1) td:nth-child(n){
border-bottom: 3px solid #e2e2e7;
}
.south tr:nth-child(2) td:nth-child(2){
background-color: #00cc00;
}
.south tr:nth-child(2) td:nth-child(4){
background-color: #ee902c;
}
</style>
<h4>Beams:</h4>
{% if beams_id %}
<div class="container">
<ul class="nav nav-pills">
{% for beam in beams %}
<li {% if forloop.counter == 1 %} class="active" {% endif %}>
<a data-toggle="pill" id="button-{{ forloop.counter }}" href="#">{{ forloop.counter }}</a>
</li>
{% endfor %}
</ul>
</div>
<script>
$(document).ready(function() {
{% for beam in beams %}
$( "#button-{{ forloop.counter }}" ).click(function() {
//$(this).addClass('active');
var beam_upvalues = {{beam.get_upvalues}};
var beam_downvalues = {{beam.get_downvalues}};
//alert(beam_upvalues)
var table = document.getElementById('abs_pattern');
var cells = table.getElementsByTagName('td');
//alert(cells[99].textContent);
for (var i = 1, len = 30; i < len; i++) {
if ((i > 24) && (i<29)){
cells[i].innerHTML = beam_upvalues[i-1].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-1].toFixed(1);
}
else if ((i > 16) && (i<21)){
cells[i].innerHTML = beam_upvalues[i-1].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-1].toFixed(1);
}
else if ((i > 8) && (i<13)){
cells[i].innerHTML = beam_upvalues[i-1].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-1].toFixed(1);
}
else if (i < 5) {
cells[i].innerHTML = beam_upvalues[i-1].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-1].toFixed(1);
}
}
for (var i = 34, len = 63; i < len; i++) {
if ((i > 57) && (i<62)) {
cells[i].innerHTML = beam_upvalues[i-30].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-30].toFixed(1);
}
if ((i > 49) && (i<54)) {
cells[i].innerHTML = beam_upvalues[i-30].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-30].toFixed(1);
}
else if ((i > 41) && (i<46)) {
cells[i].innerHTML = beam_upvalues[i-30].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-30].toFixed(1);
}
else if (i < 38) {
cells[i].innerHTML = beam_upvalues[i-30].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-30].toFixed(1);
}
}
for (var i = 67, len = 96; i < len; i++) {
if ((i > 90) && (i<95)) {
cells[i].innerHTML = beam_upvalues[i-35].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-35].toFixed(1);
}
else if ((i > 82) && (i<87)) {
cells[i].innerHTML = beam_upvalues[i-35].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-35].toFixed(1);
}
else if ((i > 74) && (i<79)) {
cells[i].innerHTML = beam_upvalues[i-35].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-35].toFixed(1);
}
else if (i < 71) {
cells[i].innerHTML = beam_upvalues[i-35].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-35].toFixed(1);
}
}
for (var i = 100, len = 129; i < len; i++) {
if ((i > 123) && (i<128)) {
cells[i].innerHTML = beam_upvalues[i-64].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-64].toFixed(1);
}
else if ((i > 115) && (i<120)) {
cells[i].innerHTML = beam_upvalues[i-64].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-64].toFixed(1);
}
else if ((i > 107) && (i<112)) {
cells[i].innerHTML = beam_upvalues[i-64].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-64].toFixed(1);
}
else if (i < 104) {
cells[i].innerHTML = beam_upvalues[i-64].toFixed(1);
cells[i+4].innerHTML = beam_downvalues[i-64].toFixed(1);
}
}
//$('#button-1').addClass("active");
});
{% endfor %}
//})
//function ChangeColor() {
// document.getElementById("button_1").style.backgroundColor = "#2c3e50";
// document.getElementById("button_1").style.color = "#ecf0f1";
//}
});
</script>
<br>
<table id="abs_pattern" class="abs">
<tr>
<td> <b>North Quarter</b>
<table class="north ">
<tr>
<td>{{beams.0.get_upvalues.0}}</td> <td>{{beams.0.get_upvalues.1}}</td> <td>{{beams.0.get_upvalues.2}}</td> <td>{{beams.0.get_upvalues.3}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.0}}</td> <td>{{beams.0.get_downvalues.1}}</td> <td>{{beams.0.get_downvalues.2}}</td> <td>{{beams.0.get_downvalues.3}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.8}}</td> <td>{{beams.0.get_upvalues.9}}</td> <td>{{beams.0.get_upvalues.10}}</td> <td>{{beams.0.get_upvalues.11}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.8}}</td> <td>{{beams.0.get_downvalues.9}}</td> <td>{{beams.0.get_downvalues.10}}</td> <td>{{beams.0.get_downvalues.11}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.16}}</td> <td>{{beams.0.get_upvalues.17}}</td> <td>{{beams.0.get_upvalues.18}}</td> <td>{{beams.0.get_upvalues.19}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.16}}</td> <td>{{beams.0.get_downvalues.17}}</td> <td>{{beams.0.get_downvalues.18}}</td> <td>{{beams.0.get_downvalues.19}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.24}}</td> <td>{{beams.0.get_upvalues.25}}</td> <td>{{beams.0.get_upvalues.26}}</td> <td>{{beams.0.get_upvalues.27}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.24}}</td> <td>{{beams.0.get_downvalues.25}}</td> <td>{{beams.0.get_downvalues.26}}</td> <td>{{beams.0.get_downvalues.27}}</td>
</tr>
</table>
</td>
<td> <b>East Quarter</b>
<table class="east ">
<tr>
<td>{{beams.0.get_upvalues.4}}</td> <td>{{beams.0.get_upvalues.5}}</td> <td>{{beams.0.get_upvalues.6}}</td> <td>{{beams.0.get_upvalues.7}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.4}}</td> <td>{{beams.0.get_downvalues.5}}</td> <td>{{beams.0.get_downvalues.6}}</td> <td>{{beams.0.get_downvalues.7}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.12}}</td> <td>{{beams.0.get_upvalues.13}}</td> <td>{{beams.0.get_upvalues.14}}</td> <td>{{beams.0.get_upvalues.15}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.12}}</td> <td>{{beams.0.get_downvalues.13}}</td> <td>{{beams.0.get_downvalues.14}}</td> <td>{{beams.0.get_downvalues.15}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.20}}</td> <td>{{beams.0.get_upvalues.21}}</td> <td>{{beams.0.get_upvalues.22}}</td> <td>{{beams.0.get_upvalues.23}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.20}}</td> <td>{{beams.0.get_downvalues.21}}</td> <td>{{beams.0.get_downvalues.22}}</td> <td>{{beams.0.get_downvalues.23}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.28}}</td> <td>{{beams.0.get_upvalues.29}}</td> <td>{{beams.0.get_upvalues.30}}</td> <td>{{beams.0.get_upvalues.31}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.28}}</td> <td>{{beams.0.get_downvalues.29}}</td> <td>{{beams.0.get_downvalues.30}}</td> <td>{{beams.0.get_downvalues.31}}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> <b>West Quarter</b>
<table class="west ">
<tr>
<td>{{beams.0.get_upvalues.32}}</td> <td>{{beams.0.get_upvalues.33}}</td> <td>{{beams.0.get_upvalues.34}}</td> <td>{{beams.0.get_upvalues.35}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.32}}</td> <td>{{beams.0.get_downvalues.33}}</td> <td>{{beams.0.get_downvalues.34}}</td> <td>{{beams.0.get_downvalues.35}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.40}}</td> <td>{{beams.0.get_upvalues.41}}</td> <td>{{beams.0.get_upvalues.42}}</td> <td>{{beams.0.get_upvalues.43}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.40}}</td> <td>{{beams.0.get_downvalues.41}}</td> <td>{{beams.0.get_downvalues.42}}</td> <td>{{beams.0.get_downvalues.43}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.48}}</td> <td>{{beams.0.get_upvalues.49}}</td> <td>{{beams.0.get_upvalues.50}}</td> <td>{{beams.0.get_upvalues.51}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.48}}</td> <td>{{beams.0.get_downvalues.49}}</td> <td>{{beams.0.get_downvalues.50}}</td> <td>{{beams.0.get_downvalues.51}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.56}}</td> <td>{{beams.0.get_upvalues.57}}</td> <td>{{beams.0.get_upvalues.58}}</td> <td>{{beams.0.get_upvalues.59}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.56}}</td> <td>{{beams.0.get_downvalues.57}}</td> <td>{{beams.0.get_downvalues.58}}</td> <td>{{beams.0.get_downvalues.59}}</td>
</tr>
</table>
</td>
<td> <b>South Quarter</b>
<table class="south ">
<tr>
<td>{{beams.0.get_upvalues.36}}</td> <td>{{beams.0.get_upvalues.37}}</td> <td>{{beams.0.get_upvalues.38}}</td> <td>{{beams.0.get_upvalues.39}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.36}}</td> <td>{{beams.0.get_downvalues.37}}</td> <td>{{beams.0.get_downvalues.38}}</td> <td>{{beams.0.get_downvalues.39}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.44}}</td> <td>{{beams.0.get_upvalues.45}}</td> <td>{{beams.0.get_upvalues.46}}</td> <td>{{beams.0.get_upvalues.47}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.44}}</td> <td>{{beams.0.get_downvalues.45}}</td> <td>{{beams.0.get_downvalues.46}}</td> <td>{{beams.0.get_downvalues.47}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.52}}</td> <td>{{beams.0.get_upvalues.53}}</td> <td>{{beams.0.get_upvalues.54}}</td> <td>{{beams.0.get_upvalues.55}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.52}}</td> <td>{{beams.0.get_downvalues.53}}</td> <td>{{beams.0.get_downvalues.54}}</td> <td>{{beams.0.get_downvalues.55}}</td>
</tr>
<tr>
<td>{{beams.0.get_upvalues.60}}</td> <td>{{beams.0.get_upvalues.61}}</td> <td>{{beams.0.get_upvalues.62}}</td> <td>{{beams.0.get_upvalues.63}}</td>
</tr>
<tr>
<td>{{beams.0.get_downvalues.60}}</td> <td>{{beams.0.get_downvalues.61}}</td> <td>{{beams.0.get_downvalues.62}}</td> <td>{{beams.0.get_downvalues.63}}</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="legend">
<tr>
<th colspan="2">Legend</th>
</tr>
<tr>
<td style="color:#ff0000;"><i>RED</i></td><td>Disconnected</td>
</tr>
<tr>
<td style="color:#ee902c;"><i>ORANGE</i></td><td>Connected</td>
</tr>
<tr>
<td style="color:#00cc00;"><i>GREEN</i></td><td>Running</td>
</tr>
</table>
{% else %}
<p style="color:#b4bcc2; margin-left: 5%;"><i>No Beams...</i></p>
{% endif %}
{% endblock %}