1 files changed, 98 insertions, 91 deletions

diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index 6508a9eb..170b1e8c 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -21,6 +21,10 @@ function yomichan() {
     return chrome.extension.getBackgroundPage().yomichan;
 }
 
+function anki() {
+    return yomichan().anki;
+}
+
 function fieldsToDict(selection) {
     const result = {};
     selection.each((index, element) => {
@@ -44,30 +48,22 @@ function modelIdToMarkers(id) {
     }[id];
 }
 
-function getBasicOptions() {
+function getFormValues() {
     return loadOptions().then(optsOld => {
         const optsNew = $.extend({}, optsOld);
 
         optsNew.activateOnStartup = $('#activate-on-startup').prop('checked');
-        optsNew.showAdvancedOptions = $('#show-advanced-options').prop('checked');
         optsNew.enableAudioPlayback = $('#enable-audio-playback').prop('checked');
-        optsNew.enableAnkiConnect = $('#enable-anki-connect').prop('checked');
+        optsNew.showAdvancedOptions = $('#show-advanced-options').prop('checked');
+
         optsNew.holdShiftToScan = $('#hold-shift-to-scan').prop('checked');
         optsNew.selectMatchedText = $('#select-matched-text').prop('checked');
         optsNew.scanDelay = parseInt($('#scan-delay').val(), 10);
         optsNew.scanLength = parseInt($('#scan-length').val(), 10);
 
-        return {
-            optsNew: sanitizeOptions(optsNew),
-            optsOld: sanitizeOptions(optsOld)
-        };
-    });
-}
-
-function getAnkiOptions() {
-    return loadOptions().then(optsOld => {
-        const optsNew = $.extend({}, optsOld);
-
+        optsNew.ankiMethod = $('#anki-method').val();
+        optsNew.ankiUsername = $('#anki-username').val();
+        optsNew.ankiPassword = $('#anki-password').val();
         optsNew.ankiCardTags = $('#anki-card-tags').val().split(/[,; ]+/);
         optsNew.sentenceExtent = parseInt($('#sentence-extent').val(), 10);
         optsNew.ankiTermDeck = $('#anki-term-deck').val();
@@ -84,62 +80,76 @@ function getAnkiOptions() {
     });
 }
 
+function updateVisibility(opts) {
+    switch (opts.ankiMethod) {
+        case 'ankiweb':
+            $('#anki-general').show();
+            $('.anki-login').show();
+            break;
+        case 'ankiconnect':
+            $('#anki-general').show();
+            $('.anki-login').hide();
+            break;
+        default:
+            $('#anki-general').hide();
+            break;
+    }
+
+    if (opts.showAdvancedOptions) {
+        $('.options-advanced').show();
+    } else {
+        $('.options-advanced').hide();
+    }
+}
+
 function populateAnkiDeckAndModel(opts) {
-    const yomi = yomichan();
+    const ankiSpinner = $('#anki-spinner');
+    ankiSpinner.show();
+
+    const ankiFormat = $('#anki-format');
+    ankiFormat.hide();
 
     const ankiDeck = $('.anki-deck');
     ankiDeck.find('option').remove();
-    yomi.api_getDeckNames({callback: names => {
-        if (names !== null) {
-            names.forEach(name => ankiDeck.append($('<option/>', {value: name, text: name})));
-        }
-
-        $('#anki-term-deck').val(opts.ankiTermDeck);
-        $('#anki-kanji-deck').val(opts.ankiKanjiDeck);
-    }});
 
     const ankiModel = $('.anki-model');
     ankiModel.find('option').remove();
-    yomi.api_getModelNames({callback: names => {
-        if (names !== null) {
-            names.forEach(name => ankiModel.append($('<option/>', {value: name, text: name})));
-        }
-
-        populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts);
-        populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts);
-    }});
-}
 
-function updateAnkiStatus() {
-    $('.error-dlg').hide();
-
-    yomichan().api_getVersion({callback: version => {
-        if (version === null) {
-            $('.error-dlg-connection').show();
-            $('.options-anki-controls').hide();
-        } else if (version !== yomichan().getApiVersion()) {
-            $('.error-dlg-version').show();
-            $('.options-anki-controls').hide();
-        } else {
-            $('.options-anki-controls').show();
-        }
-    }});
+    return anki().getDeckNames().then(names => {
+        names.forEach(name => ankiDeck.append($('<option/>', {value: name, text: name})));
+        $('#anki-term-deck').val(opts.ankiTermDeck);
+        $('#anki-kanji-deck').val(opts.ankiKanjiDeck);
+    }).then(() => {
+        return anki().getModelNames();
+    }).then(names => {
+        names.forEach(name => ankiModel.append($('<option/>', {value: name, text: name})));
+        return populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts);
+    }).then(() => {
+        return populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts);
+    }).then(() => {
+        $('#anki-error').hide();
+        ankiFormat.show();
+    }).catch(error => {
+        $('#anki-error').show().find('span').text(error);
+    }).then(() => {
+        ankiSpinner.hide();
+    });
 }
 
 function populateAnkiFields(element, opts) {
+    const table = element.closest('.tab-pane').find('.anki-fields');
+    table.find('tbody').remove();
+
     const modelName = element.val();
     if (modelName === null) {
-        return;
+        return Promise.resolve();
     }
 
     const modelId = element.attr('id');
     const optKey = modelIdToFieldOptKey(modelId);
     const markers = modelIdToMarkers(modelId);
 
-    yomichan().api_getModelFieldNames({modelName, callback: names => {
-        const table = element.closest('.tab-pane').find('.anki-fields');
-        table.find('tbody').remove();
-
+    return anki().getModelFieldNames(modelName).then(names => {
         const tbody = $('<tbody>');
         names.forEach(name => {
             const button = $('<button>', {type: 'button', class: 'btn btn-default dropdown-toggle'});
@@ -160,7 +170,11 @@ function populateAnkiFields(element, opts) {
             groupBtn.append(markerItems);
 
             const group = $('<div>', {class: 'input-group'});
-            group.append($('<input>', {type: 'text', class: 'anki-field-value form-control', value: opts[optKey][name] || ''}).data('field', name).change(onOptionsAnkiChanged));
+            group.append($('<input>', {
+                type: 'text',
+                class: 'anki-field-value form-control',
+                value: opts[optKey][name] || ''
+            }).data('field', name).change(onOptionsChanged));
             group.append(groupBtn);
 
             const row = $('<tr>');
@@ -171,80 +185,73 @@ function populateAnkiFields(element, opts) {
         });
 
         table.append(tbody);
-    }});
+    });
 }
 
-function onOptionsBasicChanged(e) {
+function onOptionsChanged(e) {
     if (!e.originalEvent && !e.isTrigger) {
         return;
     }
 
-    getBasicOptions().then(({optsNew, optsOld}) => {
+    getFormValues().then(({optsNew, optsOld}) => {
         saveOptions(optsNew).then(() => {
             yomichan().setOptions(optsNew);
-            if (!optsOld.enableAnkiConnect && optsNew.enableAnkiConnect) {
-                updateAnkiStatus();
-                populateAnkiDeckAndModel(optsNew);
-                $('.options-anki').show();
-            } else if (optsOld.enableAnkiConnect && !optsNew.enableAnkiConnect) {
-                $('.options-anki').hide();
-            }
+            updateVisibility(optsNew);
+
+            const invalidated =
+                optsNew.ankiMethod !== optsOld.ankiMethod ||
+                optsNew.ankiUsername !== optsOld.ankiUsername ||
+                optsNew.ankiPassword !== optsOld.ankiPassword;
 
-            if (optsNew.showAdvancedOptions) {
-                $('.options-advanced').show();
-            } else {
-                $('.options-advanced').hide();
+            if (invalidated) {
+                populateAnkiDeckAndModel(optsNew);
             }
         });
     });
 }
 
-function onOptionsAnkiChanged(e) {
-    if (!e.originalEvent && !e.isTrigger) {
+function onAnkiModelChanged(e) {
+    if (!e.originalEvent) {
         return;
     }
 
-    getAnkiOptions().then(({optsNew, optsOld}) => {
-        saveOptions(optsNew).then(() => yomichan().setOptions(optsNew));
-    });
-}
+    getFormValues().then(({optsNew, optsOld}) => {
+        optsNew[modelIdToFieldOptKey($(this).id)] = {};
 
-function onAnkiModelChanged(e) {
-    if (e.originalEvent) {
-        getAnkiOptions().then(({optsNew, optsOld}) => {
-            optsNew[modelIdToFieldOptKey($(this).id)] = {};
-            populateAnkiFields($(this), optsNew);
+        const ankiSpinner = $('#anki-spinner');
+        ankiSpinner.show();
+
+        populateAnkiFields($(this), optsNew).then(() => {
             saveOptions(optsNew).then(() => yomichan().setOptions(optsNew));
+        }).catch(error => {
+            $('#anki-error').show().find('span').text(error);
+        }).then(() => {
+            $('#anki-error').hide();
+            ankiSpinner.hide();
         });
-    }
+    });
 }
 
 $(document).ready(() => {
     loadOptions().then(opts => {
         $('#activate-on-startup').prop('checked', opts.activateOnStartup);
         $('#enable-audio-playback').prop('checked', opts.enableAudioPlayback);
-        $('#enable-anki-connect').prop('checked', opts.enableAnkiConnect);
         $('#show-advanced-options').prop('checked', opts.showAdvancedOptions);
         $('#hold-shift-to-scan').prop('checked', opts.holdShiftToScan);
         $('#select-matched-text').prop('checked', opts.selectMatchedText);
         $('#scan-delay').val(opts.scanDelay);
         $('#scan-length').val(opts.scanLength);
+
+        $('#anki-method').val(opts.ankiMethod);
+        $('#anki-username').val(opts.ankiUsername);
+        $('#anki-password').val(opts.ankiPassword);
         $('#anki-card-tags').val(opts.ankiCardTags.join(' '));
         $('#sentence-extent').val(opts.sentenceExtent);
 
-        $('.options-basic input').change(onOptionsBasicChanged);
-        $('.options-anki input').change(onOptionsAnkiChanged);
-        $('.anki-deck').change(onOptionsAnkiChanged);
+        $('input, select').not('.anki-model').change(onOptionsChanged);
         $('.anki-model').change(onAnkiModelChanged);
 
-        if (opts.showAdvancedOptions) {
-            $('.options-advanced').show();
-        }
-
-        if (opts.enableAnkiConnect) {
-            updateAnkiStatus();
-            populateAnkiDeckAndModel(opts);
-            $('.options-anki').show();
-        }
+        populateAnkiDeckAndModel(opts);
+        updateVisibility(opts);
     });
 });