@@ -273,15 +276,14 @@ class NodeContent extends Component {
export class Node {
constructor(nodeData, level) {//{{{
this.Level = level
-
- this._children_fetched = false
- this.Children = []
+ this.data = nodeData
this.UUID = nodeData.UUID
this.ParentUUID = nodeData.ParentUUID
- this.UserID = nodeData.UserID
- this.CryptoKeyID = nodeData.CryptoKeyID
- this.Name = nodeData.Name
+
+ this._children_fetched = false
+ this.Children = []
+ /*
this.RenderMarkdown = signal(nodeData.RenderMarkdown)
this.Markdown = false
this.ShowChecklist = signal(false)
@@ -294,6 +296,14 @@ 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
@@ -311,7 +321,7 @@ export class Node {
if (this.CryptoKeyID != 0 && !this._decrypted)
this.#decrypt()
*/
- return this._content
+ return this.data.Content
}//}}}
setContent(new_content) {//{{{
this._content = new_content
@@ -325,8 +335,8 @@ export class Node {
*/
}//}}}
static sort(a, b) {//{{{
- if (a.Name < b.Name) return -1
- if (a.Name > b.Name) return 0
+ if (a.data.Name < b.data.Name) return -1
+ if (a.data.Name > b.data.Name) return 0
return 0
}//}}}
}
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index 57909b7..b90a613 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'
@@ -13,15 +12,14 @@ export class NodeStore {
}//}}}
async initializeDB() {//{{{
return new Promise((resolve, reject) => {
- const req = indexedDB.open('notes', 3)
-
+ const req = indexedDB.open('notes', 5)
// 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
const db = event.target.result
const trx = event.target.transaction
@@ -31,28 +29,35 @@ 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 })
break
case 2:
- trx.objectStore('treeNodes').createIndex('parentIndex', 'ParentUUID', { unique: false })
+ trx.objectStore('nodes').createIndex('parentIndex', '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('modifiedIndex', 'modified', { unique: false })
+ break
+
+ case 5:
+ sendQueue = db.createObjectStore('send_queue', { keyPath: ['UUID', 'Updated'] })
+ sendQueue.createIndex('updated', 'Updated', { 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 +65,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.
@@ -89,11 +94,18 @@ 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)
+ }//}}}
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 +120,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 +141,72 @@ 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 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,23 +226,25 @@ 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 trx = this.db.transaction('nodes', 'readonly')
+ const nodeStore = trx.objectStore('nodes')
const index = nodeStore.index('parentIndex')
const req = index.getAll(parent)
req.onsuccess = (event) => {
@@ -193,21 +269,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)
}
@@ -221,26 +305,23 @@ export class NodeStore {
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
}
-
- // 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 node = new Node(event.target.result, -1)
+ resolve(node)
+ }
+ })
+ }//}}}
+ 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..665568f 100644
--- a/static/js/notes2.mjs
+++ b/static/js/notes2.mjs
@@ -6,17 +6,21 @@ 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
@@ -81,7 +85,7 @@ class Tree extends Component {
})
return html`
-
+
_notes2.current.goToNode(ROOT_NODE)}>
${renderedTreeTrunk}
`
}//}}}
@@ -197,7 +201,7 @@ class TreeNode extends Component {
return html`
{ this.expanded.value ^= true }}>${expandImg}
-
window._notes2.current.goToNode(node.UUID)}>${node.Name}
+
window._notes2.current.goToNode(node.UUID)}>${node.get('Name')}
${children}
`
}//}}}
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..52472ef 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;
@@ -225,3 +210,8 @@ html {
padding-top: 16px;
}
}
+
+#blank {
+ grid-area: blank;
+ height: 32px;
+}