Skip to content

Commit

Permalink
Work on analysis results UI
Browse files Browse the repository at this point in the history 
- implement download folder as zip links
- implement paging of results
  • Loading branch information
@atruskie
atruskie committed Apr 1, 2016
1 parent f6efe48 commit dd40a84
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 71 deletions.
29 changes: 25 additions & 4 deletions src/app/analysisResults/fileList/fileList.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
class FileListController {
constructor($scope, $routeParams, growl, AnalysisJobService, AnalysisResultService) {
constructor($scope, $location, $routeParams, $url, growl, AnalysisJobService, AnalysisResultService) {
let controller = this;

this.analysisJob = null;
this.analysisResult = null;
this.paging = undefined;
this._$location = $location;
this._$url = $url;

$routeParams.path = $routeParams.path || "/";
$routeParams.page = Number($routeParams.page);
if (isNaN($routeParams.page)) {
$routeParams.page = undefined;
}


// download metadata
AnalysisJobService
Expand All @@ -13,9 +22,15 @@ class FileListController {
controller.analysisJob = response.data.data[0];
controller.updateCurrentDirectory();
})
.then(() => AnalysisResultService.get($routeParams.path))
.then(() => AnalysisResultService.get($routeParams.path, $routeParams.page))
.then(function (response) {
controller.analysisResult = response.data.data[0];

controller.paging = response.data.meta.paging;
if (controller.paging) {
controller.paging.maxPageLinks = 10;
}

controller.analysisResult.analysisJob = controller.analysisJob;
controller.updateCurrentDirectory();
})
Expand All @@ -37,7 +52,7 @@ class FileListController {
title: !this.analysisJob ? "" : (this.analysisJob.name.substring(0, 12) + "…")
},
{
path: !this.analysisResult ? "" : this.analysisResult.viewUrl,
path: !this.analysisJob ? "" : this.analysisJob.resultsUrl,
title: "results"
}
];
Expand All @@ -58,7 +73,11 @@ class FileListController {
}

getPath(fragment, i, fragments) {
return this.analysisJob.resultsUrl + fragments.slice(0, i + 1).join("/");
return this.analysisJob.resultsUrl + "/" + fragments.slice(0, i + 1).join("/");
}

getPaginationLink(page) {
return this._$url.formatUri(this._$location.path(), {page});
}
}

