Download history to client

static/js/page_history.mjs

@@ -1,7 +1,8 @@
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
+import { Node } from './page_node.mjs'
 
 export class N2PageHistory extends CustomHTMLElement {
-	static PAGESIZE = 25
+	static PAGESIZE = 15
 
 	static {
 		this.tmpl = document.createElement('template')
@@ -9,22 +10,30 @@ export class N2PageHistory extends CustomHTMLElement {
 			<style>
 				n2-pagehistory {
 					margin-top: 32px;
-
-					.layout {
-					}
 				}
 			</style>
 
-			<div class="layout">
+			<div class="back">
 				<img data-el="back-image" src="/images/${_VERSION}/icon_back.svg" class="colorize">
 				<div data-el="back-text">Back to node</div>
+			</div>
 
+			<div class="node-name">
 				<img src="/images/${_VERSION}/icon_history.svg" class="colorize">
 				<h1 data-el="node-name"></h1>
+			</div>
 
+			<div class="group-label">Actions</div>
+			<div class="group">
+				<button data-el="download-history">Fetch all history from server</button>
+			</div>
+
+
+			<div class="group-label">History</div>
+			<div class="group">
 				<div data-el="nodes"></div>
 
-				<div class="pagination">
+				<div data-el="pagination">
 					<div data-el="prev">&lt;</div>
 					<div data-el="page"></div>
 					<div data-el="next">&gt;</div>
@@ -44,6 +53,7 @@ export class N2PageHistory extends CustomHTMLElement {
 		this.elBackText.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
 		this.elPrev.addEventListener('click', () => this.prevPage())
 		this.elNext.addEventListener('click', () => this.nextPage())
+		this.elDownloadHistory.addEventListener('click', () => this.downloadHistory())
 
 		_mbus.subscribe('NODE_UI_OPEN', async (event) => {
 			await this.useNode(event.detail.data)
@@ -104,6 +114,11 @@ export class N2PageHistory extends CustomHTMLElement {
 		this.elNodeName.innerText = this.node.get('Name')
 		this.elPage.innerText = `${this.page} / ${this.pages}`
 
+		if (this.nodesTotal <= N2PageHistory.PAGESIZE)
+			this.elPagination.style.display = 'none'
+		else
+			this.elPagination.style.display = ''
+
 		let nodes = await nodeStore.nodesHistory.retrievePage(this.node.UUID, N2PageHistory.PAGESIZE, this.page)
 		let i = 0
 		let divs = nodes.map(n => {
@@ -124,5 +139,50 @@ export class N2PageHistory extends CustomHTMLElement {
 		})
 		this.elNodes.replaceChildren(...divs)
 	}
+
+	async downloadHistory() {
+		try {
+			const nodes = []
+			let offset = 0
+			let hasMore = true
+
+			while (hasMore) {
+				const history = await this.downloadHistoryPage(offset)
+				hasMore = history.HasMore
+				for (const nodeData of history.Nodes) {
+					nodes.push(new Node(nodeData))
+				}
+				offset = nodes.length
+			}
+
+			let num = 0
+			for (const node of nodes) {
+				const ok = await nodeStore.nodesHistory.hasNode(node.UUID, node.get('Updated'))
+				if (ok) num++
+				await nodeStore.nodesHistory.add(node)
+			}
+			console.log(num)
+
+		} catch (e) {
+			console.error(e)
+			alert(e)
+		}
+	}
+
+	async downloadHistoryPage(offset) {
+		const res = await fetch(`/node/history/retrieve/${this.node.UUID}/${offset}`, {
+			headers: {
+				"Authorization": 'Bearer ' + localStorage.getItem('token'),
+			}
+		})
+		const json = await res.json()
+
+		if (!json.OK) {
+			alert(json.Error)
+			return
+		}
+
+		return json
+	}
 }
 customElements.define('n2-pagehistory', N2PageHistory)