Skip to content

Commit

Permalink
Merge pull request #195 from internetofwater/dev
Browse files Browse the repository at this point in the history
Add intersection process and update skin dashboard templates
  • Loading branch information
ksonda authored Jul 16, 2023
2 parents 3594a4d + 3637ec9 commit e0e1c2b
Show file tree
Hide file tree
Showing 8 changed files with 215 additions and 115 deletions.
17 changes: 16 additions & 1 deletion pygeoapi/pygeoapi-skin-dashboard/static/css/default.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ main {
}

.crumbs {
background-color:rgb(230, 230, 230);
padding-left: 12px;
padding: 6px;
}

Expand Down Expand Up @@ -47,3 +47,18 @@ main {
table:not(.horizontal) {
max-height: none;
}

@media (max-width: 767px) {
.sidebar {
display: none;
visibility: hidden;
width: 0px;
}
.crumbs {
display: none !important;
}
a.nav-link {
margin: auto;
padding: 4px !important;
}
}
1 change: 0 additions & 1 deletion pygeoapi/pygeoapi-skin-dashboard/static/css/sb.css
Original file line number Diff line number Diff line change
Expand Up @@ -10284,7 +10284,6 @@ a:focus {
}

.sidebar {
width: 6.5rem;
min-height: 100vh;
}

Expand Down
92 changes: 51 additions & 41 deletions pygeoapi/pygeoapi-skin-dashboard/templates/_base.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,42 @@

<body id="page-top">

<div id="appbar">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar static-top shadow">

<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link rounded-circle mr-3" onclick="toggleNav()">
<i class="fa fa-bars"></i>
</button>

<!-- Topbar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" style="background-color:white"
href="{{ config['server']['url'] }}" class="logo" role="button">
<img src="https://raw.githubusercontent.com/internetofwater/geoconnex.us/master/pygeoapi/pygeoapi-skin-dashboard/static/img/logo.png" title="{{ config['metadata']['identification']['title'] }}" style="height:40px;vertical-align: middle;" /></a>
</a>

<div class="crumbs">
{% block crumbs %}
{% endblock %}
</div>

<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="{{ data['links'] | map(rel='self') | attr('href') }}?f=json">JSON</a></li>
<li class="nav-item"><a class="nav-link" href="{{ data['links'] | map(rel='self') | attr('href') }}?f=jsonld">JSON-LD</a></li>
</ul>

</nav>
<!-- End of Topbar -->
</div>

<!-- Page Wrapper -->
<div id="wrapper">

<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" style="background-color:white"
href="{{ config['server']['url'] }}" class="logo" role="button">
<img src="https://raw.githubusercontent.com/internetofwater/geoconnex.us/master/pygeoapi/pygeoapi-skin-dashboard/static/img/logo.png" title="{{ config['metadata']['identification']['title'] }}" style="height:40px;vertical-align: middle;" /></a>

</a>

<!-- Divider -->
<hr class="sidebar-divider my-0">

Expand Down Expand Up @@ -74,14 +97,12 @@
</li>
{% endif %}

{% if data['processes'] %}
<!-- Nav Item -->
<li class="nav-item">
<a class="nav-link" href="{{ config['server']['url'] }}/processes">
<i class="fas fa-fw fa-wrench"></i>
Processes</a>
</li>
{% endif %}
<!-- Nav Item -->
<li class="nav-item">
<a class="nav-link" href="{{ config['server']['url'] }}/processes">
<i class="fas fa-fw fa-wrench"></i>
Processes</a>
</li>

<!-- Divider -->
<hr class="sidebar-divider">
Expand Down Expand Up @@ -113,31 +134,8 @@
<!-- Main Content -->
<div id="content">

<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>

<div>
{% block crumbs %}
<a href="{{ config['server']['url'] }}">Home</a>
{% endblock %}
</div>

<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="{{ data['links'] | map(rel='self') | attr('href') }}?f=json">JSON</a></li>
<li class="nav-item"><a class="nav-link" href="{{ data['links'] | map(rel='self') | attr('href') }}?f=jsonld">JSON-LD</a></li>
</ul>

</nav>
<!-- End of Topbar -->

<!-- Begin Page Content -->
<div class="container-fluid">
<div class="container-fluid pt-4">

<!-- Page Heading
<div class="d-sm-flex align-items-center justify-content-between mb-4">
Expand Down Expand Up @@ -223,8 +221,6 @@ <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
</div>
<!-- End of Page Wrapper -->



{% block extrafoot %}
{% endblock %}
<script>
Expand All @@ -244,5 +240,19 @@ <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
};
xhr.send();
</script>
<script>
function toggleNav() {
const nav = document.getElementById("accordionSidebar");
if (nav.offsetWidth === 0){
nav.style.width = "224px";
nav.style.display = "block";
nav.style.visibility = "visible";
} else {
nav.style.width = "0";
nav.style.display = "none";
nav.style.visibility = "hidden";
}
}
</script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,6 @@
<div class="col-sm">
<h1>{{ data['title'] }}</h1>
<p>{{ data['description'] }}</p>
<ul>
<li>
<a title="{{data['links'][0]['rel'] }}" href="{{ data['links'][0]['href'] }}">
<span>{{ data['links'][0]['title'] }}</span> (<span>{{ data['links'][0]['type'] }}</span>)
</a></li>
</ul>
<p>
{% for kw in data['keywords'] %}
<span class="badge badge-info">{{ kw }}</span>
Expand Down Expand Up @@ -63,6 +57,15 @@ <h3>Queryables</h3>
Display Queryables of "{{ data['title'] }}"</a></div>
</li>
</ul>
<h3>Links</h3>
<ul>
{% for link in data['links'] %}
<li>
<a title="{{ link['rel'] }}" href="{{ link['href'] }}">
<span>{{ link['title'] }}</span> (<span>{{ link['type'] }}</span>)
</a></li>
{% endfor %}
</ul>
{% for provider in config['resources'][data['id']]['providers'] %}
{% if 'tile' in provider['type'] %}
<h3>Tiles</h3>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
{% extends "_base.html" %}
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
{% block crumbs %}{{ super() }}
/ <a href="{{ data['collections_path'] }}">Collections</a>
/ <a href="{{ data['collections_path'] }}">{% trans %}Collections{% endtrans %}</a>
{% for link in data['links'] %}
{% if link.rel == 'collection' %} /
<a href="{{ data['dataset_path'] }}">{{ link['title'] | truncate( 25 ) }}</a>
<a href="{{ data['dataset_path'] }}">{{ link['title'] | string | truncate( 25 ) }}</a>
{% set col_title = link['title'] %}
{% endif %}
{% endfor %}
/ <a href="{{ data['items_path']}}">Items</a>
/ <a href="{{ data['items_path']}}">{% trans %}Items{% endtrans %}</a>
{% endblock %}
{% block extrahead %}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css"/>
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
{% endblock %}

