diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 02ded4d0..c9a1c6bc 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -713,10 +713,30 @@ "scheduleButtonActive": { "message": "Scheduled" }, + "scheduleTitle": { + "message": "Add/Edit this schedule", + "description": "Title for the messageBox" + }, + "scheduleButtonRetry": { + "message": "Retry", + "description": "First button for the messageBox" + }, + "scheduleButtonGiveUp": { + "message": "I give up ", + "description": "Second button for the messageBox" + }, "scheduleOneEntry": { - "message": "Either clear both start and end values to disable the schedule or set both to enable it" + "message": "Either clear both start and end values to disable the schedule or set both values to enable it", + "description": "Description for the messageBox when only one time value is present" }, "scheduleEqualEntries": { - "message": "Start and end times cannot be equal" + "message": "Start and end time values cannot be equal", + "description": "Description for the messageBox when both start and end time values are equal" + }, + "scheduleFrom": { + "message": "From:" + }, + "scheduleTo": { + "message": "To:" } } diff --git a/background.js b/background.js index 99797fe9..6d15a805 100644 --- a/background.js +++ b/background.js @@ -279,7 +279,9 @@ function onRuntimeMessage(request, sender, sendResponse) { .catch(() => sendResponse(null)); return KEEP_CHANNEL_OPEN; case 'schedule': - schedule.entry(request); + schedule.entry(request) + .then(() => sendResponse(true)) + .catch(() => sendResponse(false)); return KEEP_CHANNEL_OPEN; } } diff --git a/manage.css b/manage.css index 7ede6f87..0dfa0bbd 100644 --- a/manage.css +++ b/manage.css @@ -159,6 +159,9 @@ a:hover { .schedule>input { margin-right: 5px; } +.schedule span { + margin: 0 5px; +} .schedule>div { position: absolute; right: 10px; diff --git a/manage.html b/manage.html index 68609646..5749af9f 100644 --- a/manage.html +++ b/manage.html @@ -60,8 +60,9 @@
+ - - +
diff --git a/schedule/ui.js b/schedule/ui.js index 27c4eebb..38d6d187 100644 --- a/schedule/ui.js +++ b/schedule/ui.js @@ -1,4 +1,4 @@ -/* global t, schedule, $, $$ */ +/* global t, schedule, $, $$, messageBox */ 'use strict'; schedule.ui = {}; @@ -8,10 +8,11 @@ schedule.ui.inputs = (parent) => $$('input[type=time]', parent); /* updating schedule section of a single style */ schedule.ui.update = (request) => { + console.log('updating schedule ui', request); const parent = $(`[id="style-${request.id}"] .schedule`); if (parent) { - parent.dataset.active = true; - $('input[type=button]', parent).value = t('scheduleButtonActive'); + parent.dataset.active = request.enabled; + $('input[type=button]', parent).value = t(request.enabled ? 'scheduleButtonActive' : 'scheduleButton'); const [start, end] = schedule.ui.inputs(parent); start.value = request.start; end.value = request.end; @@ -27,30 +28,51 @@ document.addEventListener('click', e => { if (!parent.contains(e.target)) { const [start, end] = schedule.ui.inputs(parent); const id = target.closest('.entry').id.replace('style-', ''); - switch ([start.value, end.value].filter(v => v).length) { - case 0: + let len = [start.value, end.value].filter(v => v).length; + len = len === 2 && start.value === end.value ? 3 : len; + switch (len) { + case 0: // reset schedule for this id chrome.runtime.sendMessage({ method: 'schedule', enabled: false, id + }, () => { + schedule.ui.update({ // reset UI + enabled: false, + id, + start: '', + end: '' + }); }); break; - case 1: // when only start or end value is set; display an alert - window.alert(t('scheduleOneEntry')); - [start, end].filter(o => !o.value).forEach(o => o.focus()); - return; + case 3: // when both start and end have equal values + case 1: // when only start or end value is set + return messageBox({ + title: t('scheduleTitle'), + contents: t(len === 1 ? 'scheduleOneEntry' : 'scheduleEqualEntries'), + buttons: [t('scheduleButtonGiveUp'), t('scheduleButtonRetry')], + onshow: e => e.addEventListener('click', e => e.stopPropagation()) + }).then((r) => { + if (r.button === 1 && len === 1) { // retry + [start, end].filter(o => !o.value).forEach(o => o.focus()); + } + else if (r.button === 1 && len === 3) { + start.focus(); + } + else { + // clear and hide UI + start.value = end.value = ''; + document.body.click(); + } + }); default: - if (start.value === end.value) { - window.alert(t('scheduleEqualEntries')); - return start.focus(); - } chrome.runtime.sendMessage({ method: 'schedule', enabled: true, id, start: start.value, end: end.value - }); + }, () => {}); } document.removeEventListener('click', observe);