WIP ui rework

Author: aperrin66

geospaas/base_viewer/static/base_viewer/styles.css

@@ -1,7 +1,25 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+.geospaas_app {
+    height: 100%;
+}
+
+.geospaas_selected_tab {
+    background-color: lightgrey;
+}
+
 #geospaas_apps {
     display: grid;
+    height: 100%;
+    width: 100%;
     grid-template-columns: 5% auto;
-    grid-template-rows: 100%;
+    grid-template-rows: minmax(0, 1fr);
     grid-gap: 10px;
 }
 
@@ -15,6 +33,7 @@
     grid-row: 1;
 }
 
-.geospaas_selected_tab {
-    background-color: lightgrey;
-}
+/* form  { display: table;      }
+p     { display: table-row;  }
+label { display: table-cell; }
+input { display: table-cell; } */

geospaas/base_viewer/templates/base_viewer/geospaas.html

@@ -9,15 +9,16 @@
             <div id="geospaas_sidebar">
                 {% block geospaas_sidebar %}
                     {% for app in geospaas_apps %}
-                        <div class="app.label{% if app.label == selected_tab %} geospaas_selected_tab{% endif %}">
+                        <div class="geospaas_tab_label {% if app.label == selected_tab %} geospaas_selected_tab{% endif %}">
                             <a href="{% url 'base_viewer:index' %}{{ app.path }}">{{ app.label }}</a>
                         </div>
                     {% endfor %}
                 {% endblock geospaas_sidebar %}
             </div>
             <div id="geospaas_tab_contents">
-                {% block geospaas_tab_contents %}{% endblock geospaas_tab_contents %}
-                {% comment %} Hello {% endcomment %}
+                {% block geospaas_tab_contents %}
+                <div id="default_tab">Welcome to GeoSPaaS!</div>
+                {% endblock geospaas_tab_contents %}
             </div>
         </div>
     </body>

geospaas/base_viewer/urls.py

@@ -8,25 +8,8 @@
 
 geospaas_apps = config.get_setting('base_viewer', 'apps')
 urlpatterns = [
-    path(
-        route='',
-        view=GeoSPaaSView.as_view(),
-        name='index',
-        kwargs={
-            'geospaas_apps': geospaas_apps,
-            'selected_tab': None,
-        },
-    )
+    path(route='', view=GeoSPaaSView.as_view(), name='index')
 ]
 
 for geospaas_app in geospaas_apps:
-    urlpatterns.append(
-        path(
-            geospaas_app['path'],
-            include(geospaas_app['urls']),
-            {
-                'geospaas_apps': geospaas_apps,
-                'selected_tab': geospaas_app['label'],
-            }
-        )
-    )
+    urlpatterns.append(path(geospaas_app['path'], include(geospaas_app['urls'])))

geospaas/base_viewer/views.py

@@ -1,17 +1,20 @@
 from django.views.generic import TemplateView
 from django.urls import reverse
 
+from geospaas.config import config
+
 
 class GeoSPaaSView(TemplateView):
     """"""
     template_name = 'base_viewer/geospaas.html'
+    tab_label = None
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.geospaas_apps = config.get_setting('base_viewer', 'apps')
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
-        context['geospaas_apps'] = kwargs['geospaas_apps']
-        context['selected_tab'] = kwargs['selected_tab']
-        print('context', context)
+        context['geospaas_apps'] = self.geospaas_apps
+        context['selected_tab'] = self.tab_label
         return context
-
-    # def get(self, request, *args, **kwargs):
-    #     return super().get(request, *args, **kwargs)

geospaas/catalog/filters.py

@@ -0,0 +1,55 @@
+"""Custom filters for the base geospaas API"""
+import rest_framework_filters
+from django.contrib.gis.db.models import GeometryField
+from django_filters.rest_framework.filters import CharFilter
+
+import geospaas.catalog.models
+
+
+class TagFilter(rest_framework_filters.FilterSet):
+    """Filterset for tags"""
+    class Meta:
+        fields = {
+            'name': '__all__',
+            'value': '__all__',
+        }
+
+
+class DatasetFilter(rest_framework_filters.FilterSet):
+    """Filter for Datasets"""
+
+    tags = rest_framework_filters.RelatedFilter(
+        TagFilter,
+        field_name='tags',
+        queryset=geospaas.catalog.models.Tag.objects.all())
+
+    class Meta:
+        model = geospaas.catalog.models.Dataset
+        filter_overrides = {
+             GeometryField: {
+                 'filter_class': CharFilter
+             }
+        }
+        fields = {
+            'id': '__all__',
+            'entry_id': '__all__',
+            'summary': '__all__',
+            'time_coverage_start': '__all__',
+            'time_coverage_end': '__all__',
+            'location': '__all__',
+        }
+
+
+
+class DatasetURIFilter(rest_framework_filters.FilterSet):
+    """Filter for DatasetURIs"""
+    dataset = rest_framework_filters.RelatedFilter(
+        DatasetFilter,
+        field_name='dataset',
+        queryset=geospaas.catalog.models.Dataset.objects.all()
+    )
+    class Meta:
+        model = geospaas.catalog.models.DatasetURI
+        fields = {
+            'uri': '__all__',
+        }

