From dd40a845324c0302d8f329b00ca470d33c2fe552 Mon Sep 17 00:00:00 2001 From: Anthony Truskinger Date: Fri, 1 Apr 2016 14:01:50 +1000 Subject: [PATCH] Work on analysis results UI - implement download folder as zip links - implement paging of results --- src/app/analysisResults/fileList/fileList.js | 29 +++++- .../fileList/fileList.tpl.html | 93 +++++++++++-------- src/baw.paths.nobuild.js | 4 +- src/components/models/analysisResult.js | 28 ++++-- .../services/analysisResult/analysisResult.js | 90 ++++++++++++++---- 5 files changed, 173 insertions(+), 71 deletions(-) diff --git a/src/app/analysisResults/fileList/fileList.js b/src/app/analysisResults/fileList/fileList.js index 2c4d81f5..910b13b4 100644 --- a/src/app/analysisResults/fileList/fileList.js +++ b/src/app/analysisResults/fileList/fileList.js @@ -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 @@ -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(); }) @@ -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" } ]; @@ -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}); } } @@ -68,7 +87,9 @@ angular "FileListController", [ "$scope", + "$location", "$routeParams", + "$url", "growl", "AnalysisJob", "AnalysisResult", diff --git a/src/app/analysisResults/fileList/fileList.tpl.html b/src/app/analysisResults/fileList/fileList.tpl.html index 3c10109e..dca9f77a 100644 --- a/src/app/analysisResults/fileList/fileList.tpl.html +++ b/src/app/analysisResults/fileList/fileList.tpl.html @@ -1,9 +1,14 @@
  • - + Download this folder +
    • @@ -33,51 +38,63 @@

    Files

    +
    + + +
    - - - - - + + + + + - - + - - - - - - - + + + + + + + +
    - Name - - Size - - Download -
    + Name + + Size + + Download +
    +
    No files in this folder -
    - - - {{ file.name }} - - - - {{ file.name }} - - {{ file.friendlySize }} - - - download - -
    + + + {{:: file.name }} + + + + {{:: file.name }} + + {{:: file.friendlySize }} + + + download + +
    diff --git a/src/baw.paths.nobuild.js b/src/baw.paths.nobuild.js index dcc92057..5e5141b3 100644 --- a/src/baw.paths.nobuild.js +++ b/src/baw.paths.nobuild.js @@ -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": { @@ -165,7 +166,8 @@ module.exports = function (environment) { // general links for use in 's "links": { analysisJobs: { - analysisResults: "/analysis_jobs/{analysisJobId}/results/{recordingId}" + analysisResults: "/analysis_jobs/{analysisJobId}/results", + analysisResultsWithPath: "/analysis_jobs/{analysisJobId}/results{path}" } }, "assets": { diff --git a/src/components/models/analysisResult.js b/src/components/models/analysisResult.js index d6208763..227f18d8 100644 --- a/src/components/models/analysisResult.js +++ b/src/components/models/analysisResult.js @@ -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) { @@ -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 + "/"; } @@ -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; diff --git a/src/components/services/analysisResult/analysisResult.js b/src/components/services/analysisResult/analysisResult.js index f0a6e29e..3fa4adc7 100644 --- a/src/components/services/analysisResult/analysisResult.js +++ b/src/components/services/analysisResult/analysisResult.js @@ -12,26 +12,48 @@ angular "casingTransformers", "QueryBuilder", "baw.models.AnalysisResult", - function ( - $resource, - bawResource, - $http, - $q, - paths, - _, - casingTransformers, - QueryBuilder, - AnalysisResultModel) { + function ($resource, + bawResource, + $http, + $q, + paths, + _, + casingTransformers, + QueryBuilder, + AnalysisResultModel) { // FAKED! let fakedData = [ { "analysis_job_id": 1, - "audio_recording_id": 1234, + "audio_recording_id": null, "path": "/", "name": "/", "type": "directory", + "has_zip": false, + "children": [ + 1234, + 123456, + 124124, + 234234, + ...(new Array(1000)).fill(1).map((x, i) => i) + ].map(x => ({ + name: x.toString(), + path: "/" + x.toString(), + type: "directory", + "has_children": true, + has_zip: false + })) + }, + { + + "analysis_job_id": 1, + "audio_recording_id": 1234, + "path": "/1234", + "name": "1234", + "type": "directory", + "has_zip": true, "children": [ { "name": "log.txt", @@ -47,7 +69,7 @@ angular "mime": "application/x-yaml" }, { - + "path": "/1234/Towsey.Acoustic", "name": "Towsey.Acoustic", "type": "directory", "has_children": true @@ -58,19 +80,28 @@ angular { "analysis_job_id": 1, "audio_recording_id": 1234, - "path": "/Towsey.Acoustic/Hello/test/bigtest/test.txt", - "name": "Hello", + "path": "/1234/Towsey.Acoustic/Hello/test/bigtest/test.txt", + "name": "test.txt", "type": "directory", - "children": [ - ] + "children": [] + }, + { + "analysis_job_id": 1, + "audio_recording_id": 1234, + "path": "/1234/Towsey.Acoustic/ZoomingTiles", + "name": "ZoomingTiles", + "type": "directory", + "has_zip": false, + "children": [] }, { "analysis_job_id": 1, "audio_recording_id": 1234, - "path": "/Towsey.Acoustic", + "path": "/1234/Towsey.Acoustic", "name": "Towsey.Acoustic", "type": "directory", + "has_zip": true, "children": [ { @@ -353,7 +384,7 @@ angular "mime": "image/png" }, { - "path": "/Towsey.Acoustic/ZoomingTiles", + "path": "/1234/Towsey.Acoustic/ZoomingTiles", "name": "ZoomingTiles", "type": "directory", "has_children": true @@ -432,8 +463,27 @@ angular .then(x => AnalysisResultModel.makeFromApi(x)); } - function get(path) { - return $q.when({data: {data: fakedData.find(x => x.path === path)}}) + function get(path, page = 1) { + + let data = angular.copy({data: fakedData.find(x => x.path === path), meta:{}}); + let length = (data.data.children || []).length; + if (length > 100) { + let offset = (page - 1) * 100; + data.meta = { + paging: { + "page": page, + "items": 100, + "total": length, + "maxPage": Math.ceil(length / 100), + "current": null, + "previous": null, + "next": null + } + }; + data.data.children = data.data.children.slice(offset, offset + 100); + } + + return $q.when({data}) .then(x => AnalysisResultModel.makeFromApi(x)); }