fixing abstractions for annotation library

QutEcoacoustics · Apr 27, 2014 · 71906ca · 71906ca
1 parent c2f760d
commit 71906ca
Show file tree

Hide file tree

Showing 8 changed files with 178 additions and 189 deletions.
diff --git a/src/app/annotationLibrary/_annotationItem.scss b/src/app/annotationLibrary/_annotationItem.scss
diff --git a/src/app/annotationLibrary/_annotationLibrary.scss b/src/app/annotationLibrary/_annotationLibrary.scss
@@ -1,53 +1,22 @@
 $loadGifPath: $IMAGE_ASSET_PATH + 'assets/img/load.gif';
 
-.annoLibPaging {
+/* Library list */
+.annotation-paging {
   margin: 0 !important;
 }
 
-.annoLib {
+.annotation-library {
   margin-top: 30px;
 
-  & .annoLibItem {
+  & .library-item {
     padding: 10px 10px 0 40px;
     margin: 5px;
     position: relative;
     max-height:500px;
     height:385px;
+    min-width: 180px;
 
-    & .annoLibSpectrogram {
-      user-select: none;
-      -webkit-user-select: none;
-      -ms-user-select: none;
-      -moz-user-select: none;
-      -o-user-select: none;
-      display: inline-block;
-      position: relative;
-      line-height: 0;
-      padding: 0 !important;
-      margin: 0;
-      border: 1px dotted #8c8c8c;
-
-      & img {
-
-      }
-
-      & .annoLibGrid {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        background: url(#{$loadGifPath}) center center no-repeat;
-      }
-
-      & .annoLibBounds {
-        position: absolute;
-        border: 1px solid red;
-      }
-    }
-
-    & .annoLibInfo {
+    & .library-item-info {
       display: block;
       clear: both;
       margin-top: 20px;
@@ -61,7 +30,7 @@ $loadGifPath: $IMAGE_ASSET_PATH + 'assets/img/load.gif';
         /*@include vendor-prefix(transform, scale(0.8));*/
       }
 
-      & .annoLibInfoItem {
+      & .info-entry {
         font-size: small;
 
         margin: 5px 10px;
@@ -70,4 +39,52 @@ $loadGifPath: $IMAGE_ASSET_PATH + 'assets/img/load.gif';
   }
 }
 
+/* Library single item */
+.library-single {
+  padding: 10px 0 0 40px;
+  position: relative;
+  margin: 0 auto 0 auto;
+
 
+  & audio {
+    margin-top: 30px;
+  }
+}
+
+.library-single-info {
+  margin: 0 auto 0 auto;
+}
+
+/* Shared spectrogram and grid  */
+.library-spectrogram {
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  display: inline-block;
+  position: relative;
+  line-height: 0;
+  padding: 0 !important;
+  margin: 0;
+  border: 1px dotted #8c8c8c;
+
+  & img {
+
+  }
+
+  & .library-spectrogram-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background: url(#{$loadGifPath}) center center no-repeat;
+  }
+
+  & .library-spectrogram-bounds {
+    position: absolute;
+    border: 1px solid red;
+  }
+}
diff --git a/src/app/annotationLibrary/annotationItem.tpl.html b/src/app/annotationLibrary/annotationItem.tpl.html
@@ -3,14 +3,14 @@ <h3>Annotation {{model.audioEventId}}</h3>
 
     <div class="row">
         <div class="col-md-12">
-            <div class="annoSingleItem"
+            <div class="library-single"
                  data-ng-style="{width:model.converters.conversions.enforcedImageWidth + 100}">
-                <div class="annoSingleSpectrogram">
+                <div class="library-spectrogram">
                     <img data-ng-src=""
                          data-ng-style="{width: model.converters.conversions.enforcedImageWidth, height: model.converters.conversions.enforcedImageHeight}">
                     <!-- {{item.media.availableImageFormats.png.url}} -->
-                    <grid-lines configuration="model.gridConfig" class="annoSingleGrid"></grid-lines>
-                    <div class="annoSingleBounds"
+                    <grid-lines configuration="model.gridConfig" class="library-spectrogram-grid"></grid-lines>
+                    <div class="library-spectrogram-bounds"
                          data-ng-style="{top: model.bounds.top, left: model.bounds.left, width: model.bounds.width, height: model.bounds.height}"></div>
                 </div>
                 <audio id="annoSingleAudio{{$index}}" controls
@@ -39,7 +39,7 @@ <h3>Annotation {{model.audioEventId}}</h3>
 
     <div class="row">
         <div class="col-md-6">
-            <div class="annoSingleItemInfo panel panel-default">
+            <div class="library-single-info panel panel-default">
                 <div class="panel-heading clearfix">
                     <h3 class="panel-title pull-left">Details</h3>
                 </div>
@@ -84,7 +84,7 @@ <h3 class="panel-title pull-left">Details</h3>
             </div>
         </div>
         <div class="col-md-6">
-            <div class="annoSingleItemInfo panel panel-default">
+            <div class="library-single-info panel panel-default">
                 <div class="panel-heading clearfix">
                     <h3 class="panel-title pull-left">Comments</h3>
                 </div>

diff --git a/src/app/annotationLibrary/annotationLibrary.js b/src/app/annotationLibrary/annotationLibrary.js
@@ -4,15 +4,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
 
             $scope.status = 'idle';
 
-            $scope.filterSettings = {
-                tagsPartial: null,
-                reference: '', // set to empty string to match value of radio button
-                annotationDuration: null,
-                freqMin: null,
-                freqMax: null,
-                page: null,
-                items: null
-            };
+            $scope.filterSettings = getEmptyFilterSettings();
 
             loadFilter();
 
@@ -22,15 +14,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
 
             $scope.clearFilter = function clearFilter() {
 
-                $scope.filterSettings = {
-                    tagsPartial: null,
-                    reference: '', // set to empty string to match value of radio button
-                    annotationDuration: null,
-                    freqMin: null,
-                    freqMax: null,
-                    page: null,
-                    items: null
-                };
+                $scope.filterSettings = getEmptyFilterSettings();
 
                 $scope.setFilter();
             };
@@ -45,31 +29,45 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
                 return '/library/?' + baw.angularCopies.toKeyValue(paramObj);
             };
 
+            function getEmptyFilterSettings(){
+                return {
+                    tagsPartial: null,
+                    reference: '', // set to empty string to match value of radio button
+                    annotationDuration: null,
+                    freqMin: null,
+                    freqMax: null,
+                    page: null,
+                    items: null
+                };
+            }
+
             function loadFilter() {
                 $scope.status = 'loading';
                 $scope.filterSettings = angular.extend({}, $scope.filterSettings, $routeParams);
 
+                // ensure properties that need to be numeric are actually numbers
                 [
                     'annotationDuration',
                     'freqMin',
                     'freqMax',
                     'page',
                     'items'
-                ].forEach(function (currentvalue, index, array) {
+                ].forEach(
+                    function (currentvalue, index, array) {
                         var stringValue = $scope.filterSettings[currentvalue];
                         $scope.filterSettings[currentvalue] = stringValue === null ? null : Number(stringValue);
-                    });
-
-                //$scope.filterSettings = $scope.createQuery($routeParams);
+                    }
+                );
 
                 $scope.library = AudioEvent.library($scope.filterSettings, null, function librarySuccess(value, responseHeaders) {
                     value.entries.map(Media.getMediaItem);
+                    value.audioElement = null;
                     $scope.paging = getPagingSettings($scope.library.page, $scope.library.items, $scope.library.total);
                     $scope.status = 'loaded';
                     $scope.responseDetails = responseHeaders;
                 }, function libraryError(httpResponse){
                     $scope.status = 'error';
-                    //$scope.errorDetails = httpResponse;
+                    console.error('Failed to load library response.', $scope.filterSettings, httpResponse);
                 });
             }
 
@@ -87,6 +85,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
                 paging.minCount = Math.max(paging.page - paging.surroundingCurrentLinks, paging.minPageNumber);
                 paging.maxCount = Math.min(paging.page + paging.surroundingCurrentLinks, paging.maxPageNumber);
 
+                // make accessing links easy via properties, rather than having to use array indexing
                 paging.links = {};
 
                 paging.links.first =
@@ -147,8 +146,8 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
 
             $scope.model = AudioEvent.get(parameters,
                 function annotationShowSuccess(value, responseHeaders) {
-                    //$scope.response = JSON.stringify(value, null, "  ");
                     Media.getMediaItem(value);
+                    value.audioElement = null;
                     $scope.model = value;
 
                     if ($scope.model.paging.nextEvent.hasOwnProperty('audioEventId')) {
@@ -166,7 +165,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
                     $scope.model.audioEventDuration = Math.round10(value.endTimeSeconds - value.startTimeSeconds, -3);
 
                 }, function annotationShowError(httpResponse) {
-                    console.error(httpResponse);
+                    console.error('Failed to load library single item response.', parameters, httpResponse);
                 });
 
             $scope.createFilterUrl = function createFilterUrl(paramObj) {

diff --git a/src/app/annotationLibrary/annotationLibrary.tpl.html b/src/app/annotationLibrary/annotationLibrary.tpl.html
@@ -84,7 +84,7 @@ <h3>Annotation Library</h3>
                         <span data-ng-show="status == 'error'">Results could not be loaded.</span>
                     </div>
                     <div class="col-sm-7">
-                        <ul class="pagination annoLibPaging" data-ng-show="status == 'loaded' && paging.total > paging.items">
+                        <ul class="pagination annotation-paging" data-ng-show="status == 'loaded' && paging.total > paging.items">
                             <li data-ng-show="paging.page != paging.minPageNumber">
                                 <a data-ng-href="{{paging.links.prev}}">&laquo;</a>
                             </li>
@@ -119,18 +119,18 @@ <h3>Annotation Library</h3>
         </div>
     </div>
 
-    <div class="annoLib">
-        <div data-ng-repeat="item in library.entries" class="pull-left annoLibItem thumbnail">
-            <div class="annoLibSpectrogram">
+    <div class="annotation-library">
+        <div data-ng-repeat="item in library.entries" class="pull-left library-item thumbnail">
+            <div class="library-spectrogram">
                 <img data-ng-src=""
                      data-ng-style="{width: item.converters.conversions.enforcedImageWidth, height: item.converters.conversions.enforcedImageHeight}">
                 <!-- {{item.media.availableImageFormats.png.url}} -->
-                <grid-lines configuration="item.gridConfig" class="annoLibGrid"></grid-lines>
-                <div class="annoLibBounds"
+                <grid-lines configuration="item.gridConfig" class="library-spectrogram-grid"></grid-lines>
+                <div class="library-spectrogram-bounds"
                      data-ng-style="{top: item.bounds.top, left: item.bounds.left, width: item.bounds.width, height: item.bounds.height}"></div>
             </div>
 
-            <div class="annoLibInfo"
+            <div class="library-item-info"
                  data-ng-style="{'min-width':150, width:item.converters.conversions.enforcedImageWidth}">
                 <audio id="annotationLibraryItemInfoAudio{{$index}}" controls
                        data-ng-style="{width:item.converters.conversions.enforcedImageWidth}">
@@ -139,26 +139,26 @@ <h3>Annotation Library</h3>
                     <!--Your browser does not support the audio element. -->
                 </audio>
             <span data-ng-show="item.tags.length > 0">
-                <span class="annoLibInfoItem">
+                <span class="info-entry">
                     <span class="glyphicon glyphicon-tags"></span>
                     <a data-ng-href="{{item.tagSearchUrl}}">
                         {{item.priorityTag.text}}
                     </a>
                 </span>
             </span>
-            <span class="annoLibInfoItem">
+            <span class="info-entry">
                 <span class="glyphicon glyphicon-map-marker"></span>
                 <a data-ng-href="{{item.siteUrl}}">
                     {{item.siteName}}
                 </a>
             </span>
-            <span class="annoLibInfoItem">
+            <span class="info-entry">
                 <span class="glyphicon glyphicon-music"></span>
                 <a data-ng-href="{{item.listenUrl}}">
                     {{item.audioEventStartDate | date: 'MMM d, yyyy HH:mm'}}
                 </a>
             </span>
-            <span class="annoLibInfoItem">
+            <span class="info-entry">
                 <span class="glyphicon glyphicon-info-sign"></span>
                 <a data-ng-href="{{item.singleItemUrl}}" style="cursor: pointer;">
                     More info

diff --git a/src/common/functions.js b/src/common/functions.js
@@ -361,7 +361,11 @@ if (!Array.prototype.filter) {
         this.toKeyValue = function toKeyValue(obj) {
             var parts = [];
             angular.forEach(obj, function (value, key) {
-                if(value !== undefined && value !== null && (typeof(value) === "string" ? value.length > 0 : true)){
+                // only add key value pair if value is not undefined, not null, and is not an empty string
+                var valueIsUndefined = value == undefined;
+                var valueIsNull = value == null;
+                var valueIsEmptyString = typeof(value) === "string" && value.length < 1;
+                if(!valueIsUndefined && !valueIsNull && !valueIsEmptyString){
                     parts.push(encodeUriQuery(key, true) + (value === true ? '' : '=' + encodeUriQuery(value, true)));
                 }
             });