Skip to content

Commit

Permalink
Addressing feedback on abstractions and functionality.
Browse files Browse the repository at this point in the history
  • Loading branch information
Mark committed May 2, 2014
1 parent ae62b46 commit f44b6aa
Show file tree
Hide file tree
Showing 9 changed files with 414 additions and 309 deletions.
11 changes: 7 additions & 4 deletions src/app/annotationLibrary/_annotationLibrary.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ $loadGifPath: $IMAGE_ASSET_PATH + 'assets/img/load.gif';
padding: 10px 10px 0 40px;
margin: 5px;
position: relative;
max-height:500px;
height:385px;
max-height:410px;
height:410px;
min-width: 180px;

& .library-item-info {
Expand All @@ -32,8 +32,11 @@ $loadGifPath: $IMAGE_ASSET_PATH + 'assets/img/load.gif';

& .info-entry {
font-size: small;

margin: 5px 10px;
display:block;
margin: 3px 5px;
overflow-x: hidden;
min-width:110px;
max-width:300px;
}
}
}
Expand Down
61 changes: 29 additions & 32 deletions src/app/annotationLibrary/annotationItem.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,19 @@ <h3>Annotation {{model.audioEventId}}</h3>
<div class="row">
<div class="col-md-12">
<div class="library-single"
data-ng-style="{width:model.converters.conversions.enforcedImageWidth + 100}">
data-ng-style="{width:annotation.converters.conversions.enforcedImageWidth + 100}">
<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="library-spectrogram-grid"></grid-lines>
<img data-ng-src="{{annotation.media.availableImageFormats.png.url}}"
data-ng-style="{width: annotation.converters.conversions.enforcedImageWidth, height: annotation.converters.conversions.enforcedImageHeight}">
<grid-lines configuration="annotation.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>
data-ng-style="{top: annotation.bounds.top, left: annotation.bounds.left, width: annotation.bounds.width, height: annotation.bounds.height}"></div>
</div>
<audio id="annoSingleAudio{{$index}}" controls
data-ng-style="{width:model.converters.conversions.enforcedImageWidth}">
<!--source data-ng-repeat="resource in item.media.availableAudioFormats" data-ng-src="{{resource.url}}" src=""
type="{{resource.mimeType}}"-->
<!--Your browser does not support the audio element. -->
data-ng-style="{width:annotation.converters.conversions.enforcedImageWidth}">
<source data-ng-repeat="resource in annotation.media.availableAudioFormats" data-ng-src="{{resource.url}}" src=""
type="{{resource.mimeType}}">
Your browser does not support the audio element.
</audio>

