Notes/static/js/node.mjs

import { h, Component, createRef } from 'preact'
import htm from 'htm'
import { signal } from 'preact/signals'
const html = htm.bind(h)

export class NodeUI extends Component {
	constructor() {//{{{
		super()
		this.menu = signal(false)
		this.node = signal(null)
		this.nodeContent = createRef()
		this.upload = signal(false)

		window.addEventListener('popstate', evt=>{
			if(evt.state && evt.state.hasOwnProperty('nodeID'))
				this.goToNode(evt.state.nodeID, true)
			else
				this.goToNode(0, true)
		})

		window.addEventListener('keydown', evt=>this.keyHandler(evt))
	}//}}}
	render() {//{{{
		console.log('render', 'nodeUI')

		if(this.node.value === null)
			return

		let node = this.node.value

		let crumbs = [
			html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>`
		]
	
		crumbs = crumbs.concat(node.Crumbs.slice(0).map(node=>
			html`<div class="crumb" onclick=${()=>this.goToNode(node.ID)}>${node.Name}</div>`
		).reverse())

		let children = node.Children.sort((a,b)=>{
			if(a.Name.toLowerCase() > b.Name.toLowerCase()) return  1;
			if(a.Name.toLowerCase() < b.Name.toLowerCase()) return -1;
			return 0
		}).map(child=>html`
			<div class="child-node" onclick=${()=>this.goToNode(child.ID)}>${child.Name}</div>
		`)

		let modified = ''
		if(this.props.app.nodeModified.value)
			modified = 'modified';

		let upload = '';
		if(this.upload.value)
			upload = html`<${UploadUI} nodeui=${this} />`

		let menu = '';
		if(this.menu.value)
			upload = html`<${Menu} nodeui=${this} />`

		return html`
			${menu}
			${upload}
			<header class="${modified}" onclick=${()=>this.saveNode()}>
				<div class="tree"><img src="/images/${window._VERSION}/tree.svg" /></div>
				<div class="name">Notes</div>
				<div class="add" onclick=${evt=>this.createNode(evt)}>+</div>
				<div class="menu" onclick=${evt=>this.showMenu(evt)}>☰</div>
			</header>

			<div id="crumbs">
				<div class="crumbs">${crumbs}</crumbs>
			</div>

			${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}

			${node.ID > 0 ? html`
				<div class="node-name">${node.Name}</div>
				<${NodeContent} key=${node.ID} content=${node.Content} ref=${this.nodeContent} />
			` : html``}

			<${NodeFiles} node=${this.node.value} />
		`
	}//}}}
	componentDidMount() {//{{{
		this.props.app.startNode.retrieve(node=>{
			this.node.value = node

			// The tree isn't guaranteed to have loaded yet. This is also run from
			// the tree code, in case the node hasn't loaded.
			this.props.app.tree.crumbsUpdateNodes(node)
		})
	}//}}}

	keyHandler(evt) {//{{{
		let handled = true
		switch(evt.key.toUpperCase()) {
			case 'S':
				if(evt.ctrlKey || (evt.shiftKey && evt.altKey))
					this.saveNode()
				else
					handled = false
				break

			case 'N':
				if((evt.ctrlKey && evt.AltKey) || (evt.shiftKey && evt.altKey))
					this.createNode()
				else
					handled = false
				break

			case 'U':
				if((evt.ctrlKey && evt.altKey) || (evt.shiftKey && evt.altKey))
					this.upload.value = true
				else
					handled = false

			default:
				handled = false
		}

		if(handled) {
			evt.preventDefault()
			evt.stopPropagation()
		}
	}//}}}
	showMenu(evt) {//{{{
		evt.stopPropagation()
		this.menu.value = true
	}//}}}
	logout() {//{{{
		window.localStorage.removeItem('session.UUID')
		location.href = '/'
	}//}}}

	goToNode(nodeID, dontPush) {//{{{
		if(this.props.app.nodeModified.value) {
			if(!confirm("Changes not saved. Do you want to discard changes?"))
				return
		}

		if(!dontPush)
			history.pushState({ nodeID }, '', `/?node=${nodeID}`)

		// New node is fetched in order to retrieve content and files.
		// Such data is unnecessary to transfer for tree/navigational purposes.
		let node = new Node(this.props.app, nodeID)
		node.retrieve(node=>{
			this.props.app.nodeModified.value = false
			this.node.value = node

			// Tree needs to know another node is selected, in order to render any
			// previously selected node not selected.
			this.props.app.tree.setSelected(node)
		})
	}//}}}
	createNode(evt) {//{{{
		if(evt)
			evt.stopPropagation()
		let name = prompt("Name")
		if(!name)
			return
		this.node.value.create(name, nodeID=>this.goToNode(nodeID))
	}//}}}
	saveNode() {//{{{
		let content = this.nodeContent.current.contentDiv.current.value
		this.node.value.save(content, ()=>this.props.app.nodeModified.value = false)
	}//}}}
	renameNode() {//{{{
		let name = prompt("New name")
		if(!name)
			return

		this.node.value.rename(name, ()=>{
			this.goToNode(this.node.value.ID)
			this.menu.value = false
		})
	}//}}}
	deleteNode() {//{{{
		if(!confirm("Do you want to delete this note and all sub-notes?"))
			return
		this.node.value.delete(()=>{
			this.goToNode(this.node.value.ParentID)
			this.menu.value = false
		})
	}//}}}
}

class NodeContent extends Component {
	constructor(props) {//{{{
		super(props)
		this.contentDiv = createRef()
		this.state = {
			modified: false,
			//content: props.content,
		}
	}//}}}
	render({ content }) {//{{{
		return html`
			<div class="grow-wrap">
				<textarea id="node-content" class="node-content" ref=${this.contentDiv} oninput=${()=>this.contentChanged()} required rows=1>${content}</textarea>
			</div>
		`
	}//}}}
	componentDidMount() {//{{{
		this.resize()
		window.addEventListener('resize', ()=>this.resize())
	}//}}}
	componentDidUpdate() {//{{{
		this.resize()
	}//}}}
	contentChanged() {//{{{
		window._app.current.nodeModified.value = true
		this.resize()
	}//}}}
	resize() {//{{{
		let textarea = document.getElementById('node-content')
		if(textarea)
			textarea.parentNode.dataset.replicatedValue = textarea.value
	}//}}}
}

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" onclick=${()=>node.download(file.ID)}>${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`
		}
	}//}}}
}

