Skip to content

Commit

Permalink
added paging control
Browse files Browse the repository at this point in the history
  • Loading branch information
Mark Cottman-Fields committed Apr 16, 2014
1 parent e283c46 commit 4dd70eb
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 54 deletions.
111 changes: 79 additions & 32 deletions src/app/annotationLibrary/annotationLibrary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
loadFilter();

$scope.setFilter = function setFilter() {
$location.path('/library').search(createQuery($scope.filterSettings));
$location.path('/library').search(baw.angularCopies.toKeyValue($scope.filterSettings));
};

$scope.clearFilter = function clearFilter() {
Expand All @@ -39,19 +39,10 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
$scope.setFilter();
};

function createQuery(params) {
var hash = {};
for (var key in params) {
if (params.hasOwnProperty(key)) {
var value = params[key];
if (value !== undefined && value !== null && (typeof(value) === "string" ? value.length > 0 : true)) {
hash[key] = value;
}
}
}
//console.log(hash);
return hash;
}

$scope.createFilterUrl = function createFilterUrl(paramObj) {
return '/library/?' + baw.angularCopies.toKeyValue(paramObj);
};

function getTag(tags) {
return Tag.selectSinglePriorityTag(tags);
Expand All @@ -66,7 +57,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
}

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

[
'annotationDuration',
Expand All @@ -83,14 +74,72 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
$scope.library = AudioEvent.library($scope.filterSettings, null, function librarySuccess(value) {
value.entries.map(getMedia);

var pageCount = Math.max(Math.ceil($scope.library.total / $scope.library.items), 7);
$scope.paginationLinks = [];
for (var p = 1; p < pageCount; p++) {
var link = '/library?page=' + p + '&items=' + $scope.library.items;
$scope.paginationLinks.push(link);
$scope.paging = getPagingSettings($scope.library.page, $scope.library.items, $scope.library.total);
});
}

function getPagingSettings(page, items, total) {
var paging = {
maxPageLinks: 7,
surroundingCurrentLinks: 3,
minPageNumber: 1,
total: total,
items: items,
page: page
};

paging.maxPageNumber = Math.max(Math.ceil(paging.total / paging.items), paging.maxPageLinks);
paging.minCount = Math.max(paging.page - paging.surroundingCurrentLinks, paging.minPageNumber);
paging.maxCount = Math.min(paging.page + paging.surroundingCurrentLinks, paging.maxPageNumber);

paging.links = {};

paging.links.first =
$scope.createFilterUrl(
angular.extend({}, $scope.filterSettings,
{page: paging.minPageNumber, items: paging.items})
);

paging.links.prev =
$scope.createFilterUrl(
angular.extend({}, $scope.filterSettings,
{page: Math.max(paging.page - 1, paging.minPageNumber), items: paging.items})
);

paging.links.current =
$scope.createFilterUrl(
angular.extend({}, $scope.filterSettings,
{page: paging.page, items: paging.items})
);

paging.links.next =
$scope.createFilterUrl(
angular.extend({}, $scope.filterSettings,
{page: Math.min(paging.page + 1, paging.maxPageNumber), items: paging.items})
);

paging.links.last =
$scope.createFilterUrl(
angular.extend({}, $scope.filterSettings,
{page: paging.maxPageNumber, items: paging.items})
);

paging.links.before = [];
paging.links.after = [];

for (var p = paging.minCount; p <= paging.maxCount; p++) {
if (p != paging.page && p != paging.minPageNumber && p != paging.maxPageNumber) {
var linkObj = angular.extend({}, $scope.filterSettings, {page: p, items: paging.items});
var link = $scope.createFilterUrl(linkObj);
if (p < paging.page) {
paging.links.before.push({page: p, link: link});
} else {
paging.links.after.push({page: p, link: link});
}
}
}

});
return paging;
}

function getMediaParameters(value) {
Expand Down Expand Up @@ -120,7 +169,6 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])

value.priorityTag = getTag(value.tags);


