WIP

3 files changed, 40 insertions, 10 deletions

diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index fec2494a..a77419ff 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -43,6 +43,25 @@ function updateVisibility() {
     }
 }
 
+function updateAnkiPage() {
+    const yomichan = chrome.extension.getBackgroundPage().yomichan;
+
+    $('#ankiDeck').find('option').remove();
+    $('#ankiModel').find('option').remove();
+
+    yomichan.getDeckNames((names) => {
+        names.forEach((name) => {
+            $('#ankiDeck').append($('<option/>', {value: name, text: name}));
+        });
+    });
+
+    yomichan.getModelNames((names) => {
+        names.forEach((name) => {
+            $('#ankiModel').append($('<option/>', {value: name, text: name}));
+        });
+    });
+}
+
 function onOptionsChanged() {
     updateVisibility();
     const opts = formToOptions();
@@ -55,6 +74,7 @@ $(document).ready(() => {
     loadOptions((opts) => {
         optionsToForm(opts);
         updateVisibility();
+        updateAnkiPage();
         $('input').on('input paste change', onOptionsChanged);
     });
 });
diff --git a/ext/bg/js/yomichan.js b/ext/bg/js/yomichan.js
index 14d311c0..88280ab0 100644
--- a/ext/bg/js/yomichan.js
+++ b/ext/bg/js/yomichan.js
@@ -51,19 +51,29 @@ class Yomichan {
 
     onMessage(request, sender, callback) {
         const {action, params} = request, handlers = {
-            canAddNotes: ({definitions, modes}) => this.ankiInvoke('canAddNotes', {definitions: definitions, modes: modes}, 'notes', callback),
-            addNote:     ({definition, mode}) => this.ankiInvoke('addNote', {definition: definition, mode: mode}, null, callback),
-            findKanji:   (text) => callback(this.translator.findKanji(text)),
-            findTerm:    (text) => callback(this.translator.findTerm(text)),
-            getOptions:  () => callback(this.options),
-            getState:    () => callback(this.state),
-            renderText:  ({data, template}) => callback(Handlebars.templates[template](data))
+            addNote:       ({definition, mode}) => this.ankiInvoke('addNote', {definition: definition, mode: mode}, null, callback),
+            canAddNotes:   ({definitions, modes}) => this.ankiInvoke('canAddNotes', {definitions: definitions, modes: modes}, 'notes', callback),
+            findKanji:     (text) => callback(this.translator.findKanji(text)),
+            findTerm:      (text) => callback(this.translator.findTerm(text)),
+            getDeckNames:  () => this.getDeckNames(callback),
+            getModelNames: () => this.getModelNames(callback),
+            getOptions:    () => callback(this.options),
+            getState:      () => callback(this.state),
+            renderText:    ({data, template}) => callback(Handlebars.templates[template](data))
         };
 
         handlers[action].call(this, params);
         return true;
     }
 
+    getDeckNames(callback) {
+        this.ankiInvoke('deckNames', {}, null, callback);
+    }
+
+    getModelNames(callback) {
+        this.ankiInvoke('modelNames', {}, null, callback);
+    }
+
     onBrowserAction(tab) {
         switch (this.state) {
             case 'disabled':
diff --git a/ext/bg/options.html b/ext/bg/options.html
index 95236e6d..9b8be64b 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -36,7 +36,7 @@
                     <div class="form-group">
                         <div class="col-sm-offset-2 col-sm-10">
                             <div class="checkbox">
-                                <label><input type="checkbox" id="loadEnasmict"> Load <a href="http://www.edrdg.org/enasmict/enasmict_doc.html">ENAsmICT</a> (requires restart)</label>
+                                <label><input type="checkbox" id="loadEnamdict"> Load <a href="http://www.edrdg.org/enamdict/enamdict_doc.html">ENAMDICT</a> (requires restart)</label>
                             </div>
                         </div>
                     </div>
@@ -74,14 +74,14 @@
                     <div class="form-group">
                         <label class="col-sm-2 control-label" for="ankiDeck">Deck</label>
                         <div class="col-sm-10">
-                            <select class="form-control" name="ankiDeck"></select>
+                            <select class="form-control" id="ankiDeck"></select>
                         </div>
                     </div>
 
                     <div class="form-group">
                         <label class="col-sm-2 control-label" for="ankiModel">Model</label>
                         <div class="col-sm-10">
-                            <select class="form-control" name="ankiDeck"></select>
+                            <select class="form-control" id="ankiModel"></select>
                         </div>
                     </div>
                 </div>