Work on node history

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)