feat(sync): show a very minimal list of connected peers

cf #2267

Co-authored-by: David Larlet <david@larlet.fr>
This commit is contained in:
Yohan Boniface 2025-01-23 18:26:48 +01:00
parent 3e3ce0b8f5
commit 62be6450bb
4 changed files with 17 additions and 10 deletions

View file

@ -146,9 +146,8 @@ export class SyncEngine {
updater.applyMessage(operation) updater.applyMessage(operation)
} }
getNumberOfConnectedPeers() { getPeers() {
if (this.peers) return Object.keys(this.peers).length return this.peers || {}
return 0
} }
/** /**

View file

@ -2,6 +2,7 @@ import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
import { translate } from '../i18n.js' import { translate } from '../i18n.js'
import { WithTemplate } from '../utils.js' import { WithTemplate } from '../utils.js'
import ContextMenu from './contextmenu.js' import ContextMenu from './contextmenu.js'
import * as Utils from '../utils.js'
const TOP_BAR_TEMPLATE = ` const TOP_BAR_TEMPLATE = `
<div class="umap-main-edit-toolbox with-transition dark"> <div class="umap-main-edit-toolbox with-transition dark">
@ -96,13 +97,16 @@ export class TopBar extends WithTemplate {
} }
}) })
const connectedPeers = this._umap.sync.getNumberOfConnectedPeers()
this.elements.peers.addEventListener('mouseover', () => { this.elements.peers.addEventListener('mouseover', () => {
if (!connectedPeers) return const connectedPeers = this._umap.sync.getPeers()
if (!Object.keys(connectedPeers).length) return
const ul = Utils.loadTemplate(
`<ul>${Object.entries(connectedPeers)
.map(([id, name]) => `<li>${name || translate('Anonymous')}</li>`)
.join('')}</ul>`
)
this._umap.tooltip.open({ this._umap.tooltip.open({
content: translate('{connectedPeers} peer(s) currently connected to this map', { content: ul,
connectedPeers: connectedPeers,
}),
anchor: this.elements.peers, anchor: this.elements.peers,
position: 'bottom', position: 'bottom',
delay: 500, delay: 500,

View file

@ -21,7 +21,11 @@ export default class Tooltip extends Positioned {
open(opts) { open(opts) {
const showIt = () => { const showIt = () => {
this.container.innerHTML = Utils.escapeHTML(opts.content) if (opts.content.nodeType === 1) {
this.container.appendChild(opts.content)
} else {
this.container.innerHTML = Utils.escapeHTML(opts.content)
}
this.parent.classList.add('umap-tooltip') this.parent.classList.add('umap-tooltip')
this.openAt(opts) this.openAt(opts)
} }

View file

@ -1351,7 +1351,7 @@ export default class Umap extends ServerStored {
numberOfConnectedPeers: () => { numberOfConnectedPeers: () => {
Utils.eachElement('.connected-peers span', (el) => { Utils.eachElement('.connected-peers span', (el) => {
if (this.sync.websocketConnected) { if (this.sync.websocketConnected) {
el.textContent = this.sync.getNumberOfConnectedPeers() el.textContent = Object.keys(this.sync.getPeers()).length
} else { } else {
el.textContent = translate('Disconnected') el.textContent = translate('Disconnected')
} }