3 files changed, 46 insertions, 15 deletions

diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index 31756486..06be044a 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -17,6 +17,10 @@
  */
 
 
+function yomichan() {
+    return chrome.extension.getBackgroundPage().yomichan;
+}
+
 function optionsToForm(opts) {
     $('#activateOnStartup').prop('checked', opts.activateOnStartup);
     $('#enableAnkiConnect').prop('checked', opts.enableAnkiConnect);
@@ -35,21 +39,21 @@ function formToOptions() {
     });
 }
 
-function updateAnkiFormDataVis(opts) {
+function updateAnkiFormVis(opts) {
     if (opts.enableAnkiConnect) {
-        updateAnkiFormData();
+        populateAnkiDeckAndModel();
         $('.options-anki').fadeIn();
     } else {
         $('.options-anki').fadeOut();
     }
 }
 
-function updateAnkiFormData() {
-    const yomichan = chrome.extension.getBackgroundPage().yomichan;
+function populateAnkiDeckAndModel() {
+    const yomi = yomichan();
 
     const ankiDeck = $('.ankiDeck');
     ankiDeck.find('option').remove();
-    yomichan.api_getDeckNames({callback: (names) => {
+    yomi.api_getDeckNames({callback: (names) => {
         if (names !== null) {
             names.forEach((name) => ankiDeck.append($('<option/>', {value: name, text: name})));
         }
@@ -57,25 +61,52 @@ function updateAnkiFormData() {
 
     const ankiModel = $('.ankiModel');
     ankiModel.find('option').remove();
-    yomichan.api_getModelNames({callback: (names) => {
+    yomi.api_getModelNames({callback: (names) => {
         if (names !== null) {
             names.forEach((name) => ankiModel.append($('<option/>', {value: name, text: name})));
+            $('.ankiModel').trigger('change');
         }
     }});
+
 }
 
 function onOptionsChanged() {
     const opts = formToOptions();
     saveOptions(opts, () => {
-        chrome.extension.getBackgroundPage().yomichan.setOptions(opts);
-        updateAnkiFormDataVis(opts);
+        yomichan().setOptions(opts);
+        updateAnkiFormVis(opts);
     });
 }
 
+function onModelChanged() {
+    const modelName = $(this).val();
+    if (modelName === null) {
+        return;
+    }
+
+    yomichan().api_getModelFieldNames({modelName, callback: (names) => {
+        const table = $(this).closest('.tab-pane').find('.ankiFields');
+        table.find('tbody').remove();
+
+        const body = $('<tbody>');
+        names.forEach((name) => {
+            const row = $('<tr>');
+            row.append($('<td>').text(name));
+            row.append($('<input>', {class: 'ankiFieldValue form-control'}).data('field', name));
+            body.append(row);
+        });
+
+        table.append(body);
+    }});
+}
+
 $(document).ready(() => {
     loadOptions((opts) => {
         optionsToForm(opts);
-        updateAnkiFormDataVis(opts);
+
         $('input').on('input paste change', onOptionsChanged);
+        $('.ankiModel').change(onModelChanged);
+
+        updateAnkiFormVis(opts);
     });
 });
diff --git a/ext/bg/js/yomichan.js b/ext/bg/js/yomichan.js
index 1714e778..d62f97aa 100644
--- a/ext/bg/js/yomichan.js
+++ b/ext/bg/js/yomichan.js
@@ -156,8 +156,8 @@ class Yomichan {
         this.ankiInvoke('modelNames', {}, null, callback);
     }
 
-    api_getModelFieldNames({callback}) {
-        this.ankiInvoke('modelFieldNames', {}, null, callback);
+    api_getModelFieldNames({modelName, callback}) {
+        this.ankiInvoke('modelFieldNames', {modelName}, null, callback);
     }
 
     api_getOptions({callback}) {
diff --git a/ext/bg/options.html b/ext/bg/options.html
index ae7e4257..6f4bd8a8 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -93,14 +93,14 @@
                                 </div>
                             </div>
 
-                            <table class="table table-bordered">
+                            <table class="table table-bordered ankiFields">
                                 <thead>
                                     <tr>
                                         <th>Field</th>
                                         <th>Value</th>
                                     </tr>
                                 </thead>
-                                <tbody class="ankiFields">
+                                <tbody>
                                 </tbody>
                             </table>
                         </div>
@@ -119,14 +119,14 @@
                                 </div>
                             </div>
 
-                            <table class="table table-bordered">
+                            <table class="table table-bordered ankiFields">
                                 <thead>
                                     <tr>
                                         <th>Field</th>
                                         <th>Value</th>
                                     </tr>
                                 </thead>
-                                <tbody class="ankiFields">
+                                <tbody>
                                 </tbody>
                             </table>
                         </div>