Add: show current status in the UI
This commit is contained in:
parent
93698e728b
commit
0a5e51be36
|
@ -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
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 => {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user