v1.0

2024-07-22 15:07:00 +08:00 · 2024-07-22 15:07:00 +08:00 · efacb10259
commit efacb10259
parent 29cc87399e
4 changed files with 210 additions and 65 deletions
--- a/config.json
+++ b/config.json
@ -1 +1 @@
-{"login":true,"host":"10.225.0.1","user":"lan","password":"xp258147","maincidr":"10.225.1.0/24","proxycidr":"10.225.2.0/24"}
+{"port":7000,"login":false,"host":"","user":"","password":"","maincidr":"","proxycidr":""}
--- a/index.html
+++ b/index.html
@ -27,7 +27,7 @@

        main {
            width: 100%;
-            max-width: 30rem;
+            max-width: 60rem;
            margin: auto;
            text-align: center;
            background-color: #ffffff;
@ -35,10 +35,20 @@
            box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2);
        }

+        .container {
+            width: 100%;
+            overflow-x: auto;
+        }
+
+        table {
+            width: 100%;
+            min-width: 20rem;
+        }
+
        .btn {
-            width: 3rem;
+            width: 6rem;
            height: 2rem;
-            margin-bottom: 1rem;
+            margin: 0.2rem;
            border: none;
            border-radius: 0.5rem;
            background-color: #dfdfdf;
@ -54,24 +64,46 @@
            box-shadow: 0 3px #666;
            transform: translateY(2px);
        }
+
+        ::-webkit-scrollbar {
+            display: none;
+        }
    </style>
 </head>

 <body>
    <main>
        <h1 class="title">NetgateSwitch</h1>
-        <form>
-            <div class="text-area">
-
-            </div>
-            <button class="btn" id="getlist">获取</button>
-            <button class="btn" id="switchaddr">更改</button>
-        </form>
+        <div class="container">
+            <table id="table">
+            </table>
+            <button class="btn" id="delcfg" style="margin-bottom: 1rem;">删除配置</button>
+        </div>
    </main>
 </body>

 <script>
-    document.getElementById('getlist').addEventListener('click', async (event) => {
+    document.getElementById("delcfg").addEventListener('click', async () => {
+        try {
+            let res = await fetch('./core/logout/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }, body: {}
+            });
+            if (!res.ok) {
+                alert(await res.text());
+            } else {
+                window.location.href = "./";
+            }
+        } catch (err) {
+            console.log(err);
+        }
+    });
+
+    getDHCPList();
+
+    async function getDHCPList() {
        try {
            let res = await fetch('./core/get/', {
                method: 'POST',
@ -81,30 +113,89 @@
            });
            if (!res.ok) {
                alert(await res.text());
+            } else {
+                showDevices(await res.json());
            }
        } catch (err) {
            console.log(err);
        }
-    });
-    document.getElementById('switchaddr').addEventListener('click', async (event) => {
-        try {
-            let res = await fetch('./core/switch/', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                }, body: JSON.stringify({
-                    id: 'a',
-                    group: 'main',
-                })
-            });
+    }

