Work on node history

static/js/app.mjs

@@ -44,7 +44,8 @@ export class App {
 				document.getElementById('node-content')?.focus()
 		})
 
-		_mbus.dispatch('SHOW_PAGE', { page: 'node' })
+		// XXX - _mbus.dispatch('SHOW_PAGE', { page: 'node' })
+		_mbus.dispatch('SHOW_PAGE', { page: 'history' })
 
 		window._sync = new Sync()
 

static/js/node_store.mjs

@@ -74,7 +74,7 @@ export class NodeStore {
 			req.onsuccess = (event) => {
 				this.db = event.target.result
 				this.sendQueue = new SimpleNodeStore(this.db, 'send_queue')
-				this.nodesHistory = new SimpleNodeStore(this.db, 'nodes_history')
+				this.nodesHistory = new NodeHistoryStore(this.db, 'nodes_history')
 				this.files = new SimpleNodeStore(this.db, 'files')
 				this.initializeRootNode()
 					.then(() => resolve())
@@ -437,24 +437,66 @@ class SimpleNodeStore {
 	}//}}}
 }
 
-export class StoreFile {
-	static createFromFileObject(f) {
-		const obj = new StoreFile()
-		obj.name = f.name
-		obj.size = f.size
-		obj.mime = f.type
-		return obj
-	}
-	constructor() {
-		this.name = ''
-		this.size = 0
-		this.mime = ''
+class NodeHistoryStore extends SimpleNodeStore {
+	constructor(db, storeName) {//{{{
+		super(db, storeName)
+	}//}}}
+	count(uuid) {//{{{
+		if (uuid === undefined)
+			return super.count()
 
-		this.objectURL = null // URL.createObjectURL(blob)
-	}
-	data() {
-		return {
-		}
+		const index = this.db
+			.transaction(['nodes', this.storeName], 'readonly')
+			.objectStore(this.storeName)
+			.index('byUUID')
+
+		return new Promise((resolve, reject) => {
+			const request = index.count(uuid)
+			request.onsuccess = (event) => resolve(event.target.result)
+			request.onerror = (event) => reject(event.target.error)
+		})
+	}//}}}
+	retrievePage(uuid, perPage, page) {
+		return new Promise((resolve, _reject) => {
+			const cursor = this.db
+				.transaction(['nodes', this.storeName], 'readonly')
+				.objectStore(this.storeName)
+				.index('byUUID')
+				.openCursor(uuid)
+
+			let retrieved = 0
+			let first = true
+			const nodes = []
+
+			cursor.onsuccess = (event) => {
+				const cursor = event.target.result
+				if (!cursor) {
+					resolve(nodes)
+					return
+				}
+
+				// openCursor returns the first value which is only useful
+				// if the first page is requested.
+				if (page == 1 || !first) {
+					retrieved++
+					nodes.push(new Node(cursor.value))
+					if (retrieved === perPage) {
+						resolve(nodes)
+						return
+					}
+					cursor.continue()
+					return
+				}
+
+				// Jump to the start of the requested page.
+				// Minus one since the first record was already returned.
+				if (page > 1 && first) {
+					first = false
+					cursor.advance((perPage * (page - 1)))
+					return
+				}
+			}
+		})
 	}
 }
 

static/js/page_history.mjs

@@ -1,15 +1,94 @@
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 
 export class N2PageHistory extends CustomHTMLElement {
+	static PAGESIZE = 10
+
 	static {
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
-			<div>History</div>
+			<style>
+				n2-pagehistory {
+					margin-top: 32px;
+
+					.layout {
+					}
+				}
+			</style>
+
+			<div class="layout">
+				<img data-el="back-image" src="/images/${_VERSION}/icon_back.svg" class="colorize">
+				<div data-el="back-text">Back to node</div>
+
+				<img src="/images/${_VERSION}/icon_history.svg" class="colorize">
+				<h1 data-el="node-name"></h1>
+
+				<div data-el="nodes"></div>
+
+
+				<div class="pagination">
+					<div data-el="prev">&lt;</div>
+					<div data-el="page"></div>
+					<div data-el="next">&gt;</div>
+				</div>
+			</div>
 		`
 	}
 
 	constructor() {
 		super()
+
+		// Connect back icon and text to give the user a way back to the node.
+		this.elBackImage.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
+		this.elBackText.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
+		this.elPrev.addEventListener('click', ()=>this.prevPage())
+		this.elNext.addEventListener('click', ()=>this.nextPage())
+
+		_mbus.subscribe('NODE_UI_OPEN', async (event) => {
+			await this.useNode(event.detail.data)
+			this.render()
+		})
+	}
+
+	async useNode(node) {
+		this.node = node
+		this.page = 1
+
+		this.nodesTotal = await nodeStore.nodesHistory.count(this.node.UUID)
+		this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
+	}
+
+
+	prevPage() {
+		if (this.page == 1)
+			return
+		this.page--
+		this.render()
+	}
+
+	nextPage() {
+		if (this.page >= this.pages)
+			return
+		this.page++
+		this.render()
+	}
+
+	async render() {
+		this.elNodeName.innerText = this.node.get('Name')
+		this.elPage.innerText = `${this.page} / ${this.pages}`
+
+		this.elNodes.innerHTML = ''
+		let nodes = await nodeStore.nodesHistory.retrievePage(this.node.UUID, N2PageHistory.PAGESIZE, this.page)
+		let i = 0
+		for (const n of nodes) {
+			i++
+			const div = document.createElement('div')
+			div.innerHTML = `
+				<div>${N2PageHistory.PAGESIZE * (this.page - 1) + i}</div>
+				<div>${n.get('Updated').replace('T', ' ')}</div>
+			`
+			div.classList.add('history-node')
+			this.elNodes.append(div)
+		}
 	}
 }
 customElements.define('n2-pagehistory', N2PageHistory)