feat(citizenScienceExamples): Added checkbox to example to attach tag…

…s to audio sample
QutEcoacoustics · Jun 3, 2017 · fb7270d · fb7270d
1 parent 04416f7
commit fb7270d
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 40 deletions.
diff --git a/src/app/citizenScience/bristlebird/bristlebird.js b/src/app/citizenScience/bristlebird/bristlebird.js
@@ -112,20 +112,12 @@ class BristlebirdController {
 
         this.showAudio = CitizenScienceCommon.bindShowAudio($scope);
 
-        $http.get(CitizenScienceCommon.apiUrl(
-            "labels",
-            $scope.csProject
-        )).then(function (response) {
-            if (Array.isArray(response.data)) {
-                $scope.labels = response.data;
-            } else {
-                $scope.labels = [];
-            }
-        });
-
-
+        CitizenScienceCommon.getLabels($scope.csProject).then(function (labels) {
 
+            console.log("labels received", labels);
 
+                $scope.labels = labels;
+        });
 
 
         /**

diff --git a/src/app/citizenScience/bristlebird/listen.tpl.html b/src/app/citizenScience/bristlebird/listen.tpl.html
@@ -52,7 +52,10 @@ <h2>Eastern Bristlebird Search
 
 
                 thumbs
-                <citizen-science-labels labels="labels"></citizen-science-labels>
+                <citizen-science-labels labels="labels"
+                                        samples="samples"
+                                        current-sample-num="currentSampleNum"
+                                        cs-project="csProject"></citizen-science-labels>
 
 
                 <!-- text-only labels

diff --git a/src/app/citizenScience/citizenScienceCommon.js b/src/app/citizenScience/citizenScienceCommon.js
@@ -96,6 +96,22 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
 
         };
 
+        self.initLabels = function (labels) {
+
+            // add the index (label number) to the label object
+            labels.forEach((label, index) => label.labelNumber = index);
+            return labels;
+
+        };
+
+
+        self.apiUrl = function () {
+            // convert to array
+            var args = Array.prototype.slice.call(arguments);
+            return [self.sheets_api_url].concat(args).join("/");
+        };
+
+
         self.functions = {
 
             getAudioModel: function () {
@@ -105,11 +121,7 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
             /**
              * Constructs a url for the api by concatenating url/arg1/arg2/arg3 etc
              */
-            apiUrl: function () {
-                // convert to array
-                var args = Array.prototype.slice.call(arguments);
-                return [self.sheets_api_url].concat(args).join("/");
-            },
+            apiUrl: self.apiUrl,
 
             /**
              * Converts an array of strings to an object where each key is the same as the val
@@ -199,9 +211,30 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
                 return showAudio;
 
 
+            },
+
+            getLabels: function (project) {
+
+
+                return $http.get(self.apiUrl(
+                    "labels",
+                    project
+                )).then(function (response) {
+
+                    var labels = [];
+                    if (Array.isArray(response.data)) {
+                        labels = self.initLabels(response.data);
+                    }
+
+                    return labels;
+                });
+
+
             }
 
 
+
+
         };
 
         return self.functions;

diff --git a/src/app/citizenScience/textLabels/labelCheck.js b/src/app/citizenScience/textLabels/labelCheck.js
@@ -0,0 +1,71 @@
+angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenScience.common"])
+    .component("labelCheck", {
+        templateUrl: "citizenScience/textLabels/labelCheck.tpl.html",
+        controller: [
+            "$scope",
+            "$http",
+            "CitizenScienceCommon",
+            function ($scope, $http, CitizenScienceCommon) {
+
+                //console.log("dataset progress component scope");console.log($scope);
+
+                var self = this;
+
+                /**
+                 * Add or remove the label num to the list of selected labels for this sample
+                 * Send the new set of labels to the dataset
+                 * Note, we can't guarantee the order that the api calls will reach the google sheet.
+                 * if the user adds and removes a label in quick succession, they might arrive out of order
+                 * resulting in the wrong labels being applied.
+                 * @param label string
+                 */
+                $scope.toggleLabel = function (labelNum) {
+
+                    var currentSample = self.samples[self.currentSampleNum];
+
+                    currentSample.labels[labelNum] = !currentSample.labels[labelNum];
+
+                    currentSample.done = true;
+
+                    var tags = self.labels.filter(function (value, index) {
+                        return currentSample.labels[index];
+                    }).map(function (value) {
+                        return value.tags;
+                    });
+
+                    var url = CitizenScienceCommon.apiUrl("setLabels",
+                        self.csProject,
+                        currentSample.name,
+                        currentSample.recordingId,
+                        currentSample.startOffset,
+                        CitizenScienceCommon.labelsAsString(tags));
+                    $http.get(url).then(function (response) {
+                        console.log(response.data);
+                    });
+
+                };
+
+                /**
+                 * Whether the label has been attached to the current sample
+                 * @param label Object
+                 * @returns Boolean
+                 */
+                $scope.labelSelected = function () {
+                    if(self.currentSampleNum === -1) {
+                        return false;
+                    }
+                    var currentSample = self.samples[self.currentSampleNum];
+
+                    return currentSample.labels[self.label.labelNumber];
+
+                };
+
+
+            }],
+        bindings: {
+            label: "=",
+            samples: "=",
+            currentSampleNum: "=",
+            csProject: "="
+        }
+    });
diff --git a/src/app/citizenScience/textLabels/labelCheck.tpl.html b/src/app/citizenScience/textLabels/labelCheck.tpl.html
@@ -0,0 +1,6 @@
+
+        <a  ng-click="toggleLabel(labelNumber)" class="main-button">
+        <i class="fa"
+           ng-class="{true: 'fa-check-square-o', false : 'fa-square-o'}[labelSelected(labelNumber)]"
+           aria-hidden="true"></i><span>{{label.name}}</span>
+        <a>
diff --git a/src/app/citizenScience/thumbLabels/examples.js b/src/app/citizenScience/thumbLabels/examples.js
@@ -1,7 +1,8 @@
 angular.module("bawApp.components.citizenScienceThumbLabels.examples",
     [
         "bawApp.citizenScience.common",
-        "bawApp.directives.scaleToFit"
+        "bawApp.directives.scaleToFit",
+        "bawApp.components.citizenScienceLabelCheck"
     ])
     .component("citizenScienceLabelExamples", {
         templateUrl: "citizenScience/thumbLabels/examples.tpl.html",
@@ -19,7 +20,7 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
                 $scope.currentExample = -1;
 
                 $scope.changeCurrentExample = function (labelNum, changeBy) {
-                    var l = self.examples.length;
+                    var l = self.label.examples.length;
                     // add changeBy and wrap if the result is larger than length
                     $scope.currentExample = (($scope.currentExample + changeBy % l) + l) % l;
                     console.log("changed cur example for label " + self.label + " to " + $scope.currentExample);
@@ -30,7 +31,7 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
                  * initialises curExample after examples have been loaded (they are loaded async)
                  */
                 $scope.$watch(function () {
-                    return self.examples;
+                    return self.label.examples;
                 }, function (newValue, oldValue) {
 
                     if (Array.isArray(newValue)) {
@@ -46,7 +47,7 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
 
                 $scope.$watch("currentExample", function (newVal, oldVal) {
 
-                    console.log("self.examples[$scope.currentExample].annotation",self.examples[$scope.currentExample].annotation);
+                    console.log("self.examples[$scope.currentExample].annotation",self.label.examples[$scope.currentExample].annotation);
 
                 });
 
@@ -57,8 +58,9 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
 
             }],
         bindings: {
-            examples: "=",
-            name: "="
+            label: "=",
+            samples: "=",
+            currentSampleNum: "="
         }
     }).directive("centerInWindow", ["$window", function ($window) {
 

diff --git a/src/app/citizenScience/thumbLabels/examples.tpl.html b/src/app/citizenScience/thumbLabels/examples.tpl.html
@@ -3,7 +3,12 @@
 
     <h3>
         <i class="fa fa-arrow-left arrow prev" aria-hidden="true" ng-click="changeCurExample(key, -1)"  ng-if="annotations.length>1"></i>
-        <span>{{$ctrl.name}} example{{(annotations.length) > 1 ? 's' : ''}}</span>
+        <span>{{$ctrl.label.name}} example{{(annotations.length) > 1 ? 's' : ''}}</span>
+        <label-check label="$ctrl.label"
+                     samples="$ctrl.samples"
+                     currentSampleNum="$ctrl.currentSampleNum"
+                     csProject="$ctrl.csProject"
+                     ></label-check>
         <i class="fa fa-arrow-right arrow next" aria-hidden="true" ng-click="changeCurExample(key, 1)" ng-if="annotations.length>1"></i>
     </h3>
 
@@ -16,7 +21,7 @@ <h3>
 -->
 
     <div class="citizen-science-thumb-example">
-        <annotation-item annotation="$ctrl.examples[currentExample].annotation"></annotation-item>
+        <annotation-item annotation="$ctrl.label.examples[currentExample].annotation"></annotation-item>
     </div>
 
 </div>
diff --git a/src/app/citizenScience/thumbLabels/label.js b/src/app/citizenScience/thumbLabels/label.js
@@ -12,22 +12,22 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label",
                 var self = this;
 
                 $scope.selected = function () {
-                    return self.selectedLabelNum.value === self.labelNum;
+                    return self.selectedLabelNum.value === self.label.labelNumber;
                 };
 
 
                 $scope.toggleSelected = function () {
 
-                    console.log("toggling state for label number", self.labelNum);
+                    console.log("toggling state for label number", self.label.labelNumber);
 
                     console.log("old selected label num:", self.selectedLabelNum.value);
 
                     //$scope.selected = self.onToggleSelected(self.labelNum);
 
-                    if (self.selectedLabelNum.value === self.labelNum) {
+                    if (self.selectedLabelNum.value === self.label.labelNumber) {
                         self.selectedLabelNum.value = -1;
                     } else {
-                        self.selectedLabelNum.value = self.labelNum;
+                        self.selectedLabelNum.value = self.label.labelNumber;
                         $scope.$emit("examples-position", ($element[0].offsetTop));
                     }
 
@@ -39,13 +39,13 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label",
             }],
         bindings: {
 
-            labelNum: "<",
-
             label: "=",
-
             onToggleSelected: "<",
+            selectedLabelNum: "=",
 
-            selectedLabelNum: "="
+            samples: "=samples",
+            currentSampleNum: "=currentSampleNum",
+            csProject: "=csProject"
 
 
         }

diff --git a/src/app/citizenScience/thumbLabels/label.tpl.html b/src/app/citizenScience/thumbLabels/label.tpl.html
@@ -7,9 +7,11 @@
 
     <citizen-science-label-examples
             center-in-window
-            name="$ctrl.label.name"
-            examples="$ctrl.label.examples"
+            label="$ctrl.label"
             ng-if="selected()"
+            samples="$ctrl.samples"
+            currentSampleNum="$ctrl.currentSampleNum"
+            csProject="$ctrl.csProject"
     ></citizen-science-label-examples>
 
 </div>
diff --git a/src/app/citizenScience/thumbLabels/labels.js b/src/app/citizenScience/thumbLabels/labels.js
@@ -126,6 +126,9 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
 
             }],
         bindings: {
-            labels: "=labels",
+            labels: "=",
+            samples: "=",
+            currentSampleNum: "=",
+            csProject: "="
         }
     });
diff --git a/src/app/citizenScience/thumbLabels/labels.tpl.html b/src/app/citizenScience/thumbLabels/labels.tpl.html
@@ -2,13 +2,17 @@
 <div class="thumb-labels-container">
 
     <citizen-science-label
-            ng-repeat="(key,label) in $ctrl.labels"
+            ng-repeat="label in $ctrl.labels"
             class="label-thumbs"
             ng-if="label.examples.length"
             label="label"
-            label-num="key"
             selected-label-num="selectedLabelNum"
-            on-toggle-selected="onToggleSelected"></citizen-science-label>
+            on-toggle-selected="onToggleSelected"
+            samples="$ctrl.samples"
+            currentSampleNum="$ctrl.currentSampleNum"
+            csProject="$ctrl.csProject"
+
+    ></citizen-science-label>