feat(citSci): added ability to have text fields in questions

src/app/citizenScience/citizenScienceCommon.js

@@ -49,22 +49,6 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
 
         self.mediaModel = null;
 
-        /**
-         * Checks if a tag or array of tags is the same
-         * @param tags1 mixed string or array of strings
-         * @param tags2 mixed string or array of strings
-         */
-        self.compareTags = function (tags1, tags2) {
-            if (Array.isArray(tags1)) {
-                tags1 = tags1.sort().join("");
-            }
-            if (Array.isArray(tags2)) {
-                tags2 = tags2.sort().join("");
-            }
-            return tags1 === tags2;
-        };
-
-
 
         self.functions = {
 
@@ -88,17 +72,6 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
                 return labelObject;
             },
 
-            /**
-             * Encode the array of labels as json
-             * @TODO: rename this to tags. Each label can have multiple tags.
-             * so this will be 2d array, outer array is labels and each label is an array of tags.
-             * @param labels array
-             * @returns String
-             */
-            labelsAsString: function (labels) {
-                return JSON.stringify(labels);
-            },
-
 
             /**
              * Returns a function that sets the media member of the scope to the
@@ -128,7 +101,6 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
                         }
                     );
 
-                    // do not block, do not wait for Media requests to finish
                     return;
 
                 };

src/app/citizenScience/examples/example.js

@@ -10,8 +10,6 @@ angular.module("bawApp.components.citizenScienceExample", ["bawApp.citizenScienc
             "baw.models.AudioEvent",
             function ($scope, $http, CitizenScienceCommon, libraryCommon, AudioEventService, AudioEvent) {
 
-                console.log("hello example");
-
                 $scope.myName = "example";
 
                 var self = this;
@@ -46,7 +44,6 @@ angular.module("bawApp.components.citizenScienceExample", ["bawApp.citizenScienc
                                 position: 0
                             };
 
-
                         },
                         function annotationShowError(httpResponse) {
                             console.error("Failed to load citizen science example item response.", httpResponse);

src/app/citizenScience/labels/_citizenScienceLabels.scss

@@ -0,0 +1,12 @@
+
+.citizen-science {
+
+  .labels-wrapper {
+
+    background: rgba(0,0,0,0.7);
+    padding-top: 10px;
+
+  }
+
+}
+

src/app/citizenScience/labels/citizenScienceLabels.js

@@ -2,7 +2,8 @@ var csLabels = angular.module("bawApp.citizenScience.csLabels", [
     "bawApp.citizenScience.common",
     "bawApp.components.citizenScienceThumbLabels",
     "bawApp.components.citizenScienceTextLabels",
-    "bawApp.citizenScience.sampleLabels"
+    "bawApp.citizenScience.sampleLabels",
+    "bawApp.components.citizenScienceUserInput"
 ]);
 
 
@@ -13,10 +14,13 @@ csLabels.component("citizenScienceLabels", {
             "SampleLabels",
             function ($scope, SampleLabels) {
 
-                var self = this;
 
-                console.log(self);
+                $scope.question = SampleLabels.question;
 
+                /**
+                 * When the labels are updated (question data retrieved from the server)
+                 * set up the labels and userInput UI
+                 */
                 $scope.$watch(SampleLabels.getLabels, function (newVal, oldVal) {
 
                     if (typeof(newVal) === "object") {
@@ -31,13 +35,20 @@ csLabels.component("citizenScienceLabels", {
                             $scope.labelType = "text";
                         }
 
+
+                        // // assume that when labels change fields also changes.
+                        // $scope.fields = SampleLabels.getFields();
+
                         $scope.labels = newVal;
                     }
 
                 }, true);
 
+
+
             }],
         bindings: {
         }
     });
 
+

src/app/citizenScience/labels/labels.tpl.html

