Skip to content

Commit a9287e7

Browse files
vincentsaragovincentsarago
committed
add html templates
1 parent 28e70fa commit a9287e7

File tree

11 files changed

+757
-0
lines changed

11 files changed

+757
-0
lines changed

‎runtimes/eoapi/stac/eoapi/stac/templates/collection.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
{% include "header.html" %}
2+
{% if params %}
3+
{% set urlq = url + '?' + params + '&' %}
4+
{% else %}
5+
{% set urlq = url + '?' %}
6+
{% endif %}
7+
8+
<nav aria-label="breadcrumb">
9+
<ol class="breadcrumb bg-light">
10+
{% for crumb in crumbs %} {% if not loop.last %}
11+
<li class="breadcrumb-item">
12+
<a href="{{ crumb.url }}/">{{ crumb.part }}</a>
13+
</li>
14+
{% else %}
15+
<li class="breadcrumb-item active" aria-current="page">{{ crumb.part }}</li>
16+
{% endif %} {% endfor %}
17+
18+
<li class="ml-auto json-link">
19+
<a target="_blank" href="{{ urlq }}f=json">JSON</a>
20+
</li>
21+
</ol>
22+
</nav>
23+
24+
<h1>Collection: {{ response.title or response.id }}</h1>
25+
26+
<div class="row">
27+
<div class="col-sm">
28+
<p>{{ response.description or response.title or response.id }}</p>
29+
{% if "keywords" in response and length(response.keywords) > 0 %}
30+
<div id="keywords">
31+
<p>
32+
{% for keyword in response.keywords %}
33+
<span class="badge badge-secondary">{{ keyword }}</span>
34+
{% endfor %}
35+
</p>
36+
</div>
37+
{% endif %}
38+
39+
<h2>Links</h2>
40+
<ul>
41+
{% for link in response.links %}
42+
<li><a href="{{ link.href }}">{{ link.title or link.rel }}</a></li>
43+
{% endfor %}
44+
</ul>
45+
</div>
46+
<div class="col-sm">
47+
<div id="map" class="rounded" style="width: 100%; height: 400px">
48+
Loading...
49+
</div>
50+
</div>
51+
</div>
52+
53+
<script>
54+
$(function() {
55+
var collection = {{ response|tojson }};
56+
if (collection.extent && collection.extent.spatial){
57+
var bbox = collection.extent.spatial.bbox[0]
58+
var bbox_polygon = L.polygon([
59+
[bbox[1], bbox[0]],
60+
[bbox[1], bbox[2]],
61+
[bbox[3], bbox[2]],
62+
[bbox[3], bbox[0]]
63+
]);
64+
65+
var map = L.map('map').setView([0, 0], 1);
66+
map.addLayer(new L.TileLayer(
67+
'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
68+
maxZoom: 18,
69+
attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
70+
}
71+
));
72+
73+
map.addLayer(bbox_polygon);
74+
map.fitBounds(bbox_polygon.getBounds());
75+
} else {
76+
document.getElementById("map").style.display = "none";
77+
}
78+
79+
});
80+
</script>
81+
82+
{% include "footer.html" %}

