From 42b66714aa7eaa755c05e7a7d606a176de07ab5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Mon, 2 Dec 2024 15:26:35 +0100 Subject: [PATCH] wip --- static/js/app.mjs | 46 ++++++++++++++++++++------------------ static/js/node.mjs | 20 ++++++++++------- static/js/node_store.mjs | 48 +++++++++++++++++++++------------------- 3 files changed, 62 insertions(+), 52 deletions(-) diff --git a/static/js/app.mjs b/static/js/app.mjs index da73bcb..2511229 100644 --- a/static/js/app.mjs +++ b/static/js/app.mjs @@ -2,25 +2,27 @@ import { h, Component, createRef } from 'preact' import { signal } from 'preact/signals' import htm from 'htm' import { API } from 'api' -import { Node } from 'node' +import { Node, NodeUI } from 'node' const html = htm.bind(h) export class Notes2 { constructor() {//{{{ this.startNode = null this.tree = createRef() + this.nodeUI = createRef() this.setStartNode() }//}}} render() {//{{{ return html` <${Tree} ref=${this.tree} app=${this} /> + <${NodeUI} app=${this} ref=${this.nodeUI} /> ` }//}}} setStartNode() {//{{{ - let urlParams = new URLSearchParams(window.location.search) - let nodeID = urlParams.get('node') - this.startNode = new Node(this, nodeID ? parseInt(nodeID) : 0) + const urlParams = new URLSearchParams(window.location.search) + const nodeID = urlParams.get('node') + this.startNode = new Node(this, nodeID ? Number.parseInt(nodeID) : 0) }//}}} treeGet() {//{{{ @@ -45,9 +47,9 @@ class Tree extends Component { this.retrieve() }//}}} render({ app }) {//{{{ - let renderedTreeTrunk = this.treeTrunk.map(node => { + const 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`<${TreeNode} key=${`treenode_${node.ID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.ID]} selected=${node.ID === app.startNode.ID} />` }) return html`
${renderedTreeTrunk}
` }//}}} @@ -64,8 +66,8 @@ class Tree extends Component { // 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.forEach(nodeData => { - let node = new Node( + for (const nodeData of res) { + const node = new Node( this, nodeData.ID, ) @@ -80,11 +82,11 @@ class Tree extends Component { this.treeNodes[node.ID] = node - if (node.ParentID == 0) + 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. @@ -107,17 +109,17 @@ class Tree extends Component { this.expandToTrunk(node.ID) }//}}} crumbsUpdateNodes(node) {//{{{ - this.props.app.startNode.Crumbs.forEach(crumb => { + for (const crumb in this.props.app.startNode.Crumbs) { // Start node is loaded before the tree. - let node = this.treeNodes[crumb.ID] + const 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) + const 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) @@ -145,13 +147,13 @@ class TreeNode extends Component { }//}}} render({ tree, node }) {//{{{ - let children = node.Children.map(node => { + const 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} />` + 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) + if (node.Children.length === 0) expandImg = html`` else { if (this.expanded.value) @@ -161,13 +163,15 @@ class TreeNode extends Component { } - let selected = (this.selected.value ? 'selected' : '') + const selected = (this.selected.value ? 'selected' : '') return html`
-
this.expanded.value ^= true}>${expandImg}
-
window._app.current.nodeUI.current.goToNode(node.ID)}>${node.Name}
+
{ this.expanded.value ^= true }}>${expandImg}
+
window._notes2.current.nodeUI.current.goToNode(node.ID)}>${node.Name}
${children}
` }//}}} } + +// vim: foldmethod=marker diff --git a/static/js/node.mjs b/static/js/node.mjs index 710d07b..a9425af 100644 --- a/static/js/node.mjs +++ b/static/js/node.mjs @@ -16,7 +16,7 @@ export class NodeUI extends Component { this.keys = signal([]) this.page = signal('node') window.addEventListener('popstate', evt => { - if (evt.state && evt.state.hasOwnProperty('nodeID')) + if (evt.state?.hasOwnProperty('nodeID')) this.goToNode(evt.state.nodeID, true) else this.goToNode(0, true) @@ -28,7 +28,7 @@ export class NodeUI extends Component { if (this.node.value === null) return - let node = this.node.value + const node = this.node.value document.title = `N: ${node.Name}` let crumbs = [ @@ -39,7 +39,7 @@ export class NodeUI extends Component { html`
this.goToNode(node.ID)}>${node.Name}
` ).reverse()) - let children = node.Children.sort((a, b) => { + const 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 @@ -56,9 +56,9 @@ export class NodeUI extends Component { let page = '' switch (this.page.value) { case 'node': - if (node.ID == 0) { + if (node.ID === 0) { page = html` -
this.page.value = 'schedule-events'}>Schedule events
+
{ this.page.value = 'schedule-events' }}>Schedule events
${children.length > 0 ? html`
${children}
Notes version ${window._VERSION}
` : html``} ` } else { @@ -104,8 +104,8 @@ export class NodeUI extends Component { break } - let menu = () => (this.menu.value ? html`<${Menu} nodeui=${this} />` : null) - let checklist = () => + const menu = () => (this.menu.value ? html`<${Menu} nodeui=${this} />` : null) + const checklist = () => html`
{ evt.stopPropagation(); this.toggleChecklist() }}> @@ -209,17 +209,19 @@ export class NodeUI extends Component { }//}}} goToNode(nodeID, dontPush) {//{{{ + /* TODO - implement modified values 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) + const node = new Node(this.props.app, nodeID) node.retrieve(node => { this.props.app.nodeModified.value = false this.node.value = node @@ -278,12 +280,14 @@ export class NodeUI extends Component { async retrieveKeys() {//{{{ return new Promise((resolve, reject) => { + /* TODO - implement keys in IndexedDB this.props.app.request('/key/retrieve', {}) .then(res => { this.keys.value = res.Keys.map(keyData => new Key(keyData, this.keyCounter)) resolve(this.keys.value) }) .catch(reject) + */ }) }//}}} keyCounter() {//{{{ diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs index 1054c1f..5fa6269 100644 --- a/static/js/node_store.mjs +++ b/static/js/node_store.mjs @@ -1,24 +1,24 @@ import { API } from 'api' export class NodeStore { - constructor() { + constructor() {//{{{ if (!('indexedDB' in window)) { throw 'Missing IndexedDB' } this.db = null - } - async initializeDB() { + }//}}} + async initializeDB() {//{{{ return new Promise((resolve, reject) => { - let req = indexedDB.open('notes', 2) + const req = indexedDB.open('notes', 2) // Schema upgrades for IndexedDB. // These can start from different points depending on updates to Notes2 since a device was online. req.onupgradeneeded = (event) => { - var store - let db = event.target.result - let trx = event.target.transaction + let store + const db = event.target.result + const trx = event.target.transaction for (let i = event.oldVersion + 1; i <= event.newVersion; i++) { console.log(`Upgrade to schema ${i}`) @@ -45,13 +45,13 @@ export class NodeStore { reject(event.target.error) } }) - } + }//}}} - async add(records) { + async add(records) {//{{{ return new Promise((resolve, reject) => { try { - let t = this.db.transaction('nodes', 'readwrite') - let nodeStore = t.objectStore('nodes') + const t = this.db.transaction('nodes', 'readwrite') + const nodeStore = t.objectStore('nodes') t.onerror = (event) => { console.log('transaction error', event.target.error) reject(event.target.error) @@ -60,22 +60,22 @@ export class NodeStore { resolve() } - records.forEach(record => { - let addReq = nodeStore.put(record) - addReq.onsuccess = (event) => { + for (const record in records) { + const addReq = nodeStore.put(record) + addReq.onsuccess = () => { console.log('OK!', record.ID, record.Name) } addReq.onerror = (event) => { console.log('Error!', event.target.error, record.ID) } - }) + } } catch (e) { console.log(e) } }) - } - async get(id) { + }//}}} + async get(id) {//{{{ return new Promise((resolve, reject) => { // Node is always returned from IndexedDB if existing there. // Otherwise an attempt to get it from backend is executed. @@ -103,14 +103,16 @@ export class NodeStore { .catch(e => reject(e)) } }) - } - async getTreeNodes() { + }//}}} + async getTreeNodes() {//{{{ return new Promise((resolve, reject) => { - let trx = this.db.transaction('nodes', 'readonly') - let nodeStore = trx.objectStore('nodes') - let req = nodeStore.getAll() + const trx = this.db.transaction('nodes', 'readonly') + const nodeStore = trx.objectStore('nodes') + const req = nodeStore.getAll() req.onsuccess = (event) => resolve(event.target.result) req.onerror = (event) => reject(event.target.error) }) - } + }//}}} } + +// vim: foldmethod=marker