{% block body %}
Expand Down Expand Up @@ -46,7 +49,7 @@ <h6 class="m-0 font-weight-bold text-primary">
<div id="limit" class="col-sm-12">
Limit:
<select id="limits">
<option value="10">10 (default)</option>
<option value="{{ config['server']['limit'] }}">{{ config['server']['limit'] }} ({% trans %}default{% endtrans %})</option>
<option value="100">100</option>
<option value="1000">1,000</option>
<option value="2000">2,000</option>
Expand Down Expand Up @@ -85,36 +88,62 @@ <h6 class="m-0 font-weight-bold text-primary">
</h6>
</div>
<!-- Card Body -->
<div>
<div style="overflow-x: scroll;">
{% set props = [] %}
<table class="table table-striped">
<thead>
<tr>
<th>id</th>
{% if data['title_field'] %}
<th>{{ data['title_field'] }}</th>
{% if data.get('uri_field') %}
{% set uri_field = data.uri_field %}
<th>{{ uri_field }}</th>
{% elif data.get('title_field') %}
{% set title_field = data.title_field %}
<th>{{ title_field }}</th>
{% else %}
<th>id</th>
{% endif %}
{% for k, v in data['features'][0]['properties'].items() %}
{# start with id & title then take first 5 columns for table #}
{% if loop.index < 5 and k != data['id_field'] and k != data['title_field'] %}
<th>{{ k }}</th>

{% for k in data['features'][0]['properties'].keys() %}
{% if k not in [data.id_field, data.title_field, data.uri_field, 'extent'] %}
{% set props = props.append(k) %}
<th>{{ k }}</th>
{% endif %}
{% endfor %}
</tr>
</tr>
</thead>
<tbody>
{% for ft in data['features'] %}
{% for ft in data.features %}
<tr>
<td data-label="id"><a href="{{ ft['properties'][data['uri_field']] }}" title="{{ ft.id }}">{{ ft.id | string | truncate( 12 ) }}</a></td>
{% if data['title_field'] %}
<td data-label="name"><a href="{{ data['items_path']}}/{{ ft['id'] }}" title="{{ ft['properties'][data['title_field']] }}">{{ ft['properties'][data['title_field']] | string | truncate( 35 ) }}</a></td>
{% if data.get('uri_field') %}
{% set uri_field = data.uri_field %}
<td data-label="{{ uri_field }}">
<a href="{{ ft.properties.get(uri_field) }}" title="{{ ft.properties.get(uri_field) }}">
{{ ft.properties.get(uri_field) }}
</a>
</td>
{% elif data.get('title_field') %}
{% set title_field = data.title_field %}
<td data-label="{{ title_field }}">
<a href="{{ data.items_path }}/{{ ft['id'] }}" title="{{ ft.properties.get(title_field) }}">
{{ ft.properties.get(title_field) | string | truncate( 35 ) }}
</a>
</td>
{% else %}
<td data-label="id">
<a href="{{ data.items_path }}/{{ ft.id }}" title="{{ ft.id }}">
{{ ft.id | string | truncate( 12 ) }}
</a>
</td>
{% endif %}
{% for k, v in ft['properties'].items() %}
{% if loop.index < 5 and k not in [data['id_field'], data['title_field'], 'extent'] %}
<td data-label="{{ k }}">{{ v | string | truncate( 35 ) }}</td>
{% endif %}

{% for prop in props %}
<td data-label="{{ prop }}">
{{ ft.properties.get(prop, '') | string | truncate( 35 ) }}
</td>
{% endfor %}

</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
</div>
Expand All @@ -131,25 +160,36 @@ <h6 class="m-0 font-weight-bold text-primary">

{% block extrafoot %}
{% if data['features'] %}
<script>
var map = L.map('items-map').setView([{{ 45 }}, {{ -75 }}], 5);
map.addLayer(new L.TileLayer(
'{{ config['server']['map']['url'] }}', {
maxZoom: 18,
attribution: '{{ config['server']['map']['attribution'] }}'
}
));
var geojson_data = {{ data['features'] | to_json | safe }};
var items = new L.GeoJSON(geojson_data, {
onEachFeature: function (feature, layer) {
var url = '{{ data['items_path'] }}/' + feature.id + '?f=html';
var html = '<span><a href="' + url + '">' + {% if data['title_field'] %} feature['properties']['{{ data['title_field'] }}'] {% else %} feature.id {% endif %} + '</a></span>';
layer.bindPopup(html);
}
});
<script>
var map = L.map('items-map').setView([{{ 45 }}, {{ -75 }}], 5);
map.addLayer(new L.TileLayer(
'{{ config['server']['map']['url'] }}', {
maxZoom: 18,
attribution: '{{ config['server']['map']['attribution'] | safe }}'
}
));
var geojson_data = {{ data['features'] | to_json | safe }};

var items = new L.GeoJSON(geojson_data, {
onEachFeature: function (feature, layer) {
var url = '{{ data['items_path'] }}/' + feature.id + '?f=html';
var html = '<span><a href="' + url + '">' + {% if data['title_field'] %} feature['properties']['{{ data['title_field'] }}'] {% else %} feature.id {% endif %} + '</a></span>';
layer.bindPopup(html);
}
});
{% if data['features'][0]['geometry']['type'] == 'Point' %}
var markers = L.markerClusterGroup({
disableClusteringAtZoom: 9,
chunkedLoading: true,
chunkInterval: 500,
});
markers.clearLayers().addLayer(items);
map.addLayer(markers);
{% else %}
map.addLayer(items);
{% endif %}

map.addLayer(items);
map.fitBounds(items.getBounds());
</script>
map.fitBounds(items.getBounds());
</script>
{% endif %}
{% endblock %}
Loading

0 comments on commit e0e1c2b

Please sign in to comment.