File sync

This commit is contained in:
Magnus Åhall 2026-07-10 06:32:31 +02:00
parent b76502c034
commit 47c4c99b66
7 changed files with 174 additions and 19 deletions

View file

@ -84,7 +84,7 @@ export class N2Sidebar extends CustomHTMLElement {
justify-content: start;
margin-top: 16px;
gap: 8px 16px;
padding-left: 40px;
padding-left: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line-color);
@ -112,6 +112,11 @@ export class N2Sidebar extends CustomHTMLElement {
<img data-el="search" class='search colorize' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
<img data-el="settings" class='settings colorize' src="/images/${_VERSION}/icon_settings.svg" />
</div>
<div data-el="sync-status">
<img data-el="sync-icon" class="colorize">
<div data-el="sync-label"></div>
<progress data-el="sync-progress" min="0" max="100" value="0"></progress>
</div>
<div data-el="treenodes"></div>
`
}// }}}
@ -126,6 +131,8 @@ export class N2Sidebar extends CustomHTMLElement {
this.expandedNodes = {} // keyed on UUID
this.selectedNode = null
this.rendered = false
this.nodesDownloadCount = 0
this.nodesUploadCount = 0
new TreeExpansionHandler()
@ -134,7 +141,7 @@ export class N2Sidebar extends CustomHTMLElement {
this.elSync.addEventListener('click', () => _sync.run())
this.elStorage.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'storage' }))
this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
this.elSettings.addEventListener('click', ()=> _mbus.dispatch('SHOW_PAGE', { page: 'preferences' }))
this.elSettings.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'preferences' }))
this.elHideTree.addEventListener('click', event => {
event.stopPropagation()
_mbus.dispatch('TREE_EXPANSION', { expand: false })
@ -151,6 +158,46 @@ export class N2Sidebar extends CustomHTMLElement {
treenode.render(true)
})
// SYNC_DOWNLOAD_COUNT and SYNC_UPLOAD_COUNT will be sent first before progress messages comes for either.
_mbus.subscribe('SYNC_DOWNLOAD_COUNT', event => this.nodesDownloadCount = event.detail.data.count)
_mbus.subscribe('SYNC_UPLOAD_COUNT', event => this.nodesUploadCount = event.detail.data.count)
_mbus.subscribe('SYNC_DOWNLOADED', event => {
this.elSyncIcon.classList.add('colorize')
this.elSyncIcon.setAttribute('src', `/images/${_VERSION}/icon_node_download.svg`)
this.elSyncProgress.setAttribute('max', this.nodesDownloadCount)
this.elSyncProgress.value = event.detail.data.handled
})
_mbus.subscribe('SYNC_UPLOADED', event => {
this.elSyncIcon.classList.add('colorize')
this.elSyncIcon.setAttribute('src', `/images/${_VERSION}/icon_node_upload.svg`)
this.elSyncProgress.setAttribute('max', this.nodesUploadCount)
this.elSyncProgress.value = event.detail.data.count
})
_mbus.subscribe('SYNC_DONE', () => {
this.elSyncIcon.classList.remove('colorize')
this.elSyncIcon.setAttribute('src', `/images/${_VERSION}/icon_sync_done.svg`)
})
_mbus.subscribe('FILE_SYNC', event => {
const { direction, name } = event.detail.data
this.elSyncIcon.setAttribute('src', `/images/${_VERSION}/icon_file_${direction}.svg`)
this.elSyncLabel.innerText = name
})
_mbus.subscribe('FILE_DOWNLOAD_PROGRESS', event => {
const { uuid, size, downloaded, percent, done } = event.detail.data
console.log(percent)
if (percent) {
this.elSyncProgress.value = percent
}
if (done) {
this.elSyncLabel.innerText = ''
this.elSyncProgress.value = 0
}
})
/* XXX - set color */
let color = new Color(0x80, 0x00, 0x33)
let solver = new Solver(color)