feat(citizenScienceExamples): binding to checkbox value to label stat…

…us for current sample, plus checkbox styling

src/app/citizenScience/bristlebird/bristlebird.js

@@ -120,6 +120,49 @@ class BristlebirdController {
         });
 
 
+        $scope.$on("label-toggle", function (e, labelNumber, value) {
+            self.toggleLabel(labelNumber, value);
+        });
+
+
+        /**
+         * applies or removes the tag-sets from the given label number
+         * to the current sample
+         * @param labelNumber
+         */
+        self.toggleLabel = function (labelNumber, value) {
+
+            console.log("toggling lable ", labelNumber, value);
+            var currentSample = $scope.samples[$scope.currentSampleNum];
+            if (typeof value === "boolean") {
+                currentSample.labels[labelNumber] = value;
+            } else {
+                currentSample.labels[labelNumber] = !currentSample.labels[labelNumber];
+            }
+
+            currentSample.done = true;
+
+            var tags = $scope.labels.filter(function (value, index) {
+                return currentSample.labels[index];
+            }).map(function (value) {
+                return value.tags;
+            });
+
+            console.log("new tags for sample: ", CitizenScienceCommon.labelsAsString(tags));
+
+            var url = CitizenScienceCommon.apiUrl("setLabels",
+                $scope.csProject,
+                currentSample.name,
+                currentSample.recordingId,
+                currentSample.startOffset,
+                CitizenScienceCommon.labelsAsString(tags));
+            $http.get(url).then(function (response) {
+                console.log(response.data);
+            });
+
+        };
+
+
         /**
          * Get settings from sheet
          */
@@ -133,18 +176,28 @@ class BristlebirdController {
             }
         });
 
