Merge pull request #2259 from WikiWatershed/tt/bigcz-cuahsi-detail-view

BiG-CZ: WDC / CUAHSI Details View

Connects #2234

src/mmw/apps/bigcz/clients/cuahsi/models.py

@@ -10,7 +10,7 @@ class CuahsiResource(Resource):
     def __init__(self, id, description, author, links, title,
                  created_at, updated_at, geom, details_url, sample_mediums,
                  concept_keywords, service_org, service_code, service_url,
-                 begin_date, end_date):
+                 service_title, service_citation, begin_date, end_date):
         super(CuahsiResource, self).__init__(id, description, author, links,
                                              title, created_at, updated_at,
                                              geom)
@@ -21,5 +21,7 @@ def __init__(self, id, description, author, links, title,
         self.service_org = service_org
         self.service_code = service_code
         self.service_url = service_url
+        self.service_title = service_title
+        self.service_citation = service_citation
         self.begin_date = begin_date
         self.end_date = end_date

src/mmw/apps/bigcz/clients/cuahsi/search.py

@@ -107,6 +107,8 @@ def parse_record(record, service):
         service_org=service['organization'],
         service_code=record['serv_code'],
         service_url=service['ServiceDescriptionURL'],
+        service_title=service['Title'],
+        service_citation=service['citation'],
         begin_date=record['begin_date'],
         end_date=record['end_date']
     )
@@ -156,10 +158,10 @@ def group_series_by_location(series):
             'site_name': group[0]['Sitename'],
             'latitude': group[0]['latitude'],
             'longitude': group[0]['longitude'],
