From 406267111245ab2b15134db617cc46a49422d8ab Mon Sep 17 00:00:00 2001
From: jaden <noreply@example.com>
Date: Wed, 31 May 2017 17:10:07 +0200
Subject: [PATCH] use old version of export func, fixes #33
---
.../reports/app/directives/downloadLink.js | 51 +++++++++++--------
.../reports/app/directives/edit/plotItem.js | 14 +----
.../reports/app/services/plotService.js | 19 ++++++-
3 files changed, 49 insertions(+), 35 deletions(-)
diff --git a/beat/web/reports/static/reports/app/directives/downloadLink.js b/beat/web/reports/static/reports/app/directives/downloadLink.js
index 49342b12c..74733f12a 100644
--- a/beat/web/reports/static/reports/app/directives/downloadLink.js
+++ b/beat/web/reports/static/reports/app/directives/downloadLink.js
@@ -23,28 +23,35 @@
/*
* downloadLink
* Desc:
- * A button to download the content of the report item
+ * A button to download the content of the report item in the
+ * chosen file format (PNG, JPEG, PDF)
*/
angular.module('reportApp')
-.directive("downloadLink", [function(){
+.directive("downloadLink", ['PlotService', function(PlotService){
return {
scope: {
- getDownloadHref: '&',
domId: '@',
- imgName: '@'
+ group: '=',
+ itemId: '='
},
link: function(scope){
- scope.downloadLinkId = () => `${scope.domId}-download`;
+ scope.filetypes = [
+ 'PNG',
+ 'JPEG',
+ 'PDF'
+ ];
- scope.setupDownloadLinkTest = (event) => {
- const a = document.querySelector(`#${scope.downloadLinkId()}`);
- const hrefs = scope.getDownloadHref()();
+ // download the img via the invisible link element
+ scope.downloadImgs = (e, ftype) => {
+ // get plot data URL
+ PlotService.downloadPlot(scope.group, scope.itemId, ftype)
+ .then(data => {
+ e.preventDefault();
+ // invisible el, see end of template
+ const a = document.querySelector(`#${scope.domId}-download`);
- event.preventDefault();
-
- hrefs.forEach((href, i) => {
- a.href = href;
- a.download = `${scope.imgName}-${i}.png`;
+ a.href = data;
+ a.download = `${scope.domId}-${scope.itemId}.${ftype.toLowerCase()}`;
a.click();
a.href = '';
a.download = '';
@@ -53,14 +60,16 @@ angular.module('reportApp')
};
},
template: `
-<a
- id='{{ downloadLinkId() }}'
- style='color: white;'
- class='btn btn-primary'
- ng-click='setupDownloadLinkTest($event)'>
- <i class='fa fa-download fa-lg'></i>
- Download
-</a>
+<div class='btn-group'>
+ <button type='button' class='btn btn-primary dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+ Download
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a ng-repeat='t in filetypes' ng-click='downloadImgs($event, t)'>{{ t }}</a></li>
+ </ul>
+</div>
+<a id='{{ domId }}-download'></a>
`
};
}]);
diff --git a/beat/web/reports/static/reports/app/directives/edit/plotItem.js b/beat/web/reports/static/reports/app/directives/edit/plotItem.js
index a0cdf0b4f..6c0d42ad8 100644
--- a/beat/web/reports/static/reports/app/directives/edit/plotItem.js
+++ b/beat/web/reports/static/reports/app/directives/edit/plotItem.js
@@ -90,16 +90,6 @@ angular.module('reportApp')
() => JSON.stringify(scope.group._aliases),
updatePlot
);
-
- scope.exportSrcFunc = () => () => {
- const el = document.querySelectorAll(`#${scope.renderDivId} img`);
- const srcs = Array.from(el)
- .map(e => e.src)
- //.map(src => src.replace(/^data:undefined/, 'data:application/octet-stream'));
- ;
-
- return srcs;
- };
},
template: `
<div id="{{domId}}-heading" class="panel-heading" role="tab">
@@ -128,8 +118,8 @@ angular.module('reportApp')
</div>
<download-link
dom-id='{{ domId }}'
- img-name='{{ renderDivId }}'
- get-download-href='exportSrcFunc()'
+ group='group'
+ item-id='itemId'
>
</download-link>
</h4>
diff --git a/beat/web/reports/static/reports/app/services/plotService.js b/beat/web/reports/static/reports/app/services/plotService.js
index bc7d836e7..a80aa1d78 100644
--- a/beat/web/reports/static/reports/app/services/plotService.js
+++ b/beat/web/reports/static/reports/app/services/plotService.js
@@ -48,6 +48,7 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
// constructs the payload to send to the server
const constructPlotInfo = (group, itemId) => {
+ console.log(group);
const content = group.reportItems.find(i => i.id === itemId).content;
// defaults obj, in case we're using defaults
@@ -130,6 +131,10 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
const fetchDownload = (requestData, contentType) => {
const urlPrefix = '';
+ // override the 'merged' property to always request the merged version.
+ // requested the unmerged version only downloads the first image.
+ requestData[0] = Object.assign({}, requestData[0], { merged: true });
+
return new Promise((resolve, reject) => {
beat.experiments.utils.getPlotData(
// url_prefix
@@ -153,7 +158,7 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
// but it seems to always be an empty string now
const urlPrefix = '';//UrlService.getApiSegment().split('/').filter(s => s.length > 0).join('/');
- // promisify this utils func so we dont have to deal with callback hell
+ // this func *cannot* be promisified! the callback is fired whenever the plot is re-rendered.
beat.experiments.utils.displayPlot(
// url_prefix
urlPrefix,
@@ -170,6 +175,13 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
);
};
+ // helper func to process a request to plot
+ const processDownload = (group, itemId, contentType) => {
+ const reqData = constructPlotInfo(group, itemId);
+
+ return fetchDownload(reqData, contentType);
+ };
+
// helper func to process a request to plot
const processItem = (group, itemId, containerId, onRenderCallback) => {
const reqData = constructPlotInfo(group, itemId);
@@ -205,8 +217,11 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
};
// chooses whether to add the plot request to a queue or service directly
- // args: group, itemId, containerId
+ // args: group, itemId, containerId, onRenderCallback
ps.addPlot = (...args) => noQueueNeeded ? processItem(...args) : addItemToQueue(...args);
+ // args: group, itemId, contentType
+ ps.downloadPlot = (...args) => processDownload(...args);
+
return ps;
}]);
--
GitLab