geospaas/catalog/forms.py

@@ -5,37 +5,41 @@
 
 class BaseSearchForm(forms.Form):
     """ Basic version of form for basic seaching of django-geospaas metadata """
-    polygon = forms.GeometryField(label=False,
-                                  widget=LeafletWidget(attrs={
-                                      'settings_overrides': {
-                                          'DEFAULT_CENTER': (89.0, 179.0),
-                                          'DEFAULT_ZOOM': 1,
-                                          'NO_GLOBALS': False,
-                                          'PLUGINS': {'forms': {'auto-include': True}},
-                                      }
-                                  }),
-                                  required=False)
-    time_coverage_start = forms.DateTimeField(
-        initial=timezone.datetime(2000, 1, 1, tzinfo=timezone.utc))
-    time_coverage_end = forms.DateTimeField(initial=timezone.now())
+    polygon = forms.GeometryField(
+        label=False,
+        widget=LeafletWidget(attrs={
+            'settings_overrides': {
+                'DEFAULT_CENTER': (89.0, 179.0),
+                'DEFAULT_ZOOM': 1,
+                'NO_GLOBALS': False,
+                'PLUGINS': {'forms': {'auto-include': True}},
+            }
+        }),
+        required=False)
+    time_coverage_start = forms.DateTimeField()
+    time_coverage_end = forms.DateTimeField()
+    tags = forms.CharField(required=False)
+    keywords = forms.CharField(required=False)
+    full_text = forms.CharField(required=False)
+    parameters = forms.CharField(required=False)
 
-    def filter(self, ds):
-        """ Filtering method of the form. All filtering processes are coded here """
-        # filtering based on time
-        t_0 = self.cleaned_data['time_coverage_start']
-        t_1 = self.cleaned_data['time_coverage_end']
-        # Too early datasets are excluded from the filtering results
-        ds = ds.exclude(time_coverage_end__lte=t_0)
+    # def filter(self, ds):
+    #     """ Filtering method of the form. All filtering processes are coded here """
+    #     # filtering based on time
+    #     t_0 = self.cleaned_data['time_coverage_start']
+    #     t_1 = self.cleaned_data['time_coverage_end']
+    #     # Too early datasets are excluded from the filtering results
+    #     ds = ds.exclude(time_coverage_end__lte=t_0)
 
-        # Too late datasets are excluded from the filtering results
-        ds = ds.exclude(time_coverage_start__gt=t_1)
+    #     # Too late datasets are excluded from the filtering results
+    #     ds = ds.exclude(time_coverage_start__gt=t_1)
 
-        # spatial filtering
-        if self.cleaned_data['polygon']:
-            # filtering by user provided polygon
-            ds = ds.filter(
-                geographic_location__geometry__intersects=self.cleaned_data['polygon'])
+    #     # spatial filtering
+    #     if self.cleaned_data['polygon']:
+    #         # filtering by user provided polygon
+    #         ds = ds.filter(
+    #             geographic_location__geometry__intersects=self.cleaned_data['polygon'])
 
-        # sorting
-        ds = ds.order_by('time_coverage_start')
-        return ds
+    #     # sorting
+    #     ds = ds.order_by('time_coverage_start')
+    #     return ds

geospaas/catalog/serializers.py

@@ -0,0 +1,28 @@
+"""Serializers for the base geospaas API"""
+import geospaas.catalog.models
+
+import rest_framework.serializers
+
+
+class DatasetSerializer(rest_framework.serializers.HyperlinkedModelSerializer):
+    """Serializer for Dataset objects"""
+    class Meta:
+        model = geospaas.catalog.models.Dataset
+        # fields = '__all__'
+        fields = [
+            'entry_id',
+            'entry_title',
+            'time_coverage_start',
+            'time_coverage_end',
+            'location',
+            'summary',
+            # 'tags',
+        ]
+
+
+class DatasetURISerializer(rest_framework.serializers.HyperlinkedModelSerializer):
+    """Serializer for DatasetURI objects"""
+    class Meta:
+        model = geospaas.catalog.models.DatasetURI
+        # fields = '__all__'
+        fields = ['uri']

geospaas/catalog/static/catalog/js/catalog.js

