Skip to content

Commit

Permalink
#92 two new templates-not complete
Browse files Browse the repository at this point in the history
  • Loading branch information
aanersc committed May 7, 2020
1 parent b6bc967 commit f94f919
Show file tree
Hide file tree
Showing 2 changed files with 309 additions and 0 deletions.
97 changes: 97 additions & 0 deletions geospaas/viewer_standalone/templates/viewer_standalone/base_template2020.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
{% load leaflet_tags %}
{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
<title>Meta-data finder</title>
<meta charset="utf-8" />
{% leaflet_js %}
{% leaflet_css %}
{% block style_base %}
<link href="{% static "viewer_standalone/dist/css/bootstrap.css" %}" rel="stylesheet">
<link href="{% static "viewer_standalone/css/navbar.css" %}" rel="stylesheet">
{% leaflet_css plugins="forms" %}
<style>
.leaflet-container { /* all maps */
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
{% block extra_style %}{% endblock %}
{% endblock %}
<style>
#para_container {
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-rows: para2 searchbox;
grid-gap: 10px;
position: relative;
}

.para2 {
float: left;
padding: 2px;
border: 2px solid red;
}

#content {
grid-column: 1;
grid-row: 1;
}

#result {
grid-column: 2;
grid-row: 1;
}

#searchbox {
padding: 20px;
border: 2px solid rgb(13, 0, 255);
grid-column: 1 / 3;
grid-row: 2;
}
</style>
</head>

<body class="body" >
<div id="para_container">

<div id=content class="para2"><!--start of contentmap-->
{% block contentmap %}
{% endblock contentmap%}
</div><!--end of contentmap-->

<div id=result class="para2"><!--start of result section-->
{% block content_result %}
{% endblock content_result%}
</div><!--end of result section-->

<div id="searchbox"><!--start of searchbox-->
{% block searchbox %}
{% endblock searchbox %}
</div><!--end of searchbox-->
</div>

{% block script_base %}
<script src="{% block jquery_src %}{% static "viewer_standalone/js/jquery-1.11.1.min.js" %}{% endblock %}"></script>
{% comment %}
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
{% endcomment %}
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
{% leaflet_js plugins="forms" %}
<script src="{% static "viewer_standalone/dist/js/bootstrap.min.js" %}"></script>
<script src="{% static "viewer_standalone/dist/js/theme.js" %}"></script>
<!-- <script type="text/javascript" src="{% static "viewer/js/index-slider.js" %}"></script> -->
<script>
$(document).ready(function() {
$('.datepicker').datepicker();
});
</script>
{% block extra_script %}{% endblock %}
{% endblock %}

</body>

</html>
212 changes: 212 additions & 0 deletions geospaas/viewer_standalone/templates/viewer_standalone/template2020.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
{% extends "viewer_standalone/base_template2020.html" %}

{% load leaflet_tags %}

{% block searchbox %}

{% endblock searchbox %}
##############################################################################################################
##############################################################################################################
##############################################################################################################
##############################################################################################################
##############################################################################################################
{% block content_result %}
<table border=1 width='100%' height='100%'>
<!-- HEADER -->
<tr>
{% block headers %}
<th>Filename</th>
{% endblock headers %}
<th>Show</th>
</tr>

{% if datasets %}

{% for ds in datasets %}
<tr id={{ forloop.counter }}>

{% block columns %}
<td>
{% for url in ds.dataseturi_set.all %}
{% if url.uri|slice:":4" == 'file'%}
Local file (ingested offline)<br>
{% else %}
{{ url.uri|default_if_none:"no URL"|urlizetrunc:100}} <br>
{% endif %}
{% endfor %}
</td>
{% endblock columns %}

<td><input class='dsOverlay' type="checkbox" name="{{ forloop.counter }}" id="{{ forloop.counter }}">
</td>
</tr>
{% endfor %}

{% else %}
<tr><td colspan=10>No datasets are available.</td></tr>
{% endif %}
</table>
{% endblock content_result %}
##############################################################################################################
##############################################################################################################
##############################################################################################################
##############################################################################################################
##############################################################################################################
{% block contentmap %}

<form method="post">
{% csrf_token %}

{{ form.as_p }}

<input type="submit" value="Search all meta-data" />
</form>
{% endblock contentmap %}
##############################################################################################################
##############################################################################################################
##############################################################################################################
##############################################################################################################
##############################################################################################################
{% block extra_script %}

