321 lines
8.8 KiB
JavaScript
321 lines
8.8 KiB
JavaScript
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', this.websocketMessage)
|
|
this.websocket.start()
|
|
}//}}}
|
|
websocketMessage(data) {//{{{
|
|
const msg = JSON.parse(data)
|
|
|
|
switch (msg.Op) {
|
|
case 'css_reload':
|
|
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
|