128 lines
3.1 KiB
JavaScript
128 lines
3.1 KiB
JavaScript
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
|
|
|
|
export class N2PageHistory extends CustomHTMLElement {
|
|
static PAGESIZE = 25
|
|
|
|
static {
|
|
this.tmpl = document.createElement('template')
|
|
this.tmpl.innerHTML = `
|
|
<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"><</div>
|
|
<div data-el="page"></div>
|
|
<div data-el="next">></div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
|
|
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())
|
|
|
|
_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() {
|
|
this.elNodeName.innerText = this.node.get('Name')
|
|
this.elPage.innerText = `${this.page} / ${this.pages}`
|
|
|
|
let nodes = await nodeStore.nodesHistory.retrievePage(this.node.UUID, N2PageHistory.PAGESIZE, this.page)
|
|
let i = 0
|
|
let divs = nodes.map(n => {
|
|
i++
|
|
|
|
const date = n.get('Updated').slice(0, 10)
|
|
const time = n.get('Updated').slice(11, 19)
|
|
|
|
const div = document.createElement('div')
|
|
div.innerHTML = `
|
|
<div class="index">${1 + this.nodesTotal - (N2PageHistory.PAGESIZE * (this.page - 1) + i)}</div>
|
|
<div class="updated"><span class="date">${date}</span> <span class="time">${time}</span></div>
|
|
<div class="size">${this.formatSize(n.get('Content').length)}</div>
|
|
<div class="name">${n.get('Name')}</div>
|
|
`
|
|
div.classList.add('history-node')
|
|
return div
|
|
})
|
|
this.elNodes.replaceChildren(...divs)
|
|
}
|
|
}
|
|
customElements.define('n2-pagehistory', N2PageHistory)
|