Add temporal and license data

Author: oliverroick

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

@@ -1,10 +1,11 @@
-{% include "header.html" %}
+{% extends "base.html" %}
 {% if params %}
   {% set urlq = url + '?' + params + '&' %}
   {% else %}
   {% set urlq = url + '?' %}
 {% endif %}
 
+{% block content %}
 <nav aria-label="breadcrumb">
   <ol class="breadcrumb bg-light">
     {% for crumb in crumbs %} {% if not loop.last %}
@@ -21,18 +22,24 @@
   </ol>
 </nav>
 
-<h1>Collection: {{ response.title or response.id }}</h1>
+<h1 class="my-4">
+  <span class="d-block text-uppercase text-muted h6 mb-0">Collection:</span>
+  {{ response.title or response.id }}
+</h1>
 
 <div class="row">
-  <div class="col-sm">
-    <p>{{ response.description or response.title or response.id }}</p>
-    {% if "keywords" in response and length(response.keywords) > 0 %}
-    <div id="keywords">
-      <p>
+  <div class="col-md-7">
+    {% if response.description %}
+    <p>{{ response.description }}</p>
+    {% endif %}
+    {% if "keywords" in response and response.keywords|length > 0 %}
+    <div class="d-flex align-items-center mb-4">
+      {% include "icons/tag.html" %}
+      <ul class="mb-0 pl-2">
         {% for keyword in response.keywords %}
-        <span class="badge badge-secondary">{{ keyword }}</span>
+        <li class="badge badge-secondary">{{ keyword }}</li>
         {% endfor %}
-      </p>
+      </lul>
     </div>
     {% endif %}
 
@@ -43,7 +50,19 @@ <h2>Links</h2>
       {% endfor %}
     </ul>
   </div>
-  <div class="col-sm">
+  <div class="col-md-5">
+    {% if response.license %}
+    <div class="d-flex align-items-center mb-2">
+      {% include "icons/license.html" %}
+      <p class="mb-0 pl-2">{{ response.license }}</p>
+    </div>
+    {% endif %}
+    {% if response.extent and response.extent.temporal %}
+    <div class="d-flex align-items-center mb-2">
+      {% include "icons/clock.html" %}
+      <p class="mb-0 pl-2">{{ response.extent.temporal.interval.0.0 or "..." }} — {{ response.extent.temporal.interval.0.1 or "..." }}</p>
+    </div>
+    {% endif %}
     {% if response.extent and response.extent.spatial %}
     <div id="map" class="rounded" style="width: 100%; height: 400px">
       Loading...
@@ -54,7 +73,7 @@ <h2>Links</h2>
 
 {% if response.extent and response.extent.spatial %}
 <script>
-  $(function() {
+  window.addEventListener("load", function() {
     const collection = {{ response|tojson }};
     var map = L.map('map').setView([0, 0], 1);
     map.addLayer(new L.TileLayer(
@@ -91,5 +110,4 @@ <h2>Links</h2>
   });
 </script>
 {% endif %}
-
-{% include "footer.html" %}
+{% endblock %}

runtimes/eoapi/stac/eoapi/stac/templates/icons/clock.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#1f1f1f"><path d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z"/></svg>

runtimes/eoapi/stac/eoapi/stac/templates/icons/license.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#1f1f1f"><path d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 85-29 163.5T688-214L560-342q-18 11-38.5 16.5T480-320q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 22-5.5 42.5T618-398l60 60q20-41 31-86t11-92v-189l-240-90-240 90v189q0 121 68 220t172 132q26-8 49.5-20.5T576-214l56 56q-33 27-71.5 47T480-80Zm0-320q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400Zm8-77Z"/></svg>

runtimes/eoapi/stac/eoapi/stac/templates/icons/tag.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#1f1f1f"><path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/></svg>