First-pass interactive record requesting UI

AtlasOfLivingAustralia · Mar 5, 2024 · d34caef · d34caef
1 parent 0f55923
commit d34caef
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 30 deletions.
diff --git a/grails-app/assets/javascripts/requestAssessmentRecordsModel.js b/grails-app/assets/javascripts/requestAssessmentRecordsModel.js
@@ -0,0 +1,35 @@
+//= require knockout/3.4.0/knockout-3.4.0.js
+//= require knockout/3.4.0/knockout-3.4.0.debug.js
+
+var RequestAssessmentRecordsModel = function(filterGroupMapping){
+    const self = this;
+    this.filters = Object.keys(filterGroupMapping);
+    this.selected = ko.observableArray([]);
+    this.deIdentify = ko.observable(false);
+    this.isLoading = ko.observable(false);
+
+    this.isFilterSelected = function(filter) {
+        return self.selected.indexOf(filter) > -1;
+    }
+
+    this.onFilterSelect = function(filter) {
+        // Only allow for user interaction if we're not already loading a request
+        if (!self.isLoading()) {
+            if (self.isFilterSelected(filter)) {
+                self.selected.remove(filter);
+            } else {
+                self.selected.push(filter);
+            }
+        }
+    }
+
+    this.onRequestRecords = function() {
+        // Update the loading flag
+        self.isLoading(true);
+
+        const selectedGroups = self.selected().map((filter) => filterGroupMapping[filter]);
+        const unique = Array.from(new Set(selectedGroups))
+
+        console.log(unique, self.deIdentify());
+    }
+}
diff --git a/grails-app/assets/stylesheets/reference-assessment.css b/grails-app/assets/stylesheets/reference-assessment.css
@@ -0,0 +1,23 @@
+
+
+.ref-assess-filters-list {
+    max-height: 200px;
+    overflow-y: scroll;
+}
+
+.ref-assess-filters-list > div {
+    cursor: pointer;
+}
+
+.ref-assess-filters-list > div.disabled {
+    cursor: default;
+}
+
+.ref-assess-identify-text {
+    font-family: 'Lato', sans-serif;
+    font-size: 18px;
+}
+
+.ref-assess-identify-card {
+    transition: all cubic-bezier(0, 0, 0.15, 1) 250ms;
+}
diff --git a/grails-app/conf/application.groovy b/grails-app/conf/application.groovy
@@ -679,8 +679,34 @@ script.read.extensions.list = ['js','min.js','png', 'json', 'jpg', 'jpeg']
 
 refAssess.hub = 'hcat'
 refAssess.title = 'Image Assessment'
-refAssess.reference.filterName = 'Vegetation Type'
-refAssess.reference.filterTypes = ['Vegetation Type One', 'Vegetation Type Two', 'Another Vegetation Type']
+refAssess.reference.filterName = 'vegetation groups'
+refAssess.reference.filterTypes = [
+        "Acacia Forests and Woodlands": "Open forest and woodland",
+        "Acacia Open Woodlands": "Shrublands",
+        "Acacia Shrublands": "Shrublands",
+        "Callitris Forests and Woodlands": "Open forest and woodland",
+        "Casuarina Forests and Woodlands": "Open forest and woodland",
+        "Chenopod Shrublands, Samphire Shrublands and Forblands": "Grasslands",
+        "Eucalypt Low Open Forests": "Open forest and woodland",
+        "Eucalypt Open Forests": "Open forest and woodland",
+        "Eucalypt Open Woodlands": "Open forest and woodland",
+        "Eucalypt Tall Open Forests": "Wet and closed forests and thickets",
+        "Eucalypt Woodlands": "Open forest and woodland",
+        "Heathlands": "Shrublands",
+        "Hummock Grasslands": "Grasslands",
+        "Low Closed Forests and Tall Closed Shrublands": "Shrublands",
+        "Mallee Open Woodlands and Sparse Mallee Shrublands": "Shrublands",
+        "Mallee Woodlands and Shrublands": "Shrublands",
+        "Mangroves": "Shrublands",
+        "Melaleuca Forests and Woodlands": "Open forest and woodland",
+        "Naturally Bare - sand, rock, claypan, mudflat": "Grasslands",
+        "Other Forests and Woodlands": "Open forest and woodland",
+        "Other Grasslands, Herblands, Sedgelands and Rushlands": "Grasslands",
+        "Other Shrublands": "Shrublands",
+        "Rainforests and Vine Thickets": "Wet and closed forests and thickets",
+        "Tropical Eucalypt Woodlands/Grasslands": "Open forest and woodland",
+        "Tussock Grasslands": "Grasslands"
+]
 refAssess.reference.projectActivityId = 'e0ce9fcc-77f2-4349-825f-9ea442c1c239'
 refAssess.assessment.projectActivityId = 'e61eb018-02a9-4e3b-a4b3-9d6be33d9cbb'
 refAssess.assessment.recordsToCreate = 3
