Notes/static/js/app.mjs

import 'preact/debug'
import 'preact/devtools'

import { h, Component, render, createRef } from 'preact'
import htm from 'htm'
import { Session } from 'session'
import { Node, NodeUI } from 'node'
import { Websocket } from 'ws'
import { signal } from 'preact/signals'
const html = htm.bind(h)

class App extends Component {
	constructor() {//{{{
		super()

		this.session = new Session(this)
		this.session.initialize()
		this.login = createRef()
		this.tree = null
		this.nodeUI = createRef()
		this.nodeModified = signal(false)

		this.startNode = null

		this.websocketInit()
		this.setStartNode()
	}//}}}
	render() {//{{{
		let app_el = document.getElementById('app')

		if (!this.session.initialized) {
			return
		}

		if (!this.session.authenticated()) {
			app_el.classList.remove('node')
			app_el.classList.add('login')
			return html`<${Login} ref=${this.login} />`
		}

		app_el.classList.remove('login')
		app_el.classList.add('node')
		return html`
			<${Tree} app=${this} ref=${this.tree} />
			<${NodeUI} app=${this} ref=${this.nodeUI} />
			`
	}//}}}

	responseError({ comm, app, upload }) {//{{{
		if (comm !== undefined) {
			if (typeof comm.text === 'function')
				comm.text().then(body => alert(body))
			else
				alert(comm)
			return
		}

		if (app !== undefined && app.hasOwnProperty('Error')) {
			alert(app.Error)
			return
		}

		if (app !== undefined) {
			alert(JSON.stringify(app))
		}

		if (upload !== undefined) {
			alert(upload)
			return
		}
	}//}}}
	async request(url, params) {//{{{
		return new Promise((resolve, reject) => {
			let headers = {
				'Content-Type': 'application/json',
			}

			if (this.session.UUID !== '')
				headers['X-Session-ID'] = this.session.UUID

			fetch(url, {
				method: 'POST',
				headers,
				body: JSON.stringify(params),
			})
				.then(response => {
					// A HTTP communication level error occured
					if (!response.ok || response.status != 200)
						return reject({ comm: response })
					return response.json()
				})
				.then(json => {
					// An application level error occured
					if (!json.OK) {
						switch (json.Code) {
							case '001-0001': // Session not found
								this.session.reset()
								location.href = '/'
								break

							default:
								return reject({ app: json })
						}
					}
					return resolve(json)
				})
				.catch(err => reject({ comm: err }))
		})
	}//}}}

	websocketInit() {//{{{
		this.websocket = new Websocket()
		this.websocket.register('open', ()=>console.log('websocket connected'))
		this.websocket.register('close', ()=>console.log('websocket disconnected'))
		this.websocket.register('error', msg=>console.log(msg))
		this.websocket.register('message', msg=>this.websocketMessage(msg))
		this.websocket.start()
	}//}}}
	websocketMessage(data) {//{{{
		const msg = JSON.parse(data)

		switch (msg.Op) {
			case 'css_reload':
				this.websocket.refreshCSS()
				break;
		}
	}//}}}
	setStartNode() {//{{{
		let urlParams = new URLSearchParams(window.location.search)
		let nodeID = urlParams.get('node')
		this.startNode = new Node(this, nodeID ? parseInt(nodeID) : 0)
	}//}}}
}

class Login extends Component {
	constructor() {//{{{
		super()
		this.authentication_failed = signal(false)
		this.state = {
			username: '',
			password: '',
		}
	}//}}}
	render({ }, { username, password }) {//{{{
		let authentication_failed = html``;
		if (this.authentication_failed.value)
			authentication_failed = html`<div class="auth-failed">Authentication failed</div>`;

		return html`
		<div id="login">
			<div class="header">
				<h1>Notes</h1>
			</div>

			<div class="fields">
				<input id="username" type="text"     placeholder="Username" value=${username} oninput=${evt => this.setState({ username: evt.target.value })} onkeydown=${evt => { if (evt.code == 'Enter') this.login() }} />
				<input id="password" type="password" placeholder="Password" value=${password} oninput=${evt => this.setState({ password: evt.target.value })} onkeydown=${evt => { if (evt.code == 'Enter') this.login() }} />
				<button onclick=${() => this.login()}>Login</button>
				${authentication_failed}
			</div>
		</div>
		`
	}//}}}
	componentDidMount() {//{{{
		document.getElementById('username').focus()
	}//}}}

	login() {//{{{
		let username = document.getElementById('username').value
		let password = document.getElementById('password').value
		window._app.current.session.authenticate(username, password)
	}//}}}
}

