sync status widget WIP

src/public/app/services/ws.js

@@ -213,7 +213,9 @@ setTimeout(() => {
     setInterval(sendPing, 1000);
 }, 0);
 
-subscribeToMessages(message => {
+subscribeToMessages(async message => {
+    const appContext = (await import("./app_context.js")).default;
+
     if (message.type === 'sync-pull-in-progress') {
         toastService.showPersistent({
             id: 'sync',
@@ -221,10 +223,17 @@ subscribeToMessages(message => {
             message: "Sync update in progress",
             icon: "refresh"
         });
+
+        appContext.triggerEvent('syncInProgress');
     }
-    else if (message.type === 'sync-pull-finished') {
+    else if (message.type === 'sync-finished') {
         // this gives user a chance to see the toast in case of fast sync finish
         setTimeout(() => toastService.closePersistent('sync'), 1000);
+
+        appContext.triggerEvent('syncFinished');
+    }
+    else if (message.type === 'sync-failed') {
+        appContext.triggerEvent('syncFailed');
     }
 });
 

src/public/app/widgets/scrolling_container.js

@@ -10,8 +10,6 @@ export default class ScrollingContainer extends Container {
     async tabNoteSwitchedEvent({tabContext, notePath}) {
         // if notePath does not match then the tabContext has been switched to another note in the mean time
         if (tabContext.notePath === notePath) {
-            console.log("SCROLLING");
-
             this.$widget.scrollTop(0);
         }
     }

src/public/app/widgets/sync_status.js

@@ -1,6 +1,4 @@
 import BasicWidget from "./basic_widget.js";
-import utils from "../services/utils.js";
-import syncService from "../services/sync.js";
 
 const TPL = `
 <div class="sync-status-wrapper">
@@ -17,8 +15,6 @@ const TPL = `
     }
     
     .sync-status button {
-        margin-right: 5px;
-        margin-left: 5px;
         height: 34px;
         border: none;
         font-size: 180%;
@@ -26,7 +22,8 @@ const TPL = `
         padding-right: 10px;
     }
     
-    .sync-status button span {
+    .sync-status button > span {
+        display: inline-block; 
         position: relative;
         top: -5px;
     }
@@ -42,9 +39,23 @@ const TPL = `
 
     <div class="sync-status">
         <button type="button" class="btn btn-sm" title="Sync status">
-            <span class="bx bx-badge-check"></span>
-<!--            <span class="bx bx-cloud-upload"></span>-->
-<!--            <span class="bx bx-sync bx-spin bx-flip-horizontal"></span>-->
+            <span class="sync-status-icon sync-status-online-with-changes" title="Connected to the sync server. There are some outstanding changes yet to be synced.">
+                <span class="bx bx-wifi"></span>
+                <span class="bx bxs-star" style="font-size: 40%; position: absolute; left: -3px; top: 20px;"></span>
+            </span>
+            <span class="sync-status-icon sync-status-online-no-changes" title="Connected to the sync server. All changes have been already synced.">
+                <span class="bx bx-wifi"></span>
+            </span>
+            <span class="sync-status-icon sync-status-offline-with-changes" title="Establishing the connection to the sync server was unsuccessful. There are some outstanding changes yet to be synced.">
+                <span class="bx bx-wifi-off"></span>
+                <span class="bx bxs-star" style="font-size: 40%; position: absolute; left: -3px; top: 20px;"></span>
+            </span>
+            <span class="sync-status-icon sync-status-offline-no-changes" title="Establishing the connection to the sync server was unsuccessful. All known changes have been synced.">
+                <span class="bx bx-wifi-off"></span>
+            </span>
+            <span class="sync-status-icon sync-status-in-progress" title="Sync with the server is in progress.">
+                <span class="bx bx-analyse bx-spin"></span>
+            </span>
         </button>
     </div>
 </div>
@@ -53,6 +64,26 @@ const TPL = `
 export default class SyncStatusWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
+        this.$widget.hide();
+
         this.overflowing();
     }
+
+    syncInProgressEvent() {
+        this.showIcon('in-progress');
+    }
+
+    syncFinishedEvent() {
+        this.showIcon('online-no-changes');
+    }
+
+    syncFailedEvent() {
+        this.showIcon('offline-no-changes');
+    }
+
+    showIcon(className) {
+        this.$widget.show();
+        this.$widget.find('.sync-status-icon').hide();
+        this.$widget.find('.sync-status-' + className).show();
+    }
 }

src/services/sync.js

@@ -46,6 +46,8 @@ async function sync() {
             }
             while (continueSync);
 
+            ws.syncFinished();
+
             return {
                 success: true
             };
@@ -59,6 +61,8 @@ async function sync() {
                  e.message.includes('ERR_CONNECTION_REFUSED') ||
                  e.message.includes('Bad Gateway'))) {
 
+            ws.syncFailed();
+
             log.info("No connection to sync server.");
 
             return {
@@ -69,6 +73,8 @@ async function sync() {
         else {
             log.info("sync failed: " + e.message + "\nstack: " + e.stack);
 
+            ws.syncFailed();
+
             return {
                 success: false,
                 message: e.message
@@ -143,7 +149,7 @@ async function pullChanges(syncContext) {
         sql.transactional(() => {
             for (const {entityChange, entity} of entityChanges) {
                 if (!sourceIdService.isLocalSourceId(entityChange.sourceId)) {
-                    if (!atLeastOnePullApplied && entityChange.entity !== 'recent_notes') { // send only for first
+                    if (!atLeastOnePullApplied) { // send only for first
                         ws.syncPullInProgress();
 
                         atLeastOnePullApplied = true;
@@ -163,10 +169,6 @@ async function pullChanges(syncContext) {
         log.info(`Pulled ${entityChanges.length} changes in ${sizeInKb} KB, starting at entityChangeId=${lastSyncedPull} in ${pulledDate - startDate}ms and applied them in ${Date.now() - pulledDate}ms, ${outstandingPullCount} outstanding pulls`);
     }
 
-    if (atLeastOnePullApplied) {
-        ws.syncPullFinished();
-    }
-
     log.info("Finished pull");
 }
 
@@ -212,6 +214,8 @@ async function pushChanges(syncContext) {
             entities: entityChangesRecords
         });
 
+        ws.syncPushInProgress();
+
         log.info(`Pushing ${entityChangesRecords.length} sync changes in ` + (Date.now() - startDate.getTime()) + "ms");
 
         lastSyncedPush = entityChangesRecords[entityChangesRecords.length - 1].entityChange.id;

src/services/ws.js

@@ -124,14 +124,24 @@ function syncPullInProgress() {
     sendMessageToAllClients({ type: 'sync-pull-in-progress' });
 }
 
-function syncPullFinished() {
-    sendMessageToAllClients({ type: 'sync-pull-finished' });
+function syncPushInProgress() {
+    sendMessageToAllClients({ type: 'sync-push-in-progress' });
+}
+
+function syncFinished() {
+    sendMessageToAllClients({ type: 'sync-finished' });
+}
+
+function syncFailed() {
+    sendMessageToAllClients({ type: 'sync-failed' });
 }
 
 module.exports = {
     init,
     sendMessageToAllClients,
+    syncPushInProgress,
     syncPullInProgress,
-    syncPullFinished,
+    syncFinished,
+    syncFailed,
     sendTransactionSyncsToAllClients
 };