refactor options page

ext/bg/js/settings.js

@@ -21,8 +21,8 @@
  * General
  */
 
-function formRead() {
+async function formRead() {
-    return optionsLoad().then(optionsOld => {
+    const optionsOld = await optionsLoad();
     const optionsNew = $.extend(true, {}, optionsOld);
 
     optionsNew.general.showGuide = $('#show-usage-guide').prop('checked');
@@ -67,7 +67,6 @@ function formRead() {
     });
 
     return {optionsNew, optionsOld};
-    });
 }
 
 function updateVisibility(options) {
@@ -95,13 +94,18 @@ function updateVisibility(options) {
     }
 }
 
-function onOptionsChanged(e) {
+async function onOptionsChanged(e) { (async () => {
     if (!e.originalEvent && !e.isTrigger) {
         return;
     }
 
-    formRead().then(({optionsNew, optionsOld}) => {
+    try {
-        return optionsSave(optionsNew).then(() => {
+        ankiErrorShow();
+        ankiSpinnerShow(true);
+
+        const {optionsNew, optionsOld} = await formRead();
+        await optionsSave(optionsNew);
+
         updateVisibility(optionsNew);
 
         const ankiUpdated =
@@ -109,18 +113,20 @@ function onOptionsChanged(e) {
             optionsNew.anki.server !== optionsOld.anki.server;
 
         if (ankiUpdated) {
-                ankiErrorShow(null);
+            await ankiDeckAndModelPopulate(optionsNew);
-                ankiSpinnerShow(true);
-                return ankiDeckAndModelPopulate(optionsNew);
         }
-        });
+    } catch (e) {
-    }).catch(ankiErrorShow).then(() => ankiSpinnerShow(false));
+        ankiErrorShow(e);
-}
+    } finally {
+        ankiSpinnerShow(false);
+    }
+})();}
 
-$(document).ready(() => {
+function onReady() {(async () => {
     handlebarsRegister();
 
-    optionsLoad().then(options => {
+    const options = await optionsLoad();
+
     $('#show-usage-guide').prop('checked', options.general.showGuide);
     $('#audio-playback-source').val(options.general.audioSource);
     $('#audio-playback-volume').val(options.general.audioVolume);
@@ -150,11 +156,22 @@ $(document).ready(() => {
     $('input, select').not('.anki-model').change(onOptionsChanged);
     $('.anki-model').change(onAnkiModelChanged);
 
-        dictionaryGroupsPopulate(options);
+    try {
-        ankiDeckAndModelPopulate(options);
+        await dictionaryGroupsPopulate(options);
+    } catch (e) {
+        dictionaryErrorShow(e);
+    }
+
+    try {
+        await ankiDeckAndModelPopulate(options);
+    } catch (e) {
+        ankiErrorShow(e);
+    }
+
     updateVisibility(options);
-    });
+})();}
-});
+
+$(document).ready(onReady);
 
 
 /*
@@ -196,24 +213,21 @@ function dictionaryGroupsSort() {
     dictGroups.append(dictGroupChildren);
 }
 
-function dictionaryGroupsPopulate(options) {
+async function dictionaryGroupsPopulate(options) {
-    dictionaryErrorShow(null);
-    dictionarySpinnerShow(true);
-
     const dictGroups = $('#dict-groups').empty();
     const dictWarning = $('#dict-warning').hide();
 
-    return instDb().getDictionaries().then(rows => {
+    const dictRows = await instDb().getDictionaries();
-        if (rows.length === 0) {
+    if (dictRows.length === 0) {
         dictWarning.show();
     }
 
-        for (const row of dictRowsSort(rows, options)) {
+    for (const dictRow of dictRowsSort(dictRows, options)) {
-            const dictOptions = options.dictionaries[row.title] || {enabled: false, priority: 0};
+        const dictOptions = options.dictionaries[dictRow.title] || {enabled: false, priority: 0};
         const dictHtml = handlebarsRender('dictionary.html', {
-                title: row.title,
+            title: dictRow.title,
-                version: row.version,
+            version: dictRow.version,
-                revision: row.revision,
+            revision: dictRow.revision,
             priority: dictOptions.priority,
             enabled: dictOptions.enabled
         });
@@ -227,53 +241,63 @@ function dictionaryGroupsPopulate(options) {
         dictionaryGroupsSort();
         onOptionsChanged(e);
     });
-    }).catch(dictionaryErrorShow).then(() => dictionarySpinnerShow(false));
 }
 
-function onDictionaryPurge(e) {
+async function onDictionaryPurge(e) { (async () => {
     e.preventDefault();
 
-    dictionaryErrorShow(null);
-    dictionarySpinnerShow(true);
-
     const dictControls = $('#dict-importer, #dict-groups').hide();
     const dictProgress = $('#dict-purge-progress').show();
 
-    instDb().purge().catch(dictionaryErrorShow).then(() => {
+    try {
-        dictionarySpinnerShow(false);
+        dictionaryErrorShow();
-        dictControls.show();
-        dictProgress.hide();
-        return optionsLoad();
-    }).then(options => {
-        options.dictionaries = {};
-        optionsSave(options).then(() => dictionaryGroupsPopulate(options));
-    });
-}
-
-function onDictionaryImport(e) {
-    dictionaryErrorShow(null);
         dictionarySpinnerShow(true);
 
+        await instDb().purge();
+        const options = await optionsLoad();
+        options.dictionaries = {};
+        await optionsSave(options);
+
+        await dictionaryGroupsPopulate(options);
+    } catch (e) {
+        dictionaryErrorShow(e);
+    } finally {
+        dictionarySpinnerShow(false);
+
+        dictControls.show();
+        dictProgress.hide();
+    }
+})();}
+
+function onDictionaryImport(e) { (async () => {
     const dictFile = $('#dict-file');
-    const dictImporter = $('#dict-importer').hide();
+    const dictControls = $('#dict-importer').hide();
     const dictProgress = $('#dict-import-progress').show();
+
+    try {
+        dictionaryErrorShow();
+        dictionarySpinnerShow(true);
+
         const setProgress = percent => dictProgress.find('.progress-bar').css('width', `${percent}%`);
         const updateProgress = (total, current) => setProgress(current / total * 100.0);
-
         setProgress(0.0);
 
-    optionsLoad().then(options => {
+        const options = await optionsLoad();
-        return instDb().importDictionary(e.target.files[0], updateProgress).then(summary => {
+        const summary = await instDb().importDictionary(e.target.files[0], updateProgress);
         options.dictionaries[summary.title] = {enabled: true, priority: 0};
-            return optionsSave(options);
+        await optionsSave(options);
-        }).then(() => dictionaryGroupsPopulate(options));
+
-    }).catch(dictionaryErrorShow).then(() => {
+        await dictionaryGroupsPopulate(options);
-        dictFile.val('');
+    } catch (e) {
+        dictionaryErrorShow(e);
+    } finally {
         dictionarySpinnerShow(false);
+
+        dictFile.val('');
+        dictControls.show();
         dictProgress.hide();
-        dictImporter.show();
+    }
-    });
+})();}
-}
 
 /*
  * Anki
@@ -307,40 +331,38 @@ function ankiFieldsToDict(selection) {
     return result;
 }
 
-function ankiDeckAndModelPopulate(options) {
+async function ankiDeckAndModelPopulate(options) {
-    ankiErrorShow(null);
-    ankiSpinnerShow(true);
-
     const ankiFormat = $('#anki-format').hide();
-    return Promise.all([instAnki().getDeckNames(), instAnki().getModelNames()]).then(([deckNames, modelNames]) => {
+
+    const deckNames = await instAnki().getDeckNames();
     const ankiDeck = $('.anki-deck');
     ankiDeck.find('option').remove();
     deckNames.sort().forEach(name => ankiDeck.append($('<option/>', {value: name, text: name})));
 
-        $('#anki-terms-deck').val(options.anki.terms.deck);
+    const modelNames = await instAnki().getModelNames();
-        $('#anki-kanji-deck').val(options.anki.kanji.deck);
-
     const ankiModel = $('.anki-model');
     ankiModel.find('option').remove();
     modelNames.sort().forEach(name => ankiModel.append($('<option/>', {value: name, text: name})));
 
-        return Promise.all([
+    $('#anki-terms-deck').val(options.anki.terms.deck);
-            ankiFieldsPopulate($('#anki-terms-model').val(options.anki.terms.model), options),
+    await ankiFieldsPopulate($('#anki-terms-model').val(options.anki.terms.model), options);
-            ankiFieldsPopulate($('#anki-kanji-model').val(options.anki.kanji.model), options)
+
-        ]);
+    $('#anki-kanji-deck').val(options.anki.kanji.deck);
-    }).then(() => ankiFormat.show()).catch(ankiErrorShow).then(() => ankiSpinnerShow(false));
+    await ankiFieldsPopulate($('#anki-kanji-model').val(options.anki.kanji.model), options);
+
+    ankiFormat.show();
 }
 
-function ankiFieldsPopulate(element, options) {
+async function ankiFieldsPopulate(element, options) {
+    const modelName = element.val();
+    if (!modelName) {
+        return;
+    }
+
     const tab = element.closest('.tab-pane');
     const tabId = tab.attr('id');
     const container = tab.find('tbody').empty();
 
-    const modelName = element.val();
-    if (!modelName) {
-        return Promise.resolve();
-    }
-
     const markers = {
         'terms': [
             'audio',
@@ -369,12 +391,11 @@ function ankiFieldsPopulate(element, options) {
         ]
     }[tabId] || {};
 
-    return instAnki().getModelFieldNames(modelName).then(names => {
+    for (const name of await instAnki().getModelFieldNames(modelName)) {
-        names.forEach(name => {
         const value = options.anki[tabId].fields[name] || '';
         const html = Handlebars.templates['model.html']({name, markers, value});
         container.append($(html));
-        });
+    }
 
     tab.find('.anki-field-value').change(onOptionsChanged);
     tab.find('.marker-link').click(e => {
@@ -382,24 +403,29 @@ function ankiFieldsPopulate(element, options) {
         const link = e.target;
         $(link).closest('.input-group').find('.anki-field-value').val(`{${link.text}}`).trigger('change');
     });
-    });
 }
 
-function onAnkiModelChanged(e) {
+function onAnkiModelChanged(e) { (async () => {
     if (!e.originalEvent) {
         return;
     }
 
-    ankiErrorShow(null);
+    try {
+        ankiErrorShow();
         ankiSpinnerShow(true);
 
         const element = $(this);
-    formRead().then(({optionsNew, optionsOld}) => {
         const tab = element.closest('.tab-pane');
         const tabId = tab.attr('id');
+
+        const {optionsNew, optionsOld} = await formRead();
         optionsNew.anki[tabId].fields = {};
-        ankiFieldsPopulate(element, optionsNew).then(() => {
+        await optionsSave(optionsNew);
-            optionsSave(optionsNew);
+
-        }).catch(ankiErrorShow).then(() => ankiSpinnerShow(false));
+        await ankiFieldsPopulate(element, optionsNew);
-    });
+    } catch (e) {
-}
+        ankiErrorShow(e);
+    } finally {
+        ankiSpinnerShow(false);
+    }
+})();}