alex/yomichan
1
Fork 0
Code Releases Activity

Improve location of Anki error message (#1180)

Browse Source
This commit is contained in:
toasted-nutbread 2020-12-30 12:39:33 -05:00 committed by GitHub
parent 4d76356c2b
commit 973dfc581a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ext/bg/css/settings2.css
View File

@ -1500,12 +1500,6 @@ button.anki-card-field-value-menu-button {
box-sizing: border-box;
padding: 0 0.5em;
}
#anki-error-message-details-toggle {
display: inline-block;
margin-left: 0.5em;
cursor: pointer;
font-weight: bold;
}
#anki-error-message-details {
margin-top: 0.25em;
font-family: 'Courier New', Courier, monospace;

37
ext/bg/js/settings/anki-controller.js
View File

@ -44,7 +44,9 @@ class AnkiController {
this._ankiOptions = null;
this._getAnkiDataPromise = null;
this._ankiErrorContainer = null;
this._ankiErrorMessageContainer = null;
this._ankiErrorMessageNode = null;
this._ankiErrorMessageNodeDefaultContent = '';
this._ankiErrorMessageDetailsNode = null;
this._ankiErrorMessageDetailsContainer = null;
this._ankiErrorMessageDetailsToggle = null;
this._ankiErrorInvalidResponseInfo = null;
@ -55,8 +57,10 @@ class AnkiController {
async prepare() {
this._ankiErrorContainer = document.querySelector('#anki-error');
this._ankiErrorMessageContainer = document.querySelector('#anki-error-message');
this._ankiErrorMessageDetailsContainer = document.querySelector('#anki-error-message-details');
this._ankiErrorMessageNode = document.querySelector('#anki-error-message');
this._ankiErrorMessageNodeDefaultContent = this._ankiErrorMessageNode.textContent;
this._ankiErrorMessageDetailsNode = document.querySelector('#anki-error-message-details');
this._ankiErrorMessageDetailsContainer = document.querySelector('#anki-error-message-details-container');
this._ankiErrorMessageDetailsToggle = document.querySelector('#anki-error-message-details-toggle');
this._ankiErrorInvalidResponseInfo = document.querySelector('#anki-error-invalid-response-info');
this._ankiEnableCheckbox = document.querySelector('[data-setting="anki.enable"]');
@ -256,6 +260,7 @@ class AnkiController {
}
async _getAnkiData() {
this._setAnkiStatusChanging();
const [
[deckNames, error1],
[modelNames, error2]
@ -295,18 +300,29 @@ class AnkiController {
}
}
_setAnkiStatusChanging() {
this._ankiErrorMessageNode.textContent = this._ankiErrorMessageNodeDefaultContent;
this._ankiErrorMessageNode.classList.remove('danger-text');
}
_hideAnkiError() {
this._ankiErrorContainer.hidden = true;
if (this._ankiErrorContainer !== null) {
this._ankiErrorContainer.hidden = true;
}
this._ankiErrorMessageDetailsContainer.hidden = true;
this._ankiErrorMessageDetailsToggle.hidden = true;
this._ankiErrorInvalidResponseInfo.hidden = true;
this._ankiErrorMessageContainer.textContent = '';
this._ankiErrorMessageDetailsContainer.textContent = '';
this._ankiErrorMessageNode.textContent = (this._ankiConnect.enabled ? 'Connected' : 'Not enabled');
this._ankiErrorMessageNode.classList.remove('danger-text');
this._ankiErrorMessageDetailsNode.textContent = '';
}
_showAnkiError(error) {
let errorString = typeof error === 'object' && error !== null ? error.message : null;
if (!errorString) { errorString = `${error}`; }
this._ankiErrorMessageContainer.textContent = errorString;
if (!/[.!?]$/.test(errorString)) { errorString += '.'; }
this._ankiErrorMessageNode.textContent = errorString;
this._ankiErrorMessageNode.classList.add('danger-text');
const data = error.data;
let details = '';
@ -314,11 +330,14 @@ class AnkiController {
details += `${JSON.stringify(data, null, 4)}\n\n`;
}
details += `${error.stack}`.trimRight();
this._ankiErrorMessageDetailsContainer.textContent = details;
this._ankiErrorMessageDetailsNode.textContent = details;
this._ankiErrorContainer.hidden = false;
if (this._ankiErrorContainer !== null) {
this._ankiErrorContainer.hidden = false;
}
this._ankiErrorMessageDetailsContainer.hidden = true;
this._ankiErrorInvalidResponseInfo.hidden = (errorString.indexOf('Invalid response') < 0);
this._ankiErrorMessageDetailsToggle.hidden = false;
}
async _requestClipboardReadPermission() {

2
ext/bg/settings.html
View File

@ -913,7 +913,7 @@
<div class="alert alert-danger" id="anki-error" hidden>
<span id="anki-error-message"></span><a id="anki-error-message-details-toggle">&hellip;</a>
<div id="anki-error-message-details" hidden></div>
<div id="anki-error-message-details-container" hidden><div id="anki-error-message-details"></div></div>
</div>
<div class="alert alert-danger" id="anki-error-invalid-response-info" hidden>

38
ext/bg/settings2.html
View File

@ -1202,14 +1202,28 @@
</div>
</div>
<div class="settings-group">
<div class="settings-item"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Enable Anki integration</div>
<div class="settings-item">
<div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Enable Anki integration</div>
<div class="settings-item-description">
<span>Connection status:</span>
<span id="anki-error-message">&hellip;</span> <a id="anki-error-message-details-toggle" hidden>Details&hellip;</a>
</div>
</div>
<div class="settings-item-right">
<label class="toggle"><input type="checkbox" data-setting="anki.enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</div>
</div>
<div class="settings-item-right">
<label class="toggle"><input type="checkbox" data-setting="anki.enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
<div class="settings-item-children" id="anki-error-message-details-container" hidden>
<p class="danger-text" id="anki-error-invalid-response-info" hidden>
Attempting to connect to Anki can sometimes return an error message which includes "Invalid response",
which may indicate that the value of the <em>AnkiConnect server address</em> option is incorrect.
Resetting it to the default value may fix issues that are occurring.
</p>
<div class="danger-text" id="anki-error-message-details"></div>
</div>
</div></div>
</div>
<div class="settings-item">
<div class="settings-item-inner settings-item-inner-wrappable">
<div class="settings-item-left">
@ -2007,18 +2021,6 @@
<div class="anki-card-field-input-header" data-persistent="true">Value</div>
</div>
</div>
<div class="modal-body-addon" id="anki-error" hidden>
<p class="danger-text">
<strong>Anki connection error:</strong>
<span id="anki-error-message"></span><a id="anki-error-message-details-toggle">&hellip;</a>
</p>
<p class="danger-text" id="anki-error-invalid-response-info" hidden>
Attempting to connect to Anki can sometimes return an error message which includes "Invalid response",
which may indicate that the value of the <em>AnkiConnect server address</em> option is incorrect.
Resetting it to the default value may fix issues that are occurring.
</p>
<div class="danger-text" id="anki-error-message-details" hidden></div>
</div>
<div class="modal-footer">
<button class="low-emphasis" data-modal-action="show,anki-cards-info">Help</button>
<button data-modal-action="hide">Close</button>