wip

static/js/app.mjs

@@ -8,12 +8,13 @@ const html = htm.bind(h)
 export class Notes2 {
 	constructor() {//{{{
 		this.startNode = null
+		this.tree = createRef()
 		this.setStartNode()
 	}//}}}
 	render() {//{{{
 		return html`
-			<button onclick=${()=>API.logout()}>Log out</button>
-			<${Tree} app=${this} />
+			<button onclick=${() => API.logout()}>Log out</button>
+			<${Tree} ref=${this.tree} app=${this} />
 		`
 	}//}}}
 	setStartNode() {//{{{
@@ -26,7 +27,8 @@ export class Notes2 {
 		const req = {}
 		API.query('POST', '/node/tree', req)
 			.then(response => {
-				console.log(response)
+				console.log(response.Nodes)
+				nodeStore.add(response.Nodes)
 			})
 			.catch(e => console.log(e.type, e.error))
 	}
@@ -51,8 +53,7 @@ class Tree extends Component {
 	}//}}}
 
 	retrieve(callback = null) {//{{{
-		const req = { StartNodeID: 0 }
-		API.query('POST', '/node/tree', req)
+		nodeStore.getTreeNodes()
 			.then(res => {
 				this.treeNodes = {}
 				this.treeNodeComponents = {}
@@ -63,7 +64,7 @@ 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.Nodes.forEach(nodeData => {
+				res.forEach(nodeData => {
 					let node = new Node(
 						this,
 						nodeData.ID,

static/js/key.mjs

@@ -1,4 +1,3 @@
-import 'preact/devtools'
 import { h, Component } from 'preact'
 import htm from 'htm'
 import Crypto from 'crypto'

static/js/node_store.mjs

@@ -0,0 +1,87 @@
+export class NodeStore {
+	constructor() {
+		if (!('indexedDB' in window)) {
+			throw 'Missing IndexedDB'
+		}
+
+		this.db = null
+	}
+
+	async initializeDB() {
+		return new Promise((resolve, reject) => {
+			let 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
+
+				for (let i = event.oldVersion + 1; i <= event.newVersion; i++) {
+					console.log(`Upgrade to schema ${i}`)
+
+					// The schema transformations.
+					switch (i) {
+						case 1:
+							store = db.createObjectStore('nodes', { keyPath: 'ID' })
+							store.createIndex('nameIndex', 'Name', { unique: false })
+							break
+						case 2:
+							trx.objectStore('nodes').createIndex('parentIndex', 'ParentID', { unique: false })
+							break
+					}
+				}
+			}
+
+			req.onsuccess = (event) => {
+				this.db = event.target.result
+				resolve()
+			}
+
+			req.onerror = (event) => {
+				reject(event.target.error)
+			}
+		})
+	}
+
+	async add(records) {
+		return new Promise((resolve, reject) => {
+			try {
+				let t = this.db.transaction('nodes', 'readwrite')
+				let nodeStore = t.objectStore('nodes')
+				t.onerror = (event) => {
+					console.log('transaction error', event.target.error)
+					reject(event.target.error)
+				}
+				t.oncomplete = () => {
+					resolve()
+				}
+
+				records.forEach(record => {
+					let addReq = nodeStore.add(record)
+					addReq.onsuccess = (event) => {
+						console.log('OK!', record.ID, record.Name)
+					}
+					addReq.onerror = (event) => {
+						console.log('Error!', event.target.error, record.ID)
+					}
+				})
+
+			} catch (e) {
+				console.log(e)
+			}
+		})
+	}
+
+	async getTreeNodes() {
+		return new Promise((resolve, reject)=>{
+			let trx = this.db.transaction('nodes', 'readonly')
+			let nodeStore = trx.objectStore('nodes')
+			let req = nodeStore.getAll()
+			req.onsuccess = (event)=>resolve(event.target.result)
+			req.onerror = (event)=>reject(event.target.error)
+		})
+	}
+}