sync status widget WIP

This commit is contained in:
zadam
2021-03-21 00:01:28 +01:00
parent 9dd95b62a9
commit 1a9919a866
5 changed files with 72 additions and 20 deletions

View File

@@ -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();
}
}