From 68dc2222d4d21f1b8f3f719107eed6aa5c1c2090 Mon Sep 17 00:00:00 2001
From: Misa Liu <misaliu@misaliu.top>
Date: Mon, 4 Mar 2024 23:59:12 +0800
Subject: [PATCH] feat: Made delete work in host list
---
src/renderer/index.ts | 102 ++++++++++++++++++++++--------------------
1 file changed, 53 insertions(+), 49 deletions(-)
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index b4b9386..5069c11 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -8,41 +8,6 @@ import {
} from './components';
import StyleRaw from './style.css?raw';
-const buildHostList = (hosts: string[], type: string) => {
- const result: HTMLElement[] = [];
-
- hosts.forEach((host, index) => {
- const dom = {
- container: document.createElement('setting-item'),
- input: document.createElement('input'),
- inputContainer: document.createElement('div'),
- deleteBtn: document.createElement('setting-button'),
- };
-
- dom.container.classList.add('setting-host-list-item');
- dom.container.dataset.direction = 'row';
- dom.container.dataset.configArrayKey = type;
- dom.container.dataset.configArrayIndex = `${index}`;
-
- dom.input.classList.add('q-input__inner');
- dom.input.type = 'url';
- dom.input.value = host;
-
- dom.inputContainer.classList.add('q-input');
- dom.inputContainer.appendChild(dom.input);
-
- dom.deleteBtn.innerHTML = '删除';
- dom.deleteBtn.dataset.type = 'secondary';
-
- dom.container.appendChild(dom.inputContainer);
- dom.container.appendChild(dom.deleteBtn);
-
- result.push(dom.container);
- });
-
- return result;
-}
-
// 打开设置界面时触发
async function onSettingWindowCreated(view: Element) {
@@ -79,16 +44,16 @@ async function onSettingWindowCreated(view: Element) {
'config-ob11-httpPort', config.ob11.enableHttp
),
SettingItem('启用 HTTP 事件上报', null,
- SettingSwitch('ob11.enableHttpPost', config.ob11.enableHttpPost, { 'control-display-id': 'config-ob11-httpPost' }),
+ SettingSwitch('ob11.enableHttpPost', config.ob11.enableHttpPost, { 'control-display-id': 'config-ob11-httpHosts' }),
),
- `<div class="config-host-list" id="config-ob11-httpPost" ${config.ob11.enableHttpPost ? '' : 'is-hidden'}>
+ `<div class="config-host-list" id="config-ob11-httpHosts" ${config.ob11.enableHttpPost ? '' : 'is-hidden'}>
<setting-item data-direction="row">
<div>
<setting-text>HTTP 事件上报地址</setting-text>
</div>
<setting-button data-type="primary">添加</setting-button>
</setting-item>
- <div id="config-ob11-httpPost-list"></div>
+ <div id="config-ob11-httpHosts-list"></div>
</div>`,
SettingItem('启用正向 WebSocket 服务', null,
SettingSwitch('ob11.enableWs', config.ob11.enableWs, { 'control-display-id': 'config-ob11-wsPort' }),
@@ -175,6 +140,56 @@ async function onSettingWindowCreated(view: Element) {
'</div>',
].join(''), "text/html");
+ // 生成反向地址列表
+ const buildHostList = (hosts: string[], type: string) => {
+ const result: HTMLElement[] = [];
+
+ hosts.forEach((host, index) => {
+ const dom = {
+ container: document.createElement('setting-item'),
+ input: document.createElement('input'),
+ inputContainer: document.createElement('div'),
+ deleteBtn: document.createElement('setting-button'),
+ };
+
+ dom.container.classList.add('setting-host-list-item');
+ dom.container.dataset.direction = 'row';
+ dom.container.dataset.configArrayKey = type;
+ dom.container.dataset.configArrayIndex = `${index}`;
+
+ dom.input.classList.add('q-input__inner');
+ dom.input.type = 'url';
+ dom.input.value = host;
+
+ dom.inputContainer.classList.add('q-input');
+ dom.inputContainer.appendChild(dom.input);
+
+ dom.deleteBtn.innerHTML = '删除';
+ dom.deleteBtn.dataset.type = 'secondary';
+ dom.deleteBtn.addEventListener('click', () => {
+ ob11Config[type].splice(index, 1);
+ console.log(ob11Config);
+ initReverseHost(type);
+ });
+
+ dom.container.appendChild(dom.inputContainer);
+ dom.container.appendChild(dom.deleteBtn);
+
+ result.push(dom.container);
+ });
+
+ return result;
+ };
+ const initReverseHost = (type: string, doc: Document = document) => {
+ const hostContainerDom = doc.body.querySelector(`#config-ob11-${type}-list`);
+ [ ...hostContainerDom.childNodes ].forEach(dom => dom.remove());
+ buildHostList(ob11Config[type], type).forEach(dom => {
+ hostContainerDom.appendChild(dom);
+ });
+ };
+ initReverseHost('httpHosts', doc);
+ initReverseHost('wsHosts', doc);
+
// 开关
doc.querySelectorAll('setting-switch[data-config-key]').forEach((dom: HTMLElement) => {
dom.addEventListener('click', () => {
@@ -214,17 +229,6 @@ async function onSettingWindowCreated(view: Element) {
});
});
- // 生成反向地址列表
- const httpHostContainerDom = doc.querySelector('#config-ob11-httpPost-list');
- buildHostList(ob11Config.httpHosts, 'httpHosts').forEach(dom => {
- httpHostContainerDom.appendChild(dom);
- });
-
- const wsHostContainerDom = doc.querySelector('#config-ob11-wsHosts-list');
- buildHostList(ob11Config.wsHosts, 'wsHosts').forEach(dom => {
- wsHostContainerDom.appendChild(dom);
- });
-
// 保存按钮
doc.querySelector('#config-ob11-save').addEventListener('click', () => {
config.ob11 = ob11Config;