WIP

4 files changed, 48 insertions, 8 deletions

diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index 14143d81..ce829698 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -166,6 +166,9 @@ function populateDictionaries(opts) {
     const container = $('.dicts');
     container.empty();
 
+    const dictError = $('#dict-error');
+    dictError.hide();
+
     yomichan().translator.database.getDictionaries().then(rows => {
         rows.forEach(row => {
             const dictOpts = opts.dictionaries[row.title] || {enableTerms: true, enableKanji: false};
@@ -182,13 +185,47 @@ function populateDictionaries(opts) {
         });
 
         $('.dict-delete').click(e => {
-            const dict = $(e.target).closest('.dict');
+            const button = $(e.target);
+            const dict = button.closest('.dict');
             const title = dict.data('title');
-            yomichan().translator.database.deleteDictionary(title);
-            dict.slideUp();
+
+            button.prop('disabled', true);
+            yomichan().translator.database.deleteDictionary(title).then(() => {
+                dict.slideUp();
+            }).catch(error => {
+                dictError.show().find('span').text(error);
+            }).then(() => {
+                button.prop('disabled', false);
+            });
         });
 
         container.find('.dict input').change(onOptionsChanged);
+    }).catch(error => {
+        dictError.show().find('span').text(error);
+    });
+}
+
+function onImportDictionary() {
+    const dictInputs = $('#dict-import').find('input');
+    dictInputs.prop('disabled', true);
+
+    const dictError = $('#dict-error');
+    dictError.hide();
+
+    const progressbar = $('#dict-import-progress');
+    const progressValue = progressbar.find('div');
+    progressbar.show();
+
+    const callback = (total, current) => {
+        $('.progress-bar').css('width', `${current / total * 100.0}%`);
+    };
+
+    const dictUrl = $('#dict-import-url').val();
+    yomichan().translator.database.importDictionary(dictUrl, callback).catch(error => {
+        dictError.show().find('span').text(error);
+    }).then(() => {
+        dictInputs.prop('disabled', false);
+        progressbar.hide();
     });
 }
 
@@ -303,7 +340,7 @@ $(document).ready(() => {
             if (url.includes('/')) {
                 control.val(url);
             } else {
-                control.val(chrome.extension.getURL(`bg/data/${url}`));
+                control.val(chrome.extension.getURL(`bg/data/${url}/index.json`));
             }
             control.trigger('input');
         });
@@ -314,6 +351,8 @@ $(document).ready(() => {
             $('#dict-import-start').prop('disabled', disable);
         });
 
+        $('#dict-import-start').click(onImportDictionary);
+
         populateDictionaries(opts);
         populateAnkiDeckAndModel(opts);
         updateVisibility(opts);
diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index d42d972d..ce44de8d 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -13,7 +13,7 @@ templates['dictionary.html'] = template({"1":function(container,depth0,helpers,p
     + alias4(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"title","hash":{},"data":data}) : helper)))
     + " <small>v."
     + alias4(((helper = (helper = helpers.version || (depth0 != null ? depth0.version : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"version","hash":{},"data":data}) : helper)))
-    + "</small></h4>\n        </div>\n        <div class=\"col-xs-4 text-right\">\n            <button type=\"button\" class=\"dict-delete btn btn-danger\">Delete</button>\n        </div>\n    </div>\n\n    <div class=\"checkbox "
+    + "</small></h4>\n        </div>\n        <div class=\"col-xs-4 text-right disabled\">\n            <button type=\"button\" class=\"dict-delete btn btn-danger\">Delete</button>\n        </div>\n    </div>\n\n    <div class=\"checkbox "
     + ((stack1 = helpers.unless.call(alias1,(depth0 != null ? depth0.hasTerms : depth0),{"name":"unless","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\">\n        <label><input type=\"checkbox\" class=\"dict-enable-terms\" "
     + ((stack1 = helpers.unless.call(alias1,(depth0 != null ? depth0.hasTerms : depth0),{"name":"unless","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
diff --git a/ext/bg/js/util.js b/ext/bg/js/util.js
index e99cdeab..8a21b264 100644
--- a/ext/bg/js/util.js
+++ b/ext/bg/js/util.js
@@ -112,6 +112,7 @@ function loadJson(url) {
     return new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
         xhr.addEventListener('load', () => resolve(JSON.parse(xhr.responseText)));
+        xhr.addEventListener('error', () => reject('failed to execute network request'));
         xhr.open('GET', chrome.extension.getURL(url));
         xhr.send();
     });
diff --git a/ext/bg/options.html b/ext/bg/options.html
index 800fe8e9..8c19ac8f 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -69,11 +69,11 @@
 
                 <div class="alert alert-danger" id="dict-error">
                     <strong>Error:</strong>
-                    <span>Something went wrong!</span>
+                    <span></span>
                 </div>
 
                 <div class="progress" id="dict-import-progress">
-                    <div id="dict-import-progress-value" class="progress-bar progress-bar-striped" style="width: 45%"></div>
+                    <div class="progress-bar progress-bar-striped" style="width: 0%"></div>
                 </div>
 
                 <div class="input-group" id="dict-import">
@@ -84,7 +84,7 @@
                             <li><a href="#" data-url="enamdict">JMnedict</a></li>
                             <li><a href="#" data-url="kanjidic">KANJIDIC2</a></li>
                             <li role="separator" class="divider"></li>
-                            <li><a href="#" data-url="http://localhost:9876">Local dictionary</a></li>
+                            <li><a href="#" data-url="http://localhost:9876/index.json">Local dictionary</a></li>
                         </ul>
                     </div>
                     <input type="text" id="dict-import-url" class="form-control" placeholder="Dictionary import URL">