‎runtimes/eoapi/stac/eoapi/stac/templates/collections.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
{% include "header.html" %}
2+
3+
{% set show_prev_link = false %}
4+
{% set show_next_link = false %}
5+
{% if params %}
6+
{% set urlq = url + '?' + params + '&' %}
7+
{% else %}
8+
{% set urlq = url + '?' %}
9+
{% endif %}
10+
11+
<nav aria-label="breadcrumb">
12+
<ol class="breadcrumb bg-light">
13+
{% for crumb in crumbs %}
14+
{% if not loop.last %}
15+
<li class="breadcrumb-item"><a href="{{ crumb.url }}/">{{ crumb.part }}</a></li>
16+
{% else %}<li class="breadcrumb-item active" aria-current="page">{{ crumb.part }}</li>
17+
{% endif %}
18+
{% endfor %}
19+
20+
<li class="ml-auto json-link"><a target="_blank" href="{{ urlq }}f=json">JSON</a></li>
21+
</ol>
22+
</nav>
23+
24+
<h1>Collections</h1>
25+
26+
<p>
27+
<b>Number of matching collections:</b> {{ response.numberMatched }}<br/>
28+
<b>Number of returned collections:</b> {{ response.numberReturned }}<br/>
29+
<b>Page:</b> <span id="current_page"></span> of <span id="total_pages"></span><br/>
30+
</p>
31+
32+
<div class="form-row" style="margin-bottom:10px;" id="controls">
33+
{% for link in response.links %}
34+
{% if link.rel == 'prev' %}
35+
<div class="col-auto"><a class="btn btn-secondary" title="previous page" href="{{ link.href }}">prev</a></div>
36+
{% endif %}
37+
{% endfor %}
38+
<div class="col-auto">
39+
<select class="form-control" id="limit"> <!-- TODO: dynamically populate the values based on oga_max_limit -->
40+
<option value="10">page size</option>
41+
<option>10</option>
42+
<option>100</option>
43+
<option>1000</option>
44+
<option>10000</option>
45+
</select>
46+
</div>
47+
{% for link in response.links %}
48+
{% if link.rel == 'next' %}
49+
<div class="col-auto"><a class="btn btn-secondary" title="next page" href="{{ link.href }}">next</a></div>
50+
{% endif %}
51+
{% endfor %}
52+
</div>
53+
54+
<div class="table-responsive">
55+
<table class="table" style="width:100%;">
56+
<thead class="thead-light">
57+
<tr>
58+
<th>Title</th>
59+
<th>Description</th>
60+
</tr>
61+
</thead>
62+
<tbody>
63+
{% for collection in response.collections %}
64+
<tr>
65+
<td><a href="{{ template.api_root }}/collections/{{ collection.id }}">{{ collection.title or collection.id }}</a></td>
66+
<td>{{ collection.description or collection.title or collection.id }}</td>
67+
</tr>
68+
{% endfor %}
69+
</tbody>
70+
</table>
71+
</div>
72+
73+
<script>
74+
function changePageSize() {
75+
var url = "{{ template.api_root }}/collections?";
76+
const searchParams = new URLSearchParams(window.location.search);
77+
searchParams.set('limit', $("#limit").val());
78+
url += searchParams.toString();
79+
window.location.href = url;
80+
}
81+
$(function() {
82+
//
83+
// paging
84+
//
85+
var offset = 0; // defaults
86+
var limit = 10;
87+
88+
{% if "offset" in template.params %}
89+
offset = {{ template.params.offset }};
90+
{% endif %}
91+
{% if "limit" in template.params %}
92+
limit = {{ template.params.limit }};
93+
{% endif %}
94+
95+
var current_page = 1;
96+
if (limit > 0) {
97+
current_page = Math.ceil((offset + limit) / limit);
98+
}
99+
$("#current_page").html(current_page);
100+
101+
var total_pages = 1;
102+
if (limit > 0) {
103+
total_pages = Math.ceil({{ response.numberMatched }} / limit);
104+
}
105+
$("#total_pages").html(total_pages);
106+
107+
//
108+
// event handling
109+
//
110+
$("#limit").on("change", function() {
111+
changePageSize();
112+
});
113+
});
114+
</script>
115+
116+
{% include "footer.html" %}

‎runtimes/eoapi/stac/eoapi/stac/templates/conformance.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{% include "header.html" %}
2+
{% if params %}
3+
{% set urlq = url + '?' + params + '&' %}
4+
{% else %}
5+
{% set urlq = url + '?' %}
6+
{% endif %}
7+
8+
<nav aria-label="breadcrumb">
9+
<ol class="breadcrumb bg-light">
10+
{% for crumb in crumbs %}
11+
{% if not loop.last %}
12+
<li class="breadcrumb-item"><a href="{{ crumb.url }}/">{{ crumb.part }}</a></li>
13+
{% else %}<li class="breadcrumb-item active" aria-current="page">{{ crumb.part }}</li>
14+
{% endif %}
15+
{% endfor %}
16+
17+
<li class="ml-auto json-link"><a target="_blank" href="{{ urlq }}f=json">JSON</a></li>
18+
</ol>
19+
</nav>
20+
21+
<h1>{{ template.title }}Conformance</h1>
22+
23+
<p>This API implements the conformance classes from standards and community specifications that are listed below.</p>
24+
25+
<h2>Links</h2>
26+
<ul>
27+
{% for url in response.conformsTo %}
28+
<li> <a target="_blank" href="{{ url }}">{{ url }}</a></li>
29+
{% endfor %}
30+
</ul>
31+
32+
{% include "footer.html" %}

