WIP

3 files changed, 86 insertions, 60 deletions

diff --git a/ext/bg/js/ankiconnect.js b/ext/bg/js/ankiconnect.js
index de199b2c..9de17159 100644
--- a/ext/bg/js/ankiconnect.js
+++ b/ext/bg/js/ankiconnect.js
@@ -51,7 +51,7 @@ class AnkiConnect {
         return this.ankiInvoke('version', {}, null).then(version => {
             this.remoteVersion = version;
             if (this.remoteVersion !== this.localVersion) {
-                return Promise.reject('browser extension and anki plugin version mismatch');
+                return Promise.reject('extension and plugin version mismatch');
             }
         });
     }
@@ -68,8 +68,11 @@ class AnkiConnect {
                     delete this.asyncPools[pool];
                 }
 
-                const resp = xhr.responseText;
-                resolve(resp ? JSON.parse(resp) : null);
+                if (xhr.responseText) {
+                    resolve(JSON.parse(resp));
+                } else {
+                    reject('unable to connect to plugin');
+                }
             });
 
             xhr.open('POST', 'http://127.0.0.1:8765');
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index 163660e4..fb8ef77b 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -130,6 +130,9 @@ function updateVisibility(opts) {
 }
 
 function populateAnkiDeckAndModel(opts) {
+    $('.options-anki-format').hide();
+    $('.status-dlg').hide();
+
     const ankiDeck = $('.anki-deck');
     ankiDeck.find('option').remove();
 
@@ -147,6 +150,14 @@ function populateAnkiDeckAndModel(opts) {
         populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts);
     }).then(() => {
         populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts);
+    }).then(() => {
+        $('.options-anki-format').show();
+        if (opts.ankiMethod !== 'none') {
+            $('#success-dlg').show();
+        }
+    }).catch(error => {
+        $('#error-dlg').show();
+        $('#error-dlg span').text(error);
     });
 }
 
@@ -213,7 +224,12 @@ function onOptionsAnkiChanged(e) {
     if (e.originalEvent || e.isTrigger) {
         getAnkiOptions().then(({optsNew, optsOld}) => {
             updateVisibility(optsNew);
-            saveOptions(optsNew).then(() => yomichan().setOptions(optsNew));
+            saveOptions(optsNew).then(() => {
+                yomichan().setOptions(optsNew);
+                if (optsNew.ankiMethod !== optsOld.ankiMethod) {
+                    populateAnkiDeckAndModel(optsNew);
+                }
+            });
         });
     }
 }
