scheduler implementation part/4; using messageBox instead of window.alert; allow users to give up setting a new schedule or modifying existing one; reset the schedule UI on delete event

_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:"
   }
 }

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;
   }
 }

manage.css

@@ -159,6 +159,9 @@ a:hover {
 .schedule>input {
   margin-right: 5px;
 }
+.schedule span {
+  margin: 0 5px;
+}
 .schedule>div {
   position: absolute;
   right: 10px;

manage.html

@@ -60,8 +60,9 @@
       <div class="schedule" data-edit="false">
         <input type="button" i18n-value="scheduleButton" data-cmd="schedule">
         <div>
+          <span i18n-text="scheduleFrom"></span>
           <input type="time">
-          -
+          <span i18n-text="scheduleTo"></span>
           <input type="time">
         </div>
       </div>

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);