Merge pull request #320 from QutBioacoustics/cs-label-status-on-thumb

Cs label status on thumb

src/app/annotationLibrary/common.js

@@ -47,7 +47,7 @@ angular
 
                 var x = Media.get(
                     getMediaParameters(annotation),
-                    mediaGetSuccess.bind(null,annotation),
+                    mediaGetSuccess.bind(null, annotation),
                     mediaGetFailure
                 );
 

src/app/annotationLibrary/libraryItem.tpl.html

@@ -20,7 +20,7 @@ <h3 class="panel-title pull-left">Details</h3>
                            ng-href="{{tagging.tag.similarPartial}}"
                            title="Tag.">
                             <span class="glyphicon glyphicon-tags"></span>&nbsp;
-                            <span class="badge">{{tagging.tag.typeOfTag.replace('_',' ')}}</span>
+                            <span class="badge">{{tagging.tag.typeOfTag.replace('_', ' ')}}</span>
                             <span class="badge" ng-show="tagging.tag.retired">retired</span>
                             <span class="badge" ng-show="tagging.tag.isTaxanomic">taxonomic</span>
                             {{tagging.tag.text}} (ID {{tagging.tag.id}})

src/app/annotationViewer/_annotationViewer.scss

@@ -126,7 +126,7 @@ baw-annotation-viewer {
       z-index: 2;
 
       // debug
-      // @if $DEBUG { background-color: rgba(255,0,0,0.15) ;}
+      // @if $DEBUG { background-color: rgba(255, 0, 0, 0.15) ;}
 
       // required for IE10
       background-color: rgba(255, 255, 255, 0);

src/app/annotationViewer/gridLines/_gridLines.scss

@@ -106,7 +106,7 @@ $scale-background:  #f5f5f5; //#7eff5f
   & .yTitle {
     @include scale-title-base;
 
-    @include vendor-prefix(transform, translateX(-100%) rotate3d(0,0,1,-90deg) translateX(50%));
+    @include vendor-prefix(transform, translateX(-100%) rotate3d(0, 0, 1, -90deg) translateX(50%));
     @include vendor-prefix(transform-origin, 100% 0%);
 
 

src/app/app.js

@@ -154,7 +154,7 @@ angular.module("baw",
                  * to /something/:foo/:bar
                  */
                 function convertRouteParams (route) {
-                    return route.replace(/}/g,"").replace(/{/g,":");
+                    return route.replace(/}/g, "").replace(/{/g, ":");
                 }
 
                 // routes

src/app/audio/ngAudio.js

@@ -169,7 +169,7 @@ angular.module("bawApp.directives.ngAudio", [
 
                         target.currentState = event && event.type || "unknown";
 
-                        updateObject(element ,target);
+                        updateObject(element, target);
 
                         target.isPlaying = !element.paused;
                         target.canPlay = element.readyState >= readyStates.haveFutureData;

src/app/citizenScience/bristlebird/bristlebird.js

@@ -71,9 +71,9 @@ class BristlebirdController {
          *      "name": "Eastern Bristlebird",
          *      "examples": [{
          *          "annotationId": 124730
-         *      },{
+         *      }, {
          *          "annotationId": 124727
-         *      },{
+         *      }, {
          *           "annotationId": 98378
          *       }]
          *   },
@@ -100,33 +100,12 @@ class BristlebirdController {
 
         this.showAudio = CitizenScienceCommon.bindShowAudio($scope);
 
-
-
         CsApi.getLabels($scope.csProject).then(function (labels) {
             $scope.labels = labels;
         });
 
         SampleLabels.init($scope.csProject, $scope.samples, $scope.labels);
 
-
-        $scope.$on("label-toggle", function (e, labelNumber, value) {
-            self.toggleLabel(labelNumber, value);
-        });
-
-        /**
-         * applies or removes the tag-sets of the given label number
-         * to the current sample
-         * @param labelNumber
-         * @param value boolean if omitted will flip the current value
-         */
-        self.toggleLabel = function (labelId, value) {
-            console.log("toggling label ", labelId, value);
-            if (typeof value !== "boolean") {
-                value = !SampleLabels.getValue($scope.currentSample.id, labelId);
-            }
-            SampleLabels.setValue($scope.currentSample.id, labelId, value);
-        };
-
         /**
          * Retrieve settings about this citizen science project
          */

src/app/citizenScience/citizenScience.js

@@ -1,5 +1,5 @@
 angular
-    .module("bawApp.citizenScience",[
+    .module("bawApp.citizenScience", [
         "bawApp.citizenScience.bristlebird",
         "bawApp.citizenScience.ipswich",
     ])

src/app/citizenScience/datasetProgress/datasetProgress.js

@@ -1,19 +1,18 @@
 angular.module("bawApp.components.progress", ["bawApp.citizenScience.csApiMock"])
-    .component("datasetProgress",{
+    .component("datasetProgress", {
         templateUrl: "citizenScience/datasetProgress/datasetProgress.tpl.html",
-        controller: ["$scope", "$routeParams","$url", "conf.paths","CsApi","SampleLabels",
-            function ($scope, $routeParams,$url,paths,CsApi,SampleLabels) {
+        controller: ["$scope", "$routeParams", "$url", "conf.paths", "CsApi", "SampleLabels",
+            function ($scope, $routeParams, $url, paths, CsApi, SampleLabels) {
 
             var self = this;
             $scope.selectItem = function (itemId) {
                 console.log("selecting item", itemId);
                 CsApi.getSample(itemId).then(function (apiResponse) {
                     self.currentSample = apiResponse;
+                    SampleLabels.registerCurrentSampleId(self.currentSample.id);
+                    $scope.totalSamplesViewed = SampleLabels.getNumSamplesViewed();
+                    console.log("setting selected to ", itemId);
                 });
-
-                $scope.totalSamplesViewed = SampleLabels.getNumSamplesViewed();
-
-                console.log("setting selected to ", itemId);
             };
 
             $scope.selectItem($routeParams.sampleNum);

src/app/citizenScience/dummyApi/citizenScienceSampleLabels.js

@@ -45,6 +45,8 @@ sampleLabels.factory("SampleLabels", [
 
         };
 
+        self.currentSampleId = 0;
+
         /**
          * stringifies the object that acts as a join between samples and labels,
          * then stores that json string in local storage
@@ -76,12 +78,16 @@ sampleLabels.factory("SampleLabels", [
             /**
              * Looks up the data to see if there is a boolean value stored for a given sampleId and labelId
              * and if so, returns it.
-             * @param sampleId
+             * @param sampleId. If omitted, will use the current sample if available
              * @param labelId
              * @returns {boolean}
              */
             getValue : function (sampleId, labelId) {
 
+                if (sampleId === null) {
+                    sampleId = self.currentSampleId;
+                }
+
                 if (self.data[sampleId] !== undefined) {
                     if (self.data[sampleId][labelId] !== undefined) {
                         return self.data[sampleId][labelId].value;
@@ -92,17 +98,26 @@ sampleLabels.factory("SampleLabels", [
 
             /**
              * updates the value of a labelId applied to a sampleId as either true or false
-             * @param sampleId int
+             * @param sampleId int; if null, will use the current sample id
              * @param labelId int; if omitted, we are not applying a label but noting that the sample has been viewed
              * @param value int [0,1]
              */
             setValue : function (sampleId, labelId, value) {
 
+
+                if (sampleId === null) {
+                    sampleId = self.currentSampleId;
+                }
+
+                if (sampleId <= 0) {
+                    console.warn("bad sampleId supplied");
+                    return;
+                }
+
                 if (self.data[sampleId] === undefined) {
                     self.data[sampleId] = {};
                 }
 
-
                 if (labelId !== undefined) {
 
                     if (self.data[sampleId][labelId] === undefined) {
@@ -150,6 +165,10 @@ sampleLabels.factory("SampleLabels", [
 
             },
 
+            registerCurrentSampleId : function (currentSampleId) {
+                self.currentSampleId = currentSampleId;
+            },
+
             /**
              * Dev function to delete all applied labels
              */

src/app/citizenScience/examples/_examples.scss

@@ -13,12 +13,12 @@
   background: #fff;
 
   border-radius: 5px;
-  -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
-  -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
-  box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
+  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
 
   .dark {
-    background: rgba(0,0,0,0.7);
+    background: rgba(0, 0, 0, 0.7);
   }
 
   &.selected {

src/app/citizenScience/textLabels/labelCheck.js

@@ -13,14 +13,13 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci
                  * @param label string
                  */
                 $scope.toggleLabel = function () {
-                    self.checked.value = !self.checked.value;
-                    self.onToggleSelected(self.checked.value);
+                    self.onToggleSelected(!self.isChecked());
                 };
 
             }],
         bindings: {
-            checked: "=",
+            isChecked: "=",
             onToggleSelected: "=",
-            text:"<"
+            text:"<",
         }
     });

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

@@ -2,7 +2,7 @@
     <span>
         <a ng-click="toggleLabel()" class="main-button">
         <i class="fa"
-           ng-class="{true: 'fa-check-square-o', false : 'fa-square-o'}[$ctrl.checked.value]"
+           ng-class="$ctrl.isChecked() ? 'fa-check-square-o' : 'fa-square-o'"
            aria-hidden="true"></i><span>{{$ctrl.text}}</span>
         <a>
     </span>

src/app/citizenScience/thumbLabels/_thumbs.scss

@@ -5,7 +5,7 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
 .thumb-labels-container {
   text-align: center;
   margin-top: 10px;
-  background: rgba(0,0,0,0.3);
+  background: rgba(0, 0, 0, 0.3);
   position: relative;
 
   /* flexbox layout of thumbs */
@@ -18,16 +18,14 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
     position: relative;
     z-index: 51;
 
-    &.selected {
+    &.active {
 
       /* make room under the row for the info */
       padding-bottom: 400px;
 
       .citizen-science-thumb {
 
-        position: relative;
-
-        outline: rgba(255,255,255,0.5) solid 2px;
+        outline: rgba(255, 255, 255, 0.5) solid 2px;
 
         &:after {
           content: url("data:image/svg+xml;utf8,#{$triangle}");
@@ -43,24 +41,32 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
     }
 
     .citizen-science-thumb {
+      position: relative;
       height: $thumb-height + px;
       margin: 5px;
 
       img {
         height: 100%;
       }
 
+      .thumb-tick {
+        position: absolute;
+        top:5px;
+        right:8px;
+        color: #fff;
+        text-shadow: 1px 1px 2px #000;
+      }
+
     }
 
     citizen-science-label-examples {
 
       position: absolute;
       z-index: 50;
-      box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.3);
+      box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.3);
       border-radius: 5px;
       background: #fff;
       padding: 5px;
-
       top: ($thumb-height + 10) + px;
 
     }

src/app/citizenScience/thumbLabels/examples.js

@@ -26,7 +26,6 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
                     console.log("changed cur example for label " + self.label + " to " + $scope.currentExample);
                 };
 
-
                 /**
                  * initialises curExample after examples have been loaded (they are loaded async)
                  */

src/app/citizenScience/thumbLabels/label.js

@@ -1,17 +1,25 @@
 angular.module("bawApp.components.citizenScienceThumbLabels.label",
     [
-        "bawApp.components.citizenScienceThumbLabels.examples"
+        "bawApp.components.citizenScienceThumbLabels.examples",
+        "bawApp.citizenScience.sampleLabels"
     ])
     .component("citizenScienceLabel", {
         templateUrl: "citizenScience/thumbLabels/label.tpl.html",
         controller: [
             "$scope",
-            "$element",
-            function ($scope, $element) {
+            "SampleLabels",
+            function ($scope, SampleLabels) {
+
+                /**
+                 * A label is "selected" if it has been applied to the current sample
+                 * A label is "active" if it has been clicked to show details
+                 */
 
                 var self = this;
 
-                $scope.selected = { value: false };
+                $scope.isSelected = function() {
+                    return SampleLabels.getValue(null, self.label.id);
+                };
 
                 $scope.isShowingDetails = function () {
                     return self.currentDetailsLabelId.value === self.label.id;
@@ -21,33 +29,23 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label",
                  * toggles whether the details pane is showing for the current label
                  */
                 $scope.toggleShowDetails = function () {
-                    console.log("one");
                     if ($scope.isShowingDetails()) {
                         self.currentDetailsLabelId.value = -1;
                     } else {
                         self.currentDetailsLabelId.value = self.label.id;
                     }
                     console.log("showing details for label:", self.currentDetailsLabelId.value);
+
                 };
 
                 /**
                  * callback when this label is either attached or detached from the current sample
                  * @param isSelected Boolean
                  */
                 self.onToggleSelected = function (isSelected) {
-                    console.log("label ", self.label.name, "selected value for sample x set to", isSelected);
-                    $scope.$emit("label-toggle", self.label.id, isSelected);
-
+                    SampleLabels.setValue(null, self.label.id, isSelected);
                 };
 
-                $scope.$on("update-selected-labels", function (e, labelSelections) {
-                    if (labelSelections[self.label.id] === undefined) {
-                        $scope.selected.value = false;
-                    } else {
-                        $scope.selected.value = labelSelections[self.label.id].value;
-                    }
-                });
-
             }],
         bindings: {