Update WDC Detail View template

 * Title now features location, which is extracted from the id
 * Source has service_org and service_title, with the description
   inside a popup
 * Instead of the calendar icon, we now use the text "Data
   collected on" or "Data collected between" based on if the end
   date is different from the beginning date
 * Sample mediums are listed
 * Source Data button is shown if details_url exists
 * Web Services button is shown pointing to the service url
 * Last collected value is shown in relative time, using a new
   toTimeAgo filter
 * A table of concept keywords is added
   - This currently only features the keyword name
   - Values and units will be pulled in the future, see #2238
 * There is comment placeholder for adding charts, coming in #2238
 * Citation in the bottom
 * Some style edits to make it all fit

The popover() and bootstrapTable() functions will only execute if
the template has any corresponding data-toggle elements. Thus,
they noop for CINERGI and HydroShare.

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/resultDetailsCuahsi.html

@@ -1,29 +1,73 @@
 <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>
+        <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'><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>
-    <hr>
     {% if author %}
         <p>
             <i class="fa fa-user"></i>{{ author }}
         </p>
     {% endif %}
     {% if begin_date == end_date %}
         <p>
-            <i class="fa fa-calendar"></i> {{ begin_date|toDateWithoutTime }}
+            Data collected on: {{ begin_date|toDateWithoutTime }}
         </p>
     {% else %}
         <p>
-            <i class="fa fa-calendar"></i> {{ begin_date|toDateWithoutTime }} - {{ end_date|toDateWithoutTime }}
+            Data collected between: {{ begin_date|toDateWithoutTime }} - {{ end_date|toDateWithoutTime }}
         </p>
     {% endif %}
     <p>
-        {{ description }}
+        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/views.js

@@ -467,9 +467,20 @@ var ResultDetailsView = Marionette.ItemView.extend({
         this.catalog = options.catalog;
     },
 
+    onAttach: function() {
+        this.$('[data-toggle="popover"]').popover({
+            placement: 'right',
+            trigger: 'focus',
+        });
+        this.$('[data-toggle="table"]').bootstrapTable();
+    },
+
     templateHelpers: function() {
+        var id = this.model.get('id'),
+            location = id.substring(id.indexOf(':') + 1);
+
         return {
-            catalog: this.catalog
+            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;
               }
             }