##// END OF EJS Templates
realtime_web
RSS
Work with static images, fix styles, fix default values in forms
Work with static images, fix styles, fix default values in forms
Juan C. Espinoza - - Load All Authors

File last commit:

r36:18bc7709d51a
r36:18bc7709d51a
Show More
tools.html
77 lines | 3.0 KiB | text/html | HtmlDjangoLexer
/ plotter / templates / tools.html
History | Annotation | Raw |Copy content |Copy permalink
{% extends 'base.html' %}
{% load static%}
{% block content %}
<p>Useful tools and data from other partners/observatories.</p>
<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 'd-m-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="{% url 'url_skynoise' %}">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">&times;</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();
image += '?date=' + dt;
}
//populate values
$(e.currentTarget).find('h5').text(title);
$(e.currentTarget).find('img').attr('src', image);
});
</script>
{% endblock script %}