value.converters = unitConverter.getConversions({
sampleRate: value.media.sampleRate,
spectrogramWindowSize: value.media.availableImageFormats.png.window,
Expand All @@ -139,21 +187,21 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
value.annotationDuration = value.endTimeSeconds - value.startTimeSeconds;

// urls
value.listenUrl = '/listen/' + audioRecordingIdValue
+ '?start=' + calcOffsetStartValue
+ '&end=' + calcOffsetEndValue;
value.siteUrl = '/projects/' + value.projects[0].id
+ '/sites/' + value.siteId;
value.listenUrl = '/listen/' + audioRecordingIdValue +
'?start=' + calcOffsetStartValue +
'&end=' + calcOffsetEndValue;
value.siteUrl = '/projects/' + value.projects[0].id +
'/sites/' + value.siteId;
value.userUrl = '/user_accounts/' + value.ownerId;

// updateFilter({tagsPartial:item.priorityTag.text})
value.tagSearchUrl = '/library?tagsPartial=' +
baw.angularCopies.fixedEncodeURI(value.priorityTag.text);

// updateFilter({annotationDuration:Math.round10(value.annotationDuration, -3), ...})
value.similarUrl = '/library?annotationDuration=' + Math.round10(value.annotationDuration, -3)
+ '&freqMin=' + Math.round(value.lowFrequencyHertz)
+ '&freqMax=' + Math.round(value.highFrequencyHertz);
value.similarUrl = '/library?annotationDuration=' + Math.round10(value.annotationDuration, -3) +
'&freqMin=' + Math.round(value.lowFrequencyHertz) +
'&freqMax=' + Math.round(value.highFrequencyHertz);

// set common/sensible defaults, but hide the elements
value.gridConfig = {
Expand Down Expand Up @@ -190,7 +238,6 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
});
}


function formatPaths(media) {

var imgKeys = Object.keys(media.availableImageFormats);
Expand All @@ -209,5 +256,5 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
this[key].url = paths.joinFragments(paths.api.root, value.url);

}, media.availableAudioFormats);
};
}
}]);
70 changes: 50 additions & 20 deletions src/app/annotationLibrary/annotationLibrary.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,38 @@
<div id="content" data-ng-controller="AnnotationLibraryCtrl">
<h1>Annotation Library</h1>
<h3>Annotation Library</h3>

<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="refLibraryTags" class="col-sm-1 control-label">Tags</label>

<div class="col-sm-4">
<div class="col-sm-5">
<input type="text" class="form-control" id="refLibraryTags" placeholder="Tags"
ng-model="filterSettings.tagsPartial">
</div>

<p class="help-block text-muted">Use ',' (comma) to separate tags.</p>
<p class="help-block text-muted col-sm-6">Use comma (,) to separate tags.</p>

</div>
<div class="form-group">
<label for="refLibraryDuration" class="col-sm-1 control-label">Duration</label>

<div class="col-sm-2">
<input type="number" class="form-control" id="refLibraryDuration" placeholder="Duration"
<input type="number" class="form-control" id="refLibraryDuration" placeholder="Duration (in milliseconds)"
ng-model="filterSettings.annotationDuration">
</div>

<label for="refLibraryFreqMin" class="col-sm-1 control-label">Min Frequency</label>
<p class="help-block text-muted col-sm-1">milliseconds</p>

<label for="refLibraryFreqMin" class="col-sm-2 control-label">Min Frequency</label>

<div class="col-sm-2">
<input type="number" class="form-control" id="refLibraryFreqMin"
placeholder="Minimum Frequency" ng-model="filterSettings.freqMin">
</div>

<label for="refLibraryFreqMax" class="col-sm-1 control-label">Max Frequency</label>
<label for="refLibraryFreqMax" class="col-sm-2 control-label">Max Frequency</label>

<div class="col-sm-2">
<input type="number" class="form-control" id="refLibraryFreqMax"
Expand All @@ -40,15 +42,15 @@ <h1>Annotation Library</h1>
<div class="form-group">
<label for="refLibraryReference1" class="col-sm-1 control-label">Annotations</label>