-        /**
-         * Sets the current sample to sampleNum
-         * @param sample_num int the index of the samples array of json objects
-         */
-        $scope.goToSample = function (sampleNum) {
-            if (sampleNum < $scope.samples.length) {
-                $scope.currentSampleNum = sampleNum;
-            } else {
-                console.log("can't go to next sample because this is the last one");
-            }
+        // /**
+        //  * Sets the current sample to sampleNum
+        //  * @param sample_num int the index of the samples array of json objects
+        //  */
+        // $scope.goToSample = function (sampleNum) {
+        //     if (sampleNum < $scope.samples.length && sampleNum >= 0) {
+        //         $scope.currentSampleNum = sampleNum;
+        //
+        //
+        //
+        //
+        //     } else {
+        //         console.log("can't go to next sample because this is the last one");
+        //     }
+        //
+        // };
+
+
+
+
+
 
-        };
 
         /**
          * When the currentSampleNum changes, change the current audio file / spectrogram to match it
@@ -156,6 +209,9 @@ class BristlebirdController {
                 self.showAudio(currentSample.recordingId, currentSample.startOffset, self.sampleDuration);
                 var backgroundPath = self.backgroundPaths[$scope.currentSampleNum % (self.backgroundPaths.length - 1)];
                 backgroundImage.currentBackground = backgroundPath;
+
+                $scope.$broadcast("update-selected-labels", $scope.samples[$scope.currentSampleNum].labels);
+
             }
         });
 

src/app/citizenScience/citizenScienceCommon.js

@@ -168,7 +168,8 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
                             var samples = response.data;
                             $scope.samples = samples;
                             self.initSampleLabels($scope.samples, $scope.labels);
-                            $scope.goToSample(0);
+                            //$scope.goToSample(0);
+                            $scope.currentSampleNum = 0;
                         });
                     }
                 };

src/app/citizenScience/textLabels/_citizenScienceLabels.scss

@@ -1,14 +1,22 @@
 
 .citizen-science {
 
-  #label-buttons {
 
+  #label-buttons {
     background: rgba(0, 0, 0, 0.6);
     width: 400px;
     margin: 0px auto 0px auto;
     text-align: center;
     border-radius: 8px;
     padding: 0px 20px 20px 20px;
+  }
+
+
+
+
+
+  #label-buttons, .label-check {
+
 
     a {
 
@@ -21,15 +29,14 @@
       font-size: 18px;
       cursor: pointer;
       line-height: 1em;
-      color: #fff;
 
       &.main-button {
 
         &:hover {
-          color: #eee;
+          color: #333;
 
           .checkbox {
-            border-color: #eee;
+            border-color: #333;
           }
 
         }

src/app/citizenScience/textLabels/labelCheck.js

@@ -3,14 +3,18 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci
         templateUrl: "citizenScience/textLabels/labelCheck.tpl.html",
         controller: [
             "$scope",
-            "$http",
-            "CitizenScienceCommon",
-            function ($scope, $http, CitizenScienceCommon) {
+            function ($scope) {
 
-                //console.log("dataset progress component scope");console.log($scope);
 
                 var self = this;
+                console.log("label check box for label ", self.label);
 
+
+                // /**
+                //  * Whether the label has been attached to the current sample
+                //  */
+                // $scope.isChecked = false;
+                //
                 /**
                  * Add or remove the label num to the list of selected labels for this sample
                  * Send the new set of labels to the dataset
@@ -19,53 +23,18 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci
                  * 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];
-
+                $scope.toggleLabel = function () {
+                    //$scope.isChecked = !$scope.isChecked;
+                    //self.onToggle($scope.isChecked);
+                    self.checked.value = !self.checked.value;
+                    self.onToggleSelected(self.checked.value);
                 };
 
 
             }],
         bindings: {
-            label: "=",
-            samples: "=",
-            currentSampleNum: "=",
-            csProject: "="
+            checked: "=",
+            onToggleSelected: "=",
+            text:"<"
         }
     });

src/app/citizenScience/textLabels/labelCheck.tpl.html

@@ -1,6 +1,11 @@
 
-        <a  ng-click="toggleLabel(labelNumber)" class="main-button">
+<div class="label-check">
+        <span>
+
+        <a  ng-click="toggleLabel()" 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>
+           ng-class="{true: 'fa-check-square-o', false : 'fa-square-o'}[$ctrl.checked.value]"
+           aria-hidden="true"></i><span>{{$ctrl.text}}</span>
         <a>
+                </span>
+</div>

src/app/citizenScience/thumbLabels/examples.js

@@ -6,6 +6,7 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
     ])
     .component("citizenScienceLabelExamples", {
         templateUrl: "citizenScience/thumbLabels/examples.tpl.html",
+        transclude: true,
         controller: [
             "$scope",
             "$http",
@@ -17,6 +18,7 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
 
                 var self = this;
 
+
                 $scope.currentExample = -1;
 
                 $scope.changeCurrentExample = function (labelNum, changeBy) {
@@ -59,8 +61,6 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
             }],
         bindings: {
             label: "=",
-            samples: "=",
-            currentSampleNum: "="
         }
     }).directive("centerInWindow", ["$window", function ($window) {
 
@@ -69,23 +69,16 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
                 link: function (scope, $element) {
 
                     var el = $element[0];
-
                     function recenter (){
-
                         if (!el || !el.offsetParent) {
                             return;
                         }
-
                         var offset = el.offsetParent.getBoundingClientRect().left;
-
                         el.style.width = $window.innerWidth - 50 + "px";
-
                         el.style.left = (15-offset) + "px";
-
                     }
 
                     recenter();
-
                     angular.element($window).bind("resize", recenter);
 
                 }

src/app/citizenScience/thumbLabels/examples.tpl.html

@@ -1,24 +1,11 @@
 
 <div class="label-examples-annotations">
 
-    <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.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>
+    <ng-transclude></ng-transclude>
+
+    <i class="fa fa-arrow-left arrow prev" aria-hidden="true" ng-click="changeCurExample(key, -1)"  ng-if="annotations.length>1"></i>
+    <i class="fa fa-arrow-right arrow next" aria-hidden="true" ng-click="changeCurExample(key, 1)" ng-if="annotations.length>1"></i>
 
-<!--
-    <div ng-repeat="(key,annotation) in annotations">
-        <div class="citizen-science-thumb-example" ng-class="{selected : (key === $ctrl.curExample)}">
-            <annotation-item annotation="annotation"></annotation-item>
-        </div>
-    </div>
--->
 
     <div class="citizen-science-thumb-example">
         <annotation-item annotation="$ctrl.label.examples[currentExample].annotation"></annotation-item>