From 45faf8d99559653d64343706cac8d3e18c17408f Mon Sep 17 00:00:00 2001
From: Jona <jona.raphael@gmail.com>
Date: Wed, 18 Oct 2023 18:55:45 -0400
Subject: [PATCH] Try using the templates to avoid maps for non-spatial tables

---
 .../cloud_run_tipg/templates/collection.html  |  77 +++++++++
 .../cloud_run_tipg/templates/item.html        |  96 ++++++++++++
 .../cloud_run_tipg/templates/items.html       | 147 ++++++++++++++++++
 3 files changed, 320 insertions(+)
 create mode 100644 cerulean_cloud/cloud_run_tipg/templates/collection.html
 create mode 100644 cerulean_cloud/cloud_run_tipg/templates/item.html
 create mode 100644 cerulean_cloud/cloud_run_tipg/templates/items.html

diff --git a/cerulean_cloud/cloud_run_tipg/templates/collection.html b/cerulean_cloud/cloud_run_tipg/templates/collection.html
new file mode 100644
index 00000000..5ebc1740
--- /dev/null
+++ b/cerulean_cloud/cloud_run_tipg/templates/collection.html
@@ -0,0 +1,77 @@
+{% include "header.html" %}
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb bg-light">
+    {% for crumb in crumbs %} {% if not loop.last %}
+    <li class="breadcrumb-item">
+      <a href="{{ crumb.url }}/">{{ crumb.part }}</a>
+    </li>
+    {% else %}
+    <li class="breadcrumb-item active" aria-current="page">{{ crumb.part }}</li>
+    {% endif %} {% endfor %}
+
+    <li class="ml-auto json-link">
+      <a target="_blank" href="{{ url }}?f=json">JSON</a>
+    </li>
+  </ol>
+</nav>
+
+<h1>Collection: {{ 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>
+        {% for keyword in response.keywords %}
+        <span class="badge badge-secondary">{{ keyword }}</span>
+        {% endfor %}
+      </p>
+    </div>
+    {% endif %}
+
+    <h2>Links</h2>
+    <ul>
+      {% for link in response.links %}
+      <li><a href="{{ link.href }}">{{ link.title or link.rel }}</a></li>
+      {% endfor %}
+    </ul>
+  </div>
+  <div class="col-sm">
+    <div id="map" class="rounded" style="width: 100%; height: 400px">
+      Loading...
+    </div>
+  </div>
+</div>
+
+<script>
+  $(function() {
+    var collection = {{ response|tojson }};
+    if (collection.extent && collection.extent.spatial){
+      var bbox = collection.extent.spatial.bbox[0]
+      var bbox_polygon = L.polygon([
+        [bbox[1], bbox[0]],
+        [bbox[1], bbox[2]],
+        [bbox[3], bbox[2]],
+        [bbox[3], bbox[0]]
+      ]);
+
+      var map = L.map('map').setView([0, 0], 1);
+      map.addLayer(new L.TileLayer(
+        'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          maxZoom: 18,
+          attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+        }
+      ));
+
+      map.addLayer(bbox_polygon);
+      map.fitBounds(bbox_polygon.getBounds());
+    } else {
+      document.getElementById("map").style.display = "none";
+    }
+
+  });
+</script>
+
+{% include "footer.html" %}
diff --git a/cerulean_cloud/cloud_run_tipg/templates/item.html b/cerulean_cloud/cloud_run_tipg/templates/item.html
new file mode 100644
index 00000000..e8654220
--- /dev/null
+++ b/cerulean_cloud/cloud_run_tipg/templates/item.html
@@ -0,0 +1,96 @@
+{% include "header.html" %}
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb bg-light">
+    {% for crumb in crumbs %}
+      {% if not loop.last %}
+    <li class="breadcrumb-item"><a href="{{ crumb.url }}/">{{ crumb.part }}</a></li>
+      {% else %}<li class="breadcrumb-item active" aria-current="page">{{ crumb.part }}</li>
+      {% endif %}
+    {% endfor %}
+
+    <li class="ml-auto json-link"><a target="_blank" href="{{ url }}?f=geojson">GeoJSON</a></li>
+  </ol>
+</nav>
+
+<h1>Collection Item: {{ response.id }}</h1>
+
+<div class="row">
+  <div class="col-sm">
+    <h2>Properties</h2>
+    <ul>
+      <li><strong>ID:</strong> {{ response.id }}</li>
+      {% for key, value in response.properties.items() %}
+      <li><strong>{{ key }}:</strong> {{ value }}</li>
+      {% endfor %}
+    </ul>
+  </div>
+  <div class="col-sm">
+    <div id="map" class="rounded" style="width:100%;height:400px;">Loading...</div>
+  </div>
+</div>
+
+<script>
+  var geojson = {{ response|tojson }};
+  if (geojson.geometry) {
+    var map = L.map('map').setView([0, 0], 1);
+    map.addLayer(new L.TileLayer(
+      'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+      }
+    ));
+
+    function displayValue(value) {
+      switch (typeof value) {
+        case 'string':
+          return value;
+        case 'number':
+          return value.toString();
+        case 'object':
+          if (value instanceof Array) {
+            return value.map(displayValue).join(', ');
+          } else {
+            return JSON.stringify(value);
+          }
+        default:
+          return '';
+      }
+    }
+
+    function addPopup(feature, layer) {
+      if (feature.properties) {
+        var popupElm = document.createElement('div');
+        popupElm.style.overflowX = 'scroll';
+
+        Object.keys(geojson.properties).map(prop => {
+          var propElm = document.createElement('div');
+
+          var bElm = document.createElement('b');
+          bElm.innerText = prop;
+          propElm.appendChild(bElm);
+          var valueElm = document.createTextNode(` : ${displayValue(feature.properties[prop])}`);
+          propElm.appendChild(valueElm);
+
+          var brElm = document.createElement('br');
+          propElm.appendChild(brElm);
+
+          popupElm.appendChild(propElm);
+        })
+
+        layer.bindPopup(popupElm);
+      }
+    }
+
+    var features = L.geoJSON(geojson, {
+      onEachFeature: addPopup
+    }).addTo(map);
+
+    map.fitBounds(features.getBounds());
+  } else {
+    document.getElementById("map").style.display = "none";
+  }
+
+</script>
+
+{% include "footer.html" %}
diff --git a/cerulean_cloud/cloud_run_tipg/templates/items.html b/cerulean_cloud/cloud_run_tipg/templates/items.html
new file mode 100644
index 00000000..ad66ed23
--- /dev/null
+++ b/cerulean_cloud/cloud_run_tipg/templates/items.html
@@ -0,0 +1,147 @@
+{% include "header.html" %}
+
+{% set show_prev_link = false %}
+{% set show_next_link = false %}
+{%  if 'items?' in url %}
+  {% set urlq = url + '&' %}
+  {% else %}
+  {% set urlq = url + '?' %}
+{% endif %}
+
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb bg-light">
+    {% for crumb in crumbs %}
+      {% if not loop.last %}
+    <li class="breadcrumb-item"><a href="{{ crumb.url }}/">{{ crumb.part }}</a></li>
+      {% else %}<li class="breadcrumb-item active" aria-current="page">{{ crumb.part }}</li>
+      {% endif %}
+    {% endfor %}
+
+    <li class="ml-auto json-link"><a target="_blank" href="{{ urlq }}f=geojson">GeoJSON</a></li>
+  </ol>
+</nav>
+
+<h1>Collection Items: {{ response.title or response.id }}</h1>
+
+<div id="map" class="rounded" style="width:100%; height:400px;">Loading...</div>
+
+<p>
+  <b>Number of matching items:</b> {{ response.numberMatched }}<br/>
+  <b>Number of returned items:</b> {{ response.numberReturned }}<br/>
+  <b>Page:</b> <span id="current_page"></span> of <span id="total_pages"></span><br/>
+</p>
+
+<div class="form-row" style="margin-bottom:10px;" id="controls">
+  {% for link in response.links %}
+    {% if link.rel == 'prev' %}
+      <div class="col-auto"><a class="btn btn-secondary" title="previous page" href="{{ link.href }}">prev</a></div>
+    {% endif %}
+  {% endfor %}
+  <div class="col-auto">
+    <select class="form-control" id="limit"> <!-- TODO: dynamically populate the values based on oga_max_limit -->
+      <option value="10">page size</option>
+      <option>10</option>
+      <option>100</option>
+      <option>1000</option>
+      <option>10000</option>
+    </select>
+  </div>
+  {% for link in response.links %}
+    {% if link.rel == 'next' %}
+      <div class="col-auto"><a class="btn btn-secondary" title="next page" href="{{ link.href }}">next</a></div>
+    {% endif %}
+  {% endfor %}
+</div>
+<div class="table-responsive">
+{% if response.features is defined and response.features|length > 0 %}
+<table class="table">
+  <thead class="thead-light">
+    <th>ID</th>
+{% for key, value in response.features.0.properties.items() %}
+    <th>{{ key }}</th>
+{% endfor %}
+  </thead>
+  <tbody>
+{% for feature in response.features %}
+    <tr>
+      <td><a target="_blank" href="{{ template.api_root }}/collections/{{ response.id }}/items/{{ feature.id }}">{{ feature.id }}</a></td>
+  {% for key, value in feature.properties.items() %}
+      <td>{{ value }}</td>
+  {% endfor %}
+    </tr>
+{% endfor %}
+  </tbody>
+</table>
+{% endif %}
+</div>
+
+<script>
+  var currentURL = "{{ template.api_root }}/collections/{{ response.id }}/items"
+function changePageSize() {
+  var url = "{{ template.api_root }}/collections/{{ response.id }}/items?";
+  url += "limit=" + $("#limit").val();
+  window.location.href = url;
+}
+$(function() {
+  //
+  // mapping
+  //
+  var geojson = {{ response|tojson }};
+
+  var features = (geojson.features) ? geojson.features : [];
+  var hasGeom = features.some(feat => feat.geometry);
+  if (hasGeom) {
+    var map = L.map('map').setView([0, 0], 1);
+    map.addLayer(new L.TileLayer(
+      'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
+      }
+    ));
+
+    function addPopup(feature, layer) {
+      var aElm = document.createElement('a');
+      aElm.setAttribute('href', `${currentURL}/${feature.id}`);
+      aElm.setAttribute('target', '_blank');
+      aElm.innerText = feature.id;
+      layer.bindPopup(aElm);
+    }
+
+    var features = L.geoJSON(geojson, {
+      onEachFeature: addPopup
+    }).addTo(map);
+
+    map.fitBounds(features.getBounds());
+  } else {
+    document.getElementById("map").style.display = "none";
+  }
+
+  //
+  // paging
+  //
+  var offset = 0; // defaults
+  var limit = 10;
+
+  {% if "offset" in template.params %}
+  offset = {{ template.params.offset }};
+  {% endif %}
+  {% if "limit" in template.params %}
+  limit = {{ template.params.limit }};
+  {% endif %}
+
+  var current_page = (offset + limit)/limit;
+  $("#current_page").html(current_page);
+  var total_pages = Math.ceil({{ response.numberMatched }}/limit);
+  $("#total_pages").html(total_pages);
+
+  //
+  // event handling
+  //
+  $("#limit").on("change", function() {
+    changePageSize();
+  });
+});
+</script>
+
+{% include "footer.html" %}