</div>
Expand All @@ -27,11 +26,11 @@ <h3>Annotation {{model.audioEventId}}</h3>
<div class="row">
<div class="col-md-12">
<ul class="pager">
<li class="previous" data-ng-show="model.paging.prevEvent.link">
<a data-ng-href="{{model.paging.prevEvent.link}}">&larr; Previous</a>
<li class="previous" data-ng-show="annotation.paging.prevEvent.link">
<a data-ng-href="{{annotation.paging.prevEvent.link}}">&larr; Previous</a>
</li>
<li class="next" data-ng-show="model.paging.nextEvent.link">
<a data-ng-href="{{model.paging.nextEvent.link}}">Next &rarr;</a>
<li class="next" data-ng-show="annotation.paging.nextEvent.link">
<a data-ng-href="{{annotation.paging.nextEvent.link}}">Next &rarr;</a>
</li>
</ul>
</div>
Expand All @@ -45,50 +44,48 @@ <h3 class="panel-title pull-left">Details</h3>
</div>
<div class="panel-body">
<div class="list-group">
<a data-ng-repeat="tag in model.tags"
data-ng-href="{{model.tagSearchUrl}}"
<a data-ng-repeat="tag in annotation.tags"
data-ng-href="{{annotation.urls.tagSearch}}"
class="list-group-item" title="Tag.">
<span class="glyphicon glyphicon-tags"></span>&nbsp;
<span class="badge">{{tag.typeOfTag.replace('_',' ')}}</span>
<span class="badge" data-ng-show="tag.retired">retired</span>
<span class="badge" data-ng-show="tag.isTaxanomic">taxonomic</span>
{{tag.text}} (ID {{tag.id}})
</a>
<a data-ng-href="{{model.listenUrl}}" class="list-group-item" title="Start date.">
<span class="glyphicon glyphicon-music"></span>&nbsp;
Created {{model.audioEventStartDate | date: 'medium'}}
<a data-ng-href="{{annotation.urls.listen}}" class="list-group-item" title="Start date.">
<span class="glyphicon glyphicon-record"></span>&nbsp;
Created {{annotation.audioEventStartDate | date: 'medium'}}
</a>
<a data-ng-href="{{model.listenUrl}}" class="list-group-item" title="Duration.">
<a data-ng-href="{{annotation.urls.listen}}" class="list-group-item" title="Duration.">
<span class="glyphicon glyphicon-time"></span>&nbsp;
{{model.audioEventDuration}} seconds duration
{{annotation.annotationDurationRounded}} seconds duration
</a>
<a data-ng-href="{{model.siteUrl}}" class="list-group-item" title="Site name.">
<a data-ng-href="{{annotation.urls.site}}" class="list-group-item" title="Site name.">
<span class="glyphicon glyphicon-map-marker"></span>&nbsp;
{{model.siteName}}
{{annotation.siteName}}
</a>
<a data-ng-href="{{model.userUrl}}" class="list-group-item" title="User.">
<a data-ng-href="{{annotation.urls.user}}" class="list-group-item" title="User.">
<span class="glyphicon glyphicon-user"></span>&nbsp;
{{model.ownerName }}
{{annotation.ownerName }}
</a>
<a data-ng-href="{{model.similarUrl}}" class="list-group-item"
<a data-ng-href="{{annotation.urls.similar}}" class="list-group-item"
title="Find similar annotations.">
<span class="glyphicon glyphicon-search"></span>&nbsp;
Find Similar
</a>
<a class="list-group-item" title="Comments.">
<span class="glyphicon glyphicon-comment"></span>&nbsp;
0
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="library-single-info panel panel-default">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left">Comments</h3>
<h3 class="panel-title pull-left"><span class="glyphicon glyphicon-comment"></span>&nbsp;Comments</h3>
</div>
<div class="panel-body">
<em>Coming soon...</em>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
Expand Down
92 changes: 56 additions & 36 deletions src/app/annotationLibrary/annotationLibrary.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
.controller('AnnotationLibraryCtrl', ['$scope', '$location', '$resource', '$routeParams', '$url', 'conf.paths', 'AudioEvent', 'Media',
function ($scope, $location, $resource, $routeParams, $url, paths, AudioEvent, Media) {
.controller('AnnotationLibraryCtrl', ['$scope', '$location', '$resource', '$routeParams', '$url',
'conf.paths', 'conf.constants', 'bawApp.unitConverter',
'AudioEvent', 'Tag',
function ($scope, $location, $resource, $routeParams, $url, paths, constants, unitConverter, AudioEvent, Tag) {

$scope.status = 'idle';

Expand All @@ -13,9 +15,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
};

$scope.clearFilter = function clearFilter() {

$scope.filterSettings = getEmptyFilterSettings();

$scope.setFilter();
};

Expand All @@ -29,10 +29,11 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
return '/library/?' + $url.toKeyValue(paramObj);
};

function getEmptyFilterSettings(){
function getEmptyFilterSettings() {
return {
tagsPartial: null,
reference: '', // set to empty string to match value of radio button
userId: null,
annotationDuration: null,
freqMin: null,
freqMax: null,
Expand All @@ -41,8 +42,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
};
}

function loadFilter() {
$scope.status = 'loading';
function normaliseFilterSettings() {
$scope.filterSettings = angular.extend({}, $scope.filterSettings, $routeParams);

// ensure properties that need to be numeric are actually numbers
Expand All @@ -58,17 +58,6 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
$scope.filterSettings[currentvalue] = stringValue === null ? null : Number(stringValue);
}
);

$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';
console.error('Failed to load library response.', $scope.filterSettings, httpResponse);
});
}

function getPagingSettings(page, items, total) {
Expand Down Expand Up @@ -135,35 +124,66 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])

return paging;
}

