316 lines
7.9 KiB
JavaScript
316 lines
7.9 KiB
JavaScript
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
|
|
import { Node } from './page_node.mjs'
|
|
import { MarkedPosition } from './marked_position.mjs'
|
|
|
|
|
|
export class N2PageHistory extends CustomHTMLElement {
|
|
static PAGESIZE = 15
|
|
static {// {{{
|
|
this.tmpl = document.createElement('template')
|
|
this.tmpl.innerHTML = `
|
|
<style>
|
|
n2-pagehistory {
|
|
margin-top: 32px;
|
|
}
|
|
</style>
|
|
|
|
<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="column-1">
|
|
<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">
|
|
<div data-el="prev"><</div>
|
|
<div data-el="page"></div>
|
|
<div data-el="next">></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column-2">
|
|
<div class="group-label">Document</div>
|
|
<div class="group">
|
|
<div data-el="node-markdown"></div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}// }}}
|
|
|
|
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.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()
|
|
})
|
|
|
|
_mbus.subscribe('HISTORY_NODE_SELECTED', (event) => {
|
|
this.selectedNode = event.detail.data.historyNode
|
|
|
|
// Any selected history node is rendered with markdown.
|
|
const marked = new MarkedPosition()
|
|
this.elNodeMarkdown.innerHTML = marked.parse(this.selectedNode?.node.content())
|
|
})
|
|
}// }}}
|
|
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()
|
|
}
|
|
}// }}}
|
|
|
|
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) {// {{{
|
|
let handled = true
|
|
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
|
|
|
|
default:
|
|
handled = false
|
|
}
|
|
|
|
if (handled) {
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
}
|
|
}// }}}
|
|
|
|
prevPage() {// {{{
|
|
if (this.page == 1)
|
|
return
|
|
|
|
// Selecting a node on another page is wrong.
|
|
this.selectedNode = null
|
|
this.page--
|
|
this.render()
|
|
}// }}}
|
|
nextPage() {// {{{
|
|
if (this.page >= this.pages)
|
|
return
|
|
// Selecting a node on another page is wrong.
|
|
this.selectedNode = null
|
|
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
|
|
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 = `
|
|
<div data-el="index"></div>
|
|
<div data-el="updated"><span data-el="date"></span> <span data-el="time"></span></div>
|
|
<div data-el="size"></div>
|
|
<div data-el="name"></div>
|
|
`
|
|
}// }}}
|
|
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.formatSize(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)
|