- reordered components in survey offline page

- sorted site by name - site modal dialog is scrollable - downloaded sites added to offline map list
AtlasOfLivingAustralia · May 31, 2024 · 1a26d41 · 1a26d41
1 parent 2186740
commit 1a26d41
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 39 deletions.
diff --git a/grails-app/assets/javascripts/pwa-index.js b/grails-app/assets/javascripts/pwa-index.js
@@ -353,6 +353,20 @@ function OfflineViewModel(config) {
         });
     }
 
+    self.checkSiteInOfflineDownload = function (data) {
+        var deferred = $.Deferred();
+        entities.getMaps().then(function (result) {
+            var maps = result.data;
+            var found = maps.find(function (map) {
+                return map.name === data.name;
+            });
+
+            deferred.resolve(!!found, data);
+        }, deferred.reject);
+
+        return deferred.promise();
+    }
+
     self.getBoundsArray = function (bounds) {
         return [{lat: bounds.getNorth(), lng:bounds.getWest()}, {lat: bounds.getSouth(), lng:bounds.getEast()}];
     }
@@ -456,6 +470,11 @@ function OfflineViewModel(config) {
         self.currentStage(self.stages.sites);
         self.sitesStatus(self.statuses.doing);
         alaMap.registerListener('dataload', callback);
+        sites.sort(function (a, b) {
+            var aName = (a.name || "").trim(),
+                bName = (b.name || "").trim();
+            return aName.localeCompare(bName)
+        });
 
         if (sites.length > MAX_SITES_DOWNLOADABLE) {
             var selectionModel = new SiteSelectionViewModel(sites);
@@ -480,7 +499,8 @@ function OfflineViewModel(config) {
                         wmsFeatureUrl: overlayLayersMapControlConfig.wmsFeatureUrl,
                         wmsLayerUrl: overlayLayersMapControlConfig.wmsLayerUrl,
                         maxZoom: MAX_ZOOM
-                    });
+                    }),
+                    bounds;
 
                 // so that layer zooms beyond default max zoom of 18
                 geoJsonLayer.options.maxZoom = MAX_ZOOM;
@@ -501,11 +521,29 @@ function OfflineViewModel(config) {
                     tileLoadedPromise = $.Deferred();
                     mapImpl.setZoom(zoom, {animate: false});
                     timer(MAP_LOAD_TIMEOUT, tileLoadedPromise);
+                    if (zoom === MIN_ZOOM)
+                        bounds = mapImpl.getBounds();
                     await tileLoadedPromise.promise();
                 }
 
+                // save site to offline map list
+                self.checkSiteInOfflineDownload({
+                    name: site.name,
+                    bounds: self.getBoundsArray(bounds)
+                }).then(function (found, data) {
+                    if (!found) {
+                        entities.saveMap({
+                            name: data.name,
+                            bounds: data.bounds,
+                            baseMapUrl: config.baseMapUrl
+                        }).then(function (result) {
+                            self.getOfflineMaps();
+                        });
+                    }
+                })
                 alaMap.clearLayers();
                 self.numberOfSiteTilesDownloaded(self.numberOfSiteTilesDownloaded() + 1);
+                bounds = null;
             }
 
             alaMap.removeListener('dataload', callback);

