From d0baa6c0be6cbeee988573eed2f4e273b8ddbe27 Mon Sep 17 00:00:00 2001
From: Philip Eichinski <phil.eichinski@gmail.com>
Date: Fri, 6 Oct 2017 14:52:26 +1000
Subject: [PATCH] feat(citizenScienceRouting): start refactor for new datasets
 and citizen science api on server

---
 .../citizenScience/bristlebird/bristlebird.js | 60 +++++++-------
 .../bristlebird/listen.tpl.html               |  4 +-
 .../citizenScience/citizenScienceApiMock.js   | 78 +++++++++++++++++++
 .../citizenScience/citizenScienceCommon.js    | 60 ++++----------
 .../citizenScienceSampleLabels.js             | 33 +++++---
 .../datasetProgress/datasetProgress.js        | 58 ++++++++------
 src/app/citizenScience/thumbLabels/labels.js  |  1 -
 7 files changed, 179 insertions(+), 115 deletions(-)
 create mode 100644 src/app/citizenScience/citizenScienceApiMock.js

diff --git a/src/app/citizenScience/bristlebird/bristlebird.js b/src/app/citizenScience/bristlebird/bristlebird.js
index 6199f3d4..5a10db68 100644
--- a/src/app/citizenScience/bristlebird/bristlebird.js
+++ b/src/app/citizenScience/bristlebird/bristlebird.js
@@ -42,17 +42,12 @@ class BristlebirdController {
          */
         self.sampleDuration = 25;
 
-        /**
-         * list of the samples, to be retrieved from the dataset
-         * @type {Array}
-         */
-        $scope.samples = [];
 
         /**
-         * Inddex in the samples array of the current sample
+         * The current sample object, including sample id
          * @type {number}
          */
-        $scope.currentSampleNum = -1;
+        self.currentSample = {};
 
         // to be populated after getting samples from dataset
         $scope.media = null;
@@ -104,13 +99,19 @@ class BristlebirdController {
 
         $scope.labels = [];
 
-        self.getSamples = CitizenScienceCommon.bindGetSamples($scope);
+        //self.getSamples = CitizenScienceCommon.bindGetSamples($scope);
+
+        self.getSample = CitizenScienceCommon.bindGetSample($scope);
+
+        $scope.currentSample = {};
 
         // the model passed to ngAudio
         $scope.audioElementModel = CitizenScienceCommon.getAudioModel();
 
         this.showAudio = CitizenScienceCommon.bindShowAudio($scope);
 
+        $scope.numSamplesViewed = SampleLabels.getNumSamplesViewed();
+
         CitizenScienceCommon.getLabels($scope.csProject).then(function (labels) {
             $scope.labels = labels;
         });
@@ -122,8 +123,6 @@ class BristlebirdController {
             self.toggleLabel(labelNumber, value);
         });
 
-
-
         /**
          * applies or removes the tag-sets of the given label number
          * to the current sample
@@ -132,17 +131,13 @@ class BristlebirdController {
          */
         self.toggleLabel = function (labelId, value) {
             console.log("toggling label ", labelId, value);
-            var currentSample = $scope.samples[$scope.currentSampleNum];
             if (typeof value !== "boolean") {
-                value = !SampleLabels.getValue(currentSample.id, labelId);
+                value = !SampleLabels.getValue($scope.currentSample.id, labelId);
             }
-            SampleLabels.setValue(currentSample.id, labelId, value);
+            SampleLabels.setValue($scope.currentSample.id, labelId, value);
         };
 
 
-
-
-
         CitizenScienceCommon.getSettings($scope.csProject).then(
             function (settings) {
                 $scope.settings = settings;
@@ -153,18 +148,19 @@ class BristlebirdController {
         );
 
 
-
         /**
          * When the currentSampleNum changes, change the current audio file / spectrogram to match it
          */
-        $scope.$watch("currentSampleNum", function () {
-            if ($scope.currentSampleNum > -1) {
-                console.log("load audio for sample " + $scope.currentSampleNum);
-                var currentSample = $scope.samples[$scope.currentSampleNum];
-                self.showAudio(currentSample.recordingId, currentSample.startOffset, self.sampleDuration);
-                var backgroundPath = self.backgroundPaths[$scope.currentSampleNum % (self.backgroundPaths.length - 1)];
+        $scope.$watch("currentSample", function () {
+            if ($scope.currentSample.id !== undefined) {
+                console.log("load audio for sample " + $scope.currentSample);
+                self.showAudio($scope.currentSample.recordingId, $scope.currentSample.startOffset, self.sampleDuration);
+                var backgroundPath = self.backgroundPaths[parseInt($scope.currentSample.id) % (self.backgroundPaths.length - 1)];
                 backgroundImage.currentBackground = backgroundPath;
-                $scope.$broadcast("update-selected-labels", SampleLabels.getLablesForSample($scope.samples[$scope.currentSampleNum].id));
+                $scope.$broadcast("update-selected-labels", SampleLabels.getLabelsForSample($scope.samples[$scope.currentSampleNum].id));
+                // record that this sample has been viewed
+                SampleLabels.setValue($scope.currentSample.id)
+                $scope.numSamplesViewed = SampleLabels.getNumSamplesViewed();
             }
         });
 
@@ -180,15 +176,13 @@ class BristlebirdController {
          * auto play feature
          * when the playback arrives at the end of the audio, it will proceed to the next segment.
          */
-        $scope.$on(ngAudioEvents.ended, function navigate(event, model) {
-            if (model === $scope.audioElementModel) {
-                var nextSampleNum = $scope.currentSampleNum + 1;
-                console.info("Changing page to next segment, which is segment " + nextSampleNum);
-                $scope.$safeApply($scope, function () {
-                    $scope.goToSample(nextSampleNum);
-                });
-            }
-        });
+        // $scope.$on(ngAudioEvents.ended, function navigate(event, model) {
+        //     if (model === $scope.audioElementModel) {
+        //         $scope.$safeApply($scope, function () {
+        //             $scope.goToSample();
+        //         });
+        //     }
+        // });
 
         self.backgroundPaths = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"].map(fn => paths.site.assets.backgrounds.citizenScience + fn);
 
diff --git a/src/app/citizenScience/bristlebird/listen.tpl.html b/src/app/citizenScience/bristlebird/listen.tpl.html
index 1a8bf6d5..c6062b29 100644
--- a/src/app/citizenScience/bristlebird/listen.tpl.html
+++ b/src/app/citizenScience/bristlebird/listen.tpl.html
@@ -20,7 +20,7 @@ <h2>Eastern Bristlebird Search
                         <img id="spectrogram" class="spectrogram" ng-src="{{media.available.image.png.url}}">
                         <div position-line media="media" audio-data="audioElementModel" image-id="'spectrogram'"></div>
                     </div>
-                    <audio id="citsci-sample" ng-audio="audioElementModel" controls>
+                    <audio id="citsci-sample" ng-audio="audioElementModel">
                         <source ng-repeat="key in media.available.audioOrder"
                                 ng-src="{{media.available.audio[key].url}}" src=""
                                 type="{{media.available.audio[key].mimeType}}">
@@ -34,7 +34,7 @@ <h2>Eastern Bristlebird Search
 
             <nav class="cs-progress">
 
-                <dataset-progress items="samples" selected="currentSampleNum"></dataset-progress>
+                <dataset-progress current-sample="currentSample" num-viewed="numSamplesViewed"></dataset-progress>
 
 
                 <play-button audio-element-model="audioElementModel"></play-button>
diff --git a/src/app/citizenScience/citizenScienceApiMock.js b/src/app/citizenScience/citizenScienceApiMock.js
new file mode 100644
index 00000000..d84937dd
--- /dev/null
+++ b/src/app/citizenScience/citizenScienceApiMock.js
@@ -0,0 +1,78 @@
+var csApiMock = angular.module("bawApp.citizenScience.csApiMock", ["bawApp.citizenScience.common"]);
+
+
+/**
+ * Mocks the api responses for citizenScienceProjects that
+ * will eventually go on the server
+ */
+
+
+
+
+
+sampleLabels.factory("CsApi", [
+    "CitizenScienceCommon",
+    "$http",
+    function CsApi(CitizenScienceCommon, $http) {
+
+        var self = this;
+
+        self.useLocalData = true;
+
+        self.sheets_api_url = "http://" + window.location.hostname + ":8081";
+        self.local_api_url = "/public/citizen_science";
+
+
+        /**
+         * Constructs a url for the request by concatenating the arguments, joined by "/"
+         * and appending to the relevant baseURL
+         * @returns {string|*}
+         */
+        self.apiUrl = function () {
+            // convert to array
+            var base_url, url;
+            if (self.useLocalData) {
+                base_url = self.local_api_url;
+            } else {
+                base_url = self.sheets_api_url;
+            }
+            var args = Array.prototype.slice.call(arguments);
+
+            url = [base_url].concat(args).join("/");
+
+            if (self.useLocalData) {
+                url = url + ".json";
+            }
+
+            return url;
+        };
+
+        self.publicFunctions = {
+
+
+
+        getSamples : function () {
+            if ($scope.samples.length === 0) {
+
+                var url = self.functions.apiUrl(
+                    "samples",
+                    $scope.csProject,
+                    UserProfile.profile.userName);
+                //TODO: error handling
+                $http.get(url).then(function (response) {
+                    var samples = response.data;
+                    $scope.samples = samples;
+                    $scope.currentSampleNum = 0;
+                });
+            }
+        }
+
+    };
+
+        return publicFunctions;
+
+
+
+    }]);
+
+
diff --git a/src/app/citizenScience/citizenScienceCommon.js b/src/app/citizenScience/citizenScienceCommon.js
index 1ab5edaf..019aded6 100644
--- a/src/app/citizenScience/citizenScienceCommon.js
+++ b/src/app/citizenScience/citizenScienceCommon.js
@@ -20,10 +20,6 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
 
         var self = this;
 
-        self.useLocalData = true;
-
-        self.sheets_api_url = "http://" + window.location.hostname + ":8081";
-        self.local_api_url = "/public/citizen_science";
 
         /**
          * Default values for audio model, to be updated when UserProfile is loaded
@@ -77,24 +73,7 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
 
 
 
-        self.apiUrl = function () {
-            // convert to array
-            var base_url, url;
-            if (self.useLocalData) {
-                base_url = self.local_api_url;
-            } else {
-                base_url = self.sheets_api_url;
-            }
-            var args = Array.prototype.slice.call(arguments);
 
-            url = [base_url].concat(args).join("/");
-
-            if (self.useLocalData) {
-                url = url + ".json";
-            }
-
-            return url;
-        };
 
 
         self.functions = {
@@ -103,10 +82,6 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
                 return self.audioElementModel;
             },
 
-            /**
-             * Constructs a url for the api by concatenating url/arg1/arg2/arg3 etc
-             */
-            apiUrl: self.apiUrl,
 
             /**
              * Converts an array of strings to an object where each key is the same as the val
@@ -141,29 +116,26 @@ citizenScienceCommon.factory("CitizenScienceCommon", [
              * @returns {function}
              */
             bindGetSamples: function ($scope) {
-                var getSamples = function () {
-                    if ($scope.samples.length === 0) {
-
-                        var url = self.functions.apiUrl(
-                            "samples",
-                            $scope.csProject,
-                            UserProfile.profile.userName);
-                        //TODO: error handling
-                        $http.get(url).then(function (response) {
-                            //console.log(response.data);
-                            var samples = response.data;
-                            $scope.samples = samples;
-                            //self.initSampleLabels($scope.samples, $scope.labels);
-                            //$scope.goToSample(0);
-                            $scope.currentSampleNum = 0;
-                        });
-                    }
-                };
+
                 UserProfile.get.then(getSamples);
                 return getSamples;
             },
+
+            /**
+             * returns the sample of the given id
+             * @param sampleId int
+             * @param project string
+             */
+            getNextSample: function (sampleId, project, ) {
+                var getSample = function (sampleNum) {
+                    return $scope.samples[sampleNum];
+                };
+                return getSample;
+            },
+
+
             /**
-             * Returns a funciton that sets the media member of the scope to the
+             * Returns a function that sets the media member of the scope to the
              * specified recording segment. The watcher will then actually load it to the dom
              * @param recordingId string
              * @param startOffset float
diff --git a/src/app/citizenScience/citizenScienceSampleLabels.js b/src/app/citizenScience/citizenScienceSampleLabels.js
index 74acbb5e..4ce65217 100644
--- a/src/app/citizenScience/citizenScienceSampleLabels.js
+++ b/src/app/citizenScience/citizenScienceSampleLabels.js
@@ -27,7 +27,7 @@ sampleLabels.factory("SampleLabels", [
         /**
          * checks the local storage for sampleLabels
          */
-        self.init = function (citizenScienceProject, samples, labels) {
+        self.init = function (citizenScienceProject) {
 
             self.localStorageKey = citizenScienceProject + "_sampleLabels";
 
@@ -39,8 +39,6 @@ sampleLabels.factory("SampleLabels", [
                 self.data = {};
             }
 
-            self.samples = samples;
-            self.labels = labels;
             self.csProject = citizenScienceProject;
 
             return self.data;
@@ -99,7 +97,7 @@ sampleLabels.factory("SampleLabels", [
             /**
              * updates the value of a labelId applied to a sampleId as either true or false
              * @param sampleId int
-             * @param labelId int
+             * @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) {
@@ -109,19 +107,23 @@ sampleLabels.factory("SampleLabels", [
                 }
 
 
-                if (self.data[sampleId][labelId] === undefined) {
-                    self.data[sampleId][labelId] = {};
-                }
+                if (labelId !== undefined) {
+
+                    if (self.data[sampleId][labelId] === undefined) {
+                        self.data[sampleId][labelId] = {};
+                    }
 
-                self.data[sampleId][labelId].value = value;
-                self.data[sampleId][labelId].timestamp = new Date();
+                    self.data[sampleId][labelId].value = value;
+                    self.data[sampleId][labelId].timestamp = new Date();
+
+                }
 
                 self.writeToStorage();
-                self.submitResponse(sampleId, labelId, value);
+                //self.submitResponse(sampleId, labelId, value);
 
             },
 
-            getLablesForSample : function (sampleId) {
+            getLabelsForSample : function (sampleId) {
 
                 if (typeof(self.data[sampleId]) !== "object") {
                     self.data[sampleId] = {};
@@ -129,6 +131,15 @@ sampleLabels.factory("SampleLabels", [
 
                 return self.data[sampleId];
 
+            },
+
+            /**
+             * returns the number of samples that have responses
+             * If a sample is viewed, but no labels are applied, an element
+             * should be added to the data object as an empty object
+             */
+            getNumSamplesViewed : function () {
+                return Object.keys(self.data).length;
             }
 
 
diff --git a/src/app/citizenScience/datasetProgress/datasetProgress.js b/src/app/citizenScience/datasetProgress/datasetProgress.js
index d72f78d6..9c1802b5 100644
--- a/src/app/citizenScience/datasetProgress/datasetProgress.js
+++ b/src/app/citizenScience/datasetProgress/datasetProgress.js
@@ -8,51 +8,61 @@ angular.module("bawApp.components.progress", [])
 
             var self = this;
             $scope.selectItem = function (itemNum) {
-                self.selected = itemNum;
+                console.log("selecting item", itemNum - 1);
+                self.selected = itemNum - 1;
+                console.log("setting selected to ", self.selected);
             };
 
+            $scope.selectItem($routeParams.sampleNum);
 
-            $scope.nextItem = function () {
-                if (self.selected < self.items.length - 1) {
-                    self.selected = self.selected + 1;
-                }
-            };
+            $scope.$watch($routeParams, function (newVal, oldVal) {
+                console.log("route params changed from ", oldVal, "to", newVal);
+                self.selected = newVal - 1;
+            }, true);
 
-            $scope.prevItem = function () {
-                if (self.selected > 0) {
-                    self.selected = self.selected - 1;
-                }
-            };
+
+            // $scope.nextItem = function () {
+            //     if (self.selected < self.items.length - 1) {
+            //         self.selected = self.selected + 1;
+            //     }
+            // };
+            //
+            // $scope.prevItem = function () {
+            //     if (self.selected > 0) {
+            //         self.selected = self.selected - 1;
+            //     }
+            // };
 
             //TODO: this gets called constantly while the audio is playing
+            /**
+             * returns a link for routing based on the selected sample
+             * Samples are 0 indexed, urls are 1 indexed.
+             * @returns string
+             */
             $scope.previousLink = function () {
                 if (self.selected > 0) {
-                    return $url.formatUri(paths.site.ngRoutes.citizenScience.listen, {sampleNum:self.selected - 1});
+                    return $url.formatUri(paths.site.ngRoutes.citizenScience.listen, {sampleNum:self.selected});
                 } else {
-                    return false;
+                    return "";
                 }
             };
             $scope.nextLink = function () {
                 if (self.selected < self.items.length - 1) {
-                    return $url.formatUri(paths.site.ngRoutes.citizenScience.listen, {sampleNum:self.selected + 1});
+                    return $url.formatUri(paths.site.ngRoutes.citizenScience.listen, {sampleNum:self.selected + 2});
                 } else {
-                    return false;
+                    return "";
                 }
             };
 
-            /**
-             * Returns the number of viewed items
-             * @returns {number}
-             */
-            $scope.numViewed = function () {
-                return self.items.reduce((prev, cur) => prev + (cur.done ? 1 : 0), 0);
-            };
+
 
             self.progressNav = true;
 
         }],
         bindings: {
-            items: "=items",
-            selected: "=selected"
+            previousSample: "=",
+            currentSample: "=",
+            nextSample: "=",
+            numViewed: "=numViewed"
         }
     });
\ No newline at end of file
diff --git a/src/app/citizenScience/thumbLabels/labels.js b/src/app/citizenScience/thumbLabels/labels.js
index b40a2dbe..b6e40f76 100644
--- a/src/app/citizenScience/thumbLabels/labels.js
+++ b/src/app/citizenScience/thumbLabels/labels.js
@@ -22,7 +22,6 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
 
                 var self = this;
 
-                console.log(" --- current sample num (labels) ", self.currentSampleNum);
 
                 $scope.currentDetailsLabelId = {value: -1};