class Tree extends Component {
	constructor(props) {//{{{
		super(props)
		this.treeNodes = {}
		this.treeNodeComponents = {}
		this.treeTrunk = []
		this.selectedTreeNode = null

		this.props.app.tree = this
		this.retrieve()
	}//}}}
	render({ app }) {//{{{
		let renderedTreeTrunk = this.treeTrunk.map(node => {
			this.treeNodeComponents[node.ID] = createRef()
			return html`<${TreeNode} key=${"treenode_" + node.ID} tree=${this} node=${node} ref=${this.treeNodeComponents[node.ID]} selected=${node.ID == app.startNode.ID} />`
		})
		return html`<div id="tree">${renderedTreeTrunk}</div>`
	}//}}}

	retrieve(callback = null) {//{{{
		this.props.app.request('/node/tree', { StartNodeID: 0 })
			.then(res => {
				this.treeNodes = {}
				this.treeNodeComponents = {}
				this.treeTrunk = []
				this.selectedTreeNode = null

				//  A tree of nodes is built. This requires the list of nodes
				//  returned from the server to be sorted in such a way that
				//  a parent node always appears before a child node.
				//  The server uses a recursive SQL query delivering this.
				res.Nodes.forEach(nodeData => {
					let node = new Node(
						this,
						nodeData.ID,
					)
					node.Children = []
					node.Crumbs = []
					node.Files = []
					node.Level = nodeData.Level
					node.Name = nodeData.Name
					node.ParentID = nodeData.ParentID
					node.Updated = nodeData.Updated
					node.UserID = nodeData.UserID

					this.treeNodes[node.ID] = node

					if (node.ParentID == 0)
						this.treeTrunk.push(node)
					else if (this.treeNodes[node.ParentID] !== undefined)
						this.treeNodes[node.ParentID].Children.push(node)
				})
				// When starting with an explicit node value, expanding all nodes
				// on its path gives the user a sense of location. Not necessarily working
				// as the start node isn't guaranteed to have returned data yet.
				this.crumbsUpdateNodes()
				this.forceUpdate()

				if (callback)
					callback()

			})
			.catch(this.responseError)
	}//}}}
	setSelected(node) {//{{{
		if (this.selectedTreeNode)
			this.selectedTreeNode.selected.value = false

		this.selectedTreeNode = this.treeNodeComponents[node.ID].current
		this.selectedTreeNode.selected.value = true
		this.selectedTreeNode.expanded.value = true
		this.expandToTrunk(node.ID)
	}//}}}
	crumbsUpdateNodes(node) {//{{{
		this.props.app.startNode.Crumbs.forEach(crumb => {
			// Start node is loaded before the tree.
			let node = this.treeNodes[crumb.ID]
			if (node)
				node._expanded = true

			// Tree is done before the start node.
			let component = this.treeNodeComponents[crumb.ID]
			if (component && component.current)
				component.current.expanded.value = true
		})

		// Will be undefined when called from tree initialization
		// (as tree nodes aren't rendered yet)
		if (node !== undefined)
			this.setSelected(node)
	}//}}}
	expandToTrunk(nodeID) {//{{{
		let node = this.treeNodes[nodeID]
		if (node === undefined)
			return

		node = this.treeNodes[node.ParentID]
		while (node !== undefined) {
			this.treeNodeComponents[node.ID].current.expanded.value = true
			node = this.treeNodes[node.ParentID]
		}
	}//}}}
}

class TreeNode extends Component {
	constructor(props) {//{{{
		super(props)
		this.selected = signal(props.selected)
		this.expanded = signal(this.props.node._expanded)
	}//}}}
	render({ tree, node }) {//{{{

		let children = node.Children.map(node => {
			tree.treeNodeComponents[node.ID] = createRef()
			return html`<${TreeNode} key=${"treenode_" + node.ID} tree=${tree} node=${node} ref=${tree.treeNodeComponents[node.ID]} selected=${node.ID == tree.props.app.startNode.ID} />`
		})

		let expandImg = ''
		if (node.Children.length == 0)
			expandImg = html`<img src="/images/${window._VERSION}/leaf.svg" />`
		else {
			if (this.expanded.value)
				expandImg = html`<img src="/images/${window._VERSION}/expanded.svg" />`
			else
				expandImg = html`<img src="/images/${window._VERSION}/collapsed.svg" />`
		}


		let selected = (this.selected.value ? 'selected' : '')

		return html`
			<div class="node">
				<div class="expand-toggle" onclick=${() => this.expanded.value ^= true}>${expandImg}</div>
				<div class="name ${selected}" onclick=${() => window._app.current.nodeUI.current.goToNode(node.ID)}>${node.Name}</div>
				<div class="children ${node.Children.length > 0 && this.expanded.value ? 'expanded' : 'collapsed'}">${children}</div>
			</div>`
	}//}}}
}

// Init{{{
window._app = createRef()
window._resourceModels = []
render(html`<${App} ref=${window._app} />`, document.getElementById('app'))
//}}}

// vim: foldmethod=marker