tools.html
80 lines
| 3.1 KiB
| text/html
|
HtmlDjangoLexer
Juan C. Espinoza
|
r25 | {% extends 'base.html' %} | |
| {% load static%} | |||
| {% block content %} | |||
| <br> | |||
| <div class="col-12"> | |||
| <p>Useful tools and data from other partners/observatories.</p> | |||
| </div> | |||
| <div class="card-columns p-2"> | |||
| <div class="card text-justify"> | |||
| <img src="{% static 'images/skynoise.png' %}" class="card-img-top" alt="..."> | |||
| <div class="card-body"> | |||
| <h5 class="card-title">Sky noise</h5> | |||
| <p class="card-text">Sky brightness at 50 MHz, useful for antenna calibrations and measure radar's sensitivity. | |||
| </p> | |||
| <div class="input-group input-group-sm"> | |||
| <div class="input-group-prepend"> | |||
| <span class="input-group-text" id="validationTooltipSkynoiseDate"><i class="fas fa-calendar" | |||
| aria-hidden="true"></i></span> | |||
| </div> | |||
| <input type="text" class="form-control" id="skynoise-date" placeholder="dd/mm/yy" | |||
| aria-describedby="validationTooltipSkynoiseDate" value="{% now 'm/d/Y' %}" required> | |||
| <div class="invalid-tooltip"> | |||
| Please enter a valid date. | |||
| </div> | |||
| <a class="btn btn-primary" data-toggle="modal" href="#toolModal" data-title="Sky Noise" | |||
| data-image="http://jro-app.igp.gob.pe/programs/skynoise/cgi-bin/sky_noise.pl?">Go</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="card text-justify"> | |||
| <img src="{% static 'images/kp.png' %}" class="card-img-top" alt="..."> | |||
| <div class="card-body"> | |||
| <h5 class="card-title">Kp Index</h5> | |||
| <p class="card-text">The K-index, are used to characterize the magnitude of geomagnetic storms. Kp is an excellent | |||
| indicator of disturbances in the Earth's magnetic field (<a | |||
| href="https://www.swpc.noaa.gov/products/planetary-k-index" target="_blank">NOAA/SWPC</a>).</p> | |||
| <a class="btn btn-primary" data-toggle="modal" href="#toolModal" data-title="Kp Index" | |||
| data-image="https://services.swpc.noaa.gov/images/planetary-k-index.gif">Go</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <br><br> | |||
| <!-- Modal --> | |||
| <div class="modal fade" id="toolModal" tabindex="-1" role="dialog" aria-labelledby="toolModalTitle" aria-hidden="true"> | |||
| <div class="modal-dialog modal-lg" role="document"> | |||
| <div class="modal-content"> | |||
| <div class="modal-header"> | |||
| <h5 class="modal-title" id="toolModalTitle">Modal title</h5> | |||
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |||
| <span aria-hidden="true">×</span> | |||
| </button> | |||
| </div> | |||
| <div class="modal-body text-center"> | |||
| <img class="img-fluid" src=""> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| {% endblock content %} | |||
| {% block script %} | |||
| <script> | |||
| $('#toolModal').on('show.bs.modal', function (e) { | |||
| //get data attribute of the clicked element | |||
| var title = $(e.relatedTarget).data('title'); | |||
| var image = $(e.relatedTarget).data('image'); | |||
| if (image.indexOf('skynoise') > 0) { | |||
| var dt = $('#skynoise-date').val().split('/') | |||
| image += 'month=' + dt[0] + '&dom=' + dt[1] + '&year=' + dt[2]; | |||
| } | |||
| //populate values | |||
| $(e.currentTarget).find('h5').text(title); | |||
| $(e.currentTarget).find('img').attr('src', image); | |||
| }); | |||
| </script> | |||
| {% endblock script %} |