File uploads

static/css/main.css

@@ -204,7 +204,7 @@ header .menu {
 #file-section {
   justify-self: center;
   width: 900px;
-  margin-top: 32px;
+  margin-top: 16px;
   padding: 32px;
   background: #f5f5f5;
 }
@@ -224,6 +224,10 @@ header .menu {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  cursor: pointer;
+}
+#file-section .files .filename:hover {
+  text-decoration: underline;
 }
 #file-section .files .size {
   white-space: nowrap;
@@ -232,13 +236,17 @@ header .menu {
 .tree {
   padding: 16px;
 }
-@media only screen and (max-width: 100ex) {
+@media only screen and (max-width: 932px) {
   .node-content {
-    width: 100%;
+    width: calc(100% - 32px);
+    margin-left: 16px;
+    padding: 16px;
     justify-self: start;
   }
   #file-section {
-    width: 100%;
+    width: calc(100% - 32px);
+    padding: 16px;
+    margin-left: 16px;
     justify-self: start;
   }
 }

static/js/node.mjs

@@ -226,7 +226,7 @@ class NodeFiles extends Component {
 			})
 			.map(file=>
 				html`
-					<div class="filename">${file.Filename}</div>
+					<div class="filename" onclick=${()=>node.download(file.ID)}>${file.Filename}</div>
 					<div class="size">${this.formatSize(file.Size)}</div>
 				`
 			)
@@ -308,6 +308,37 @@ class Node {
 		.then(callback)
 		.catch(this.app.responseError)
 	}//}}}
+	download(fileID) {//{{{
+		let headers = {
+			'Content-Type': 'application/json',
+		}
+
+		if(this.app.session.UUID !== '')
+			headers['X-Session-Id'] = this.app.session.UUID
+
+		let fname = ""
+		fetch("/node/download", {
+			method: 'POST',
+			headers,
+			body: JSON.stringify({
+				NodeID: this.ID,
+				FileID: fileID,
+			}),
+		})
+		.then(response=>{
+			 console.log(...response.headers);
+			return response.blob()
+		})
+		.then(blob=>{
+			let url = window.URL.createObjectURL(blob)
+			let a = document.createElement('a');
+			a.href = url;
+			a.download = "filename.xlsx";
+			document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
+			a.click();    
+			a.remove();  //afterwards we remove the element again
+		})
+	}//}}}
 	children(callback) {//{{{
 		this.app.request('/node/tree', { StartNodeID: this.ID })
 		.then(res=>{

static/less/main.less

@@ -240,7 +240,7 @@ header {
 #file-section {
 	justify-self: center;
 	width: 900px;
-	margin-top: 32px;
+	margin-top: 16px;
 	padding: 32px;
 	background: #f5f5f5;
 
@@ -261,6 +261,11 @@ header {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
+			cursor: pointer;
+
+			&:hover {
+				text-decoration: underline;
+			}
 		}
 
 		.size {
@@ -274,14 +279,18 @@ header {
 	padding: 16px;
 }
 
-@media only screen and (max-width: 100ex) {
+@media only screen and (max-width: 932px) {
 	.node-content {
-		width: 100%;
+		width: calc(100% - 32px);
+		margin-left: 16px;
+		padding: 16px;
 		justify-self: start;
 	}
 
 	#file-section {
-		width: 100%;
+		width: calc(100% - 32px);
+		padding: 16px;
+		margin-left: 16px;
 		justify-self: start;
 	}
 }