diff --git a/grails-app/views/referenceAssessment/requestRecords.gsp b/grails-app/views/referenceAssessment/requestRecords.gsp
@@ -4,6 +4,9 @@
 <head>
     <meta name="layout" content="bs4"/>
     <title>${config.title}</title>
+
+    <asset:javascript src="requestAssessmentRecordsModel.js"/>
+    <asset:stylesheet src="reference-assessment.css" />
 </head>
 <body>
 <content tag="bannertitle">
@@ -12,39 +15,51 @@
 
 <div class="container" id="hubRequestAssessmentRecords">
     <div class="row my-4">
-        <div class="col-6">
+        <div class="col-12">
             <div class="f-flex flex-column h-100 p-3">
-                <h1>Step One</h1>
-                <h3 class="text-secondary">Select the type of assessment records you&apos;d like to assess</h3>
-                <div class="w-100 dropdown">
-                    <button class="btn btn-link btn-primary dropdown-toggle text-white w-100 mt-4" type="button" data-toggle="dropdown">
-                        <i class="fa fa-tree mr-2"></i>
-                        Select ${config.reference.filterName}
-                        <span class="caret"></span>
-                    </button>
-                    <ul class="dropdown-menu">
-                        <g:each in="${config.reference.filterTypes}" var="filterType">
-                            <li class="dropdown-item">
-                                <a class="dropdown-item-text user-select-none">
-                                    %{--<span class="fa fa-search"></span>--}%
-                                    ${filterType}
-                                </a>
-                            </li>
-                        </g:each>
-                    </ul>
+                <h2 class="text-secondary">Select the ${config.reference.filterName} you&apos;d like to assess</h2>
+                <div class="d-flex flex-column card bg-white ref-assess-filters-list">
+                    <!-- ko foreach: filters -->
+                    <div data-bind="click: $parent.onFilterSelect, css: { disabled: $parent.isLoading() }" class="d-flex flex-row dropdown-item align-items-center">
+                        <span data-bind="style: { opacity: $parent.isFilterSelected($data) ? 1 : 0 }" class="fa fa-check mr-3"></span>
+                        <p data-bind="text: $data" style="text-wrap: wrap; margin-bottom: 0px"></p>
+                    </div>
+                    <!-- /ko -->
                 </div>
             </div>
         </div>
         <div class="col-6">
-           <div class="d-flex flex-column w-100 h-100 p-3">
-               <h1>Step Two</h1>
-               <h3 class="text-secondary">Request the records</h3>
-               <a class="btn btn-primary mt-auto justify-self-end disabled mt-4">
-                   <i class="far fa-copy mr-2"></i>
-                   Request Records
-               </a>
-           </div>
+            <div class="py-3 pl-3">
+                <button type="button" data-bind="click: function() { deIdentify(false) }, css: { 'bg-secondary': !deIdentify() }, enable: !isLoading()" class="card w-100 d-flex flex-column px-4 py-3 ref-assess-identify-card">
+                    <span data-bind="css: { 'text-white': !deIdentify() }" class="fa fa-user fa-2x"></span>
+                    <span data-bind="css: { 'text-white': !deIdentify() }" class="mt-3 ref-assess-identify-text">Identify my data</span>
+                </button>
+            </div>
+        </div>
+        <div class="col-6">
+            <div class="py-3 pr-3">
+                <button type="button" data-bind="click: function() { deIdentify(true) }, css: { 'bg-secondary': deIdentify() }, enable: !isLoading()" class="card w-100 d-flex flex-column px-4 py-3 ref-assess-identify-card">
+                    <span data-bind="css: { 'text-white': deIdentify() }" class="fa fa-user-secret fa-2x"></span>
+                    <span data-bind="css: { 'text-white': deIdentify() }" class="mt-3 ref-assess-identify-text">De-identify my data</span>
+                </button>
+            </div>
+        </div>
+        <div class="col-12 pt-2">
+            <div class="d-flex justify-content-center p-3">
+                <button data-bind="click: onRequestRecords, css: {disabled: selected().length === 0 || isLoading()}, enable: selected().length > 0 && !isLoading()" class="btn btn-primary justify-self-end full-width">
+                    <i data-bind="visible: !isLoading()" class="far fa-copy mr-2"></i>
+                    <span data-bind="visible: isLoading()" class="fa fa-spin fa-spinner mr-2"></span>
+                    Request Records
+                </button>
+            </div>
+        </div>
     </div>
-</div>
+    <asset:script type="text/javascript">
+        const requestAssessmentRecordsVM = new RequestAssessmentRecordsModel(
+            <fc:modelAsJavascript model="${config.reference.filterTypes}" />
+        );
+
+        ko.applyBindings(requestAssessmentRecordsVM);
+    </asset:script>
 </body>
 </html>