From f4fbe198e922c5a4e0f47d255e19ce801b73bcc3 Mon Sep 17 00:00:00 2001
From: Misa Liu <misaliu@misaliu.top>
Date: Mon, 4 Mar 2024 21:57:26 +0800
Subject: [PATCH] feat: Made switch works (UI)

---
 src/renderer/index.ts | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index a15c791..cf7543f 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -24,7 +24,7 @@ async function onSettingWindowCreated(view: Element) {
                 SettingSwitch('ob11.enableHttp', config.ob11.enableHttp, { 'control-display-id': 'config-ob11-httpPort' }),
             ),
             SettingItem('HTTP 服务监听端口', null,
-                '<div class="q-input"><input class="q-input__inner" /></div>',
+                `<div class="q-input"><input class="q-input__inner" type="number" min="1" max="65534" value="${config.ob11.httpPort}" placeholder="${config.ob11.httpPort}" /></div>`,
                 'config-ob11-httpPort', config.ob11.enableHttp
             ),
             SettingItem('启用 HTTP 事件上报', null,
@@ -35,14 +35,14 @@ async function onSettingWindowCreated(view: Element) {
                 'config-ob11-httpPost', config.ob11.enableHttpPost
             ),
             SettingItem('启用正向 WebSocket 服务', null,
-                SettingSwitch('ob11.enableWs', config.ob11.enableWs, { 'config-display-id': 'config-ob11-wsPort' }),
+                SettingSwitch('ob11.enableWs', config.ob11.enableWs, { 'control-display-id': 'config-ob11-wsPort' }),
             ),
             SettingItem('正向 WebSocket 服务监听端口', null,
-                '<div class="q-input"><input class="q-input__inner" /></div>',
+                `<div class="q-input"><input class="q-input__inner" type="number" min="1" max="65534" value="${config.ob11.wsPort}" placeholder="${config.ob11.wsPort}" /></div>`,
                 'config-ob11-wsPort', config.ob11.enableWs
             ),
             SettingItem('启用反向 WebSocket 服务', null,
-                SettingSwitch('ob11.enableWsReverse', config.ob11.enableWsReverse, { 'config-display-id': 'config-ob11-wsHosts' }),
+                SettingSwitch('ob11.enableWsReverse', config.ob11.enableWsReverse, { 'control-display-id': 'config-ob11-wsHosts' }),
             ),
             SettingItem('反向 WebSocket 监听地址', null,
                 '<div></div>',
@@ -90,18 +90,34 @@ async function onSettingWindowCreated(view: Element) {
             SettingItem(
                 '自动删除收到的文件',
                 '在收到文件后的指定时间内删除该文件',
-                SettingSwitch('autoDeleteFile', config.autoDeleteFile, { 'config-display-id': 'config-auto-delete-file-second' }),
+                SettingSwitch('autoDeleteFile', config.autoDeleteFile, { 'control-display-id': 'config-auto-delete-file-second' }),
             ),
             SettingItem(
                 '自动删除文件时间',
                 '单位为秒',
-                '<div class="q-input"><input class="q-input__inner" /></div>',
+                `<div class="q-input"><input class="q-input__inner" type="number" min="1" value="${config.autoDeleteFileSecond}" placeholder="${config.autoDeleteFileSecond}" /></div>`,
                 'config-auto-delete-file-second', config.autoDeleteFile
             ),
         ]),
         '</div>',
     ].join(''), "text/html");
 
+    // 开关
+    doc.querySelectorAll('setting-switch[data-config-key]').forEach((dom: HTMLElement) => {
+        dom.addEventListener('click', () => {
+            const active = dom.getAttribute('is-active') === null;
+
+            if (active) dom.setAttribute('is-active', '');
+            else dom.removeAttribute('is-active');
+
+            if (!isEmpty(dom.dataset.controlDisplayId)) {
+                const displayDom = document.querySelector(`#${dom.dataset.controlDisplayId}`);
+                if (active) displayDom.removeAttribute('is-hidden');
+                else displayDom.setAttribute('is-hidden', '');
+            }
+        });
+    });
+
     doc.body.childNodes.forEach(node => {
         view.appendChild(node);
     });