update: wifi列表选择

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,10 +27,7 @@
         <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">
@@ -30,10 +36,34 @@
     </div>
 
     <script>
-        function submitForm() {
+        const select = document.querySelector(".select");
-            const ssid = document.getElementById('wifiName').value;
+        const options_list = document.querySelector(".options-list");
-            const password = document.getElementById('wifiPassword').value;
+        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 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;
+    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%;