Notes/src/public/app/widgets/sync_status.js

import { t } from "../services/i18n.js";
import BasicWidget from "./basic_widget.js";
import ws from "../services/ws.js";
import options from "../services/options.js";
import syncService from "../services/sync.js";

const TPL = `
<div class="sync-status-widget launcher-button">
    <style>
    .sync-status-widget {
    }
    
    .sync-status {
        box-sizing: border-box;
    }
    
    .sync-status .sync-status-icon {
        display: inline-block;
        position: relative;
        top: -5px;
        font-size: 110%;
    }
    
    .sync-status .sync-status-sub-icon {
        font-size: 40%; 
        position: absolute; 
        left: 0;
        top: 16px;
    }
    
    .sync-status .sync-status-icon span {
        border: none !important;
    }
    
    .sync-status-icon:not(.sync-status-in-progress):hover {
        background-color: var(--hover-item-background-color);
        cursor: pointer;
    }
    </style>

    <div class="sync-status">
        <span class="sync-status-icon sync-status-unknown bx bx-time" 
              data-bs-toggle="tooltip" 
              title="${t("sync_status.unknown")}">
        </span>
        <span class="sync-status-icon sync-status-connected-with-changes bx bx-wifi"
              data-bs-toggle="tooltip" 
              title="${t("sync_status.connected_with_changes")}">
            <span class="bx bxs-star sync-status-sub-icon"></span>
        </span>
        <span class="sync-status-icon sync-status-connected-no-changes bx bx-wifi" 
              data-bs-toggle="tooltip" 
              title="${t("sync_status.connected_no_changes")}">
        </span>
        <span class="sync-status-icon sync-status-disconnected-with-changes bx bx-wifi-off"
              data-bs-toggle="tooltip" 
              title="${t("sync_status.disconnected_with_changes")}">
            <span class="bx bxs-star sync-status-sub-icon"></span>
        </span>
        <span class="sync-status-icon sync-status-disconnected-no-changes bx bx-wifi-off" 
              data-bs-toggle="tooltip"
              title="${t("sync_status.disconnected_no_changes")}">
        </span>
        <span class="sync-status-icon sync-status-in-progress bx bx-analyse bx-spin" 
              data-bs-toggle="tooltip"
              title="${t("sync_status.in_progress")}">
        </span>
    </div>
</div>
`;

export default class SyncStatusWidget extends BasicWidget {
    constructor() {
        super();

        this.syncState = 'unknown';
        this.allChangesPushed = false;
        this.settings = {
            titlePlacement: "right"
        };
    }

    doRender() {
        this.$widget = $(TPL);
        this.$widget.hide();

        this.$widget.find('.sync-status-icon:not(.sync-status-in-progress)')
            .on('click', () => syncService.syncNow());

        ws.subscribeToMessages(message => this.processMessage(message));
    }

    showIcon(className) {
        if (!options.get('syncServerHost')) {
            this.toggleInt(false);
            return;
        }

        bootstrap.Tooltip.getOrCreateInstance(this.$widget.find(`.sync-status-${className}`), {
            html: true,
            placement: this.settings.titlePlacement,
            fallbackPlacements: [ this.settings.titlePlacement ]
        });

        this.$widget.show();
        this.$widget.find('.sync-status-icon').hide();
        this.$widget.find(`.sync-status-${className}`).show();
    }

    processMessage(message) {
        if (message.type === 'sync-pull-in-progress') {
            this.syncState = 'in-progress';
            this.lastSyncedPush = message.lastSyncedPush;
        }
        else if (message.type === 'sync-push-in-progress') {
            this.syncState = 'in-progress';
            this.lastSyncedPush = message.lastSyncedPush;
        }
        else if (message.type === 'sync-finished') {
            this.syncState = 'connected';
            this.lastSyncedPush = message.lastSyncedPush;
        }
        else if (message.type === 'sync-failed') {
            this.syncState = 'disconnected';
            this.lastSyncedPush = message.lastSyncedPush;
        }
        else if (message.type === 'frontend-update') {
            this.lastSyncedPush = message.data.lastSyncedPush;
        }

        this.allChangesPushed = this.lastSyncedPush === ws.getMaxKnownEntityChangeSyncId();

        if (['unknown', 'in-progress'].includes(this.syncState)) {
            this.showIcon(this.syncState);
        } else {
            this.showIcon(`${this.syncState}-${this.allChangesPushed ? 'no-changes' : 'with-changes'}`);
        }
    }
}