From b7ca96191278fee05007b2701d4eac305615e56e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexis=20M=C3=A9taireau?= <alexis@notmyidea.org>
Date: Fri, 25 Oct 2024 15:32:45 +0200
Subject: [PATCH] feat(sync): Display a pannel to the user when disconnected.

---
 umap/static/umap/js/modules/sync/engine.js    |  2 ++
 umap/static/umap/js/modules/sync/websocket.js | 11 +++++++-
 umap/static/umap/js/umap.js                   | 28 +++++++++++++++++--
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/umap/static/umap/js/modules/sync/engine.js b/umap/static/umap/js/modules/sync/engine.js
index 749a707f..fce47910 100644
--- a/umap/static/umap/js/modules/sync/engine.js
+++ b/umap/static/umap/js/modules/sync/engine.js
@@ -91,6 +91,7 @@ export class SyncEngine {
     this._reconnectTimeout = null;
     this._reconnectDelay = RECONNECT_DELAY;
     this.websocketConnected = true;
+    this.updaters.map.update({ key: 'numberOfConnectedPeers' })
   }
 
   reconnect() {
@@ -102,6 +103,7 @@ export class SyncEngine {
       if (this._reconnectDelay < MAX_RECONNECT_DELAY) {
         this._reconnectDelay = this._reconnectDelay * RECONNECT_DELAY_FACTOR
       }
+      console.log("reconnecting now")
       this.authenticate()
     }, this._reconnectDelay);
   }
diff --git a/umap/static/umap/js/modules/sync/websocket.js b/umap/static/umap/js/modules/sync/websocket.js
index 97a34afb..37cd95e7 100644
--- a/umap/static/umap/js/modules/sync/websocket.js
+++ b/umap/static/umap/js/modules/sync/websocket.js
@@ -4,6 +4,7 @@ const PING_INTERVAL = 30000;
 export class WebSocketTransport {
   constructor(webSocketURI, authToken, messagesReceiver) {
     this.receiver = messagesReceiver
+    this.closeRequested = false
 
     this.websocket = new WebSocket(webSocketURI)
 
@@ -14,7 +15,10 @@ export class WebSocketTransport {
     this.websocket.addEventListener('message', this.onMessage.bind(this))
     this.websocket.onclose = () => {
       console.log("websocket closed")
-      this.receiver.reconnect()
+      if (!this.closeRequested) {
+        console.log("Not requested, reconnecting...")
+        this.receiver.reconnect()
+      }
     }
 
     // To ensure the connection is still alive, we send ping and expect pong back.
@@ -50,4 +54,9 @@ export class WebSocketTransport {
     const encoded = JSON.stringify(message)
     this.websocket.send(encoded)
   }
+
+  close() {
+    this.closeRequested = true
+    this.websocket.close()
+  }
 }
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index 0d51fcdd..7ee0868f 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -13,7 +13,7 @@ L.Map.mergeOptions({
   // we cannot rely on this because of the y is overriden by Leaflet
   // See https://github.com/Leaflet/Leaflet/pull/9201
   // And let's remove this -y when this PR is merged and released.
-  demoTileInfos: { s: 'a', z: 9, x: 265, y: 181, '-y': 181, r: '' },
+  demoTileInfos: { 's': 'a', 'z': 9, 'x': 265, 'y': 181, '-y': 181, 'r': '' },
   licences: [],
   licence: '',
   enableMarkerDraw: true,
@@ -75,7 +75,12 @@ U.Map = L.Map.extend({
     })
     const websocketURI = this.options.websocketURI
 
-    this.sync_engine = new U.SyncEngine(this, websocketTokenURI, websocketURI, this.server)
+    this.sync_engine = new U.SyncEngine(
+      this,
+      websocketTokenURI,
+      websocketURI,
+      this.server
+    )
     this.sync = this.sync_engine.proxy(this)
 
     this.initLoader()
@@ -231,6 +236,25 @@ U.Map = L.Map.extend({
   },
 
   render: function (fields) {
+    if (this.options.syncEnabled === true) {
+      if (!this.sync.websocketConnected) {
+        const template = `
+        <h3><i class="icon icon-16"></i><span>${L._('Disconnected')}</span></h3>
+        <p>
+        ${L._('This map has enabled real-time synchronization with other users, but you are currently disconnected. It will automatically reconnect when ready.')}
+        </p>
+        `
+        this.dialog.open({
+          template: template,
+          className: 'dark',
+          cancel: false,
+          accept: false,
+        })
+      } else {
+        this.dialog.close()
+      }
+    }
+
     if (fields.includes('numberOfConnectedPeers')) {
       this.renderEditToolbar()
       this.propagate()