Merge pull request AtlasOfLivingAustralia#39 from AtlasOfLivingAustra…

…lia/expert-distributions Expert distributions
naamaarkin · Jul 7, 2023 · 01517ac · 01517ac
2 parents ad3c047 + a7f5f61
commit 01517ac
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 16 deletions.
diff --git a/grails-app/assets/javascripts/species.show.js b/grails-app/assets/javascripts/species.show.js
@@ -868,20 +868,72 @@ function cancelSearch(msg) {
     return true;
 }
 
+let distributions = []
+var distributionsIdx = 0
 function loadExpertDistroMap() {
-    var url = SHOW_CONF.layersServiceUrl + "/distribution/map/" + SHOW_CONF.guid;
+    var url = SHOW_CONF.layersServiceUrl + "/distribution/lsids/" + SHOW_CONF.guid;
     $.getJSON(url, function(data){
-        if (data.available) {
-            $("#expertDistroDiv img").attr("src", data.url);
-            if (data.dataResourceName && data.dataResourceUrl) {
-                var attr = $('<a>').attr('href', data.dataResourceUrl).text(data.dataResourceName)
-                $("#expertDistroDiv #dataResource").html(attr);
-            }
-            $("#expertDistroDiv").show();
+        if (data) {
+            $.each(data, function (idx, distribution) {
+                var record = {
+                    url: distribution.imageUrl,
+                    name: distribution.area_name,
+                    dr: distribution.data_resource_uid
+                }
+
+                if (record.dr) {
+                    $.getJSON(SHOW_CONF.collectoryUrl + "/ws/dataResource/" + record.dr, function(collectoryData) {
+                        record.providerName = collectoryData.name
+                        distributions.push(record)
+
+                        showDistribution()
+                    })
+                }
+            })
+            $('#expertDistroCount').text(' (' + data.length + ')')
         }
     })
 }
 
+function nextDistribution() {
+    if (distributionsIdx < distributions.length) {
+        distributionsIdx = distributionsIdx + 1
+    }
+
+    showDistribution()
+}
+
+function prevDistribution() {
+    if (distributionsIdx > 0) {
+        distributionsIdx = distributionsIdx - 1
+    }
+
+    showDistribution()
+}
+
+function showDistribution() {
+    $("#expertDistroDiv img").attr("src", distributions[distributionsIdx].url);
+    $("#dataResourceAreaName").text((distributionsIdx + 1) + ": " + distributions[distributionsIdx].name)
+    if (distributions[distributionsIdx].dr) {
+        var attr = $('<a>').attr('href', SHOW_CONF.collectoryUrl + '/public/show/' + distributions[distributionsIdx].dr).text(distributions[distributionsIdx].providerName)
+        $("#expertDistroDiv #dataResource").html(attr);
+    }
+
+    $("#expertDistroDiv").show();
+
+    if (distributionsIdx > 0) {
+        $("#expertDistroPrev").prop( "disabled", false );
+    } else {
+        $("#expertDistroPrev").prop( "disabled", true );
+    }
+
+    if (distributionsIdx < distributions.length - 1) {
+        $("#expertDistroNext").prop( "disabled", false );
+    } else {
+        $("#expertDistroNext").prop( "disabled", true );
+    }
+}
+
 function expandImageGallery(btn) {
     if(!$(btn).hasClass('.expand-image-gallery')){
         $(btn).parent().find('.collapse-image-gallery').removeClass('btn-primary');

diff --git a/grails-app/assets/stylesheets/atlas.css b/grails-app/assets/stylesheets/atlas.css
@@ -216,4 +216,23 @@ html, body {height:100%;}
 
 .margin-bottom-30 {
 	margin-bottom: 30px;
-}
+}
+
+/* expertDistro */
+.carousel-button {
+	height:316px;
+	font-size:30px;
+	color:gray;
+	background: #3a3a3a;
+	border:0;
+}
+
+.carousel-button:hover {
+	color:white;
+	/*background: #7a7a7a;*/
+}
+
+.carousel-button:disabled {
+	opacity: 0.0;
+}
+
diff --git a/grails-app/i18n/messages.properties b/grails-app/i18n/messages.properties
@@ -438,8 +438,8 @@ overview.online.resources=Online Resources
 overview.datasets=Datasets 
 overview.map.occurrence.records.01=Occurrence records map
 overview.map.occurrence.records.02=records
-overview.map.occurrence.compile.mapa.attribution=Compiled distribution map
-overview.map.occurrence.mapa.attribution.01=Compiled distribution map provided by
+overview.map.occurrence.compile.mapa.attribution=Compiled distribution maps
+overview.map.occurrence.mapa.attribution.01=provided by
 overview.map.occurrence.mapa.attribution.02=data resource not known
 overview.map.submit.photo=Submit a photo
 overview.map.receive.alerts=Receive alerts when new records are added

diff --git a/grails-app/views/species/_overview.gsp b/grails-app/views/species/_overview.gsp
@@ -73,12 +73,28 @@
 
         <div class="col-md-6">
             <div id="expertDistroDiv" style="display:none;margin-bottom: 20px;">
-                <h3><g:message code="overview.map.occurrence.compile.mapa.attribution"/></h3>
-                <img id="distroMapImage" src="${resource(dir: 'images', file: 'noImage.jpg')}" class="distroImg"
-                     style="width:316px;" alt="occurrence map" onerror="this.style.display = 'none'"/>
+                <h3><g:message code="overview.map.occurrence.compile.mapa.attribution"/><span id="expertDistroCount"></span></h3>
+
+                <div>
+                    <div style="background-color: #3a3a3a;text-align-last: center">
+
+                        <img id="distroMapImage" src="${resource(dir: 'images', file: 'noImage.jpg')}" class="distroImg"
+                             style="width:316px;" alt="occurrence map" onerror="this.style.display = 'none'"/>
+
+                        <button id="expertDistroPrev" onclick="prevDistribution()" disabled class="carousel-button" style="float:left;">
+                            <span> &lt; </span>
+                        </button>
+
+                        <button id="expertDistroNext" onclick="nextDistribution()" disabled class="carousel-button" style="float:right;">
+                            <span> &gt; </span>
+                        </button>
+                    </div>
+                    <p class="mapAttribution">
+                        <span id="dataResourceAreaName" style="font-weight: bold;font-style: italic;"></span>
+                        <g:message code="overview.map.occurrence.mapa.attribution.01"/>
+                        <span id="dataResource">[<g:message code="overview.map.occurrence.mapa.attribution.02"/>]</span></p>
+                </div>
 
-                <p class="mapAttribution"><g:message code="overview.map.occurrence.mapa.attribution.01"/>
-                    <span id="dataResource">[<g:message code="overview.map.occurrence.mapa.attribution.02"/>]</span></p>
             </div>
 
             <div class="taxon-map">