From 416b3d287af3f7afb143d3c61b1853bd6021452c Mon Sep 17 00:00:00 2001
From: zifan <1461978311@qq.com>
Date: Fri, 22 Sep 2023 10:45:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4fw.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 www/arp.html |   4 +-
 www/fw.html  | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100755 www/fw.html
diff --git a/www/arp.html b/www/arp.html
index 2b39223..5219a83 100755
--- a/www/arp.html
+++ b/www/arp.html
@@ -19,6 +19,7 @@
             display: flex;
             flex-direction: column;
             justify-content: space-between;
+            padding: 50px;
         }
 
         #arpTable {
@@ -29,7 +30,6 @@
 </head>
 
 <body>
-    <div></div>
     <div class="tablecenter">
         <table id="arpTable" width="700" align="center" border="1" cellspacing="0">
             <thead>
@@ -42,8 +42,6 @@
             </tbody>
         </table>
     </div>
-    <div></div>
-    <div></div>
     <script>
         window.onload = function () {
             fetch("/cgi-bin/arp.cgi").then(resp => resp.json()).then(data => {
diff --git a/www/fw.html b/www/fw.html
new file mode 100755
index 0000000..a4a3ea4
--- /dev/null
+++ b/www/fw.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="author" content="zifan">
+    <meta name="keywords" content="物联网">
+    <title>黑名单列表</title>
+
+    <style>
+        html,
+        body {
+            height: 100%;
+            margin: 0;
+            padding: 50px;
+        }
+
+        body {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            justify-items: center;
+            align-items: center;
+        }
+
+        .back {
+            background-color: rgba(41, 117, 117, 0.667);
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
+        }
+
+        form {
+            padding: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <div>
+        <form onsubmit="return post_ip(this);" class="blackfrom">
+            <label>ip地址:</label>
+            <input name="ipaddr">
+            <button type="submit">添加</button>
+            <button type="button" id="del">删除</button>
+        </form>
+        <table class="balckTable back" width="350" align="center" border="1" cellspacing="0">
+            <thead>
+                <th>ID</th>
+                <th>ip地址</th>
+            </thead>
+            <tbody id="blackTableBody" align="center">
+
+            </tbody>
+        </table>
+    </div>
+    <script>
+        window.onload = function () {
+            fetch("/cgi-bin/fw.cgi").then(resp => resp.json()).then(data => {
+                blackTableBody.innerText = "";
+                data.forEach(rowData => {
+                    let tr = document.createElement("tr");
+                    let td1 = document.createElement("td");
+                    let td2 = document.createElement("td");
+
+                    td1.innerText = rowData.id;
+                    td2.innerText = rowData.ip;
+
+                    tr.append(td1, td2);
+                    blackTableBody.append(tr);
+                });
+            }
+            )
+
+            let del = document.getElementById("del");
+            del.addEventListener("click", (event) => {
+                fetch("/cgi-bin/send.cgi").then(resp => resp.json()).then(data => {
+                    if (data.code == 1) {
+                        alert("删除成功!");
+                    }
+                })
+            }
+            )
+        }
+
+        function post_ip(form) {
+            let form_data = {
+                ip: form.ipaddr.value
+            };
+            fetch("/cgi-bin/send.cgi", {
+                method: "post",
+                body: JSON.stringify(form_data),
+                headers: {
+                    "Content-Type": "application/json;charset=utf-8"
+                }
+            }).then(resp => resp.json()).then(data => {
+                if (data.code == 0) {
+                    alert("添加成功!");
+                }
+            })
+            onload();
+            return false;
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