‎runtimes/eoapi/stac/eoapi/stac/templates/debug.html‎

Whitespace-only changes.

‎runtimes/eoapi/stac/eoapi/stac/templates/footer.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{% include "debug.html" %}
2+
</div>
3+
</main>
4+
</body>
5+
</html>

‎runtimes/eoapi/stac/eoapi/stac/templates/header.html‎

Lines changed: 44 additions & 0 deletions
Large diffs are not rendered by default.

‎runtimes/eoapi/stac/eoapi/stac/templates/item.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{% include "header.html" %}
2+
{% if params %}
3+
{% set urlq = url + '?' + params + '&' %}
4+
{% else %}
5+
{% set urlq = url + '?' %}
6+
{% endif %}
7+
8+
<nav aria-label="breadcrumb">
9+
<ol class="breadcrumb bg-light">
10+
{% for crumb in crumbs %}
11+
{% if not loop.last %}
12+
<li class="breadcrumb-item"><a href="{{ crumb.url }}/">{{ crumb.part }}</a></li>
13+
{% else %}<li class="breadcrumb-item active" aria-current="page">{{ crumb.part }}</li>
14+
{% endif %}
15+
{% endfor %}
16+
17+
<li class="ml-auto json-link"><a target="_blank" href="{{ urlq }}f=geojson">GeoJSON</a></li>
18+
</ol>
19+
</nav>
20+
21+
<h1>Collection Item: {{ response.id }}</h1>
22+
23+
<div class="row">
24+
<div class="col-sm">
25+
<h2>Properties</h2>
26+
<ul>
27+
<li><strong>ID:</strong> {{ response.id }}</li>
28+
{% for key, value in response.properties.items() %}
29+
<li><strong>{{ key }}:</strong> {{ value }}</li>
30+
{% endfor %}
31+
</ul>
32+
</div>
33+
<div class="col-sm">
34+
<div id="map" class="rounded" style="width:100%;height:400px;">Loading...</div>
35+
</div>
36+
</div>
37+
38+
<script>
39+
var geojson = {{ response|tojson }};
40+
if (geojson.geometry) {
41+
var map = L.map('map').setView([0, 0], 1);
42+
map.addLayer(new L.TileLayer(
43+
'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
44+
maxZoom: 18,
45+
attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
46+
}
47+
));
48+
49+
function displayValue(value) {
50+
switch (typeof value) {
51+
case 'string':
52+
return value;
53+
case 'number':
54+
return value.toString();
55+
case 'object':
56+
if (value instanceof Array) {
57+
return value.map(displayValue).join(', ');
58+
} else {
59+
return JSON.stringify(value);
60+
}
61+
default:
62+
return '';
63+
}
64+
}
65+
66+
function addPopup(feature, layer) {
67+
if (feature.properties) {
68+
var popupElm = document.createElement('div');
69+
popupElm.style.overflowX = 'scroll';
70+
71+
Object.keys(geojson.properties).map(prop => {
72+
var propElm = document.createElement('div');
73+
74+
var bElm = document.createElement('b');
75+
bElm.innerText = prop;
76+
propElm.appendChild(bElm);
77+
var valueElm = document.createTextNode(` : ${displayValue(feature.properties[prop])}`);
78+
propElm.appendChild(valueElm);
79+
80+
var brElm = document.createElement('br');
81+
propElm.appendChild(brElm);
82+
83+
popupElm.appendChild(propElm);
84+
})
85+
86+
layer.bindPopup(popupElm);
87+
}
88+
}
89+
90+
var features = L.geoJSON(geojson, {
91+
onEachFeature: addPopup
92+
}).addTo(map);
93+
94+
map.fitBounds(features.getBounds());
95+
} else {
96+
document.getElementById("map").style.display = "none";
97+
}
98+
99+
</script>
100+
101+
{% include "footer.html" %}

0 commit comments

Comments
 (0)