feat(citizenScienceLabels): moved examples outside of label component

QutEcoacoustics · May 4, 2017 · d9efa76 · d9efa76
1 parent b712a85
commit d9efa76
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 59 deletions.
diff --git a/src/app/citizenScience/bristlebird/bristlebird.js b/src/app/citizenScience/bristlebird/bristlebird.js
@@ -78,7 +78,7 @@ class BristlebirdController {
          * example response from server
          *   [{
          *      "tags": ["ebb", "type1"],
-         *      "label": "Eastern Bristlebird",
+         *      "name": "Eastern Bristlebird",
          *      "examples": [{
          *          "annotationId": 124730
          *      },{
@@ -89,7 +89,7 @@ class BristlebirdController {
          *   },
          *   {
          *       "tags": ["ground_parrot", "type1"],
-         *       "label": "Ground Parrot",
+         *       "name": "Ground Parrot",
          *       "examples": [{
          *           "annotationId": 124622
          *       }]
@@ -123,8 +123,6 @@ class BristlebirdController {
             }
         });
 
-        //$scope.labels = JSON.parse(`[{"label":"Eastern Bristlebird click","tags":["ebb","type 1"],"examples":[{"annotationId":124730},{"annotationId":124727}]},{"label":"Eastern Bristlebird whistle","tags":["ebb","type 2"],"examples":[{"annotationId":124622}]},{"label":"Ground Parrot","tags":["ground parrot","type 1"],"examples":[]},{"label":"Spotted Quoll","tags":["quoll","type1"],"examples":[]},{"label":"Rufus Bristlebird","tags":["rbb","type1"],"examples":[]}]`);
-
 
 
 

diff --git a/src/app/citizenScience/thumbLabels/_thumbs.scss b/src/app/citizenScience/thumbLabels/_thumbs.scss
@@ -1,22 +1,73 @@
+$thumb-height: 100;
+
 
 .thumb-labels-container {
   text-align: center;
   margin-top: 10px;
   background: rgba(0,0,0,0.3);
 
-  .thumb {
+  /* flexbox layout of thumbs */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+
+  .citizen-science-thumb-label {
+
+    position: relative;
+
+    &.selected {
+
+      /* make room under the row for the info */
+      padding-bottom: 400px;
+
+
+      .citizen-science-thumb {
+
+        outline: rgba(255,255,255,0.5) solid 2px;
+
+      }
+
+    }
+
 
     .citizen-science-thumb {
-      height: 150px;
+      height: $thumb-height + px;
+      margin: 5px;
 
-      .img {
+      img {
         height: 100%;
       }
 
     }
 
+
+    citizen-science-label-examples {
+
+      position: absolute;
+      z-index: 100;
+      box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.3);
+      border-radius: 5px;
+      background: #fff;
+      padding: 5px;
+      top: ($thumb-height + 20) + px;
+
+
+
+    }
+
+
+
   }
 
+
+
+
+
+
+
+
+
   .label-examples-annotations {
 
     background: #fff;

diff --git a/src/app/citizenScience/thumbLabels/examples.js b/src/app/citizenScience/thumbLabels/examples.js
@@ -15,11 +15,13 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
 
                 var self = this;
 
-                $scope.changeCurExample = function (labelNum, changeBy) {
+                $scope.currentExample = -1;
+
+                $scope.changeCurrentExample = function (labelNum, changeBy) {
                     var l = self.examples.length;
                     // add changeBy and wrap if the result is larger than length
-                    self.curExample = ((self.curExample + changeBy % l) + l) % l;
-                    console.log("changed cur example for label " + self.label + " to " + self.curExample);
+                    $scope.currentExample = (($scope.currentExample + changeBy % l) + l) % l;
+                    console.log("changed cur example for label " + self.label + " to " + $scope.currentExample);
                 };
 
 
@@ -32,56 +34,33 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
 
                     if (Array.isArray(newValue)) {
                         if (newValue.length) {
-                            self.curExample = 0;
+                            $scope.currentExample = 0;
                         } else {
-                            self.curExample = -1;
+                            $scope.currentExample = -1;
                         }
                     }
 
                 });
 
-                $scope.annotations = [];
 
-                self.examples.forEach(function (example, index) {
+                $scope.$watch("currentExample", function (newVal, oldVal) {
 
-                    // based on stuff in library item. may be able to make this more DRY
-                    AudioEventService
-                        .getAudioEventsByIds([example.annotationId])
-                        .then(function annotationShowSuccess(response, responseHeaders) {
-                                var audioEvents = response.data.data;
 
-                                var annotation = new AudioEvent(audioEvents[0]);
 
-                                var commonData = {
-                                    annotations: [annotation],
-                                    annotationIds: new Set([annotation.id]),
-                                    recordingIds: new Set([annotation.audioRecordingId])
-                                };
+                    console.log("self.examples[$scope.currentExample].annotation",self.examples[$scope.currentExample].annotation);
 
-                                // do we need this stuff? if so, need more dependencies
-                                libraryCommon.addCalculatedProperties(annotation);
-                                libraryCommon.getSiteMediaAndProject(commonData);
-                                libraryCommon.getUsers(commonData);
 
-                                $scope.annotations[index] = annotation;
 
-                                //todo load these from user preferences
-                                $scope.annotations[index].audioElement = {
-                                    volume: 1,
-                                    muted: false,
-                                    autoPlay: false,
-                                    position: 0
-                                };
 
 
-                            },
-                            function annotationShowError(httpResponse) {
-                                console.error("Failed to load citizen science example item response.", httpResponse);
-                            });
 
                 });
 
 
+
+
+
+
             }],
         bindings: {
             examples: "=examples",

diff --git a/src/app/citizenScience/thumbLabels/examples.tpl.html b/src/app/citizenScience/thumbLabels/examples.tpl.html
@@ -7,11 +7,16 @@ <h3>
         <i class="fa fa-arrow-right arrow next" aria-hidden="true" ng-click="changeCurExample(key, 1)" ng-if="annotations.length>1"></i>
     </h3>
 
-
+<!--
     <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.examples[currentExample].annotation"></annotation-item>
+    </div>
 
 </div>
diff --git a/src/app/citizenScience/thumbLabels/label.js b/src/app/citizenScience/thumbLabels/label.js
@@ -13,24 +13,29 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label",
             "baw.models.AudioEvent",
             function ($scope, $http, CitizenScienceCommon, libraryCommon, AudioEventService, AudioEvent) {
 
+                var self = this;
 
-
-
+                $scope.toggleSelected = function () {
+                    var newVal = !self.showInfo;
+                    self.onToggleShowInfo(self.labelNum);
+                    self.showInfo = newVal;
+                };
 
             }],
         bindings: {
 
-            // example annotations of this event-type
-            // in the form [{annotationId:123},{annotationId:456}, ... ]
-            examples: "=examples",
-
             // tags that this event type are associated with
             tags: "=tags",
 
-            // the label for this thumb
-            label: "=label",
+            // the label for this thumb (friendly name for label)
+            name: "=",
+
+            labelNum: "<",
+
+            // whether this thumb is currently selected for more info
+            showInfo: "=",
+
+            onToggleShowInfo: "<"
 
-            // whether this thumb is currently selected
-            selected: "=selected"
         }
     });
diff --git a/src/app/citizenScience/thumbLabels/label.tpl.html b/src/app/citizenScience/thumbLabels/label.tpl.html
@@ -1,10 +1,10 @@
-<div class="citizen-science-thumb-label" ng-class="{selected : ($ctrl.selected)}">
+<div class="citizen-science-thumb-label" ng-class="{selected : ($ctrl.showInfo)}">
 
     <!-- stuff to show thumb image -->
-    <div class="citizen-science-thumb">
+    <div class="citizen-science-thumb" ng-click="toggleSelected()">
         <img ng-src="{{$ctrl.examples[0].annotation.media.available.image.png.url}}" alt="{{$ctrl.label}}">
     </div>
 
 
-    <!-- <citizen-science-label-examples examples="$ctrl.examples"></citizen-science-label-examples> -->
+
 </div>
diff --git a/src/app/citizenScience/thumbLabels/labels.js b/src/app/citizenScience/thumbLabels/labels.js
@@ -27,9 +27,14 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
                     return self.labels;
                 }, function (newVal, oldVal) {
                     self.fetchAnnotationData(newVal);
+
+                    self.hideAllLabelInfos();
+
                 });
 
 
+
+
                 /**
                  * fetches site/project/media data for all label examples
                  * updates the labels' examples array, replacing each annotationId with a

diff --git a/src/app/citizenScience/thumbLabels/labels.tpl.html b/src/app/citizenScience/thumbLabels/labels.tpl.html
@@ -6,9 +6,13 @@
             class="label-thumbs"
             ng-if="label.examples.length"
             tags="label.tags"
-            examples="label.examples"
-            label="label.label"
-            selected="label.showExamples"
-            ng-class="{selected : label.showExamples}"></citizen-science-label>
+            name="label.name"
+            label-num="key"
+            show-info="label.showInfo"
+            on-toggle-show-info="$ctrl.hideAllLabelInfos"></citizen-science-label>
+
+
+    <citizen-science-label-examples
+            examples="$ctrl.labels[selectedLabel].examples" ng-if="selectedLabel > -1" ></citizen-science-label-examples>
 
 </div>