wip

static/js/app.mjs

@@ -9,6 +9,7 @@ const html = htm.bind(h)
 class App extends Component {
 	constructor() {//{{{
 		super()
+		this.websocket_uri = `wss://notes.ahall.se/ws`
 		this.websocket = null
 		this.websocket_int_ping = null
 		this.websocket_int_reconnect = null
@@ -19,6 +20,7 @@ class App extends Component {
 		this.session.initialize()
 		this.login = createRef()
 		this.nodeUI = createRef()
+		this.nodeModified = signal(false)
 	}//}}}
 	render() {//{{{
 		if(!this.session.initialized) {
@@ -41,7 +43,7 @@ class App extends Component {
 		}, 1000)
 	}//}}}
 	wsConnect() {//{{{
-		this.websocket = new WebSocket(`ws://192.168.11.60:1371/ws`)
+		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)
@@ -164,28 +166,6 @@ class Login extends Component {
 }
 
 // Init{{{
-//let urlParams = new URLSearchParams(window.location.search)
-
-/*
-async function debug(type, context, data) {
-	await fetch("https://msg.kon-it.se/log", {
-		method: 'POST',
-		body: JSON.stringify({
-			systemId: 12,
-			type,
-			context,
-			data: JSON.stringify(data, null, 4),
-		}),
-	})
-}
-
-window.onerror = (event, source, lineno, colon, error) => {
-	debug('Notes', 'error', {
-		event, source, lineno, colon, error
-	})
-}
-*/
-
 window._app = createRef()
 window._resourceModels = []
 render(html`<${App} ref=${window._app} />`, document.getElementById('app'))

static/js/node.mjs

@@ -1,4 +1,4 @@
-import { h, Component } from 'preact'
+import { h, Component, createRef } from 'preact'
 import htm from 'htm'
 import { signal } from 'preact/signals'
 const html = htm.bind(h)
@@ -7,6 +7,7 @@ export class NodeUI extends Component {
 	constructor() {//{{{
 		super()
 		this.node = signal(null)
+		this.nodeContent = createRef()
 		window.addEventListener('popstate', evt=>{
 			if(evt.state && evt.state.hasOwnProperty('nodeID'))
 				this.goToNode(evt.state.nodeID, true)
@@ -24,7 +25,7 @@ export class NodeUI extends Component {
 			html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>`
 		]
 	
-		crumbs = crumbs.concat(node.Crumbs.slice(1).map(node=>
+		crumbs = crumbs.concat(node.Crumbs.slice(0).map(node=>
 			html`<div class="crumb" onclick=${()=>this.goToNode(node.ID)}>${node.Name}</div>`
 		).reverse())
 
@@ -36,27 +37,83 @@ export class NodeUI extends Component {
 			<div class="child-node" onclick=${()=>this.goToNode(child.ID)}>${child.Name}</div>
 		`)
 
+		let modified = ''
+		if(this.props.app.nodeModified.value)
+			modified = 'modified';
+
 		return html`
-			${node.ID > 0 ? html`<div class="crumbs">${crumbs}</crumbs>` : html``}
-			<div class="node-name">${node.Name}</div>
+			<header class="${modified}" onclick=${()=>this.saveNode()}>
+				<div class="name">Notes</div>
+				<div class="add" onclick=${()=>this.createNode()}>+</div>
+			</header>
+			<div class="crumbs">${crumbs}</crumbs>
 			${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}
-			<div class="node-content">${node.Content}</div>
+			<div class="node-name">${node.Name}</div>
+			<${NodeContent} key=${node.ID} content=${node.Content} ref=${this.nodeContent} />
 		`
 	}//}}}
 	componentDidMount() {//{{{
-		let root = new Node(this.props.app, 0)
+		let urlParams = new URLSearchParams(window.location.search)
+		let nodeID = urlParams.get('node')
+		let root = new Node(this.props.app, nodeID ? parseInt(nodeID) : 0)
+
 		root.retrieve(node=>{
 			this.node.value = node
 		})
 	}//}}}
 	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 }, '', `#${nodeID}`)
+			history.pushState({ nodeID }, '', `/?node=${nodeID}`)
 		let node = new Node(this.props.app, nodeID)
 		node.retrieve(node=>{
+			this.props.app.nodeModified.value = false
 			this.node.value = node
 		})
 	}//}}}
+	createNode() {//{{{
+		let name = prompt("Name")
+		if(!name)
+			return
+
+		this.props.app.request('/node/create', {
+			Name: name.trim(),
+			ParentID: this.node.value.ID,
+		})
+		.then(res=>{
+			this.goToNode(res.Node.ID)
+		})
+		.catch(this.props.app.responseError)
+	}//}}}
+	saveNode() {
+		let content = this.nodeContent.current.contentDiv.current.innerText
+		this.props.app.request('/node/update', {
+			NodeID: this.node.value.ID,
+			Content: content,
+		})
+		.then(res=>{
+			this.props.app.nodeModified.value = false
+		})
+		.catch(this.props.app.responseError)
+	}
+}
+
+class NodeContent extends Component {
+	constructor(props) {//{{{
+		super(props)
+		this.contentDiv = createRef()
+		this.state = {
+			modified: false,
+			//content: props.content,
+		}
+	}//}}}
+	render({ content }) {//{{{
+		return html`<div class="node-content" ref=${this.contentDiv} contenteditable=true oninput=${()=>window._app.current.nodeModified.value = true}>${content}</div>`
+	}//}}}
 }
 
 class Node {