Add: show current status in the UI

This commit is contained in:
eight 2019-10-01 20:45:05 +08:00
parent 93698e728b
commit 0a5e51be36
4 changed files with 25 additions and 12 deletions

View File

@ -67,7 +67,8 @@ window.API_METHODS = Object.assign(window.API_METHODS || {}, {
syncStart: sync.start, syncStart: sync.start,
syncStop: sync.stop, syncStop: sync.stop,
syncNow: sync.syncNow syncNow: sync.syncNow,
getSyncStatus: sync.getStatus
}); });
// eslint-disable-next-line no-var // eslint-disable-next-line no-var

View File

@ -6,7 +6,8 @@
const sync = (() => { const sync = (() => {
const status = { const status = {
state: 'disconnected', state: 'disconnected',
syncing: false syncing: false,
currentDriveName: null
}; };
let currentDrive; let currentDrive;
const ctrl = dbToCloud.dbToCloud({ const ctrl = dbToCloud.dbToCloud({
@ -41,13 +42,8 @@ const sync = (() => {
} }
}); });
prefs.subscribe(['sync.enabled'], (key, value) => { prefs.subscribe(['sync.enabled'], onPrefChange);
if (value === 'none') { onPrefChange(null, prefs.get('sync.enabled'));
stop().catch(console.error);
} else {
start(value).catch(console.error);
}
});
chrome.alarms.onAlarm.addListener(info => { chrome.alarms.onAlarm.addListener(info => {
if (info.name === 'syncNow') { if (info.name === 'syncNow') {
@ -62,9 +58,18 @@ const sync = (() => {
stop, stop,
put: ctrl.put, put: ctrl.put,
delete: ctrl.delete, delete: ctrl.delete,
syncNow syncNow,
getStatus: () => status
}; };
function onPrefChange(key, value) {
if (value === 'none') {
stop().catch(console.error);
} else {
start(value).catch(console.error);
}
}
function withFinally(p, cleanup) { function withFinally(p, cleanup) {
return p.then( return p.then(
result => { result => {
@ -115,7 +120,7 @@ const sync = (() => {
ctrl.use(currentDrive); ctrl.use(currentDrive);
prefs.set('sync.enabled', name); prefs.set('sync.enabled', name);
status.state = 'connecting'; status.state = 'connecting';
status.syncing = true; status.currentDriveName = currentDrive.name;
emitChange(); emitChange();
return withFinally( return withFinally(
ctrl.start() ctrl.start()
@ -130,7 +135,6 @@ const sync = (() => {
() => { () => {
chrome.alarms.create('syncNow', {periodInMinutes: 30}); chrome.alarms.create('syncNow', {periodInMinutes: 30});
status.state = 'connected'; status.state = 'connected';
status.syncing = false;
emitChange(); emitChange();
} }
); );
@ -161,6 +165,7 @@ const sync = (() => {
currentDrive = null; currentDrive = null;
prefs.set('sync.enabled', 'none'); prefs.set('sync.enabled', 'none');
status.state = 'disconnected'; status.state = 'disconnected';
status.currentDriveName = null;
emitChange(); emitChange();
} }
); );

View File

@ -151,6 +151,7 @@
<button type="button" class="connect">Connect</button> <button type="button" class="connect">Connect</button>
<button type="button" class="disconnect">Disconnect</button> <button type="button" class="disconnect">Disconnect</button>
<button type="button" class="sync-now">Sync now</button> <button type="button" class="sync-now">Sync now</button>
<span class="sync-status"></span>
</div> </div>
</div> </div>
</div> </div>

View File

@ -80,6 +80,7 @@ document.onclick = e => {
const connectButton = document.querySelector('.sync-options .connect'); const connectButton = document.querySelector('.sync-options .connect');
const disconnectButton = document.querySelector('.sync-options .disconnect'); const disconnectButton = document.querySelector('.sync-options .disconnect');
const syncButton = document.querySelector('.sync-options .sync-now'); const syncButton = document.querySelector('.sync-options .sync-now');
const statusText = document.querySelector('.sync-options .sync-status');
let status = {}; let status = {};
@ -103,10 +104,15 @@ document.onclick = e => {
cloud.addEventListener('change', updateButtons); cloud.addEventListener('change', updateButtons);
function updateButtons() { function updateButtons() {
if (status.currentDriveName) {
cloud.value = status.currentDriveName;
}
cloud.disabled = status.state !== 'disconnected'; cloud.disabled = status.state !== 'disconnected';
connectButton.disabled = status.state !== 'disconnected' || cloud.value === 'none'; connectButton.disabled = status.state !== 'disconnected' || cloud.value === 'none';
disconnectButton.disabled = status.state !== 'connected' || status.syncing; disconnectButton.disabled = status.state !== 'connected' || status.syncing;
syncButton.disabled = status.state !== 'connected' || status.syncing; syncButton.disabled = status.state !== 'connected' || status.syncing;
statusText.textContent = status.syncing ? 'syncing...' :
status.state.endsWith('ing') ? status.state + '...' : status.state;
} }
connectButton.addEventListener('click', e => { connectButton.addEventListener('click', e => {