File uploads

static/css/main.css

@@ -193,17 +193,41 @@ header .menu {
   font-family: monospace;
   font-size: 0.85em;
   color: #333;
-  width: 100ex;
+  width: 900px;
   resize: none;
   border: none;
   outline: none;
 }
-.node-content[contenteditable] {
-  outline: 0px solid transparent;
-}
 .node-content:invalid {
-  border-bottom: 1px solid #eee;
-  border-radius: 8px;
+  background: #f5f5f5;
+}
+#file-section {
+  justify-self: center;
+  width: 900px;
+  margin-top: 32px;
+  padding: 32px;
+  background: #f5f5f5;
+}
+#file-section .header {
+  font-weight: bold;
+  color: #000;
+  margin-bottom: 16px;
+}
+#file-section .files {
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  grid-gap: 8px 16px;
+  color: #444;
+  font-size: 0.85em;
+}
+#file-section .files .filename {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#file-section .files .size {
+  white-space: nowrap;
+  text-align: right;
 }
 .tree {
   padding: 16px;
@@ -213,4 +237,8 @@ header .menu {
     width: 100%;
     justify-self: start;
   }
+  #file-section {
+    width: 100%;
+    justify-self: start;
+  }
 }

static/js/node.mjs

@@ -75,6 +75,8 @@ export class NodeUI extends Component {
 				<div class="node-name">${node.Name}</div>
 				<${NodeContent} key=${node.ID} content=${node.Content} ref=${this.nodeContent} />
 			` : html``}
+
+			<${NodeFiles} node=${this.node.value} />
 		`
 	}//}}}
 	componentDidMount() {//{{{
@@ -212,6 +214,39 @@ class NodeContent extends Component {
 }
 
 class NodeFiles extends Component {
+	render({ node }) {//{{{
+		if(node.Files === null || node.Files.length == 0)
+			return
+
+		let files = node.Files
+			.sort((a, b)=>{
+				if(a.Filename.toUpperCase() < b.Filename.toUpperCase()) return -1
+				if(a.Filename.toUpperCase() > b.Filename.toUpperCase()) return  1
+				return 0
+			})
+			.map(file=>
+				html`
+					<div class="filename">${file.Filename}</div>
+					<div class="size">${this.formatSize(file.Size)}</div>
+				`
+			)
+
+		return html`
+			<div id="file-section">
+				<div class="header">Files</div>
+				<div class="files">
+					${files}
+				</div>
+			</div>
+		`
+	}//}}}
+	formatSize(size) {//{{{
+		if(size < 1048576) {
+			return `${Math.round(size / 1024)} KiB`
+		} else {
+			return `${Math.round(size / 1048576)} MiB`
+		}
+	}//}}}
 }
 
 class Node {
@@ -224,6 +259,7 @@ class Node {
 		this.Content  = ''
 		this.Children = []
 		this.Crumbs   = []
+		this.Files    = []
 	}//}}}
 	retrieve(callback) {//{{{
 		this.app.request('/node/retrieve', { ID: this.ID })
@@ -234,6 +270,7 @@ class Node {
 			this.Content  = res.Node.Content
 			this.Children = res.Node.Children
 			this.Crumbs   = res.Node.Crumbs
+			this.Files    = res.Node.Files
 			callback(this)
 		})
 		.catch(this.app.responseError)
@@ -294,8 +331,8 @@ class Menu extends Component {
 	}//}}}
 }
 class UploadUI extends Component {
-	constructor() {//{{{
-		super()
+	constructor(props) {//{{{
+		super(props)
 		this.file = createRef()
 		this.filelist = signal([])
 		this.fileRefs = []
@@ -339,9 +376,14 @@ class UploadUI extends Component {
 				progress=>{
 					this.progressRefs[i].current.innerHTML = `${progress}%`
 				},
-				()=>{
+				res=>{
+					this.props.nodeui.node.value.Files.push(res.File)
+					this.props.nodeui.forceUpdate()
+
 					this.fileRefs[i].current.classList.add("done")
 					this.progressRefs[i].current.classList.add("done")
+
+					this.props.nodeui.upload.value = false
 				})
 		}
 	}//}}}
@@ -368,7 +410,7 @@ class UploadUI extends Component {
 				return
 			}
 
-			doneCallback()
+			doneCallback(response)
 		})
 
 		request.upload.addEventListener('progress', evt=>{

static/less/main.less

@@ -227,18 +227,46 @@ header {
 	font-family: monospace;
 	font-size: 0.85em;
 	color: #333;
-	width: 100ex;
+	width: 900px;
 	resize: none;
 	border: none;
 	outline: none;
 
-	&[contenteditable] {
-		outline: 0px solid transparent;
+	&:invalid {
+		background: #f5f5f5;
+	}
+}
+
+#file-section {
+	justify-self: center;
+	width: 900px;
+	margin-top: 32px;
+	padding: 32px;
+	background: #f5f5f5;
+
+	.header {
+		font-weight: bold;
+		color: #000;
+		margin-bottom: 16px;
 	}
 
-	&:invalid {
-		border-bottom: 1px solid #eee;
-		border-radius: 8px;
+	.files {
+		display: grid;
+		grid-template-columns: 1fr min-content;
+		grid-gap: 8px 16px;
+		color: #444;
+		font-size: 0.85em;
+
+		.filename {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.size {
+			white-space: nowrap;
+			text-align: right;
+		}
 	}
 }
 
@@ -251,4 +279,9 @@ header {
 		width: 100%;
 		justify-self: start;
 	}
+
+	#file-section {
+		width: 100%;
+		justify-self: start;
+	}
 }