export class Node {
	constructor(app, nodeID) {//{{{
		this.app       = app
		this.ID        = nodeID
		this.ParentID  = 0
		this.UserID    = 0
		this.Name      = ''
		this.Content   = ''
		this.Children  = []
		this.Crumbs    = []
		this.Files     = []
		this._expanded = false // start value for the TreeNode component,
		                       // it doesn't control it afterwards.
		                       // Used to expand the crumbs upon site loading.
	}//}}}
	retrieve(callback) {//{{{
		this.app.request('/node/retrieve', { ID: this.ID })
		.then(res=>{
			this.ParentID = res.Node.ParentID
			this.UserID   = res.Node.UserID
			this.Name     = res.Node.Name
			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)
	}//}}}
	delete(callback) {//{{{
		this.app.request('/node/delete', {
			NodeID: this.ID,
		})
		.then(callback)
		.catch(this.app.responseError)
	}//}}}
	create(name, callback) {//{{{
		this.app.request('/node/create', {
			Name: name.trim(),
			ParentID: this.ID,
		})
		.then(res=>{
			callback(res.Node.ID)
		})
		.catch(this.app.responseError)
	}//}}}
	save(content, callback) {//{{{
		this.app.request('/node/update', {
			NodeID: this.ID,
			Content: content,
		})
		.then(callback)
		.catch(this.app.responseError)
	}//}}}
	rename(name, callback) {//{{{
		this.app.request('/node/rename', {
			Name: name.trim(),
			NodeID: this.ID,
		})
		.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=>{
			let match = response.headers.get('content-disposition').match(/filename="([^"]*)"/)
			fname = match[1]
			return response.blob()
		})
		.then(blob=>{
			let url = window.URL.createObjectURL(blob)
			let a = document.createElement('a');
			a.href = url;
			a.download = fname;
			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
		})
	}//}}}
}

class Menu extends Component {
	render({ nodeui }) {//{{{
		return html`
			<div id="blackout" onclick=${()=>nodeui.menu.value = false}></div>
			<div id="menu">
				<div class="item" onclick=${()=>{ nodeui.renameNode(); nodeui.menu.value = false }}>Rename</div>
				<div class="item separator" onclick=${()=>{ nodeui.deleteNode(); nodeui.menu.value = false }}>Delete</div>
				<div class="item separator" onclick=${()=>{ nodeui.upload.value = true; nodeui.menu.value = false }}>Upload</div>
				<div class="item" onclick=${()=>{ nodeui.logout(); nodeui.menu.value = false }}>Log out</div>
			</div>
		`
	}//}}}
}
class UploadUI extends Component {
	constructor(props) {//{{{
		super(props)
		this.file = createRef()
		this.filelist = signal([])
		this.fileRefs = []
		this.progressRefs = []
	}//}}}
	render({ nodeui }) {//{{{
		let filelist = this.filelist.value
		let files = []
		for(let i = 0; i < filelist.length; i++) {
			files.push(html`<div key=file_${i} ref=${this.fileRefs[i]} class="file">${filelist.item(i).name}</div><div class="progress" ref=${this.progressRefs[i]}></div>`)
		}

		return html`
			<div id="blackout" onclick=${()=>nodeui.upload.value = false}></div>
			<div id="upload">
				<input type="file" ref=${this.file} onchange=${()=>this.upload()} multiple />
				<div class="files">
					${files}
				</div>
			</div>
		`
	}//}}}
	componentDidMount() {//{{{
		this.file.current.focus()
	}//}}}

	upload() {//{{{
		let nodeID = this.props.nodeui.node.value.ID
		this.fileRefs = []
		this.progressRefs = []

		let input = this.file.current
		this.filelist.value = input.files
		for(let i = 0; i < input.files.length; i++) {
			this.fileRefs.push(createRef())
			this.progressRefs.push(createRef())

			this.postFile(
				input.files[i],
				nodeID,
				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
				})
		}
	}//}}}
	postFile(file, nodeID, progressCallback, doneCallback) {//{{{
		var formdata = new FormData()
		formdata.append('file', file)
		formdata.append('NodeID', nodeID)

		var request = new XMLHttpRequest()

		request.addEventListener("error", ()=>{
			window._app.current.responseError({ upload: "An unknown error occured" })
		})

		request.addEventListener("loadend", ()=>{
			if(request.status != 200) {
				window._app.current.responseError({ upload: request.statusText })
				return
			}

			let response = JSON.parse(request.response)
			if(!response.OK) {
				window._app.current.responseError({ upload: response.Error })
				return
			}

			doneCallback(response)
		})

		request.upload.addEventListener('progress', evt=>{
			var fileSize = file.size

			if(evt.loaded <= fileSize)
				progressCallback(Math.round(evt.loaded / fileSize * 100))
			if(evt.loaded == evt.total)
				progressCallback(100)
		})   

		request.open('post', '/node/upload')
		request.setRequestHeader("X-Session-Id", window._app.current.session.UUID)
		//request.timeout = 45000
		request.send(formdata)
	}//}}}
}


// vim: foldmethod=marker