-            if (!res.ok) {
-                alert(await res.text());
-            }
-        } catch (err) {
-            console.log(err);
+    function showDevices(list) {
+        const tb = document.getElementById('table');
+        let trn = document.createElement('tr');
+        let td1 = document.createElement('td');
+        let td2 = document.createElement('td');
+        let td3 = document.createElement('td');
+        let td4 = document.createElement('td');
+        let btn = document.createElement('button');
+        while (tb.firstChild) {
+            tb.removeChild(tb.firstChild);
        }
-    });
+        td1.setAttribute('scope', 'col');
+        td1.append('设备名');
+        td2.setAttribute('scope', 'col');
+        td2.append('IP地址');
+        td3.setAttribute('scope', 'col');
+        td3.append('MAC地址');
+        td4.setAttribute('scope', 'col');
+        td4.append('操作');
+        trn.append(td1, td2, td3, td4);
+        tb.append(trn);
+        for (let i in list) {
+            trn = document.createElement('tr');
+            td1 = document.createElement('td');
+            td2 = document.createElement('td');
+            td3 = document.createElement('td');
+            td4 = document.createElement('td');
+            btn1 = document.createElement('button');
+            btn1.setAttribute('class', 'btn swbtn');
+            btn1.setAttribute('cidrgroup', 'main');
+            btn1.setAttribute('deviceid', list[i].id);
+            btn1.append('切换至Main');
+            btn2 = document.createElement('button');
+            btn2.setAttribute('class', 'btn swbtn');
+            btn2.setAttribute('cidrgroup', 'proxy');
+            btn2.setAttribute('deviceid', list[i].id);
+            btn2.append('切换至Proxy');
+            td1.append(list[i].host);
+            td2.append(list[i].address);
+            td3.append(list[i].mac);
+            td4.append(btn1);
+            td4.append(btn2);
+            trn.append(td1, td2, td3, td4);
+            tb.append(trn);
+        }
+        bindEvent();
+    }
+
+    function bindEvent() {
+        document.querySelectorAll('.swbtn').forEach((button) => {
+            button.addEventListener('click', async () => {
+                try {
+                    let res = await fetch('./core/switch/', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }, body: JSON.stringify({
+                            id: button.getAttribute('deviceid'),
+                            group: button.getAttribute('cidrgroup'),
+                        })
+                    });
+                    console.log(button.getAttribute('cidrgroup'));
+
+                    if (!res.ok) {
+                        alert(await res.text());
+                    } else {
+                        alert('切换成功');
+                        window.location.href = "./";
+                    }
+                } catch (err) {
+                    console.log(err);
+                }
+            });
+        });
+    }
 </script>

 </html>
--- a/index.ts
+++ b/index.ts
@ -1,16 +1,27 @@
-import { serve } from "bun";
+import { serve } from 'bun';
 import { RouterOSAPI } from 'node-routeros';
-import cfg from "./config.json";
+import cfg from './config.json';

 let api = new RouterOSAPI({
    host: cfg.host,
    user: cfg.user,
    password: cfg.password
 });
-let haslogin = cfg.login;
+
 const maincidr = cfg.maincidr;
 const proxycidr = cfg.proxycidr;