<script type="text/javascript">
var map;
var mapPolygons = [];
var mapConstPolygons = [];
var mapImageOverlays = new Array();
var mapVizParamOverlays = new Array();
//var MapQuestOpen_Aerial = L.tileLayer(
// 'http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}', {
// type: 'sat',
// ext: 'jpg',
// attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency',
// subdomains: '1234'
//});


function add_polygon(id){
window.mapPolygons[ id ].addTo(window.map);
}

function remove_polygon(id){
window.map.removeLayer(window.mapPolygons[ id ]);
}

function toggle_polygon(showPoly, id) {
if (showPoly.checked == true) add_polygon(id);
else remove_polygon(id);
};

function add_image_overlay(prodButton){
mapImageOverlays[ prodButton.id ].addTo(window.map);
prodButton.checked = true;
$(prodButton).next("label").css( "color", 'green');
}

function remove_image_overlay(prodButton){
window.map.removeLayer(mapImageOverlays[ prodButton.id ]);
prodButton.checked = false;
$(prodButton).next("label").css( "color", 'black');
}

function toggle_image_overlay(prodButton) {
if (prodButton.checked == true) add_image_overlay(prodButton);
else remove_image_overlay(prodButton);
};

function add_vizParam_overlay(vizButton){
for ( var cnt in mapVizParamOverlays[ vizButton.id ]){
prodID = mapVizParamOverlays[ vizButton.id ][cnt];
mapImageOverlays[ prodID ].addTo(window.map);
}
vizButton.checked = true;
$(vizButton).next("label").css( "color", 'green');
}

function remove_vizParam_overlay(vizButton){
for ( var cnt in mapVizParamOverlays[ vizButton.id ]){
prodID = mapVizParamOverlays[ vizButton.id ][cnt];
window.map.removeLayer(mapImageOverlays[ prodID ]);
}
vizButton.checked = false;
$(vizButton).next("label").css( "color", 'black');
}

function toggle_vizParam_overlay(vizButton) {
if (vizButton.checked == true) add_vizParam_overlay(vizButton);
else remove_vizParam_overlay(vizButton);
};

{% for ds in datasets %}
mapPolygons[ {{ forloop.counter }} ] = {{ ds.geo_js|safe }}
mapConstPolygons[ {{ forloop.counter }} ] = {{ ds.const_geo_js|safe }}
{% endfor %}

window.addEventListener("map:init", function (e) {
window.map = e.detail.map;
window.map.setView([0,0], 2);
{% for ds in datasets %}
window.mapConstPolygons[ {{ forloop.counter }} ].addTo(window.map);
{% endfor %}

}, false);

/*
// TODO: triggers add/remove polygon when hover any TR
$( "tr" ).mouseover(function() {
cbstr = ':checkbox[name=' + this.id + ']';
if ($(cbstr).prop("checked") == false) add_polygon(this.id);
});
$( "tr" ).mouseout(function() {
cbstr = ':checkbox[name=' + this.id + ']';
if ($(cbstr).prop("checked") == false) remove_polygon(this.id);
});
*/

$('.dsOverlay').click(function() {
toggle_polygon(this, this.id);
});

var prodUrls = new Array();
var prodExtents = new Array();
{% for ds in datasets %}
{% for viz in ds.visualizations %}
mapImageOverlays["prod_{{ viz.id }}"] = L.imageOverlay('{{ viz.get_absolute_url }}',
[
[{{ viz.geographic_location.geometry.extent.1 }},
{{ viz.geographic_location.geometry.extent.0 }}],
[{{ viz.geographic_location.geometry.extent.3 }},
{{ viz.geographic_location.geometry.extent.2 }}]
]);
{% endfor %}
{% endfor %}


{% for pp, vlist in visualizations.iteritems %}
mapVizParamOverlays["viz_{{ pp }}"] = [
{% for viz in vlist %}
'prod_{{ viz.id }}',
{% endfor %}
];
{% endfor %}


$(".prodButton").click(function() {
toggle_image_overlay(this);
});

$(".vizButton").click(function() {
toggle_vizParam_overlay(this);
});

</script>


{% comment %}
{{ visualizations.anomaly_of_surface_backwards_doppler_centroid_frequency_shift_of_radar_wave }}
{% endcomment %}
{% for pp, vlist in visualizations.iteritems %}
{{ pp }}
{% endfor %}

{% endblock %}

0 comments on commit f94f919

Please sign in to comment.