diff --git a/grails-app/assets/javascripts/pwa-messages.js b/grails-app/assets/javascripts/pwa-messages.js
@@ -1,5 +1,5 @@
 window.addEventListener('message', function(event) {
-    var origins = [fcConfig.originUrl, fcConfig.pwaAppUrl]
+    var origins = [fcConfig.originUrl, fcConfig.pwaAppUrl, "http://localhost:8081"]
     if (origins.indexOf(event.origin) == -1)
         return
 

diff --git a/grails-app/i18n/messages.properties b/grails-app/i18n/messages.properties
@@ -1015,9 +1015,10 @@ admin.species.catalog=Regenerate species
 admin.species.helptext=Downloads species catalog and transforms it into a downloadable format for PWA mobile clients.
 pwa.species.refresh=Refresh species database
 pwa.map.download.href=Scroll to map section
-pwa.map.download.help=Download map tiles for offline use. You need at least one downloaded region to enable offline access. \
-  Zoom in to the region of interest and give it a name. Then click the download button. Download progress are shown below. \
-  Download is restricted to a maximum area of {0} km<sup>2</sup> because map tiles can take up a lot of space. However, you can download multiple regions.
+pwa.map.download.help=Download map tiles for offline use. You can only download if selection area field is green. \
+  Download is restricted to a maximum area of {0} km<sup>2</sup> because map tiles can take up a lot of space. \
+  However, you can download multiple regions. You need at least one downloaded region to enable offline access. \
+  We are investigating ways to improve access to offline map.
 pwa.upload.all=Upload all
 pwa.add.records=Add record
 pwa.activities.empty.msg=Unpublished records not found

diff --git a/grails-app/views/bioActivity/pwa.gsp b/grails-app/views/bioActivity/pwa.gsp
@@ -209,31 +209,6 @@
         </a>
     </div>
 
-
-    <h1 class="mt-5"><g:message code="pwa.offline.options"/></h1>
-    <h3 class="mt-3"><g:message code="pwa.species.download"/></h3>
-    <div class="row">
-        <div class="col-12">
-            <form>
-                <div class="form-group row">
-                    <label class="col-sm-4 col-form-label"><g:message code="pwa.species.download.offline"/></label>
-                    <div class="col-sm-8">
-                        <button type="submit" class="btn btn-primary" data-bind="click: clickSpeciesDownload, enable: speciesStatus() == 'downloaded'"><i class="fas fa-redo"></i> <g:message code="pwa.species.refresh"/></button>
-                    </div>
-                </div>
-            </form>
-            <div class="row" data-bind="slideVisible: showSpeciesProgressBar">
-                <div class="col-12">
-                    <h6><g:message code="pwa.map.download.species.progress"/> </h6>
-                    <div class="progress">
-                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-bind="style: {width: speciesDownloadPercentageComplete() + '%'}, text: speciesDownloadPercentageComplete() + '%'"></div>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </div>
-
     <h3 id="mapSection" class="mt-3"><g:message code="pwa.map.cache.title"/></h3>
     <div class="row" data-bind="style: {opacity : sitesStatus() === 'downloading' ? 0.4 : 1}">
         <div class="col-12 col-md-6">
@@ -242,9 +217,6 @@
             <!-- /ko -->
         </div>
         <div class="col-12 col-md-6">
-            <div class="alert alert-info" role="alert">
-                <g:message code="pwa.map.download.help" args="${[grailsApplication.config.getProperty("pwa.maxAreaInKm")]}" />
-            </div>
             <form>
                 <div class="form-group">
                     <label for="map-area"><g:message code="pwa.map.area"/></label>
@@ -266,7 +238,9 @@
                     </div>
                 </div>
             </div>
-
+            <div class="alert alert-info" role="alert">
+                <g:message code="pwa.map.download.help" args="${[grailsApplication.config.getProperty("pwa.maxAreaInKm")]}" />
+            </div>
         </div>
     </div>
 
@@ -309,6 +283,29 @@
         </div>
     </div>
 
+    <h1 class="mt-5"><g:message code="pwa.offline.options"/></h1>
+    <h3 class="mt-3"><g:message code="pwa.species.download"/></h3>
+    <div class="row">
+        <div class="col-12">
+            <form>
+                <div class="form-group row">
+                    <label class="col-sm-4 col-form-label"><g:message code="pwa.species.download.offline"/></label>
+                    <div class="col-sm-8">
+                        <button type="submit" class="btn btn-primary" data-bind="click: clickSpeciesDownload, enable: speciesStatus() == 'downloaded'"><i class="fas fa-redo"></i> <g:message code="pwa.species.refresh"/></button>
+                    </div>
+                </div>
+            </form>
+            <div class="row" data-bind="slideVisible: showSpeciesProgressBar">
+                <div class="col-12">
+                    <h6><g:message code="pwa.map.download.species.progress"/> </h6>
+                    <div class="progress">
+                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-bind="style: {width: speciesDownloadPercentageComplete() + '%'}, text: speciesDownloadPercentageComplete() + '%'"></div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
     <!-- ko stopBinding: true -->
     <iframe id="form-content" style="opacity: 0" width="100%" height="25%"></iframe>
     <!-- /ko -->
@@ -330,7 +327,7 @@
 
 <script type="text/html" id="ChooseSites">
 <div class="modal hide fade" tabindex="-1">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-dialog-scrollable">
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title">Choose sites to download</h3>
@@ -340,10 +337,12 @@
             </div>
             <div class="modal-body">
                 <p><g:message code="pwa.sites.choose.download.msg"/></p>
-                <div class="row h-75" data-bind="foreach: sites">
-                    <div class="col-12 col-md-6 col-xl-4">
-                        <input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenSites"/>
-                        <span data-bind="text: name"></span>
+                <div class="row h-75 overflow-y" data-bind="foreach: sites">
+                    <div class="col-12">
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenSites, attr: {id: siteId}"/>
+                            <label class="form-check-label" data-bind="text: name, attr: {for: siteId}"></label>
+                        </div>
                     </div>
                 </div>
             </div>