addPoints UI changes

Author: Adam Collins

_Events.groovy

@@ -28,7 +28,7 @@ def build(String baseDir) {
                  'angular-ui-bootstrap/dist/ui-bootstrap-csp.css', 'bootbox/dist/bootbox.min.js', 'jquery/dist/jquery.min.js',
                  'ng-file-upload/dist/ng-file-upload.js', 'ngbootbox/dist/ngBootbox.min.js',
                  'bootstrap/dist/', 'leaflet/dist/', 'leaflet-draw/dist/', 'leaflet-measure/dist/', 'proj4/dist/proj4.js',
-                 'proj4leaflet/src/proj4leaflet.js', 'lz-string/libs/lz-string.min.js']
+                 'proj4leaflet/src/proj4leaflet.js', 'lz-string/libs/lz-string.min.js', 'angular-sanitize/angular-sanitize.min.js']
     files.each { name ->
         def dst = new File(baseDir + '/grails-app/assets/node_modules/' + name)
         dst.getParentFile().mkdirs()

grails-app/assets/javascripts/application.js

@@ -33,6 +33,7 @@
 //= require angular-slider/slider.js
 //= require angular-sortable/sortable.js
 //= require ng-file-upload/dist/ng-file-upload.min.js
+//= require angular-sanitize/angular-sanitize.min.js
 
 //bootbox
 //= require ngbootbox/dist/ngBootbox.min.js

grails-app/assets/javascripts/spApp/controller/addPointsCtrl.js

@@ -7,7 +7,7 @@
      * @description
      *   Add points to the map using spatial-service's sandbox services
      */
-    angular.module('add-points-ctrl', ['map-service', 'layers-service', 'predefined-areas-service'])
+    angular.module('add-points-ctrl', ['map-service', 'layers-service', 'predefined-areas-service', 'ngSanitize'])
         .controller('AddPointsCtrl', ['LayoutService', '$scope', 'MapService', '$timeout', 'LayersService',
             '$uibModalInstance', 'PredefinedAreasService', 'BiocacheService', 'LoggerService', 'data',
             function (LayoutService, $scope, MapService, $timeout, LayersService, $uibModalInstance, PredefinedAreasService, BiocacheService, LoggerService, inputData) {
@@ -37,6 +37,8 @@
                 $scope.sortType = 'date';
                 $scope.sortReverse = true;
 
+                $scope.instructions = $i18n(551, "Select a CSV or zipped CSV file.");
+
                 LayoutService.addToSave($scope);
 
                 $scope.init = function () {

grails-app/assets/javascripts/spApp/templates/addPointsContent.tpl.htm

@@ -20,7 +20,7 @@ <h3 i18n="558"  class="panel-title">Select method</h3>
                                                                     ng-change="method='upload'">Upload CSV</label></div>
                                 <div class="checkbox"><label><input type="radio" ng-model="method"
                                                                     value="existing" name="addPoints_method"
-                                                                    ng-change="method='existing'">Previous upload</label></div>
+                                                                    ng-change="method='existing'; file=null">Previous upload</label></div>
                             </div>
                             <br/>
                         </div>
@@ -95,13 +95,11 @@ <h3 i18n="561"  class="panel-title">Your uploads</h3>
                 <div class="panel panel-default" ng-show="step == 'default' && method == 'upload'">
                     <div class="panel-default">
                         <div class="panel-heading">
-                            <h3 i18n="550" class="panel-title">Upload a CSV file with occurrences.</h3>
+                            <h3 i18n="550" class="panel-title">Upload a CSV file with occurrences</h3>
                         </div>
 
                         <div class="panel-body">
-                            <div i18n="551">
-                                Select a CSV or zipped CSV file. Please note that for the records in a data set to be effectively discoverable and able to be mapped it needs to meet a minimum set of standards. Data needs to include, at a minimum: scientificName/vernacularName to identify the organism and eventDate, decimalLatitude and decimalLongitude to indicate where and when the occurrence happened. The data needs to have a unique identifier column - either catalogNumber or occurrenceID with a unique value for each record. The number of columns must match the number of column headers (problems with this often indicate commas and/or line breaks in the fields). Additional fields will increase the usability of the data.
-                            </div>
+                            <div id="pointsUploadInstructions" ng-bind-html="instructions"></div>
                             <br/>
                             <div>
                                 <div class="btn-group btn-group-sm">
@@ -144,7 +142,7 @@ <h3 i18n="556"  class="panel-title">Importing</h3>
                         </div>
 
                         <div class="panel-body">
-                            <div>{{status}} : {{message}}</div>
+                            <div style="display: flex"><div class="inline-spinner" style="margin-right:10px" ng-show="status != 'finished' && status != ''"></div>{{message}}</div>
 
                             <div ng-show="errorMsg" style="color: red">{{ errorMsg }}</div>
                             <br/>

grails-app/assets/stylesheets/spatial-hub-generic.css

@@ -3331,4 +3331,4 @@ img.map-icon {
 
 ul.errors {
     padding-top: 150px
-}
+}

grails-app/assets/stylesheets/spatial-hub.css

@@ -560,6 +560,14 @@ form.banner {
     left: 50%;
 }
 
+.inline-spinner {
+    background: url(../images/spinner.gif);
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    height: 16px;
+    width: 16px;
+}
+
 #legend {
     margin-right:0px;
 }

grails-app/i18n/messages.properties

@@ -584,8 +584,21 @@ Area\ Report\ -\ interactive=Area Report - interactive
 544=Select mapped species.
 545=Annotate your workflow
 546=Export points.
-550=CSV file with occurrences.
-551=Select a CSV or zipped CSV file. Please note that for the records in a data set to be effectively discoverable and able to be mapped it needs to meet a minimum set of standards. Data needs to include, at a minimum: scientificName/vernacularName to identify the organism and eventDate, decimalLatitude and decimalLongitude to indicate where and when the occurrence happened. The data needs to have a unique identifier column - either catalogNumber or occurrenceID with a unique value for each record. The number of columns must match the number of column headers (problems with this often indicate commas and/or line breaks in the fields). Additional fields will increase the usability of the data.
+550=CSV file with occurrences
+551=<p>Select a CSV or zipped CSV file. Please note that for the records in a data set to be effectively discoverable and able to be mapped it needs to meet a minimum set of standards.</p>\
+<p>Data needs to include, at a minimum:</p>\
+<ul>\
+<li><code>scientificName</code>/<code>vernacularName</code> to identify the organism</li>\
+<li><code>eventDate</code> to indicate when the occurrence happened</li>\
+<li><code>decimalLatitude</code> and <code>decimalLongitude</code> to indicate where the occurrence happened</li>\
+<li>A unique identifier column - either <code>catalogNumber</code> or <code>occurrenceID</code>, with a unique value for each record</li>\
+</ul>\
+\
+<p>Also note:</p>\
+<ul>\
+<li>The number of columns must match the number of column headers (problems with this often indicate commas and/or line breaks in the fields).</li>\
+<li>Additional fields will increase the usability of the data.</li>\
+</ul>
 552=Dataset name
 553=Prior uploads
 554=List of prior uploads

package-lock.json

@@ -37,6 +37,7 @@
     "angular-route": "1.5.8",
     "angular-touch": "1.5.8",
     "angular-ui-bootstrap": "^1.3.3",
+    "angular-sanitize": "1.5.8",
     "bootbox": "^5.0.1",
     "bootstrap": "3.4.1",
     "chromedriver": "89.0.0",