feat(citSci): formatting dataset item info and adding onboarding for …

…those item info and progress bar
QutEcoacoustics · Jul 11, 2019 · 4511a8c · 4511a8c
1 parent a5a8d51
commit 4511a8c
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 31 deletions.
diff --git a/src/app/citizenScience/datasetProgress/datasetProgressIndicator.js b/src/app/citizenScience/datasetProgress/datasetProgressIndicator.js
@@ -6,11 +6,11 @@
  */
 
 
-angular.module("bawApp.components.progressIndicator", ["bawApp.citizenScience.csSamples", "bawApp.citizenScience.sampleLabels"])
+angular.module("bawApp.components.progressIndicator", ["bawApp.citizenScience.csSamples", "bawApp.citizenScience.sampleLabels", "bawApp.components.onboarding"])
     .component("datasetProgressIndicator", {
         templateUrl: "citizenScience/datasetProgress/datasetProgressIndicator.tpl.html",
-        controller: ["$scope", "CsSamples", "SampleLabels", "QuestionResponse", "CitizenScienceCommon",
-            function ($scope, CsSamples, SampleLabels, QuestionResponse, CitizenScienceCommon) {
+        controller: ["$scope", "CsSamples", "SampleLabels", "QuestionResponse", "CitizenScienceCommon", "onboardingService",
+            function ($scope, CsSamples, SampleLabels, QuestionResponse, CitizenScienceCommon, onboardingService) {
 
                 var self = this;
 
@@ -56,12 +56,11 @@ angular.module("bawApp.components.progressIndicator", ["bawApp.citizenScience.cs
                 };
 
 
-                // /**
-                //  * Update progress when the study changes. It will not be loaded when this controller is initialised
-                //  */
-                // $scope.$watch(() => CitizenScienceCommon.studyData.study, (newVal, oldVal) => {
-                //     self.refreshProgress();
-                // });
+                onboardingService.addSteps({
+                    element: ".progress",
+                    intro: "How many items have been completed out of the total amount. ",
+                    order: 3
+                });
 
                 /**
                  * Watch the total items, because it will not be ready when the controller first loads

diff --git a/src/app/citizenScience/listen/itemInfo.js b/src/app/citizenScience/listen/itemInfo.js
@@ -0,0 +1,37 @@
+angular.module("bawApp.citizenScience.itemInfo", ["bawApp.components.onboarding"])
+    .component("itemInfo", {
+        templateUrl: "citizenScience/listen/itemInfo.tpl.html",
+        controller: [
+            "$scope", "moment", "conf.constants", "onboardingService",
+            function ($scope, moment, constants, onboardingService) {
+
+                var self = this;
+
+                $scope.ready = false;
+                $scope.dateString = null;
+                $scope.projectList = [];
+                $scope.site = null;
+                $scope.datasetItemId = null;
+
+                $scope.$watch(() => self.sample.item, (newVal) => {
+
+                    if (self.sample.item && self.sample.item.hasOwnProperty("start")) {
+                        $scope.ready = true;
+                        $scope.dateString = moment(self.sample.item.start).format(constants.localization.dateTimeFormat);
+                        $scope.projectList = self.sample.item.audioRecording.site.projects.filter(p => p.hasOwnProperty("name")).map(p => p.name);
+                        $scope.site = self.sample.item.audioRecording.site.name;
+                    }
+
+                });
+
+                onboardingService.addSteps({
+                    element: "item-info",
+                    intro: "The date, time and location information",
+                    order: 2.5
+                });
+
+            }],
+        bindings: {
+            sample:"<"
+        }
+    });
diff --git a/src/app/citizenScience/listen/itemInfo.tpl.html b/src/app/citizenScience/listen/itemInfo.tpl.html
@@ -0,0 +1,15 @@
+
+    <span>{{dateString}}</span>
+    <span>
+        <span class="project_info">
+            <span ng-repeat="project in projectList">
+                <span class="glyphicon glyphicon-home"></span>{{project}}
+            </span>
+        </span>
+        <span class="glyphicon glyphicon-map-marker"></span>{{site}}
+    </span>
+
+
+
+
+
diff --git a/src/app/citizenScience/listen/listen.js b/src/app/citizenScience/listen/listen.js
@@ -63,10 +63,8 @@ class CitizenScienceListenController {
 
         // the model passed to ngAudio
         $scope.audioElementModel = CitizenScienceCommon.getAudioModel();
-        $scope.sampleInfo = {
-            site: null,
-            date: null,
-            time: null
+        $scope.sample = {
+            item: null
         };
 
         // get the study information by name, then load the appropriate question data
@@ -140,14 +138,9 @@ class CitizenScienceListenController {
                         backgroundImage.setBackgroundImageForItem(item.audioRecording, item.startTimeSeconds);
                     }
 
-                    $scope.sampleInfoSite = item.audioRecording.site.name;
-                    $scope.sampleInfo = {
-                        // todo: replace with site name
-                        site: item.audioRecording.site.name,
-                        date: item.start.toLocaleDateString(),
-                        time: item.start.toLocaleTimeString(),
-                        dataset_item_id: item.id
-                    };
+                    $scope.sample.item = item;
+
+
 
                 }
             });
@@ -175,7 +168,8 @@ angular
         "bawApp.citizenScience.sampleLabels",
         "bawApp.citizenScience.csLabels",
         "bawApp.components.onboarding",
-        "bawApp.components.background"
+        "bawApp.components.background",
+        "bawApp.citizenScience.itemInfo"
     ])
     .controller(
         "CitizenScienceListenController",

diff --git a/src/app/citizenScience/listen/listen.tpl.html b/src/app/citizenScience/listen/listen.tpl.html
@@ -15,16 +15,9 @@ <h2>{{studyTitle}}
                         <div position-line media="media" audio-data="audioElementModel" image-id="'spectrogram'"></div>
                     </div>
 
-                    <div class="sample-info"  ng-if="settings.showSite || settings.showDateTime || settings.showProgress">
-                        <span>
-                            <span ng-if="settings.showDateTime">{{sampleInfo.date}} &nbsp; {{sampleInfo.time}}</span>
-                            <span>
-                                <span ng-if="settings.showDateTime">{{sampleInfo.site}}</span>
-                            </span>
-                            <span class="debug"> {{sampleInfo.dataset_item_id}}</span>
-
-                        </span>
 
+                    <div class="sample-info" ng-if="settings.showSite || settings.showDateTime || settings.showProgress">
+                        <item-info ng-if="settings.showSite || settings.showDateTime" sample="sample"></item-info>
                         <dataset-progress-indicator ng-if="settings.showProgress"></dataset-progress-indicator>
                     </div>