@@ -1,27 +1,110 @@
-var footprints_layer_style = {
+"use strict";
+
+let footprints_layer_style = {
     "color": "#0000ff",
     "weight": 1,
     "opacity": 0.9,
     "fillOpacity": 0.1,
 };
 
-var polygons = {};
+let polygons = {};
+
+function display_page(page) {
+  // clear existing contents
+  let datasets_table = document.getElementById("datasets_table");
+  // add the current page of datasets to the table
+  if(page.results){
+    datasets_table.querySelectorAll("tbody > tr").forEach((row) => {row.remove()});
+    let newRow;
+    let newCell;
+    for(let dataset of page.results) {
+      newRow = datasets_table.querySelector('tbody').insertRow();
+      newCell = newRow.insertCell();
+      newCell.appendChild(document.createTextNode(dataset.entry_id));
+    }
+  }
+
+  // deal with cursor pagination
+  let previous_button = document.getElementById("datasets_previous_button");
+  let next_button = document.getElementById("datasets_next_button");
+  if(page.previous) {
+    let previous_url = new URL(page.previous);
+    previous_button.setAttribute("data-cursor", previous_url.searchParams.get('cursor'));
+    previous_button.disabled = false;
+  } else {
+    previous_button.disabled = true;
+  }
+  if(page.next) {
+    let next_url = new URL(page.next);
+    next_button.setAttribute("data-cursor", next_url.searchParams.get('cursor'));
+    next_button.disabled = false;
+  } else {
+    next_button.disabled = true;
+  }
+}
+
+function get_datasets(url, request_parameters) {
+  let full_request_parameters = {
+    ...request_parameters,
+  };
+  let time_coverage_start = document.getElementById("id_time_coverage_start").value;
+  let time_coverage_end = document.getElementById("id_time_coverage_end").value;
+  let tags = document.getElementById("id_tags").value;
+  let keywords = document.getElementById("id_keywords").value;
+  let full_text = document.getElementById("id_full_text").value;
+  let parameters = document.getElementById("id_parameters").value;
+
+  if(time_coverage_start) {full_request_parameters.time_coverage_end__gte = time_coverage_start;}
+  if(time_coverage_end) {full_request_parameters.time_coverage_start__lte = time_coverage_end;}
 
-$(document).ready(function(){
-  $(".dataset_row").each(function(){
-    polygons[$(this).attr("ajax_url")] = new L.GeoJSON.AJAX(
-        $(this).attr("ajax_url"),
-        {style: footprints_layer_style}).addTo(window.maps[0]);
+
+  fetch(`${url}?` + new URLSearchParams(full_request_parameters).toString())
+    .then(response => response.json())
+    .then(page => display_page(page))
+    .catch(error => console.log(`${error}: Failed to get datasets`));
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  // add listeners to trigger datasets search
+  let host = `${window.location.protocol}//${window.location.host}`
+  document.querySelectorAll(
+    "#dataset_search_button, #datasets_previous_button, #datasets_next_button"
+  ).forEach((element) => element.addEventListener(
+    "click",
+    function() {
+      let parameters = {page_size: document.getElementById("datasets_page_size").value};
+      let cursor = this.getAttribute('data-cursor');
+      if(cursor) {parameters.cursor = cursor;}
+      get_datasets(`${host}${this.getAttribute('data-path')}`, parameters);
+    }
+  ));
+
+  // trigger Search click if user presses enter on page size field
+  document.getElementById("datasets_page_size").addEventListener("keypress", function(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      document.getElementById("dataset_search_button").click();
+    }
   });
 
-  $(".dataset_row").hover(
-  function(){
-    $(this).css("background-color", "#ffeeee");
-    polygons[$(this).attr("ajax_url")].setStyle({color: '#ff0000'});
-   },
-  function(){
-    $(this).css("background-color", "#ffffff");
-    polygons[$(this).attr("ajax_url")].setStyle({color: '#0000ff'});
-  },
-  );
+
+  // // highlights dataset coverage on the map
+  // document.querySelectorAll(".dataset_row").forEach(
+  //   function(element) {
+  //     polygons[element.ajax_url] = new L.GeoJSON.AJAX(
+  //       element.ajax_url,
+  //       {style: footprints_layer_style}).addTo(window.maps[0]);
+  //   }
+  // );
+
+  // $(".dataset_row").hover(
+  //   function(){
+  //     $(this).css("background-color", "#ffeeee");
+  //     polygons[$(this).attr("ajax_url")].setStyle({color: '#ff0000'});
+  //   },
+  //   function(){
+  //     $(this).css("background-color", "#ffffff");
+  //     polygons[$(this).attr("ajax_url")].setStyle({color: '#0000ff'});
+  //   },
+  // );
 });