feat(backend-log): use CodeMirror as editor

This commit is contained in:
Elian Doran 2024-11-25 20:31:25 +02:00
parent 36ac3f5ee6
commit c763c090be
No known key found for this signature in database

View File

@ -1,10 +1,10 @@
import NoteContextAwareWidget from "../../note_context_aware_widget.js";
import server from "../../../services/server.js"; import server from "../../../services/server.js";
import { t } from "../../../services/i18n.js"; import { t } from "../../../services/i18n.js";
import AbstractCodeTypeWidget from "../abstract_code_type_widget.js";
const TPL = `<div style="height: 100%; display: flex; flex-direction: column;"> const TPL = `<div style="height: 100%; display: flex; flex-direction: column;">
<style> <style>
.backend-log-textarea { .backend-log-editor {
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
border: none; border: none;
@ -12,35 +12,42 @@ const TPL = `<div style="height: 100%; display: flex; flex-direction: column;">
} }
</style> </style>
<textarea class="backend-log-textarea" readonly="readonly"></textarea> <pre class="backend-log-editor"></pre>
<div style="display: flex; justify-content: space-around; margin-top: 10px;"> <div style="display: flex; justify-content: space-around; margin-top: 10px;">
<button class="refresh-backend-log-button btn btn-primary">${t("backend_log.refresh")}</button> <button class="refresh-backend-log-button btn btn-primary">${t("backend_log.refresh")}</button>
</div> </div>
</div>`; </div>`;
export default class BackendLogWidget extends NoteContextAwareWidget { export default class BackendLogWidget extends AbstractCodeTypeWidget {
doRender() { doRender() {
super.doRender();
this.$widget = $(TPL); this.$widget = $(TPL);
this.$backendLogTextArea = this.$widget.find(".backend-log-textarea"); this.$editor = this.$widget.find(".backend-log-editor");
this.$refreshBackendLog = this.$widget.find(".refresh-backend-log-button"); this.$refreshBackendLog = this.$widget.find(".refresh-backend-log-button");
this.$refreshBackendLog.on('click', () => this.load()); this.$refreshBackendLog.on('click', () => this.load());
} }
scrollToBottom() {
this.$backendLogTextArea.scrollTop(this.$backendLogTextArea[0].scrollHeight);
}
async refresh() { async refresh() {
await this.load(); await this.load();
} }
getExtraOpts() {
return {
lineWrapping: false,
readOnly: true
};
}
async load() { async load() {
const backendLog = await server.get('backend-log'); const content = await server.get('backend-log');
await this.initialized;
this.$backendLogTextArea.text(backendLog); this._update({
mime: "text/plain"
this.scrollToBottom(); }, content);
this.show();
this.scrollToEnd();
} }
} }