mirror of
https://github.com/umap-project/umap.git
synced 2025-04-30 12:12:36 +02:00
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:
parent
3e3ce0b8f5
commit
62be6450bb
4 changed files with 17 additions and 10 deletions
|
@ -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
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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')
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue