Notes/static/js/app.mjs

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

class App extends Component {
	constructor() {//{{{
		super()
		this.websocket_uri = `ws://localhost:1371/ws`
		this.websocket = null
		this.websocket_int_ping = null
		this.websocket_int_reconnect = null
		this.wsConnect()
		this.wsLoop()

		this.session = new Session(this)
		this.session.initialize()
		this.login = createRef()
		this.nodeUI = createRef()
		this.nodeModified = signal(false)
	}//}}}
	render() {//{{{
		if(!this.session.initialized) {
			return html`<div>Validating session</div>`
		}
 
		if(!this.session.authenticated()) {
			return html`<${Login} ref=${this.login} />`
		}

		return html`<${NodeUI} app=${this} ref=${this.nodeUI} />`
	}//}}}

	wsLoop() {//{{{
		setInterval(()=>{
			if(this.websocket === null) {
				console.log("wsLoop connect")
				this.wsConnect()
			}
		}, 1000)
	}//}}}
	wsConnect() {//{{{
		this.websocket = new WebSocket(this.websocket_uri)
		this.websocket.onopen    = evt=>this.wsOpen(evt)
		this.websocket.onmessage = evt=>this.wsMessage(evt)
		this.websocket.onerror   = evt=>this.wsError(evt)
		this.websocket.onclose   = evt=>this.wsClose(evt)
	}//}}}
	wsOpen() {//{{{
		this.setState({ wsConnected: true })

		// A ping interval to implement a rudimentary keep-alive.
	}//}}}
	wsClose() {//{{{
		console.log("Lost connection to Notes server")
		this.websocket = null
	}//}}}
	wsError(evt) {//{{{
		console.log("websocket error", evt)
		this.websocket = null;
	}//}}}
	wsMessage(evt) {//{{{
		let msg = JSON.parse(evt.data)

		// Broadcast message
		if(msg.ID == '') {
			this.broadcastHandler(msg)
		} else {
			this.msgHandler(msg)
		}
	}//}}}

	responseError({comm, app, upload}) {//{{{
		if(comm !== undefined) {
			comm.text().then(body=>alert(body))
			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) {
					return reject({app: json})
				}
				return resolve(json)
			})
			.catch(err=>reject({comm: err}))
		})
	}//}}}

	broadcastHandler(msg) {//{{{
		switch(msg.Op) {
			case 'css_reload':
				refreshCSS()
				break;
		}
	}//}}}
}

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">
			<h1>Notes</h1>
			<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>
		`
	}//}}}
	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)
	}//}}}
}

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

// vim: foldmethod=marker