UI

2026-02-16 10:30:44 +00:00 · 2023-02-12 00:48:38 +08:00
parent b2f381913d
commit 7a0e300ff9
44 changed files with 15162 additions and 2 deletions
--- a/ui/html/main.js
+++ b/ui/html/main.js
@@ -0,0 +1,153 @@
+const { event, fs, path, tauri } = window.__TAURI__;
+
+class View {
+    constructor() {
+        Object.assign(this, {
+            content: '',
+            action_time: 0,
+            is_auto_scroll: true,
+            is_edit_mode: false,
+            is_file_changed: false,
+            is_form_changed: false,
+            is_content_changed: false
+        }, ...arguments);
+        addEventListener('DOMContentLoaded', this.init.bind(this));
+    }
+    async init() {
+        this.editor = this.renderEditor();
+        this.editor.on('scroll', this.editorScroll.bind(this));
+        this.editor.on('keypress', this.editorSave.bind(this));
+        this.form = this.renderForm();
+        this.form.addEventListener('change', this.formChange.bind(this));
+        event.listen('__update__', this.appAction.bind(this));
+        event.emit('__action__', '__init__');
+        while (true) {
+            try {
+                await this.update();
+                this.render();
+            } catch (e) {
+                console.error(e);
+            }
+            await new Promise(r => setTimeout(r, 100));
+        }
+    }
+    async update() {
+        if (this.is_file_changed) {
+            this.is_file_changed = false;
+            let now = Date.now(),
+                file = await path.resolveResource(this.file);
+            if (await fs.exists(file)) {
+                let content = await fs.readTextFile(file);
+                if (this.action_time < now) {
+                    this.content = content;
+                    this.is_content_changed = true;
+                }
+            } else {
+                if (now >= this.action_time) {
+                    if (this.is_edit_mode) {
+                        this.content = `# https://github.com/rustdesk/rustdesk-server#env-variables
+RUST_LOG=info
+`;
+                    }
+                    this.is_content_changed = true;
+                }
+                console.warn(`${this.file} file is missing`);
+            }
+        }
+    }
+    async editorSave(editor, e) {
+        if (e.ctrlKey && e.keyCode === 19 && this.is_edit_mode && !this.locked) {
+            this.locked = true;
+            try {
+                let now = Date.now(),
+                    content = this.editor.doc.getValue(),
+                    file = await path.resolveResource(this.file);
+                await fs.writeTextFile(file, content);
+                event.emit('__action__', 'restart');
+            } catch (e) {
+                console.error(e);
+            } finally {
+                this.locked = false;
+            }
+        }
+    }
+    editorScroll(e) {
+        let info = this.editor.getScrollInfo(),
+            distance = info.height - info.top - info.clientHeight,
+            is_end = distance < 1;
+        if (this.is_auto_scroll !== is_end) {
+            this.is_auto_scroll = is_end;
+            this.is_form_changed = true;
+        }
+    }
+    formChange(e) {
+        switch (e.target.tagName.toLowerCase()) {
+            case 'input':
+                this.is_auto_scroll = e.target.checked;
+                break;
+        }
+    }
+    appAction(e) {
+        let [action, data] = e.payload;
+        switch (action) {
+            case 'file':
+                if (data === '.env') {
+                    this.is_edit_mode = true;
+                    this.file = `bin/${data}`;
+                } else {
+                    this.is_edit_mode = false;
+                    this.file = `logs/${data}`;
+                }
+                this.action_time = Date.now();
+                this.is_file_changed = true;
+                this.is_form_changed = true;
+                break;
+        }
+    }
+    render() {
+        if (this.is_form_changed) {
+            this.is_form_changed = false;
+            this.renderForm();
+        }
+        if (this.is_content_changed) {
+            this.is_content_changed = false;
+            this.renderEditor();
+        }
+        if (this.is_auto_scroll && !this.is_edit_mode) {
+            this.renderScrollbar();
+        }
+    }
+    renderForm() {
+        let form = this.form || document.querySelector('form'),
+            label = form.querySelectorAll('label'),
+            input = form.querySelector('input');
+        input.checked = this.is_auto_scroll;
+        if (this.is_edit_mode) {
+            label[0].style.display = 'none';
+            label[1].style.display = 'inline';
+        } else {
+            label[0].style.display = 'inline';
+            label[1].style.display = 'none';
+        }
+        return form;
+    }
+    renderEditor() {
+        let editor = this.editor || CodeMirror.fromTextArea(document.querySelector('textarea'), {
+            mode: { name: 'toml' },
+            lineNumbers: true,
+            autofocus: true
+        });
+        editor.setOption('readOnly', !this.is_edit_mode);
+        editor.doc.setValue(this.content);
+        editor.doc.clearHistory();
+        this.content = '';
+        editor.focus();
+        return editor;
+    }
+    renderScrollbar() {
+        let info = this.editor.getScrollInfo();
+        this.editor.scrollTo(info.left, info.height);
+    }
+}
+
+new View();