From d45dde926120bbcf848d79e60d4592b6bfc27b24 Mon Sep 17 00:00:00 2001
From: kerms <kerms@niazo.org>
Date: Fri, 12 Jul 2024 20:29:14 +0800
Subject: [PATCH] feat(wifi) configurable AP credential

---
 src/api/apiWifi.ts | 35 +++++++++++++++++++++-----
 src/views/Wifi.vue | 63 ++++++++++++++++++++++++++++++++++------------
 2 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/src/api/apiWifi.ts b/src/api/apiWifi.ts
index c02381c..43e955f 100644
--- a/src/api/apiWifi.ts
+++ b/src/api/apiWifi.ts
@@ -9,6 +9,7 @@ export enum WifiCmd {
     WIFI_API_JSON_AP_GET_INFO     = 5,
     WIFI_API_JSON_GET_MODE        = 6,
     WIFI_API_JSON_SET_MODE        = 7,
+    WIFI_API_JSON_AP_SET_CRED     = 8,
 }
 
 export enum WifiMode {
@@ -34,13 +35,14 @@ export enum WifiStatus {
     WIFI_MODE_APSTA, /**< WiFi station + soft-AP mode */
 }
 
-interface WifiMsgOut extends ApiJsonMsg {
+export interface WiFiCredential extends ApiJsonMsg {
     ssid?: string;
     password?: string;
+    err?: string;
 }
 
 export function wifi_get_scan_list() {
-    const msg : WifiMsgOut = {
+    const msg : WiFiCredential = {
         module: WtModuleID.WIFI,
         cmd: WifiCmd.WIFI_API_JSON_GET_SCAN,
     }
@@ -48,7 +50,7 @@ export function wifi_get_scan_list() {
 }
 
 export function wifi_sta_get_ap_info() {
-    const msg : WifiMsgOut = {
+    const msg : WiFiCredential = {
         module: WtModuleID.WIFI,
         cmd: WifiCmd.WIFI_API_JSON_STA_GET_AP_INFO,
     }
@@ -56,7 +58,7 @@ export function wifi_sta_get_ap_info() {
 }
 
 export function wifi_ap_get_info() {
-    const msg : WifiMsgOut = {
+    const msg : WiFiCredential = {
         module: WtModuleID.WIFI,
         cmd: WifiCmd.WIFI_API_JSON_AP_GET_INFO,
     }
@@ -64,7 +66,7 @@ export function wifi_ap_get_info() {
 }
 
 export function wifi_connect_to(ssid: string, password: string) {
-    const msg: WifiMsgOut = {
+    const msg: WiFiCredential = {
         module: WtModuleID.WIFI,
         cmd: WifiCmd.WIFI_API_JSON_CONNECT,
         ssid: ssid,
@@ -74,6 +76,17 @@ export function wifi_connect_to(ssid: string, password: string) {
 }
 
 export interface WifiInfo extends ApiJsonMsg {
+    rssi: number;
+    ssid: string;
+    password: string;
+    gateway: string;
+    ip: string;
+    mac: string;
+    netmask: string;
+    wifiLogo?: string;
+}
+
+export interface WifiScanInfo extends ApiJsonMsg {
     rssi: number;
     ssid: string;
     gateway: string;
@@ -84,7 +97,7 @@ export interface WifiInfo extends ApiJsonMsg {
 }
 
 export interface WifiList extends ApiJsonMsg {
-    scan_list: Array<WifiInfo>;
+    scan_list: Array<WifiScanInfo>;
 }
 
 export interface IWifiMode extends ApiJsonMsg {
@@ -123,3 +136,13 @@ export function wifi_get_mode() {
 
     sendJsonMsg(msg);
 }
+
+export function wifi_ap_set_credential(ssid: string, password: string) {
+    const msg : WiFiCredential = {
+        module: WtModuleID.WIFI,
+        cmd: WifiCmd.WIFI_API_JSON_AP_SET_CRED,
+        ssid: ssid,
+        password: password,
+    }
+    sendJsonMsg(msg);
+}
diff --git a/src/views/Wifi.vue b/src/views/Wifi.vue
index 41e427b..582d05a 100644
--- a/src/views/Wifi.vue
+++ b/src/views/Wifi.vue
@@ -85,7 +85,7 @@
             :label="item.label"
         />
       </el-select>
-      <el-button type="primary" @click="wifiChangeMode" :loading="wifiMode_loading">更改</el-button>
+      <el-button type="primary" @click="wifiChangeMode" :loading="wifiMode_loading">保存</el-button>
     </div>
 
     <el-divider></el-divider>
@@ -116,7 +116,7 @@
       <el-descriptions-item span="1">
         <template #label>
           <div>
-            SSID
+            Wi-Fi名(SSID)
           </div>
         </template>
         {{ wifiStaApInfo.ssid }}
@@ -127,7 +127,7 @@
 <!--            密码-->
 <!--          </div>-->
 <!--        </template>-->
-<!--        <password-viewer password="asdasdasd"></password-viewer>-->
+<!--        <password-viewer :password="wifiStaApInfo.password"></password-viewer>-->
 <!--      </el-descriptions-item>-->
       <el-descriptions-item span="4">
         <template #label>
@@ -174,26 +174,28 @@
     >
       <template #extra>
         <el-switch v-model="wifiAp_On" :disabled="wsStore.state != ControlEvent.CONNECTED || !wifiSta_On"
-                   active-text="热点已开启" inactive-text="热点已关闭" :loading="wifiMode_loading"
+                   :loading="wifiMode_loading" active-text="已开启" inactive-text="未开启"
                    :before-change="()=>beforeWifiModeChange('AP')"
         />
       </template>
       <el-descriptions-item span="6">
         <template #label>
           <div>
-            SSID
+            Wi-Fi名(SSID)
           </div>
         </template>
-        {{ wifiApInfo.ssid }}
+        <div class="flex">
+          <el-input v-model="wifiApInfo.ssid"></el-input>
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item span="6">
+        <template #label>
+          <div>
+            密码
+          </div>
+        </template>
+        <el-input v-model="wifiApInfo.password"></el-input>
       </el-descriptions-item>
-<!--      <el-descriptions-item span="6">-->
-<!--        <template #label>-->
-<!--          <div>-->
-<!--            密码-->
-<!--          </div>-->
-<!--        </template>-->
-<!--        <password-viewer password="asdasdasd"></password-viewer>-->
-<!--      </el-descriptions-item>-->
       <el-descriptions-item span="4">
         <template #label>
           <div>
@@ -230,6 +232,9 @@
         {{ wifiApInfo.netmask }}
       </el-descriptions-item>
     </el-descriptions>
+    <div class="flex justify-center mt-4">
+      <el-button type="primary" :loading="wifiMode_loading" @click="wifiApChangeCredential">保存</el-button>
+    </div>
     <el-divider></el-divider>
   </div>
 
@@ -240,6 +245,7 @@ import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
 import {
   type IWifiMode,
   wifi_ap_get_info,
+  wifi_ap_set_credential,
   wifi_connect_to,
   wifi_get_mode,
   wifi_get_scan_list,
@@ -249,7 +255,9 @@ import {
   type WifiInfo,
   type WifiList,
   WifiMode,
-  WifiStatus
+  type WifiScanInfo,
+  type WiFiCredential,
+  WifiStatus,
 } from "@/api/apiWifi";
 import type {FormInstance} from "element-plus";
 
@@ -275,6 +283,8 @@ let wifiAp_On = ref(false);
 
 let wifiMode = ref(-1);
 
+const wifiTestString = ref("666");
+
 let wifiModeOptions = [
   {
     label: "智能热点+常开终端（AP+STA）",
@@ -303,6 +313,7 @@ const defWifiInfo: WifiInfo = {
   rssi: 0,
   netmask: "未连接",
   ssid: "未连接",
+  password: "",
 }
 
 let wifiStaApInfo = reactive<WifiInfo>({...defWifiInfo});
@@ -311,7 +322,7 @@ let wifiApInfo = reactive<WifiInfo>({...defWifiInfo});
 let scanning = ref(false);
 let scan_cb: any;
 let connectBtnClicked = 0;
-let options: Array<WifiInfo> = [];
+let options: Array<WifiScanInfo> = [];
 const scanText = computed(() => {
   return scanning.value ? "扫描中" : "扫描";
 });
@@ -401,6 +412,17 @@ const onClientMsg = (msg: ApiJsonMsg) => {
       console.log("@@@", wifiAp_On.value);
       break;
     }
+    case WifiCmd.WIFI_API_JSON_AP_SET_CRED: {
+      const wifiCred = msg as WiFiCredential;
+      if (wifiCred.err !== undefined) {
+        globalNotifyRightSide(wifiCred.err, "error");
+      } else {
+        globalNotifyRightSide("已保存配置", "success");
+      }
+      wifiMode_loading.value = false;
+
+      break;
+    }
     default:
       if (isDevMode()) {
         console.log(msg);
@@ -462,6 +484,15 @@ function wifiChangeMode() {
   wifi_set_mode(wifiMode.value);
 }
 
+function wifiApChangeCredential() {
+  if (wifiApInfo.ssid === "") {
+    globalNotifyRightSide("请输入AP名称", "error");
+    return;
+  }
+  wifiMode_loading.value = true;
+  wifi_ap_set_credential(wifiApInfo.ssid, wifiApInfo.password);
+}
+
 onMounted(() => {
   registerModule(WtModuleID.WIFI, {
     ctrlCallback: onClientCtrl,