History fetching from server

static/js/page_history.mjs

@@ -3,8 +3,7 @@ import { Node } from './page_node.mjs'
 
 export class N2PageHistory extends CustomHTMLElement {
 	static PAGESIZE = 15
-
-	static {
+	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
 			<style>
@@ -26,11 +25,20 @@ export class N2PageHistory extends CustomHTMLElement {
 			<div class="group-label">Actions</div>
 			<div class="group">
 				<button data-el="download-history">Fetch all history from server</button>
+				<div data-el="fetch-history-progress"></div>
 			</div>
 
 
 			<div class="group-label">History</div>
 			<div class="group">
+				<div data-el="stats">
+					<div>History on server:</div>
+					<div data-el="stats-on-server"></div>
+
+					<div>History on client:</div>
+					<div data-el="stats-on-client"></div>
+				</div>
+
 				<div data-el="nodes"></div>
 
 				<div data-el="pagination">
@@ -40,9 +48,9 @@ export class N2PageHistory extends CustomHTMLElement {
 				</div>
 			</div>
 		`
-	}
+	}// }}}
 
-	constructor() {
+	constructor() {// {{{
 		super()
 
 		this.setAttribute('tabindex', '-1')
@@ -53,66 +61,23 @@ 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())
+		this.elDownloadHistory.addEventListener('click', async () => {
+			await this.downloadHistory()
+			await this.useNode(this.node)
+			this.render(true)
+
+		})
 
 		_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)
-	}
-
-	keyHandler(event) {
-		switch (event.key) {
-			case 'ArrowLeft':
-				this.prevPage()
-				break
-			case 'ArrowRight':
-				this.nextPage()
-				break
-		}
-	}
-
-	prevPage() {
-		if (this.page == 1)
-			return
-		this.page--
-		this.render()
-	}
-
-	nextPage() {
-		if (this.page >= this.pages)
-			return
-		this.page++
-		this.render()
-	}
-
-	formatSize(s) {
-		let div = 1
-		let unit = 'B'
-		if (s >= 1048576) {
-			div = 1048576
-			unit = 'MB'
-		} else if (s >= 1024) {
-			div = 1024
-			unit = 'kB'
-		}
-
-		return new Intl.NumberFormat(undefined, {
-			maximumFractionDigits: 0
-		}).format(Math.round(s / div)) + ' ' + unit
-	}
-
-	async render() {
+	}// }}}
+	async render(keepFetchHistoryProgress) {// {{{
 		this.elNodeName.innerText = this.node.get('Name')
 		this.elPage.innerText = `${this.page} / ${this.pages}`
+		this.elStatsOnClient.innerText = `${this.nodesTotal}`
+		this.elStatsOnServer.innerText = `${this.historyOnServerTotal}`
 
 		if (this.nodesTotal <= N2PageHistory.PAGESIZE)
 			this.elPagination.style.display = 'none'
@@ -138,9 +103,59 @@ export class N2PageHistory extends CustomHTMLElement {
 			return div
 		})
 		this.elNodes.replaceChildren(...divs)
-	}
 
-	async downloadHistory() {
+		if (!keepFetchHistoryProgress)
+			this.elFetchHistoryProgress.innerText = ''
+	}// }}}
+
+	async useNode(node) {// {{{
+		this.node = node
+		this.page = 1
+
+		this.nodesTotal = await nodeStore.nodesHistory.count(this.node.UUID)
+		this.historyOnServerTotal = await this.getServerTotal()
+		this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
+	}// }}}
+	keyHandler(event) {// {{{
+		switch (event.key) {
+			case 'ArrowLeft':
+				this.prevPage()
+				break
+			case 'ArrowRight':
+				this.nextPage()
+				break
+		}
+	}// }}}
+
+	prevPage() {// {{{
+		if (this.page == 1)
+			return
+		this.page--
+		this.render()
+	}// }}}
+	nextPage() {// {{{
+		if (this.page >= this.pages)
+			return
+		this.page++
+		this.render()
+	}// }}}
+
+	async getServerTotal() {// {{{
+		const res = await fetch(`/node/history/count/${this.node.UUID}`, {
+			headers: {
+				"Authorization": 'Bearer ' + localStorage.getItem('token'),
+			}
+		})
+		const json = await res.json()
+
+		if (!json.OK) {
+			alert(json.Error)
+			return
+		}
+
+		return json.Count
+	}// }}}
+	async downloadHistory() {// {{{
 		try {
 			const nodes = []
 			let offset = 0
@@ -153,6 +168,7 @@ export class N2PageHistory extends CustomHTMLElement {
 					nodes.push(new Node(nodeData))
 				}
 				offset = nodes.length
+				this.elFetchHistoryProgress.innerText = `${nodes.length} fetched.`
 			}
 
 			let num = 0
@@ -161,15 +177,14 @@ export class N2PageHistory extends CustomHTMLElement {
 				if (ok) num++
 				await nodeStore.nodesHistory.add(node)
 			}
-			console.log(num)
 
+			this.elFetchHistoryProgress.innerText = `${nodes.length} fetched - all history fetched.`
 		} catch (e) {
 			console.error(e)
 			alert(e)
 		}
-	}
-
-	async downloadHistoryPage(offset) {
+	}// }}}
+	async downloadHistoryPage(offset) {// {{{
 		const res = await fetch(`/node/history/retrieve/${this.node.UUID}/${offset}`, {
 			headers: {
 				"Authorization": 'Bearer ' + localStorage.getItem('token'),
@@ -183,6 +198,21 @@ export class N2PageHistory extends CustomHTMLElement {
 		}
 
 		return json
-	}
+	}// }}}
+	formatSize(s) {// {{{
+		let div = 1
+		let unit = 'B'
+		if (s >= 1048576) {
+			div = 1048576
+			unit = 'MB'
+		} else if (s >= 1024) {
+			div = 1024
+			unit = 'kB'
+		}
+
+		return new Intl.NumberFormat(undefined, {
+			maximumFractionDigits: 0
+		}).format(Math.round(s / div)) + ' ' + unit
+	}// }}}
 }
 customElements.define('n2-pagehistory', N2PageHistory)