@@ -1,11 +1,10 @@
+<div class="labels-wrapper">
+    <citizen-science-thumb-labels ng-if="labelType=='thumb'" labels="labels"></citizen-science-thumb-labels>
 
+    <citizen-science-text-labels ng-if="labelType=='yesno' || labelType=='text'" labels="labels"></citizen-science-text-labels>
 
-
-<citizen-science-thumb-labels ng-if="labelType=='thumb'" labels="labels"></citizen-science-thumb-labels>
-
-
-
-<citizen-science-text-labels ng-if="labelType=='yesno' || labelType=='text'" labels="labels"></citizen-science-text-labels>
+    <citizen-science-user-input fields="question.fields"></citizen-science-user-input>
+</div>
 
 
 

src/app/citizenScience/labels/textLabels/_citizenScienceLabels.scss → src/app/citizenScience/labels/textLabels/_textLabels.scss

@@ -1,16 +1,16 @@
 
 .citizen-science {
 
-  #label-buttons {
-    background: rgba(0, 0, 0, 0.6);
+
+  #text-label-wrapper {
     width: 400px;
     margin: 0px auto 0px auto;
     text-align: center;
     border-radius: 8px;
     padding: 0px 20px 20px 20px;
   }
 
-  #label-buttons, .label-check {
+  .label-check {
 
     padding-top: 8px;
 

src/app/citizenScience/labels/textLabels/label.js

@@ -17,9 +17,7 @@ angular.module("bawApp.components.citizenScienceTextLabels.label",
 
                 $scope.state = "empty";
 
-
                 $scope.$watch("state", function (newVal, oldVal) {
-                    console.log(newVal);
                     SampleLabels.setValue($scope.state, self.label.id);
                 });
 

src/app/citizenScience/labels/textLabels/labelCheck.js

@@ -11,7 +11,7 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci
                  * There are 4 possible states for the label, yes, no, maybe and empty.
                  * Empty a bit like no. With no, it's been explicitly set as no,
                  * whereas with empty it is the default state, not yet explicitly set. Once the state is changed from
-                 * empty it can never be empty again.
+                 * empty it can never be empty again, except when the bound $ctrl.state changes (e.g. on new segment).
                  * There are two view variations for this: expanded or not
                  * With expanded, the label will have 'yes', 'no' and 'maybe' checkboxes separately
                  * With not expanded, there is one checkbox that cycles between yes, maybe and no
@@ -26,8 +26,6 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci
                  */
                 $scope.toggleLabel = function (stateIndex) {
 
-                    console.log(self.state);
-
                     if (typeof stateIndex !== "number") {
                         // no new stateIndex supplied so cycle through the states, excluding zero
                         stateIndex = ($scope.stateIndex + 1);
@@ -59,6 +57,7 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci
                 $scope.stateIndexes = [1,2,3];
 
 
+                // watch the state so that we can empty it when
                 $scope.$watch(function () {
                     return self.state;
                     }, function (newVal, oldVal) {

src/app/citizenScience/labels/textLabels/labels.js

@@ -13,7 +13,9 @@ angular.module("bawApp.components.citizenScienceTextLabels",
                 onboardingService.addSteps([
                     {
                         element: "label-check:first-of-type div",
-                        intro: `Make your selection about whether ${this.labels[0].name} is in the recording`,
+                       // TODO: fix this
+                       // intro: `Make your selection about whether ${this.labels[0].name} is in the recording`,
+                        intro: `Make your selection about whether this thing is in the recording`,
                         order: 5
                     }
 

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

@@ -1,4 +1,4 @@
-<div id="label-buttons">
+<div id="text-label-wrapper">
     <citizen-science-text-label
         ng-repeat="label in $ctrl.labels"
         label="label"

src/app/citizenScience/labels/thumbLabels/_thumbs.scss

@@ -1,11 +1,11 @@
 $thumb-height: 100;
 
-$triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="20px" version="1.1"><defs/><g><path d="M 0 20 L 20 0 L 40 20 Z" fill="#000000" pointer-events="none"/></g></svg>';
+$triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="20px" version="1.1"><defs/><g><path d="M 0 20 L 20 0 L 40 20 Z" pointer-events="none"/></g></svg>';
+
 
 .thumb-labels-container {
   text-align: center;
   margin-top: 10px;
-  background: rgba(0, 0, 0, 0.3);
   position: relative;
 
   /* flexbox layout of thumbs */
@@ -78,7 +78,7 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
       box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.3);
       border-radius: 5px;
       background: rgba(0, 0, 0, 0.9);
-      padding: 5px;
+      padding: 5px 10px 15px 10px;
       top: ($thumb-height + 10) + px;
 
       .citizen-science-thumb-example {

src/app/citizenScience/labels/thumbLabels/examples.js

@@ -23,7 +23,6 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
                     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);
                 };
 
                 /**
@@ -63,7 +62,7 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
                             return;
                         }
                         var offset = el.offsetParent.getBoundingClientRect().left;
-                        el.style.width = $window.innerWidth - 50 + "px";
+                        el.style.width = $window.innerWidth - 45 + "px";
                         el.style.left = (15 - offset) + "px";
                     }
 

src/app/citizenScience/labels/thumbLabels/label.js

@@ -17,18 +17,18 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label",
 
                 var self = this;
 
+                /**
+                 * Gets the state of this label from the SampleLabels service
+                 * @return {string}
+                 */
                 $scope.currentState = function() {
                     return SampleLabels.getValue(self.label.id);
                 };
 
-
-                //$scope.state = "empty";
-
-                // $scope.$watch("state", function (newVal, oldVal) {
-                //     console.log(newVal);
-                //     SampleLabels.setValue($scope.state, self.label.id);
-                // });
-
+                /**
+                 * Gets whether the details (example etc) are being shown for this label
+                 * @return {boolean}
+                 */
                 $scope.isShowingDetails = function () {
                     return self.currentDetailsLabelId.value === self.label.id;
                 };
@@ -48,14 +48,18 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label",
 
                 /**
                  * callback when this label state changes
-                 * This is used to get reverse binding into transcluded components.
+                 * This is a bit convoluted but the alternative is to nest the state
+                 * in an object and update by reference
+                 * and watch the object to update the SampleLabels service.
                  * @param isSelected Boolean
                  */
                 self.onToggleSelected = function (state) {
                     SampleLabels.setValue(state, self.label.id);
                     $scope.state = state;
                 };
 
+
+
             }],
         bindings: {
 

src/app/citizenScience/labels/thumbLabels/label.tpl.html

@@ -1,17 +1,7 @@
 <div class="citizen-science-thumb-label" ng-class="{active : isShowingDetails()}">
 
-    <!-- stuff to show thumb image -->
     <div class="citizen-science-thumb" ng-click="toggleShowDetails()">
 
-
-        <!--
-
-        <i class="fa {{currentState()}} thumb-tick"
-           ng-if="currentState() !== 'empty'"
-           aria-hidden="true"><b class="fa" aria-hidden="true"></b></i>
-
-        -->
-
         <label-check class="minicheck"
                 on-toggle-selected="$ctrl.onToggleSelected"
                 state="currentState()"

src/app/citizenScience/labels/thumbLabels/labels.js

@@ -95,7 +95,7 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
                             return x;
 
                         }, function (error) {
-                            console.log("get audio events by ids failed", error);
+                            console.warn("get audio events by ids failed", error);
                         })
                         .then(function (response) {
 

src/app/citizenScience/labels/userInput/_userInput.scss

@@ -0,0 +1,22 @@
+.label-user-input {
+
+  width: 100%;
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+
+
+  textarea, input {
+
+
+    width: 100%;
+    padding: 0.5em;
+    margin-top: 8px;
+    margin-bottom: 10px;
+
+  }
+
+
+
+}