Expand All @@ -68,7 +87,9 @@ angular
"FileListController",
[
"$scope",
"$location",
"$routeParams",
"$url",
"growl",
"AnalysisJob",
"AnalysisResult",
Expand Down
93 changes: 55 additions & 38 deletions src/app/analysisResults/fileList/fileList.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
<layout content-for="action-items">
<li>
<a href="{{ fileList.analysisJob.resultsUrl }}">
<a ng-href="{{:: fileList.analysisResult.hasZip && fileList.analysisResult.zipUrl || null}}"
ng-class="{disabled: !fileList.analysisResult.hasZip}"
uib-tooltip="Zip file is not ready to download... we're working on it."
tooltip-enable="!fileList.analysisResult.hasZip"
>
<i class="fa fa-file-archive-o"></i>
Download this folder
</a>

</li>
</layout>
<div id="content" class="analysis-job-details">
Expand Down Expand Up @@ -33,51 +38,63 @@ <h2>Files</h2>
</div>

</div>
<div class="row" ng-if="::fileList.paging">
<uib-pagination class=""
total-items="fileList.paging.total"
ng-model="fileList.paging.page"
items-per-page="fileList.paging.items"
boundary-links="true"
max-size="fileList.paging.maxPageLinks"
num-pages="fileList.paging.numPages"
rotate="false"
pagination-href="fileList.getPaginationLink"
>
</uib-pagination>
</div>
<div class="row">
<table class="table table-hover" ng-if="fileList.analysisResult.children">
<thead>
<tr>
<th class="col-md-0">
Name
</th>
<th class="col-md-2">
Size
</th>
<th class="col-md-1">
Download
</th>
</tr>
<tr>
<th class="">
Name
</th>
<th class="col-md-1">
Size
</th>
<th class="col-md-1">
Download
</th>
</tr>
</thead>
<tbody>
<tr ng-if="!fileList.analysisResult.children || fileList.analysisResult.children.length === 0">
<td colspan="4">
<tr ng-if="!fileList.analysisResult.children || fileList.analysisResult.children.length === 0">
<td colspan="4">
<span class="text-muted">
No files in this folder
</span>
</td>
</tr>
<tr ng-repeat="file in fileList.analysisResult.children"

ng-click="$ctrl.selectedSavedSearch = savedSearch">
<td ng-if="file.isDirectory">
<a ng-href="{{ file.viewUrl }}">
<span class="{{ file.icon }}"></span>
{{ file.name }}
</a>
</td>
<td ng-if="!file.isDirectory">
<span class="{{ file.icon }}"></span>
{{ file.name }}
</td>
<td>
{{ file.friendlySize }}
</td>
<td>
<a ng-href="{{ file.url }}">
download
</a>
</td>
</tr>
</td>
</tr>
<tr ng-repeat="file in fileList.analysisResult.children">
<td ng-if="::file.isDirectory">
<span class="{{:: file.icon }}"></span>
<a ng-href="{{:: file.viewUrl }}">
{{:: file.name }}
</a>
</td>
<td ng-if="::!file.isDirectory">
<span class="{{:: file.icon }}"></span>
{{:: file.name }}
</td>
<td>
{{:: file.friendlySize }}
</td>
<td>
<a ng-href="{{:: file.url }}"
ng-if="::file.isFile">
download
</a>
</td>
</tr>
</tbody>
</table>

Expand Down
4 changes: 3 additions & 1 deletion src/baw.paths.nobuild.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ module.exports = function (environment) {
"analysisResults": {
"system": "/analysis_jobs/system/audio_recordings/{recordingId}",
"job": "/analysis_jobs/{analysisJobId}/audio_recordings/{recordingId}",
"jobWithPath": "/analysis_jobs/{analysisJobId}/audio_recordings{path}"
}
},
"links": {
Expand Down Expand Up @@ -165,7 +166,8 @@ module.exports = function (environment) {
// general links for use in <a />'s
"links": {
analysisJobs: {
analysisResults: "/analysis_jobs/{analysisJobId}/results/{recordingId}"
analysisResults: "/analysis_jobs/{analysisJobId}/results",
analysisResultsWithPath: "/analysis_jobs/{analysisJobId}/results{path}"
}
},
"assets": {
Expand Down
28 changes: 20 additions & 8 deletions src/components/models/analysisResult.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ angular
this.type = this.type || null;
this.mime = this.mime || null;
this.sizeBytes = this.sizeBytes || null;
this.hasChildren = this.hasChildren || false;
this.hasChildren = this.hasChildren === true || false;
this.hasZip = this.hasZip === true || false;

let children = [];
if (this.children) {
Expand Down Expand Up @@ -99,7 +100,16 @@ angular
return this._path;
}

let path = (this._parent && this._parent.path);
if (!this._parent) {
return undefined;
}

let path = this._parent.path;

if (!path) {
return undefined;
}

if (!path.endsWith("/")) {
path = path + "/";
}
Expand All @@ -115,27 +125,29 @@ angular
// url to the resource
get url() {
let analysisJobId = !this.analysisJob ? this.analysisJobId : this.analysisJob.id;
let audioRecordingId = this.audioRecordingId;

let url = paths.api.routes.analysisResults.jobAbsolute + this.path;
let url = paths.api.routes.analysisResults.jobWithPath;

let result = $url.formatUri(
url,
{analysisJobId, recordingId: audioRecordingId}
{analysisJobId, path: this.path}
);

return result;
}

get zipUrl() {
return this.url + ".zip";
}

get viewUrl() {
let analysisJobId = !this.analysisJob ? this.analysisJobId : this.analysisJob.id;
let audioRecordingId = this.audioRecordingId;

let url = paths.site.links.analysisJobs.analysisResults + this.path;
let url = paths.site.links.analysisJobs.analysisResultsWithPath;

let result = $url.formatUri(
url,
{analysisJobId, recordingId: audioRecordingId}
{analysisJobId, path: this.path}
);

return result;
Expand Down
Loading

0 comments on commit dd40a84

Please sign in to comment.