-
@@ -259,8 +290,7 @@ class NodeContent extends Component {
}//}}}
contentChanged(evt) {//{{{
_notes2.current.nodeUI.current.nodeModified.value = true
- const content = evt.target.value
- this.props.node.setContent(content)
+ this.props.node.setContent(evt.target.value)
this.resize()
}//}}}
resize() {//{{{
@@ -271,17 +301,25 @@ class NodeContent extends Component {
}
export class Node {
+ static sort(a, b) {//{{{
+ if (a.data.Name < b.data.Name) return -1
+ if (a.data.Name > b.data.Name) return 0
+ return 0
+ }//}}}
constructor(nodeData, level) {//{{{
this.Level = level
+ this.data = nodeData
+
+ this.UUID = nodeData.UUID
+ this.ParentUUID = nodeData.ParentUUID
this._children_fetched = false
this.Children = []
- this.UUID = nodeData.UUID
- this.ParentUUID = nodeData.ParentUUID
- this.UserID = nodeData.UserID
- this.CryptoKeyID = nodeData.CryptoKeyID
- this.Name = nodeData.Name
+ this._content = this.data.Content
+ this._modified = false
+
+ /*
this.RenderMarkdown = signal(nodeData.RenderMarkdown)
this.Markdown = false
this.ShowChecklist = signal(false)
@@ -294,6 +332,15 @@ export class Node {
this.ScheduleEvents = signal([])
// it doesn't control it afterwards.
// Used to expand the crumbs upon site loading.
+ */
+ }//}}}
+
+ get(prop) {//{{{
+ return this.data[prop]
+ }//}}}
+ updated() {//{{{
+ // '2024-12-17T17:33:48.85939Z
+ return new Date(Date.parse(this.data.Updated))
}//}}}
hasFetchedChildren() {//{{{
return this._children_fetched
@@ -304,15 +351,16 @@ export class Node {
this.Children = await nodeStore.getTreeNodes(this.UUID, this.Level + 1)
this._children_fetched = true
return this.Children
-
}//}}}
content() {//{{{
/* TODO - implement crypto
if (this.CryptoKeyID != 0 && !this._decrypted)
this.#decrypt()
*/
+ this.modified = true
return this._content
}//}}}
+
setContent(new_content) {//{{{
this._content = new_content
/* TODO - implement crypto
@@ -324,10 +372,10 @@ export class Node {
this._decrypted = true
*/
}//}}}
- static sort(a, b) {//{{{
- if (a.Name < b.Name) return -1
- if (a.Name > b.Name) return 0
- return 0
+ save() {//{{{
+ this.data.Content = this._content
+ this.data.Updated = new Date().toISOString()
+ this._modified = false
}//}}}
}
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index 57909b7..a1a8a1a 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -1,4 +1,3 @@
-import { API } from 'api'
import { Node } from 'node'
export const ROOT_NODE = '00000000-0000-0000-0000-000000000000'
@@ -10,18 +9,19 @@ export class NodeStore {
}
this.db = null
+ this.nodes = {}
}//}}}
async initializeDB() {//{{{
return new Promise((resolve, reject) => {
- const req = indexedDB.open('notes', 3)
-
+ const req = indexedDB.open('notes', 7)
// Schema upgrades for IndexedDB.
// These can start from different points depending on updates to Notes2 since a device was online.
req.onupgradeneeded = (event) => {
- let treeNodes
let nodes
let appState
+ let sendQueue
+ let nodesHistory
const db = event.target.result
const trx = event.target.transaction
@@ -31,28 +31,43 @@ export class NodeStore {
// The schema transformations.
switch (i) {
case 1:
- treeNodes = db.createObjectStore('treeNodes', { keyPath: 'UUID' })
- treeNodes.createIndex('nameIndex', 'Name', { unique: false })
-
nodes = db.createObjectStore('nodes', { keyPath: 'UUID' })
- nodes.createIndex('nameIndex', 'Name', { unique: false })
+ nodes.createIndex('byName', 'Name', { unique: false })
break
case 2:
- trx.objectStore('treeNodes').createIndex('parentIndex', 'ParentUUID', { unique: false })
+ trx.objectStore('nodes').createIndex('byParent', 'ParentUUID', { unique: false })
break
case 3:
- appState = db.createObjectStore('appState', { keyPath: 'key' })
+ appState = db.createObjectStore('app_state', { keyPath: 'key' })
+ break
+
+ case 4:
+ trx.objectStore('nodes').createIndex('byModified', 'modified', { unique: false })
+ break
+
+ case 5:
+ sendQueue = db.createObjectStore('send_queue', { keyPath: ['UUID', 'Updated'] })
+ sendQueue.createIndex('updated', 'Updated', { unique: false })
+ break
+
+ case 6:
+ nodesHistory = db.createObjectStore('nodes_history', { keyPath: ['UUID', 'Updated'] })
+ break
+
+ case 7:
+ trx.objectStore('nodes_history').createIndex('byUUID', 'UUID', { unique: false })
+ break
}
}
}
req.onsuccess = (event) => {
this.db = event.target.result
- this.initializeRootNode().then(() =>
- resolve()
- )
+ this.initializeRootNode()
+ .then(() => this.initializeClientUUID())
+ .then(() => resolve())
}
req.onerror = (event) => {
@@ -60,7 +75,7 @@ export class NodeStore {
}
})
}//}}}
- initializeRootNode() {//{{{
+ async initializeRootNode() {//{{{
return new Promise((resolve, reject) => {
// The root node is a magical node which displays as the first node if none is specified.
// If not already existing, it will be created.
@@ -78,6 +93,8 @@ export class NodeStore {
UUID: ROOT_NODE,
Name: 'Notes2',
Content: 'Hello, World!',
+ Updated: new Date().toISOString(),
+ ParentUUID: '',
})
putRequest.onsuccess = (event) => {
resolve(event.target.result)
@@ -89,11 +106,25 @@ export class NodeStore {
getRequest.onerror = (event) => reject(event.target.error)
})
}//}}}
+ async initializeClientUUID() {//{{{
+ let clientUUID = await this.getAppState('client_uuid')
+ if (clientUUID !== null)
+ return
+ clientUUID = crypto.randomUUID()
+ return this.setAppState('client_uuid', clientUUID)
+ }//}}}
+
+ node(uuid, dataIfUndefined, newLevel) {//{{{
+ let n = this.nodes[uuid]
+ if (n === undefined && dataIfUndefined !== undefined)
+ n = this.nodes[uuid] = new Node(dataIfUndefined, newLevel)
+ return n
+ }//}}}
async getAppState(key) {//{{{
return new Promise((resolve, reject) => {
- const trx = this.db.transaction('appState', 'readonly')
- const appState = trx.objectStore('appState')
+ const trx = this.db.transaction('app_state', 'readonly')
+ const appState = trx.objectStore('app_state')
const getRequest = appState.get(key)
getRequest.onsuccess = (event) => {
if (event.target.result !== undefined) {
@@ -108,8 +139,8 @@ export class NodeStore {
async setAppState(key, value) {//{{{
return new Promise((resolve, reject) => {
try {
- const t = this.db.transaction('appState', 'readwrite')
- const appState = t.objectStore('appState')
+ const t = this.db.transaction('app_state', 'readwrite')
+ const appState = t.objectStore('app_state')
t.onerror = (event) => {
console.log('transaction error', event.target.error)
reject(event.target.error)
@@ -129,10 +160,91 @@ export class NodeStore {
})
}//}}}
- async upsertTreeRecords(records) {//{{{
+ async moveToSendQueue(nodeToMove, replaceWithNode) {//{{{
return new Promise((resolve, reject) => {
- const t = this.db.transaction('treeNodes', 'readwrite')
- const nodeStore = t.objectStore('treeNodes')
+ const t = this.db.transaction(['nodes', 'send_queue'], 'readwrite')
+ const nodeStore = t.objectStore('nodes')
+ const sendQueue = t.objectStore('send_queue')
+ t.onerror = (event) => {
+ console.log('transaction error', event.target.error)
+ reject(event.target.error)
+ }
+ t.oncomplete = () => {
+ resolve()
+ }
+
+ // Node to be moved is first stored in the new queue.
+ const queueReq = sendQueue.put(nodeToMove.data)
+ queueReq.onsuccess = () => {
+ // When added to the send queue, the node is either deleted
+ // or replaced with a new node.
+ console.debug(`Queueing ${nodeToMove.UUID} (${nodeToMove.get('Name')})`)
+ let nodeReq
+ if (replaceWithNode)
+ nodeReq = nodeStore.put(replaceWithNode.data)
+ else
+ nodeReq = nodeStore.delete(nodeToMove.UUID)
+ nodeReq.onsuccess = () => {
+ resolve()
+ }
+ nodeReq.onerror = (event) => {
+ console.log(`Error moving ${nodeToMove.UUID}`, event.target.error)
+ reject(event.target.error)
+ }
+
+ }
+ queueReq.onerror = (event) => {
+ console.log(`Error queueing ${nodeToMove.UUID}`, event.target.error)
+ reject(event.target.error)
+ }
+ })
+ }//}}}
+ async copyToNodesHistory(nodeToCopy) {//{{{
+ return new Promise((resolve, reject) => {
+ const t = this.db.transaction('nodes_history', 'readwrite')
+ const nodesHistory = t.objectStore('nodes_history')
+ t.oncomplete = () => {
+ resolve()
+ }
+ t.onerror = (event) => {
+ console.log('transaction error', event.target.error)
+ reject(event.target.error)
+ }
+
+ const historyReq = nodesHistory.put(nodeToCopy.data)
+ historyReq.onerror = (event) => {
+ console.log(`Error copying ${nodeToCopy.UUID}`, event.target.error)
+ reject(event.target.error)
+ }
+ })
+ }//}}}
+ async storeNode(node) {//{{{
+ return new Promise((resolve, reject) => {
+ 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)
+ }
+ t.oncomplete = () => {
+ resolve()
+ }
+
+ const nodeReq = nodeStore.put(node.data)
+ nodeReq.onsuccess = () => {
+ console.debug(`Storing ${node.UUID} (${node.get('Name')})`)
+ }
+ queueReq.onerror = (event) => {
+ console.log(`Error storing ${node.UUID}`, event.target.error)
+ reject(event.target.error)
+ }
+ })
+ }//}}}
+
+ async upsertNodeRecords(records) {//{{{
+ return new Promise((resolve, reject) => {
+ 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)
@@ -152,29 +264,32 @@ export class NodeStore {
addReq = nodeStore.delete(record.UUID)
} else {
op = 'upserting'
+ // 'modified' is a local property for tracking
+ // nodes needing to be synced to backend.
+ record.modified = 0
addReq = nodeStore.put(record)
}
addReq.onsuccess = () => {
- console.log(`${op} ${record.UUID} (${record.Name})`)
+ console.debug(`${op} ${record.UUID} (${record.Name})`)
}
addReq.onerror = (event) => {
console.log(`error ${op} ${record.UUID}`, event.target.error)
reject(event.target.error)
}
}
-
})
}//}}}
async getTreeNodes(parent, newLevel) {//{{{
return new Promise((resolve, reject) => {
- const trx = this.db.transaction('treeNodes', 'readonly')
- const nodeStore = trx.objectStore('treeNodes')
- const index = nodeStore.index('parentIndex')
+ const trx = this.db.transaction('nodes', 'readonly')
+ const nodeStore = trx.objectStore('nodes')
+ const index = nodeStore.index('byParent')
const req = index.getAll(parent)
req.onsuccess = (event) => {
const nodes = []
for (const i in event.target.result) {
- const node = new Node(event.target.result[i], newLevel)
+ const nodeData = event.target.result[i]
+ const node = this.node(nodeData.UUID, nodeData, newLevel)
nodes.push(node)
}
@@ -183,6 +298,7 @@ export class NodeStore {
req.onerror = (event) => reject(event.target.error)
})
}//}}}
+
async add(records) {//{{{
return new Promise((resolve, reject) => {
try {
@@ -193,21 +309,29 @@ export class NodeStore {
reject(event.target.error)
}
t.oncomplete = () => {
- resolve()
+ console.log('OK')
}
// records is an object, not an array.
+ const promises = []
for (const recordIdx in records) {
const record = records[recordIdx]
- 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)
- }
+ const addReq = nodeStore.put(record.data)
+
+ const promise = new Promise((resolve, reject) => {
+ addReq.onsuccess = () => {
+ console.debug('OK!', record.ID, record.Name)
+ resolve()
+ }
+ addReq.onerror = (event) => {
+ console.log('Error!', event.target.error, record.ID)
+ reject(event.target.error)
+ }
+ })
+ promises.push(promise)
}
+ Promise.all(promises).then(() => resolve())
} catch (e) {
console.log(e)
}
@@ -215,32 +339,59 @@ export class NodeStore {
}//}}}
async get(uuid) {//{{{
return new Promise((resolve, reject) => {
- // Node is always returned from IndexedDB if existing there.
- // Otherwise an attempt to get it from backend is executed.
const trx = this.db.transaction('nodes', 'readonly')
const nodeStore = trx.objectStore('nodes')
const getRequest = nodeStore.get(uuid)
getRequest.onsuccess = (event) => {
- // Node found in IndexedDB and returned.
- if (event.target.result !== undefined) {
- const node = new Node(event.target.result, -1)
- resolve(node)
+ // Node not found in IndexedDB.
+ if (event.target.result === undefined) {
+ reject("No such node")
+ return
+ }
+ const node = this.node(uuid, event.target.result, -1)
+ resolve(node)
+ }
+ })
+ }//}}}
+ async getNodeAncestry(node, accumulated) {//{{{
+ return new Promise((resolve, reject) => {
+ if (accumulated === undefined)
+ accumulated = []
+
+ const nodeParentIndex = this.db
+ .transaction('nodes', 'readonly')
+ .objectStore('nodes')
+
+ if (node.ParentUUID === '') {
+ resolve(accumulated)
+ return
+ }
+
+ const getRequest = nodeParentIndex.get(node.ParentUUID)
+ getRequest.onsuccess = (event) => {
+ // Node not found in IndexedDB.
+ // Not expected to happen.
+ const parentNodeData = event.target.result
+ if (parentNodeData === undefined) {
+ reject("No such node")
return
}
- // Node not found and a request to the backend is made.
- API.query("POST", `/node/retrieve/${uuid}`, {})
- .then(res => {
- const trx = this.db.transaction('nodes', 'readwrite')
- const nodeStore = trx.objectStore('nodes')
- const putRequest = nodeStore.put(res.Node)
- const node = new Node(res.Node, -1)
- putRequest.onsuccess = () => resolve(node)
- putRequest.onerror = (event) => {
- reject(event.target.error)
- }
- })
- .catch(e => reject(e))
+ const parentNode = this.node(parentNodeData.UUID, parentNodeData, -1)
+ this.getNodeAncestry(parentNode, accumulated.concat(parentNode))
+ .then(accumulated => resolve(accumulated))
+ }
+ })
+
+ }//}}}
+
+ async nodeCount() {//{{{
+ return new Promise((resolve, reject) => {
+ const t = this.db.transaction('nodes', 'readwrite')
+ const nodeStore = t.objectStore('nodes')
+ const countReq = nodeStore.count()
+ countReq.onsuccess = event => {
+ resolve(event.target.result)
}
})
}//}}}
diff --git a/static/js/notes2.mjs b/static/js/notes2.mjs
index 9afec41..5e62ffa 100644
--- a/static/js/notes2.mjs
+++ b/static/js/notes2.mjs
@@ -6,22 +6,25 @@ import { ROOT_NODE } from 'node_store'
const html = htm.bind(h)
export class Notes2 extends Component {
- state = {
- startNode: null,
- }
constructor() {//{{{
super()
- this.tree = createRef()
this.nodeUI = createRef()
+ this.state = {
+ startNode: null,
+ }
+
+ Sync.nodes().then(durationNodes =>
+ console.log(`Total time: ${Math.round(100 * durationNodes) / 100}s`)
+ )
this.getStartNode()
}//}}}
- render({}, { startNode }) {//{{{
+ render(_props, { startNode }) {//{{{
if (startNode === null)
return
return html`
- <${Tree} ref=${this.tree} app=${this} startNode=${startNode} />
+ <${Tree} app=${this} startNode=${startNode} />
_notes2.current.goToNode(ROOT_NODE)}>Start
- Minnie
- Fluffy
- Chili
+ this.saveNode()}>
+
-
+ ${crumbDivs}
${node.Name}
+ ${node.get('Name')}
<${NodeContent} key=${node.UUID} node=${node} ref=${this.nodeContent} />
+
`
@@ -56,10 +70,6 @@ export class NodeUI extends Component {
html` this.goToNode(node.ID)}>${node.Name}
`
).reverse())
- let modified = ''
- if (this.props.app.nodeModified.value)
- modified = 'modified'
-
// Page to display
let page = ''
@@ -144,15 +154,30 @@ export class NodeUI extends Component {
}//}}}
async componentDidMount() {//{{{
_notes2.current.goToNode(this.props.startNode.UUID, true)
+ _notes2.current.tree.expandToTrunk(this.props.startNode)
}//}}}
setNode(node) {//{{{
this.nodeModified.value = false
this.node.value = node
}//}}}
+ setCrumbs(nodes) {//{{{
+ this.crumbs = nodes
+ }//}}}
+ async saveNode() {//{{{
+ if (!this.nodeModified.value)
+ return
+
+ await nodeStore.copyToNodesHistory(this.node.value)
+
+ // Prepares the node object for saving.
+ // Sets Updated value to current date and time.
+ const node = this.node.value
+ node.save()
+ await nodeStore.add([node])
+ this.nodeModified.value = false
+ }//}}}
keyHandler(evt) {//{{{
- return
-
let handled = true
// All keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
@@ -162,6 +187,7 @@ export class NodeUI extends Component {
return
switch (evt.key.toUpperCase()) {
+ /*
case 'C':
this.showPage('node')
break
@@ -182,12 +208,14 @@ export class NodeUI extends Component {
this.showPage('node-properties')
break
+ */
case 'S':
- if (this.page.value == 'node')
+ if (this.page.value === 'node')
this.saveNode()
- else if (this.page.value == 'node-properties')
+ else if (this.page.value === 'node-properties')
this.nodeProperties.current.save()
break
+ /*
case 'U':
this.showPage('upload')
@@ -196,6 +224,7 @@ export class NodeUI extends Component {
case 'F':
this.showPage('search')
break
+ */
default:
handled = false
@@ -227,11 +256,13 @@ class NodeContent extends Component {
`
}
+ /*
let element
if (node.RenderMarkdown.value)
element = html`<${MarkdownContent} key='markdown-content' content=${content} />`
else
- element = html`
+ */
+ const element = html`
<${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} />
@@ -40,7 +43,7 @@ export class Notes2 extends Component {
this.setState({ startNode: node })
})
}//}}}
- goToNode(nodeUUID, dontPush) {//{{{
+ async goToNode(nodeUUID, dontPush) {//{{{
// Don't switch notes until saved.
if (this.nodeUI.current.nodeModified.value) {
if (!confirm("Changes not saved. Do you want to discard changes?"))
@@ -52,10 +55,11 @@ export class Notes2 extends Component {
// New node is fetched in order to retrieve content and files.
// Such data is unnecessary to transfer for tree/navigational purposes.
- nodeStore.get(nodeUUID).then(node => {
- this.nodeUI.current.setNode(node)
- //this.showPage('node')
- })
+ const node = nodeStore.node(nodeUUID)
+ const ancestors = await nodeStore.getNodeAncestry(node)
+ this.nodeUI.current.setNode(node)
+ this.nodeUI.current.setCrumbs(ancestors)
+ this.tree.setSelected(node)
}//}}}
logout() {//{{{
localStorage.removeItem('session.UUID')
@@ -66,10 +70,11 @@ export class Notes2 extends Component {
class Tree extends Component {
constructor(props) {//{{{
super(props)
- this.treeNodes = {}
this.treeNodeComponents = {}
this.treeTrunk = []
- this.selectedTreeNode = null
+ this.selectedNode = null
+ this.expandedNodes = {} // keyed on UUID
+
this.props.app.tree = this
this.populateFirstLevel()
@@ -77,11 +82,11 @@ class Tree extends Component {
render({ app }) {//{{{
const renderedTreeTrunk = this.treeTrunk.map(node => {
this.treeNodeComponents[node.UUID] = createRef()
- return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.UUID]} selected=${node.UUID === app.startNode?.UUID} />`
+ return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.UUID]} selected=${node.UUID === app.state.startNode?.UUID} />`
})
return html`
`
else {
- if (this.expanded.value)
+ if (tree.getNodeExpanded(node.UUID))
expandImg = html`
`
else
expandImg = html`
`
}
- const selected = (this.selected.value ? 'selected' : '')
-
return html`
- 
+
`
}//}}}
@@ -90,30 +95,16 @@ class Tree extends Component {
nodeStore.getTreeNodes('', 0)
.then(async res => {
res.sort(Node.sort)
-
- 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.
for (const node of res) {
- this.treeNodes[node.UUID] = node
-
+ // The root node isn't supposed to be shown in the tree.
+ if (node.UUID === '00000000-0000-0000-0000-000000000000')
+ continue
if (node.ParentUUID === '')
this.treeTrunk.push(node)
- else if (this.treeNodes[node.ParentUUD] !== undefined)
- this.treeNodes[node.ParentUUID].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.
- // XXX this.crumbsUpdateNodes()
this.forceUpdate()
-
if (callback)
callback()
@@ -121,60 +112,61 @@ class Tree extends Component {
.catch(e => { console.log(e); console.log(e.type, e.error); alert(e.error) })
}//}}}
setSelected(node) {//{{{
- return // TODO
- if (this.selectedTreeNode)
- this.selectedTreeNode.selected.value = false
+ // The previously selected node, if any, needs to be rerendered
+ // to not retain its 'selected' class.
+ const prevUUID = this.selectedNode?.UUID
+ this.selectedNode = node
+ if (prevUUID)
+ this.treeNodeComponents[prevUUID]?.current.forceUpdate()
- this.selectedTreeNode = this.treeNodeComponents[node.ID].current
- this.selectedTreeNode.selected.value = true
- this.selectedTreeNode.expanded.value = true
- this.expandToTrunk(node.ID)
+ // And now the newly selected node is rerendered.
+ this.treeNodeComponents[node.UUID]?.current.forceUpdate()
+
+ // Expanding selected nodes... I don't know...
+ this.setNodeExpanded(node.UUID, true)
}//}}}
- crumbsUpdateNodes(node) {//{{{
- console.log('crumbs', this.props.app.startNode.Crumbs)
- for (const crumb in this.props.app.startNode.Crumbs) {
- // Start node is loaded before the tree.
- const node = this.treeNodes[crumb.ID]
- if (node)
- node._expanded = true
-
- // Tree is done before the start node.
- const component = this.treeNodeComponents[crumb.ID]
- if (component?.component.current)
- component.current.expanded.value = true
+ isSelected(node) {//{{{
+ return this.selectedNode?.UUID === node.UUID
+ }//}}}
+ async expandToTrunk(node) {//{{{
+ // Get all ancestors from a certain node up to the highest grandparent.
+ const ancestry = await nodeStore.getNodeAncestry(node, [])
+ for (const i in ancestry) {
+ await nodeStore.node(ancestry[i].UUID).fetchChildren()
+ this.setNodeExpanded(ancestry[i].UUID, true)
}
- // Will be undefined when called from tree initialization
- // (as tree nodes aren't rendered yet)
- if (node !== undefined)
- this.setSelected(node)
- }//}}}
- expandToTrunk(nodeUUID) {//{{{
- let node = this.treeNodes[nodeUUID]
- if (node === undefined)
+ // Already a top node, no need to expand anything.
+ if (ancestry.length === 0)
return
- node = this.treeNodes[node.ParentUUID]
- while (node !== undefined) {
- this.treeNodeComponents[node.UUID].current.expanded.value = true
- node = this.treeNodes[node.ParentUUID]
- }
+ // Start the chain of by expanding the top node.
+ this.setNodeExpanded(ancestry[ancestry.length-1].UUID, true)
+ }//}}}
+ getNodeExpanded(UUID) {//{{{
+ if (this.expandedNodes[UUID] === undefined)
+ this.expandedNodes[UUID] = signal(false)
+ return this.expandedNodes[UUID].value
+ }//}}}
+ setNodeExpanded(UUID, value) {//{{{
+ // Creating a default value if it doesn't exist already.
+ this.getNodeExpanded(UUID)
+ this.expandedNodes[UUID].value = value
}//}}}
}
class TreeNode extends Component {
constructor(props) {//{{{
super(props)
- this.selected = signal(props.selected)
- this.expanded = signal(this.props.node._expanded)
-
this.children_populated = signal(false)
- if (this.props.node.Level === 0)
+ if (this.props.node.Level === 0 || this.props.tree.getNodeExpanded(this.props.node.UUID))
this.fetchChildren()
}//}}}
render({ tree, node, parent }) {//{{{
// Fetch the next level of children if the parent tree node is expanded and our children thus will be visible.
- if (!this.children_populated.value && parent?.expanded.value)
+ const selected = tree.isSelected(node) ? 'selected' : ''
+
+ if (!this.children_populated.value && tree.getNodeExpanded(parent?.props.node.UUID))
this.fetchChildren()
const children = node.Children.map(node => {
@@ -186,25 +178,22 @@ class TreeNode extends Component {
if (node.Children.length === 0)
expandImg = html` _notes2.current.goToNode(ROOT_NODE)}>
${renderedTreeTrunk}
`
else {
- if (this.expanded.value)
+ if (tree.getNodeExpanded(node.UUID))
expandImg = html``
else
expandImg = html``
}
- const selected = (this.selected.value ? 'selected' : '')
-
return html`
-
-
`
}//}}}
- fetchChildren() {//{{{
- this.props.node.fetchChildren().then(() => {
- this.children_populated.value = true
- })
+ async fetchChildren() {//{{{
+ await this.props.node.fetchChildren()
+ this.children_populated.value = true
}//}}}
}
diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index a27817e..2814fe4 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -1,31 +1,84 @@
import { API } from 'api'
+import { Node } from 'node'
export class Sync {
constructor() {
this.foo = ''
}
- static async tree() {
+ static async nodes() {
+ let duration = 0
+ const syncStart = Date.now()
try {
- const state = await nodeStore.getAppState('latest_sync')
+ // The latest sync node value is used to retrieve the changes
+ // from the backend.
+ const state = await nodeStore.getAppState('latest_sync_node')
+ const clientUUID = await nodeStore.getAppState('client_uuid')
const oldMax = (state?.value ? state.value : 0)
- let newMax = 0
+ let currMax = oldMax
let offset = 0
let res = { Continue: false }
let batch = 0
do {
batch++
- console.log(`Batch #${batch}`)
- res = await API.query('POST', `/node/tree/${oldMax}/${offset}`, {})
+ res = await API.query('POST', `/sync/node/${oldMax}/${offset}`, { ClientUUID: clientUUID.value })
+ if (res.Nodes.length > 0)
+ console.log(`Node sync batch #${batch}`)
offset += res.Nodes.length
- newMax = res.MaxSeq
- await nodeStore.upsertTreeRecords(res.Nodes)
+ currMax = Math.max(currMax, res.MaxSeq)
+
+ /* Go through each node and determine if they are older than
+ * the node in IndexedDB. If they are, they are just history
+ * and can be ignored since history is currently not stored
+ * in the browser.
+ *
+ * If the backed node is newer, the local node is stored in
+ * a separate table in IndexedDB to at a later stage in the
+ * sync be preserved in the backend. */
+
+ let backendNode = null
+ for (const i in res.Nodes) {
+ backendNode = new Node(res.Nodes[i], -1)
+ await Sync.handleNode(backendNode)
+ }
+
} while (res.Continue)
- nodeStore.setAppState('latest_sync', Math.max(oldMax, newMax))
+ nodeStore.setAppState('latest_sync_node', currMax)
} catch (e) {
console.log('sync node tree', e)
+ } finally {
+ const syncEnd = Date.now()
+ duration = (syncEnd - syncStart) / 1000
+ const count = await nodeStore.nodeCount()
+ console.log(`Node sync took ${duration}s`, count)
+ }
+ return duration
+ }
+ static async handleNode(backendNode) {
+ try {
+ /* Retrieving the local copy of this node from IndexedDB.
+ * The backend node can be discarded if it is older than
+ * the local copy since it is considered history preserved
+ * in the backend. */
+ return nodeStore.get(backendNode.UUID)
+ .then(async localNode => {
+ if (localNode.updated() >= backendNode.updated()) {
+ console.log(`History from backend: ${backendNode.UUID}`)
+ return
+ }
+
+ // local node is older than the backend node
+ // and moved into the send_queue table for later sync to backend.
+ return nodeStore.moveToSendQueue(localNode, backendNode)
+ })
+ .catch(async e => {
+ // Not found in IndexedDB - OK to just insert since it only exists in backend.
+ return nodeStore.add([backendNode])
+ })
+ } catch (e) {
+ console.error(e)
}
}
}
diff --git a/static/less/notes2.less b/static/less/notes2.less
index ae66833..f3abdc5 100644
--- a/static/less/notes2.less
+++ b/static/less/notes2.less
@@ -12,40 +12,24 @@ html {
"tree crumbs"
"tree name"
"tree content"
- "tree checklist"
- "tree schedule"
- "tree files"
+ //"tree checklist"
+ //"tree schedule"
+ //"tree files"
"tree blank"
;
grid-template-columns: min-content 1fr;
- grid-template-rows:
- min-content /* crumbs */
- min-content /* name */
- min-content /* content */
- min-content /* checklist */
- min-content /* schedule */
- min-content /* files */
- 1fr; /* blank */
@media only screen and (max-width: 600px) {
grid-template-areas:
"crumbs"
"name"
"content"
- "checklist"
- "schedule"
- "files"
+ //"checklist"
+ //"schedule"
+ //"files"
"blank"
;
grid-template-columns: 1fr;
- grid-template-rows:
- min-content /* crumbs */
- min-content /* name */
- min-content /* content */
- min-content /* checklist */
- min-content /* schedule */
- min-content /* files */
- 1fr; /* blank */
#tree {
display: none;
@@ -84,6 +68,7 @@ html {
.expand-toggle {
+ user-select: none;
img {
width: 16px;
height: 16px;
@@ -134,6 +119,14 @@ html {
color: #333;
border-radius: 5px;
+ &.node-modified {
+ background-color: @color1;
+ color: @color2;
+ .crumb:after {
+ color: @color2;
+ }
+ }
+
.crumb {
margin-right: 8px;
cursor: pointer;
@@ -225,3 +218,8 @@ html {
padding-top: 16px;
}
}
+
+#blank {
+ grid-area: blank;
+ height: 32px;
+}
window._notes2.current.goToNode(node.UUID)}>${node.Name}
-
+
+ window._notes2.current.goToNode(node.UUID)}>${node.get('Name')}
+