magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Formatting of history

Browse source
This commit is contained in:
Magnus Åhall 2026-06-06 13:06:48 +02:00
parent 5f068ac036
commit 65a0225d74
3 changed files with 82 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

54
static/js/page_history.mjs
View file

@ -1,7 +1,7 @@
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
export class N2PageHistory extends CustomHTMLElement {
static PAGESIZE = 10
static PAGESIZE = 25
static {
this.tmpl = document.createElement('template')
@ -24,7 +24,6 @@ export class N2PageHistory extends CustomHTMLElement {
<div data-el="nodes"></div>
<div class="pagination">
<div data-el="prev">&lt;</div>
<div data-el="page"></div>
@ -37,11 +36,14 @@ export class N2PageHistory extends CustomHTMLElement {
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())
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)
@ -57,6 +59,16 @@ export class N2PageHistory extends CustomHTMLElement {
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)
@ -72,23 +84,45 @@ export class N2PageHistory extends CustomHTMLElement {
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}`
this.elNodes.innerHTML = ''
let nodes = await nodeStore.nodesHistory.retrievePage(this.node.UUID, N2PageHistory.PAGESIZE, this.page)
let i = 0
for (const n of nodes) {
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>${N2PageHistory.PAGESIZE * (this.page - 1) + i}</div>
<div>${n.get('Updated').replace('T', ' ')}</div>
<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')
this.elNodes.append(div)
}
return div
})
this.elNodes.replaceChildren(...divs)
}
}
customElements.define('n2-pagehistory', N2PageHistory)