function loadFilter() {
$scope.status = 'loading';

normaliseFilterSettings();

AudioEvent.library($scope.filterSettings, null, function librarySuccess(value, responseHeaders) {

$scope.status = 'loaded';
$scope.responseDetails = responseHeaders;
$scope.paging = getPagingSettings(value.page, value.items, value.total);
$scope.annotations = [];

angular.forEach(value.entries, function (audioEventValue, key) {
var annotation = angular.extend({}, audioEventValue);
annotation.priorityTag = Tag.selectSinglePriorityTag(annotation.tags);
AudioEvent.addCalculatedProperties(annotation);
AudioEvent.getBoundSettings(annotation);
this.push(annotation);
}, $scope.annotations);

}, function libraryError(httpResponse) {
$scope.status = 'error';
console.error('Failed to load library response.', $scope.filterSettings, httpResponse);
});
}
}])
.controller('AnnotationItemCtrl', ['$scope', '$location', '$resource', '$routeParams', '$url', 'conf.paths', 'AudioEvent', 'Media',
function ($scope, $location, $resource, $routeParams, $url, paths, AudioEvent, Media) {
.controller('AnnotationItemCtrl',
['$scope', '$location', '$resource', '$routeParams', '$url',
'conf.paths', 'conf.constants',
'AudioEvent', 'Tag',
function ($scope, $location, $resource, $routeParams, $url, paths, constants, AudioEvent, Tag) {

var parameters = {
audioEventId: $routeParams.audioEventId,
recordingId: $routeParams.recordingId
};

$scope.model = AudioEvent.get(parameters,
function annotationShowSuccess(value, responseHeaders) {
Media.getMediaItem(value);
value.audioElement = null;
$scope.model = value;
AudioEvent.get(parameters,
function annotationShowSuccess(audioEventValue, responseHeaders) {

if ($scope.model.paging.nextEvent.hasOwnProperty('audioEventId')) {
$scope.model.paging.nextEvent.link = '/library/' +
$scope.model.paging.nextEvent.audioRecordingId +
'/audio_events/' + $scope.model.paging.nextEvent.audioEventId;
}
var annotation = angular.extend({}, audioEventValue);
annotation.priorityTag = Tag.selectSinglePriorityTag(annotation.tags);
AudioEvent.addCalculatedProperties(annotation);
AudioEvent.getBoundSettings(annotation);

if ($scope.model.paging.prevEvent.hasOwnProperty('audioEventId')) {
$scope.model.paging.prevEvent.link = '/library/' +
$scope.model.paging.prevEvent.audioRecordingId +
'/audio_events/' + $scope.model.paging.prevEvent.audioEventId;
}
$scope.annotation = annotation;

$scope.model.audioEventDuration = Math.round10(value.endTimeSeconds - value.startTimeSeconds, -3);
// paging
if ($scope.annotation.paging.nextEvent.hasOwnProperty('audioEventId')) {
$scope.annotation.paging.nextEvent.link = '/library/' +
$scope.annotation.paging.nextEvent.audioRecordingId +
'/audio_events/' + $scope.annotation.paging.nextEvent.audioEventId;
}

if ($scope.annotation.paging.prevEvent.hasOwnProperty('audioEventId')) {
$scope.annotation.paging.prevEvent.link = '/library/' +
$scope.annotation.paging.prevEvent.audioRecordingId +
'/audio_events/' + $scope.annotation.paging.prevEvent.audioEventId;
}
}, function annotationShowError(httpResponse) {
console.error('Failed to load library single item response.', parameters, httpResponse);
});
Expand Down
Loading

0 comments on commit f44b6aa

Please sign in to comment.