add download button for figures, generate download in js

beat/web/reports/static/reports/app/directives/downloadLink.js

+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+/*
+ * downloadLink
+ * Desc:
+ * 	A button to download the content of the report item
+ */
+angular.module('reportApp')
+.directive("downloadLink", [function(){
+	return {
+		scope: {
+			getDownloadHref: '&',
+			domId: '=',
+			imgName: '='
+		},
+		link: function(scope){
+			scope.downloadLinkId = `${scope.domId}-download`;
+			scope.setupDownloadLinkTest = (event) => {
+				const a = document.querySelector(`#${scope.downloadLinkId}`);
+				const href = scope.getDownloadHref()();
+
+				if(!href){
+					event.preventDefault();
+					return false;
+				}
+
+				a.href = href;
+			};
+		},
+		template: `
+<a
+	id='{{ downloadLinkId }}'
+	style='color: white;'
+	class='btn btn-primary'
+	ng-click='setupDownloadLinkTest()'
+	download='img.png'>
+	<i class='fa fa-download fa-lg'></i>
+	Download
+</a>
+`
+	};
+}]);

beat/web/reports/static/reports/app/directives/edit/plotItem.js

@@ -65,6 +65,15 @@ angular.module('reportApp')
 					}
 				}
 			);
+
+			scope.exportSrcFunc = () => () => {
+				const el = document.querySelector(`#${scope.renderDivId} img`);
+				if(!el){
+					return false;
+				}
+
+				return el.src;
+			};
 		},
 		template: `
 <div id="{{domId}}-heading" class="panel-heading" role="tab">
@@ -91,6 +100,12 @@ angular.module('reportApp')
 				<i class='fa fa-arrows fa-lg'></i>
 			</span>
 		</div>
+		<download-link
+			domId='domId'
+			imgName='"test.png"'
+			get-download-href='exportSrcFunc()'
+			>
+			</download-link>
 	</h4>
 </div>
 <div id="collapse-{{domId}}"

beat/web/reports/static/reports/app/directives/view/plotItem.js

@@ -41,8 +41,24 @@ angular.module('reportApp')
 			$timeout(function() {
 				PlotService.addPlot(scope.group, scope.id, scope.renderDivId);
 			});
+
+			scope.exportSrcFunc = () => () => {
+				const el = document.querySelector(`#${scope.renderDivId} img`);
+				if(!el){
+					return false;
+				}
+
+				return el.src;
+			};
 		},
 		template: `
+<download-link
+	class='pull-right'
+	domId='domId'
+	imgName='"test.png"'
+	get-download-href='exportSrcFunc()'
+	>
+	</download-link>
 <div id='{{ renderDivId }}'></div>
 `
 	};

beat/web/reports/templates/reports/report.html

@@ -99,6 +99,7 @@
 
     <!-- new -->
     <script src="{% fingerprint "reports/app/directives/tableItem.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/downloadLink.js" %}" type="text/javascript" charset="utf-8"></script>
 
     <!-- edit view -->
     {% if not report_number and report.get_status_display == 'Editable' and owner %}