-            'sample_mediums': ', '.join(sorted(set([r['samplemedium']
-                                                    for r in group]))),
-            'concept_keywords': '; '.join(sorted(set([r['conceptKeyword']
-                                                      for r in group]))),
+            'sample_mediums': sorted(set([r['samplemedium']
+                                          for r in group])),
+            'concept_keywords': sorted(set([r['conceptKeyword']
+                                            for r in group])),
             'begin_date': min([parse_date(r['beginDate'])
                                for r in group]),
             'end_date': max([parse_date(r['endDate'])

src/mmw/apps/bigcz/clients/cuahsi/serializers.py

@@ -3,17 +3,22 @@
 from __future__ import unicode_literals
 from __future__ import division
 
-from rest_framework.serializers import CharField, DateTimeField
+from rest_framework.serializers import (CharField,
+                                        DateTimeField,
+                                        ListField,
+                                        )
 
 from apps.bigcz.serializers import ResourceSerializer
 
 
 class CuahsiResourceSerializer(ResourceSerializer):
     details_url = CharField()
-    sample_mediums = CharField()
-    concept_keywords = CharField()
+    sample_mediums = ListField(child=CharField())
+    concept_keywords = ListField(child=CharField())
     service_org = CharField()
     service_code = CharField()
     service_url = CharField()
+    service_title = CharField()
+    service_citation = CharField()
     begin_date = DateTimeField()
     end_date = DateTimeField()

src/mmw/js/src/app.js

@@ -64,6 +64,11 @@ var App = new Marionette.Application({
 
         // Enable screenshot functionality
         initializeShutterbug();
+
+        // Enabling hiding popovers from within them
+        window.closePopover = function() {
+            $('[data-toggle="popover"]').popover('hide');
+        };
     },
 
     load: function(data) {

src/mmw/js/src/core/filters.js

@@ -60,6 +60,33 @@ nunjucks.env.addFilter('toDateWithoutTime', function(date) {
            fullDate.getUTCFullYear();
 });
 
+nunjucks.env.addFilter('toTimeAgo', function(date) {
+    var diff = Date.now() - (new Date(date)).getTime(),
+        secs = diff / 1000,
+        mins = secs / 60,
+        hrs  = mins / 60,
+        days = hrs  / 24,
+        wks  = days / 7,
+        mths = days / 30,
+        yrs  = days / 365;
+
+    if (yrs > 1) {
+        return Math.floor(yrs) + " years ago";
+    } else if (mths > 1) {
+        return Math.floor(mths) + " months ago";
+    } else if (wks > 1) {
+        return Math.floor(wks) + " weeks ago";
+    } else if (days > 1) {
+        return Math.floor(days) + " days ago";
+    } else if (hrs > 1) {
+        return Math.floor(hrs) + " hours ago";
+    } else if (mins > 1) {
+        return Math.floor(mins) + " minutes ago";
+    } else {
+        return Math.floor(secs) + " seconds ago";
+    }
+});
+
 nunjucks.env.addFilter('split', function(str, splitChar, indexToReturn) {
     var items = str.split(splitChar);
 

src/mmw/js/src/data_catalog/templates/resultDetails.html → src/mmw/js/src/data_catalog/templates/resultDetailsCinergi.html

@@ -14,30 +14,16 @@ <h2>
             <i class="fa fa-user"></i>{{ author }}
         </p>
     {% endif %}
-    {% if activeCatalog != 'cuahsi' %}
         <p>
             <i class="fa fa-calendar"></i> {{ created_at|toDateFullYear }}
         </p>
-    {% else %}
-        {% if begin_date == end_date %}
-            <p>
-                <i class="fa fa-calendar"></i> {{ begin_date|toDateWithoutTime }}
-            </p>
-        {% else %}
-            <p>
-                <i class="fa fa-calendar"></i> {{ begin_date|toDateWithoutTime }} - {{ end_date|toDateWithoutTime }}
-            </p>
-        {% endif %}
-    {% endif %}
     <p>
         {{ description }}
     </p>
     <p>
-        {% if activeCatalog == 'cinergi' %}
         <a class="btn btn-secondary" href="{{ cinergi_url }}"
            target="_blank" rel="noreferrer noopener">
             <i class="fa fa-external-link-square"></i>&nbsp;Repository
         </a>
-        {% endif %}
     </p>
 </div>

src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html

@@ -0,0 +1,73 @@
+<div class="result">
+    <div class="result-detail-header">
+        <button type="button" class="close" aria-label="Close">
+            <span aria-hidden="true">×</span>
+        </button>
+        <h2>
+            Site: {{ location }} {{ title }}
+        </h2>
+        <p>
+            Source: {{ service_org }} {{ service_title }}
+            <a data-toggle="popover" tabindex="0"
+               data-html="true" data-container="body" role="button"
+               data-content="{{ description }}"
+               data-template="<div class='popover'><div class='pull-right' id='popover-close-button' onclick='closePopover()'><i class='fa fa-times' /></div><div class='popover-content'></div><div class='arrow'></div></div>">
+                <i class="fa fa-info-circle black"></i>
+            </a>
+        </p>
+    </div>
+    {% if author %}
+        <p>
+            <i class="fa fa-user"></i>{{ author }}
+        </p>
+    {% endif %}
+    {% if begin_date == end_date %}
+        <p>
+            Data collected on: {{ begin_date|toDateWithoutTime }}
+        </p>
+    {% else %}
+        <p>
+            Data collected between: {{ begin_date|toDateWithoutTime }} - {{ end_date|toDateWithoutTime }}
+        </p>
+    {% endif %}
+    <p>
+        Medium: {{ sample_mediums|join(", ") }}
+    </p>
+    <p>
+        {% if details_url %}
+            <a class="btn btn-secondary" href="{{ details_url }}"
+               target="_blank" rel="noreferrer noopener">
+                <i class="fa fa-external-link-square"></i>&nbsp;Source Data
+            </a>
+        {% endif %}
+        <a class="btn btn-secondary" href="{{ service_url }}"
+           target="_blank" rel="noreferrer noopener">
+            <i class="fa fa-globe"></i>&nbsp;Web Services
+        </a>
+    </p>
+    <hr />
+    <p>
+        Last collected value {{ end_date|toTimeAgo }}:
+    </p>
+    <table class="table custom-hover" data-toggle="table">
+        <thead>
+            <tr>
+                <th>Variable</th>
+                <th class="text-right">Value</th>
+                <th>Units</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for ck in concept_keywords %}
+                <tr>
+                    <td>{{ ck }}</td>
+                    <td class="text-right"><!-- TODO Fetch Values --></td>
+                    <td><!-- TODO Fetch Units --></td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    <!-- TODO Insert Chart https://github.com/WikiWatershed/model-my-watershed/issues/2238 -->
+    <hr />
+    <p>Citation: {{ service_citation }}</p>
+</div>

src/mmw/js/src/data_catalog/templates/resultDetailsHydroshare.html

@@ -0,0 +1,23 @@
+<div class="result">
+    <div class="result-detail-header">
+        <h2>
+            {{ title }}
+        </h2>
+        <button type="button" class="close" aria-label="Close">
+            <span aria-hidden="true">×</span>
+        </button>
+        <a href="#"><i class="fa fa-search-plus"></i> Zoom to extent</a>
+    </div>
+    <hr>
+    {% if author %}
+        <p>
+            <i class="fa fa-user"></i>{{ author }}
+        </p>
+    {% endif %}
+        <p>
+            <i class="fa fa-calendar"></i> {{ created_at|toDateFullYear }}
+        </p>
+    <p>
+        {{ description }}
+    </p>
+</div>

src/mmw/js/src/data_catalog/templates/cuahsiSearchResult.html → src/mmw/js/src/data_catalog/templates/searchResultCuahsi.html

@@ -9,7 +9,7 @@ <h3 class="resource-title">
     <div class="resource-detail -showall">
         <i class="fa fa-subscript"></i>
         <div class="detail-text">
-            {{ concept_keywords }}
+            {{ concept_keywords|join("; ") }}
         </div>
     </div>
     <div class="resource-detail">

src/mmw/js/src/data_catalog/views.js

@@ -10,12 +10,14 @@ var $ = require('jquery'),
     formTmpl = require('./templates/form.html'),
     pagerTmpl = require('./templates/pager.html'),
     searchResultTmpl = require('./templates/searchResult.html'),
-    cuahsiSearchResultTmpl = require('./templates/cuahsiSearchResult.html'),
+    searchResultCuahsiTmpl = require('./templates/searchResultCuahsi.html'),
     tabContentTmpl = require('./templates/tabContent.html'),
     tabPanelTmpl = require('./templates/tabPanel.html'),
     headerTmpl = require('./templates/header.html'),
     windowTmpl = require('./templates/window.html'),
-    resultDetailsTmpl = require('./templates/resultDetails.html'),
+    resultDetailsCinergiTmpl = require('./templates/resultDetailsCinergi.html'),
+    resultDetailsHydroshareTmpl = require('./templates/resultDetailsHydroshare.html'),
+    resultDetailsCuahsiTmpl = require('./templates/resultDetailsCuahsi.html'),
     resultsWindowTmpl = require('./templates/resultsWindow.html'),
     resultMapPopoverTmpl = require('./templates/resultMapPopover.html');
 
@@ -24,7 +26,12 @@ var ENTER_KEYCODE = 13,
     CATALOG_RESULT_TEMPLATE = {
         cinergi: searchResultTmpl,
         hydroshare: searchResultTmpl,
-        cuahsi: cuahsiSearchResultTmpl,
+        cuahsi: searchResultCuahsiTmpl,
+    },
+    CATALOG_RESULT_DETAILS_TEMPLATE = {
+        cinergi: resultDetailsCinergiTmpl,
+        hydroshare: resultDetailsHydroshareTmpl,
+        cuahsi: resultDetailsCuahsiTmpl,
     };
 
 var HeaderView = Marionette.LayoutView.extend({
@@ -131,7 +138,7 @@ var DataCatalogWindow = Marionette.LayoutView.extend({
         } else {
             this.detailsRegion.show(new ResultDetailsView({
                 model: detailResult,
-                activeCatalog: activeCatalog.id
+                catalog: activeCatalog.id
             }));
             App.map.set({
                 'dataCatalogResults': null,
@@ -444,7 +451,9 @@ var ResultsView = Marionette.CollectionView.extend({
 });
 
 var ResultDetailsView = Marionette.ItemView.extend({
-    template: resultDetailsTmpl,
+    getTemplate: function() {
+        return CATALOG_RESULT_DETAILS_TEMPLATE[this.catalog];
+    },
 
     ui: {
         closeDetails: '.close'
@@ -455,12 +464,23 @@ var ResultDetailsView = Marionette.ItemView.extend({
     },
 
     initialize: function(options) {
-        this.activeCatalog = options.activeCatalog;
+        this.catalog = options.catalog;
+    },
+
+    onAttach: function() {
+        this.$('[data-toggle="popover"]').popover({
+            placement: 'right',
+            trigger: 'click',
+        });
+        this.$('[data-toggle="table"]').bootstrapTable();
     },
 
     templateHelpers: function() {
+        var id = this.model.get('id'),
+            location = id.substring(id.indexOf(':') + 1);
+
         return {
-            activeCatalog: this.activeCatalog
+            location: location,
         };
     },
 

src/mmw/sass/pages/_data-catalog.scss

@@ -22,18 +22,22 @@
             top: 0px;
             width: 100%;
             position: absolute;
-            z-index: 10000;
+            z-index: 1000;
             background-color: #fff;
             overflow: auto;
 
+            p {
+                margin: 5px 0 0 0;
+            }
+
             .result-detail-header {
               h2 {
                   display: inline-block;
                   margin: 4px 0;
                   max-width: 95%;
               }
 
-              a {
+              a.zoom {
                 display: block;
               }
             }