<div class="col-sm-3">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="refLibraryReference" id="refLibraryReference1"
value="" checked ng-model="filterSettings.reference"> No Restriction
value="" checked ng-model="filterSettings.reference"> All
</label>

<label class="radio-inline">
<input type="radio" name="refLibraryReference" id="refLibraryReference2"
value="true" ng-model="filterSettings.reference"> Reference Only
value="true" ng-model="filterSettings.reference"> Only Reference
</label>

<label class="radio-inline">
Expand All @@ -57,36 +59,64 @@ <h1>Annotation Library</h1>
</label>
</div>

<label for="refLibraryPage" class="col-sm-1 control-label">Page Number</label>
<label for="refLibraryPage" class="col-sm-1 control-label">Page</label>

<div class="col-sm-1">
<div class="col-sm-2">
<input type="number" class="form-control" id="refLibraryPage" placeholder="Page"
ng-model="filterSettings.page">
</div>

<label for="refLibraryItems" class="col-sm-1 control-label">Items</label>
<label for="refLibraryItems" class="col-sm-2 control-label">Items</label>

<div class="col-sm-1">
<div class="col-sm-2">
<input type="number" class="form-control" id="refLibraryItems" placeholder="Items"
ng-model="filterSettings.items">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<div class="col-sm-offset-1 col-sm-2">
<button type="submit" class="btn btn-primary" ng-click="setFilter()">Filter</button>
<button type="submit" class="btn btn-warning" ng-click="clearFilter()">Clear</button>
</div>
<div class="col-sm-1">
{{}}
</div>
<div class="col-sm-8">
<ul class="pagination">
<li ng-show="paging.page != paging.minPageNumber">
<a ng-href="{{paging.links.prev}}">&laquo;</a>
</li>
<li ng-show="paging.page != paging.minPageNumber">
<a ng-href="{{paging.links.first}}">{{paging.minPageNumber}}</a>
</li>
<li ng-show="paging.minCount > paging.minPageNumber">
<span>&hellip;</span>
</li>
<li ng-repeat="pageItem in paging.links.before">
<a ng-href="{{pageItem.link}}">{{pageItem.page}}</a>
</li>
<li class="active">
<a ng-href="{{paging.current}}">{{paging.page}}</a>
</li>
<li ng-repeat="pageItem in paging.links.after">
<a ng-href="{{pageItem.link}}">{{pageItem.page}}</a>
</li>
<li ng-show="paging.maxCount < paging.maxPageNumber">
<span>&hellip;</span>
</li>
<li ng-show="paging.page != paging.maxPageNumber">
<a ng-href="{{paging.links.last}}">{{paging.maxPageNumber}}</a>
</li>
<li ng-show="paging.page != paging.maxPageNumber">
<a ng-href="{{paging.links.next}}">&raquo;</a>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li ng-repeat="pageItem in paginationLinks"><a ng-href="{{pageItem}}">{{$index + 1}}</a></li>
<li><a href="#">&raquo;</a></li>
</ul>

<div class="annoLib">
<div ng-repeat="item in library.entries" class="pull-left annoLibItem">
<div class="annoLibSpectrogram">
Expand Down
4 changes: 2 additions & 2 deletions src/common/functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,7 @@ if (!Array.prototype.filter) {
this.toKeyValue = function toKeyValue(obj) {
var parts = [];
angular.forEach(obj, function (value, key) {
if(value !== undefined){
if(value !== undefined && value !== null && (typeof(value) === "string" ? value.length > 0 : true)){
parts.push(encodeUriQuery(key, true) + (value === true ? '' : '=' + encodeUriQuery(value, true)));
}
});
Expand All @@ -375,7 +375,7 @@ if (!Array.prototype.filter) {
replace(/%24/g, '$').
replace(/%2C/gi, ',').
replace((pctEncodeSpaces ? null : /%20/g), '+');
};
}

this.encodeUriQuery = encodeUriQuery;

Expand Down

0 comments on commit 4dd70eb

Please sign in to comment.