diff --git a/umap/static/umap/img/16.svg b/umap/static/umap/img/16.svg
index 0a79b883..85400b49 100644
--- a/umap/static/umap/img/16.svg
+++ b/umap/static/umap/img/16.svg
@@ -1,184 +1 @@
-
+
diff --git a/umap/static/umap/img/source/16.svg b/umap/static/umap/img/source/16.svg
index 2730a768..19fa5f22 100644
--- a/umap/static/umap/img/source/16.svg
+++ b/umap/static/umap/img/source/16.svg
@@ -1,203 +1,756 @@
-
+
diff --git a/umap/static/umap/js/modules/sync/engine.js b/umap/static/umap/js/modules/sync/engine.js
index 6bca71fd..8d2cc5d7 100644
--- a/umap/static/umap/js/modules/sync/engine.js
+++ b/umap/static/umap/js/modules/sync/engine.js
@@ -101,6 +101,11 @@ export class SyncEngine {
updater.applyMessage(operation)
}
+ getNumberOfConnectedPeers() {
+ if (this.peers) return this.peers.length
+ return 0
+ }
+
/**
* This is called by the transport layer on new messages,
* and dispatches the different "on*" methods.
@@ -146,7 +151,7 @@ export class SyncEngine {
onJoinResponse({ uuid, peers }) {
debug('received join response', { uuid, peers })
this.uuid = uuid
- this.peers = peers
+ this.onListPeersResponse({ peers })
// Get one peer at random
let randomPeer = this._getRandomPeer()
@@ -168,6 +173,7 @@ export class SyncEngine {
onListPeersResponse({ peers }) {
debug('received peerinfo', { peers })
this.peers = peers
+ this.updaters.map.update({ key: 'numberOfConnectedPeers' })
}
/**
diff --git a/umap/static/umap/js/modules/sync/updaters.js b/umap/static/umap/js/modules/sync/updaters.js
index 560b6af6..896aed06 100644
--- a/umap/static/umap/js/modules/sync/updaters.js
+++ b/umap/static/umap/js/modules/sync/updaters.js
@@ -42,7 +42,9 @@ class BaseUpdater {
export class MapUpdater extends BaseUpdater {
update({ key, value }) {
- this.updateObjectValue(this.map, key, value)
+ if (key !== 'numberOfConnectedPeers') {
+ this.updateObjectValue(this.map, key, value)
+ }
this.map.render([key])
}
}
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 9a27a958..f147c04d 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -660,6 +660,33 @@ const ControlsMixin = {
menu.openBelow(button, actions)
})
}
+
+ const connectedPeers = this.sync.getNumberOfConnectedPeers()
+ if (connectedPeers !== 0) {
+ const connectedPeersCount = L.DomUtil.createButton(
+ 'leaflet-control-connected-peers',
+ rightContainer,
+ '',
+ )
+ L.DomEvent.on(connectedPeersCount, 'mouseover', () => {
+ this.tooltip.open({
+ content: L._('{connectedPeers} peer(s) currently connected to this map', {
+ connectedPeers: connectedPeers,
+ }),
+ anchor: connectedPeersCount,
+ position: 'bottom',
+ delay: 500,
+ duration: 5000,
+ })
+ })
+
+ const updateConnectedPeersCount = () => {
+ connectedPeersCount.innerHTML =
+ '' + this.sync.getNumberOfConnectedPeers() + ''
+ }
+ updateConnectedPeersCount()
+ }
+
this.help.getStartedLink(rightContainer)
const controlEditCancel = L.DomUtil.createButton(
'leaflet-control-edit-cancel',
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index 1d911b84..7a4be0dd 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -224,8 +224,13 @@ U.Map = L.Map.extend({
},
render: function (fields) {
- const impacts = U.Utils.getImpactsFromSchema(fields)
+ if (fields.includes('numberOfConnectedPeers')) {
+ this.renderEditToolbar()
+ this.propagate()
+ }
+
+ const impacts = U.Utils.getImpactsFromSchema(fields)
for (const impact of impacts) {
switch (impact) {
case 'ui':
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index fe83d407..ddb8bd0f 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -500,7 +500,9 @@ ul.photon-autocomplete {
}
.leaflet-container .leaflet-control-edit-save,
.leaflet-container .leaflet-control-edit-cancel,
-.leaflet-container .leaflet-control-edit-disable {
+.leaflet-container .leaflet-control-edit-disable,
+.leaflet-container .leaflet-control-connected-peers
+{
display: block;
border: none;
font-size: 12px;
@@ -510,9 +512,17 @@ ul.photon-autocomplete {
line-height: 30px;
padding: 0 20px;
}
+.leaflet-container .leaflet-control-connected-peers,
+.dark [type="button"].leaflet-control-connected-peers:hover
+{
+ background-color: var(--color-lightCyan);
+ color: var(--color-dark);
+}
+
.leaflet-container .leaflet-control-edit-disable:before,
.leaflet-container .leaflet-control-edit-save:before,
-.leaflet-container .leaflet-control-edit-cancel:before {
+.leaflet-container .leaflet-control-edit-cancel:before,
+.leaflet-container .leaflet-control-connected-peers:before {
display: inline-block;
width: 19px;
height: 24px;
@@ -523,9 +533,15 @@ ul.photon-autocomplete {
content: ' ';
text-align: center;
}
+
+.leaflet-container .leaflet-control-connected-peers:before {
+ background-image: url('./img/16.svg');
+}
+
.leaflet-container .leaflet-control-edit-disable span,
.leaflet-container .leaflet-control-edit-save span,
-.leaflet-container .leaflet-control-edit-cancel span {
+.leaflet-container .leaflet-control-edit-cancel span,
+.leaflet-container .leaflet-control-connected-peers span{
margin-inline-start: 10px;
}
.leaflet-container .leaflet-control-edit-save:before {
@@ -534,8 +550,12 @@ ul.photon-autocomplete {
.leaflet-container .leaflet-control-edit-disable:before {
background-position: -50px -25px;
}
+.leaflet-container .leaflet-control-connected-peers:before {
+ background-position: -2px -95px;
+}
.leaflet-container .leaflet-control-edit-cancel,
-.leaflet-container .leaflet-control-edit-disable {
+.leaflet-container .leaflet-control-edit-disable,
+.leaflet-container .leaflet-control-connected-peers{
border: 0.5px solid rgba(153, 153, 153, 0.40);
}
.leaflet-container .leaflet-control-edit-cancel:hover,
diff --git a/umap/static/umap/vars.css b/umap/static/umap/vars.css
index 8c387c3c..181a5ed7 100644
--- a/umap/static/umap/vars.css
+++ b/umap/static/umap/vars.css
@@ -6,6 +6,7 @@
--color-mediumGray: #3e4444;
--color-darkGray: #323737;
--color-light: white;
+ --color-dark: black;
--color-limeGreen: #b9f5d2;
--color-brightCyan: #46ece6;
--color-lightCyan: #d4fbf9;
@@ -14,7 +15,7 @@
--background-color: var(--color-light);
--color-accent: var(--color-brightCyan);
- --text-color: black;
+ --text-color: var(--color-dark);
/* Buttons. */
--button-primary-background: var(--color-waterMint);