This commit is contained in:
Alex Yatskov 2016-10-16 17:56:00 -07:00
parent 9eaadd2a6e
commit 16cdb1f13e
4 changed files with 49 additions and 35 deletions

BIN
ext/bg/img/spinner.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

View File

@ -61,6 +61,10 @@ class AnkiWeb {
} }
authenticate() { authenticate() {
if (this.username.length === 0 || this.password.length === 0) {
return Promise.reject('missing login credentials');
}
if (this.logged) { if (this.logged) {
return Promise.resolve(true); return Promise.resolve(true);
} }

View File

@ -110,15 +110,15 @@ function getAnkiOptions() {
function updateVisibility(opts) { function updateVisibility(opts) {
switch (opts.ankiMethod) { switch (opts.ankiMethod) {
case 'ankiweb': case 'ankiweb':
$('.options-anki-general').show(); $('#options-anki-general').show();
$('.options-anki-login').show(); $('#options-anki-login').show();
break; break;
case 'ankiconnect': case 'ankiconnect':
$('.options-anki-general').show(); $('#options-anki-general').show();
$('.options-anki-login').hide(); $('#options-anki-login').hide();
break; break;
default: default:
$('.options-anki-general').hide(); $('#options-anki-general').hide();
break; break;
} }
@ -130,9 +130,14 @@ function updateVisibility(opts) {
} }
function populateAnkiDeckAndModel(opts) { function populateAnkiDeckAndModel(opts) {
$('.options-anki-format').hide();
$('.status-dlg').hide(); $('.status-dlg').hide();
const ankiSpinner = $('#ankiSpinner');
ankiSpinner.show();
const ankiFormat = $('#options-anki-format');
ankiFormat.hide();
const ankiDeck = $('.anki-deck'); const ankiDeck = $('.anki-deck');
ankiDeck.find('option').remove(); ankiDeck.find('option').remove();
@ -147,17 +152,18 @@ function populateAnkiDeckAndModel(opts) {
return anki().getModelNames(); return anki().getModelNames();
}).then(names => { }).then(names => {
names.forEach(name => ankiModel.append($('<option/>', {value: name, text: name}))); names.forEach(name => ankiModel.append($('<option/>', {value: name, text: name})));
populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts); return populateAnkiFields($('#anki-term-model').val(opts.ankiTermModel), opts);
}).then(() => { }).then(() => {
populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts); return populateAnkiFields($('#anki-kanji-model').val(opts.ankiKanjiModel), opts);
}).then(() => { }).then(() => {
$('.options-anki-format').show(); ankiFormat.show();
if (opts.ankiMethod !== 'none') { if (opts.ankiMethod !== 'none') {
$('#success-dlg').show(); $('#success-dlg').show();
} }
}).catch(error => { }).catch(error => {
$('#error-dlg').show(); $('#error-dlg').show().find('span').text(error);
$('#error-dlg span').text(error); }).then(() => {
ankiSpinner.hide();
}); });
} }
@ -260,9 +266,9 @@ $(document).ready(() => {
$('#anki-card-tags').val(opts.ankiCardTags.join(' ')); $('#anki-card-tags').val(opts.ankiCardTags.join(' '));
$('#sentence-extent').val(opts.sentenceExtent); $('#sentence-extent').val(opts.sentenceExtent);
$('.options-basic').change(onOptionsBasicChanged); $('#options-general, #options-scanning').change(onOptionsBasicChanged);
$('#options-anki').not('.anki-model').change(onOptionsAnkiChanged);
$('.anki-model').change(onAnkiModelChanged); $('.anki-model').change(onAnkiModelChanged);
$('.options-anki').not('.anki-model').change(onOptionsAnkiChanged);
populateAnkiDeckAndModel(opts); populateAnkiDeckAndModel(opts);
updateVisibility(opts); updateVisibility(opts);

View File

@ -6,7 +6,7 @@
<link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
<style> <style>
.options-anki-general, .options-anki-login, .options-advanced { #anki-spinner, #options-anki-general, #options-anki-login, #options-advanced {
display: none; display: none;
} }
@ -24,7 +24,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="options-basic"> <div id="options-general">
<h3>General Options</h3> <h3>General Options</h3>
<form class="form-horizontal"> <form class="form-horizontal">
@ -54,7 +54,7 @@
</form> </form>
</div> </div>
<div class="options-basic"> <div id="options-scanning">
<h3>Scanning Options</h3> <h3>Scanning Options</h3>
<form class="form-horizontal"> <form class="form-horizontal">
@ -86,9 +86,20 @@
</form> </form>
</div> </div>
<div class="options-anki"> <div id="options-anki">
<img src="img/spinner.gif" class="pull-right" id="anki-spinner" alt>
<h3>Anki Options</h3> <h3>Anki Options</h3>
<div class="form-group">
<label class="control-label" for="anki-method">Connection method</label>
<select class="form-control" id="anki-method">
<option value="none">None</option>
<option value="ankiweb">AnkiWeb</option>
<option value="ankiconnect">AnkiConnect</option>
</select>
</div>
<div class="alert alert-danger status-dlg" id="error-dlg"> <div class="alert alert-danger status-dlg" id="error-dlg">
<strong>Error</strong> <strong>Error</strong>
<span>Unable to connect</span> <span>Unable to connect</span>
@ -99,25 +110,18 @@
<span>Connection established</span> <span>Connection established</span>
</div> </div>
<form class="form-horizontal" id="options-anki-general">
<div id="options-anki-login">
<div class="form-group"> <div class="form-group">
<label class="control-label" for="anki-method">Connection method</label>
<select class="form-control" id="anki-method">
<option value="none">None</option>
<option value="ankiweb">AnkiWeb</option>
<option value="ankiconnect">AnkiConnect</option>
</select>
</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> <label for="anki-username" class="control-label col-sm-2">Username</label>
<div class="col-sm-10"><input type="text" id="anki-username" class="form-control"></div> <div class="col-sm-10"><input type="text" id="anki-username" class="form-control"></div>
</div> </div>
<div class="form-group options-anki-login"> <div class="form-group">
<label for="anki-password" class="control-label col-sm-2">Password</label> <label for="anki-password" class="control-label col-sm-2">Password</label>
<div class="col-sm-10"><input type="password" id="anki-password" class="form-control"></div> <div class="col-sm-10"><input type="password" id="anki-password" class="form-control"></div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="anki-card-tags" class="control-label col-sm-2">Card tags</label> <label for="anki-card-tags" class="control-label col-sm-2">Card tags</label>
@ -129,7 +133,7 @@
<div class="col-sm-10"><input type="number" min="1" id="sentence-extent" class="form-control"></div> <div class="col-sm-10"><input type="number" min="1" id="sentence-extent" class="form-control"></div>
</div> </div>
<div class="options-anki-format"> <div id="options-anki-format">
<ul class="nav nav-tabs col-sm-offset-2 col-sm-10"> <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 class="active"><a href="#term" data-toggle="tab">Terms</a></li>
<li><a href="#kanji" data-toggle="tab">Kanji</a></li> <li><a href="#kanji" data-toggle="tab">Kanji</a></li>