Back to node
+ 
+ Actions
+
+
+
+
+
+
+ History
+
+
+
+
+ `
+ }// }}}
+ constructor(node, index) {// {{{
+ super()
+
+ this.node = node
+ this.index = index
+
+ this.style.display = 'contents'
+ this.selected = false
+
+ this.addEventListener('click', () => this.select())
+
+ // Another history node has been selected.
+ _mbus.subscribe('HISTORY_NODE_SELECTED', (event) => {
+ if (this.node.get('Updated') == event.detail.data.historyNode.node.get('Updated'))
+ return
+ this.selected = false
+ this.render()
+ })
+ }// }}}
+
+ select() {// {{{
+ this.selected = true
+ // Other nodes are told to unselect and rerender.
+ _mbus.dispatch('HISTORY_NODE_SELECTED', { historyNode: this })
+ this.render()
+ }// }}}
+ render() {// {{{
+ const date = this.node.get('Updated').slice(0, 10)
+ const time = this.node.get('Updated').slice(11, 19)
+
+ if (this.selected)
+ this.classList.add('selected')
+ else
+ this.classList.remove('selected')
+
+ this.elIndex.innerText = this.index
+ this.elDate.innerText = date
+ this.elTime.innerText = time
+ this.elSize.innerText = this.node.get('Content').length
+ this.elName.innerText = this.node.get('Name')
+ }// }}}
+ 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-pagehistorynode', N2PageHistoryNode)
+
-
- History on server:
+
+
+ History on client:
+
+
+
- `
- }
- constructor() {
+
+ `
+ }// }}}
+
+ constructor() {// {{{
super()
+ this.selectedNode = null
+
+ this.setAttribute('tabindex', '-1')
+ this.addEventListener('keydown', event => this.keyHandler(event))
// 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())
+ this.elPrev.addEventListener('click', () => this.prevPage())
+ this.elNext.addEventListener('click', () => this.nextPage())
+ 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) {
+ _mbus.subscribe('HISTORY_NODE_SELECTED', (event) => {
+ this.selectedNode = event.detail.data.historyNode
+ })
+ }// }}}
+ 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'
+ 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 => {
+ i++
+ const index = 1 + this.nodesTotal - (N2PageHistory.PAGESIZE * (this.page - 1) + i)
+ const div = new N2PageHistoryNode(n, index)
+ div.render()
+ return div
+ })
+ this.elNodes.replaceChildren(...divs)
+
+ if (!keepFetchHistoryProgress)
+ this.elFetchHistoryProgress.innerText = ''
+
+ // Select the first node.
+ if (!this.selectedNode) {
+ this.elNodes.firstElementChild?.select()
+ }
+
+ // Any selected history node is rendered with markdown.
+ /*
+ this.marked = new MarkedPosition()
+ this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value)
+ */
+ }// }}}
+
+ 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
+ case 'ArrowUp':
+ const prevNode = this.selectedNode?.previousElementSibling
+ if (prevNode)
+ prevNode.select()
+ break
+ case 'ArrowDown':
+ const nextNode = this.selectedNode?.nextElementSibling
+ if (nextNode)
+ nextNode.select()
+ break
+ }
+ }// }}}
-
- prevPage() {
+ prevPage() {// {{{
if (this.page == 1)
return
+
+ // Selecting a node on another page is wrong.
+ this.selectedNode = null
this.page--
this.render()
- }
-
- nextPage() {
+ }// }}}
+ nextPage() {// {{{
if (this.page >= this.pages)
return
+ // Selecting a node on another page is wrong.
+ this.selectedNode = null
this.page++
this.render()
- }
+ }// }}}
- async render() {
- this.elNodeName.innerText = this.node.get('Name')
- this.elPage.innerText = `${this.page} / ${this.pages}`
+ async getServerTotal() {// {{{
+ const res = await fetch(`/node/history/count/${this.node.UUID}`, {
+ headers: {
+ "Authorization": 'Bearer ' + localStorage.getItem('token'),
+ }
+ })
+ const json = await res.json()
- 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 = `
- <
>
${N2PageHistory.PAGESIZE * (this.page - 1) + i}
- ${n.get('Updated').replace('T', ' ')}
- `
- div.classList.add('history-node')
- this.elNodes.append(div)
+ if (!json.OK) {
+ alert(json.Error)
+ return
}
- }
+
+ return json.Count
+ }// }}}
+ 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
+ this.elFetchHistoryProgress.innerText = `${nodes.length} fetched.`
+ }
+
+ 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)
+ }
+
+ this.elFetchHistoryProgress.innerText = `${nodes.length} fetched - all history fetched.`
+ } 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)
+
+
+class N2PageHistoryNode extends CustomHTMLElement {
+ static {// {{{
+ this.tmpl = document.createElement('template')
+ this.tmpl.innerHTML = `
+
+