@@ -245,8 +261,8 @@ $(document).ready(() => {
         $('#sentence-extent').val(opts.sentenceExtent);
 
         $('.options-basic').change(onOptionsBasicChanged);
-        $('.options-anki').not('.anki-model').change(onOptionsAnkiChanged);
         $('.anki-model').change(onAnkiModelChanged);
+        $('.options-anki').not('.anki-model').change(onOptionsAnkiChanged);
 
         populateAnkiDeckAndModel(opts);
         updateVisibility(opts);
diff --git a/ext/bg/options.html b/ext/bg/options.html
index e48a0735..a42af97e 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -17,7 +17,7 @@
                 padding: 10px;
             }
 
-            .error-dlg {
+            .status-dlg {
                 display: none;
             }
         </style>
@@ -89,6 +89,16 @@
             <div class="options-anki">
                 <h3>Anki Options</h3>
 
+                <div class="alert alert-danger status-dlg" id="error-dlg">
+                    <strong>Error</strong>
+                    <span>Unable to connect</span>
+                </div>
+
+                <div class="alert alert-success status-dlg" id="success-dlg">
+                    <strong>Success</strong>
+                    <span>Connection established</span>
+                </div>
+
                 <div class="form-group">
                     <label class="control-label" for="anki-method">Connection method</label>
                     <select class="form-control" id="anki-method">
@@ -98,11 +108,6 @@
                     </select>
                 </div>
 
-                <div class="alert alert-danger error-dlg error-dlg-connection">
-                    <strong>Unable to Connect</strong><br>
-                    Is the <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a> extension for <a href="http://ankisrs.net/">Anki</a> installed and running? This software is required for Anki-related features.
-                </div>
-
                 <form class="form-horizontal options-anki-general">
                     <div class="form-group options-anki-login">
                         <label for="anki-username" class="control-label col-sm-2">Username</label>
@@ -124,64 +129,66 @@
                         <div class="col-sm-10"><input type="number" min="1" id="sentence-extent" class="form-control"></div>
                     </div>
 
-                    <ul class="nav nav-tabs col-sm-offset-2 col-sm-10">
-                        <li class="active"><a href="#term" data-toggle="tab">Terms</a></li>
-                        <li><a href="#kanji" data-toggle="tab">Kanji</a></li>
-                    </ul>
-
-                    <div class="tab-content col-sm-offset-2 col-sm-10">
-                        <div id="term" class="tab-pane fade in active">
-                            <div class="form-group">
-                                <label class="col-sm-2 control-label" for="anki-term-deck">Deck</label>
-                                <div class="col-sm-10">
-                                    <select class="form-control anki-deck" id="anki-term-deck"></select>
+                    <div class="options-anki-format">
+                        <ul class="nav nav-tabs col-sm-offset-2 col-sm-10">
+                            <li class="active"><a href="#term" data-toggle="tab">Terms</a></li>
+                            <li><a href="#kanji" data-toggle="tab">Kanji</a></li>
+                        </ul>
+
+                        <div class="tab-content col-sm-offset-2 col-sm-10">
+                            <div id="term" class="tab-pane fade in active">
+                                <div class="form-group">
+                                    <label class="col-sm-2 control-label" for="anki-term-deck">Deck</label>
+                                    <div class="col-sm-10">
+                                        <select class="form-control anki-deck" id="anki-term-deck"></select>
+                                    </div>
                                 </div>
-                            </div>
 
-                            <div class="form-group">
-                                <label class="col-sm-2 control-label" for="anki-term-model">Model</label>
-                                <div class="col-sm-10">
-                                    <select class="form-control anki-model" id="anki-term-model"></select>
+                                <div class="form-group">
+                                    <label class="col-sm-2 control-label" for="anki-term-model">Model</label>
+                                    <div class="col-sm-10">
+                                        <select class="form-control anki-model" id="anki-term-model"></select>
+                                    </div>
                                 </div>
-                            </div>
 
-                            <table class="table table-bordered anki-fields">
-                                <thead>
-                                    <tr>
-                                        <th>Field</th>
-                                        <th>Value</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                </tbody>
-                            </table>
-                        </div>
+                                <table class="table table-bordered anki-fields">
+                                    <thead>
+                                        <tr>
+                                            <th>Field</th>
+                                            <th>Value</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                    </tbody>
+                                </table>
+                            </div>
 
-                        <div id="kanji" class="tab-pane fade">
-                            <div class="form-group">
-                                <label class="col-sm-2 control-label" for="anki-kanji-deck">Deck</label>
-                                <div class="col-sm-10">
-                                    <select class="form-control anki-deck" id="anki-kanji-deck"></select>
+                            <div id="kanji" class="tab-pane fade">
+                                <div class="form-group">
+                                    <label class="col-sm-2 control-label" for="anki-kanji-deck">Deck</label>
+                                    <div class="col-sm-10">
+                                        <select class="form-control anki-deck" id="anki-kanji-deck"></select>
+                                    </div>
                                 </div>
-                            </div>
 
-                            <div class="form-group">
-                                <label class="col-sm-2 control-label" for="anki-kanji-model">Model</label>
-                                <div class="col-sm-10">
-                                    <select class="form-control anki-model" id="anki-kanji-model"></select>
+                                <div class="form-group">
+                                    <label class="col-sm-2 control-label" for="anki-kanji-model">Model</label>
+                                    <div class="col-sm-10">
+                                        <select class="form-control anki-model" id="anki-kanji-model"></select>
+                                    </div>
                                 </div>
-                            </div>
 
-                            <table class="table table-bordered anki-fields">
-                                <thead>
-                                    <tr>
-                                        <th>Field</th>
-                                        <th>Value</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                </tbody>
-                            </table>
+                                <table class="table table-bordered anki-fields">
+                                    <thead>
+                                        <tr>
+                                            <th>Field</th>
+                                            <th>Value</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                    </tbody>
+                                </table>
+                            </div>
                         </div>
                     </div>
                 </form>