WIP

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

ext/bg/js/yomichan.js

@@ -51,10 +51,12 @@ 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),
+            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))
@@ -64,6 +66,14 @@ class Yomichan {
         return true;
     }
 
+    getDeckNames(callback) {
+        this.ankiInvoke('deckNames', {}, null, callback);
+    }
+
+    getModelNames(callback) {
+        this.ankiInvoke('modelNames', {}, null, callback);
+    }
+
     onBrowserAction(tab) {
         switch (this.state) {
             case 'disabled':

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>