From fdc60139c73a90ea69b8830294ee657ba4bbe98b Mon Sep 17 00:00:00 2001
From: Killua777 <1223086337@qq.com>
Date: Sun, 19 May 2024 19:15:31 +0800
Subject: [PATCH] =?UTF-8?q?update:=20wifi=E5=88=97=E8=A1=A8=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/index.html | 96 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 82 insertions(+), 14 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 7dcc513..5f73b9f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,7 +10,16 @@
     <div class="pageTitle">配置</div>
     <div class="inputLabel">WIFI 名称</div>
     <div class="inputDiv">
-        <input id="wifiName" type="text" placeholder="请选择WiFi">
+        <div class="select-menu">
+            <div class="select">
+                <span id="ssid" class="ssid">请选择Wifi</span>
+            </div>
+            <div class="options-list">
+                {% for wifi in wifi_list %}
+                    <div class="option">{{wifi.ssid}}</div>
+                {% endfor %}
+            </div>
+        </div>
     </div>
     
     <div class="inputLabel">WIFI 密码</div>
@@ -18,22 +27,43 @@
         <input id="wifiPassword" type="password" placeholder="请输入密码">
     </div>
     <div class="btnDiv" style="margin-top: 14vh;">
-        <button class="btnSave" onclick="submitForm()">保存</button>
+        <button class="btnSave" onclick="submitForm()">连接</button>
     </div>
-    <div class="btnDiv" style="margin-top: 2vh;">
-        <button class="btnRefresh">刷新</button>
-    </div>
-    
+
     <div class="powerDiv">
         <span style="margin-right: 2%">Powered by</span>
         <span style="color: #3498ff;">Takway.ai</span>
     </div>
 
     <script>
+        const select = document.querySelector(".select");
+        const options_list = document.querySelector(".options-list");
+        const ssid_span = document.querySelector(".ssid");
+        const options = document.querySelectorAll(".option");
+        let ssid = ""
+        let isSelectSSid = false
+
+        select.addEventListener("click", () => {
+            options_list.classList.toggle("active");
+        });
+
+        //select option
+        options.forEach((option) => {
+            option.addEventListener("click", () => {
+                options.forEach((option) => {option.classList.remove('selected')});
+                select.querySelector("span").innerHTML = option.innerHTML;
+                ssid = option.innerHTML;
+                option.classList.add("selected");
+                if(!isSelectSSid){
+                    ssid_span.classList.toggle("active");
+                }
+                options_list.classList.toggle("active");
+                isSelectSSid = true
+            });
+        });
+
         function submitForm() {
-            const ssid = document.getElementById('wifiName').value;
             const password = document.getElementById('wifiPassword').value;
-            
             fetch('/submit', {
                 method: 'POST',
                 headers: {
@@ -72,15 +102,53 @@ body{
     width: 100%;
     display:flex;
     justify-content: center;
-}
-input[type=text]{
-    width: 85%;
     margin-bottom: 2vh;
-    padding: 1.3vh 1.3vh 1.3vh 2.2vh;
+}
+.select-menu{
+    width: 90%;
+    cursor: pointer;
+    position: relative;
+}
+.select{
     font-size: 1.8vh;
     background-color: #f5f5f7;
-    border: 0px;
-    border-radius:5vh;
+    padding: 1.3vh 1.3vh 1.3vh 2.2vh;
+    color: #a9a9aa;
+    font-weight: 500;
+    border-radius: 5vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.ssid.active{
+    color: black;
+}
+.options-list{
+    position: absolute;
+    width: 100%;
+    background-color: #f9f9f9;
+    border-radius: 1.5vh;
+    margin-top: 14px;
+    max-height: 180px;
+    overflow-y: auto;
+    transform: .4s linear .2s;
+    height: 0;
+}
+.options-list::-webkit-scrollbar{
+    width: 0px;
+}
+.options-list.active{
+    height: 180px;
+}
+.option{
+    padding-left: 2vh;
+    margin-bottom: 1vh;
+    font-size: 1.7vh;
+    font-weight: 500;
+    transition: .3s ease-in-out;
+}
+.option:hover{
+    color: #00a8ff;
 }
 input[type=password]{
     width: 85%;