+let haslogin = cfg.login;
+type Device = {
+    'id': string,
+    'address': string,
+    'mac': string,
+    'status': string,
+    'host': string,
+    'comment': string
+}
+let list: Device[] = [];
+
 if (haslogin) {
    if (!await connectAPI()) {
        haslogin = false;
@ -18,17 +29,17 @@ if (haslogin) {
 }

 const server = serve({
-    port: 3000, async fetch(request) {
+    port: cfg.port, async fetch(request) {
        const url = new URL(request.url);
-        if (url.pathname === "/") {
-            let file = haslogin ? Bun.file("./index.html") : Bun.file("./login.html");
+        if (url.pathname === '/') {
+            let file = haslogin ? Bun.file('./index.html') : Bun.file('./login.html');
            return new Response(file);
        }

-        if (url.pathname === "/core/login/") {
+        if (url.pathname === '/core/login/') {
            let data = await request.json();
-            if (data.user === "" || data.password === "" || data.host === "") {
-                return new Response("参数错误", { status: 400 });
+            if (data.user === '' || data.password === '' || data.host === '') {
+                return new Response('参数缺失', { status: 400 });
            }
            api = new RouterOSAPI({
                host: data.host,
@ -37,71 +48,109 @@ const server = serve({
            });
            if (await connectAPI()) {
                writeConfig(data.host, data.user, data.password, data.main, data.proxy);
-                console.log("配置文件已更新");
-                return new Response("登入成功");
+                console.log('配置文件已更新');
+                return new Response('登入成功');
            } else {
-                return new Response("ROS登入失败", { status: 400 });
+                return new Response('ROS登入失败', { status: 400 });
            }
        }

-        if (url.pathname === "/core/get/") {
-            if (!haslogin) return new Response("ROS配置未设置", { status: 401 });
+        if (url.pathname === '/core/get/') {
+            if (!haslogin) return new Response('ROS配置未设置', { status: 401 });
            return new Response(JSON.stringify(await getDHCPList()));
        }

-        if (url.pathname === "/core/switch/") {
-            if (!haslogin) return new Response("ROS配置未设置", { status: 401 });
+        if (url.pathname === '/core/switch/') {
+            if (!haslogin) return new Response('ROS配置未设置', { status: 401 });
            let data = await request.json();
            let id = data.id;
            let mac = data.mac;
            let group = data.group;
-            if ((id === "" && mac === "") || group === "") {
-                return new Response("400 Bad Request", { status: 400 });
+            if ((id === '' && mac === '')) {
+                return new Response('参数缺失', { status: 401 });
+            }
+            let isExists: boolean = false;
+            let addr = '';
+            for (let i in list) {
+                if (list[i].id === id || list[i].mac === mac) {
+                    id = list[i].id;
+                    addr = list[i].address;
+                    isExists = true;
+                }
+            }
+            if ((!isExists)) {
+                return new Response('设备不存在', { status: 401 });
+            }
+            if (group !== 'main' && group !== 'proxy') {
+                return new Response('group错误', { status: 401 });
+            }
+            if (await switchNetgate(id, addr, group)) {
+                return new Response('登入成功');
+            } else {
+                return new Response('切换失败', { status: 401 });
            }
-            switchNetgate('*458',group);
        }

-        if (url.pathname === "/core/logout/") {
+        if (url.pathname === '/core/logout/') {
            cleanConfig();
-            return new Response("已登出");
+            return new Response('已登出');
        }

-        return new Response("Page not found", { status: 404 });
+        return new Response('Page not found', { status: 404 });
    }
 });
-console.log(`Listening on http://localhost:${server.port} ...`);
+console.log(`前端已开启: http://localhost:${server.port} ...`);

 async function connectAPI() {
    try {
        await api.connect();
-        console.log("API登入成功");
+        console.log('API登入成功');
        return true;
    } catch (err) {
        console.log(err);
-        console.log("API登入失败");
+        console.log('API登入失败');
        return false;
    }
 }

 async function getDHCPList() {
    const result = await api.write('/ip/dhcp-server/lease/print');
-    let list = [];
+    list = [];
    for (let eq in result) {
        list.push({
            'id': result[eq]['.id'],
            'address': result[eq]['address'],
-            'mac-address': result[eq]['mac-address'],
+            'mac': result[eq]['mac-address'],
            'status': result[eq]['status'],
-            'host-name': result[eq]['host-name'],
+            'host': result[eq]['host-name'],
            'comment': result[eq]['comment'],
        });
    }
-    console.log(list);
    return list;
 }

-async function switchNetgate(id:string,group:string) {
-    const result = await api.write('/ip/dhcp-server/lease/set',['=.id='+id,'=address='+(group==='proxy'?'10.225.1.100':'10.225.0.100')]);
+async function switchNetgate(id: string, addr: string, group: string) {
+    try {
+        let mask = Number.parseInt(maincidr.split('/')[1]);
+        let targetcidr = (group === 'proxy' ? proxycidr : maincidr).split('/')[0].split('.');
+        let address = addr.split('.');
+        let num = 2;
+        if (mask == 16) {
+            num = 1;
+        } else if (mask == 8) {
+            num = 0;
+        }
+        for (let i = 0; i <= num; i++) {
+            address[i] = targetcidr[i];
+        }
+        console.log('原IP' + addr + '切换至' + address.join('.'));
+
+        const result = await api.write('/ip/dhcp-server/lease/set', ['=.id=' + id, '=address=' + address.join('.')]);
+        return true;
+    } catch (err) {
+        console.log(err);
+        return false;
+    }
 }

 async function writeConfig(host: string, user: string, password: string, mcidr: string, pcidr: string) {
@ -113,11 +162,16 @@ async function writeConfig(host: string, user: string, password: string, mcidr:
    cfg.proxycidr = pcidr;

    haslogin = true;
-    await Bun.write("./config.json", JSON.stringify(cfg));
+    await Bun.write('./config.json', JSON.stringify(cfg));
 }

 async function cleanConfig() {
-    cfg.login = false;
    haslogin = false;
-    await Bun.write("./config.json", JSON.stringify(cfg));
+    cfg.login = false;
+    cfg.host = "";
+    cfg.user = "";
+    cfg.password = "";
+    cfg.maincidr = "";
+    cfg.proxycidr = "";
+    await Bun.write('./config.json', JSON.stringify(cfg));
 }
--- a/login.html
+++ b/login.html
@ -108,7 +108,7 @@
            if(!res.ok){
                alert(await res.text());
            }else{
-                window.location.href("./");
+                window.location.href="./";
            }
        }catch(err){
            console.log(err);