bug fix checkbox in setting page

src-tauri/src/main.rs

@@ -2,16 +2,17 @@
 
 use axum::Router;
 use log::{debug, trace};use axum::http::{HeaderValue, Method};
+use  magic_eye::server::server_http_verb::{__cmd__get_server_request, get_server_request, __cmd__patch_server_request, patch_server_request};
 use magic_eye::server::server_config::{
-    __cmd__get_server_config_options, __cmd__patch_server_config_options, get_server_config_options,
-    patch_server_config_options,
+    __cmd__get_server_config_options, get_server_config_options,
+
 };
 use magic_eye::utils;
 use magic_eye::utils::browser::{__cmd__open_web_browser, open_web_browser};
 use magic_eye::utils::config::{
     __cmd__get_config_dir, __cmd__get_config_file, __cmd__get_config_file_content,
     __cmd__update_settings_file, get_config_dir, get_config_file, get_config_file_content,
-    update_settings_file,
+    update_settings_file
 };
 use std::{env, fs};
 use tauri::{generate_handler, Manager};
@@ -117,8 +118,9 @@ async fn close_splashscreen(window: tauri::Window) {
             get_config_file_content,
             update_settings_file,
             get_server_config_options,
-            patch_server_config_options,
-            close_splashscreen
+            patch_server_request,
+            close_splashscreen,
+            get_server_request,
         ])
         .run(context)
         .expect("error while running tauri application");

src-tauri/src/server/mod.rs

@@ -1 +1,2 @@
 pub mod server_config;
+pub mod server_http_verb;

src-tauri/src/server/server_config.rs

@@ -43,7 +43,7 @@ pub async fn get_server_config_options(url: &str) -> Result<String, String> {
     }
 }
 
-#[tauri::command]
+//#[tauri::command]
 pub async fn patch_server_config_options(config_data: Value, url: &str) -> Result<(), String> {
     // Serialize the JSON data to a string
     let data = config_data.to_string();
@@ -62,7 +62,7 @@ pub async fn patch_server_config_options(config_data: Value, url: &str) -> Resul
             err.to_string()
         })?;
 
-    info!("Response: {:?}", response);
+    debug!("Response: {:?}", response);
 
     if response.status().is_success() {
         Ok(())

src-tauri/src/server/server_http_verb.rs

@@ -0,0 +1,79 @@
+use log::{debug, error, info, warn};
+use reqwest;
+use serde_json::Value;
+
+
+#[tauri::command]
+pub async fn get_server_request(url: &str) -> Result<String, String> {
+    let response = reqwest::Client::new()
+    .get(url)
+    .send()
+    .await
+    .map_err(|err| {
+        error!("GET request error: {:?}", err);
+        err.to_string()
+    })?;
+    debug!("GET response: {:?}", response);
+
+info!("GET request to URL: {}", url);
+
+if response.status().is_redirection() {
+    warn!("Redirection: {:?}", response);
+}
+
+if response.status().is_success() {
+    // Deserialize the JSON response into a Value
+    let body_json: Value = response.json().await.map_err(|err| {
+        error!("JSON deserialization error: {:?}", err);
+        err.to_string()
+    })?;
+
+    // Serialize the Value back to a JSON string
+    let body_json_string = serde_json::to_string(&body_json).map_err(|err| {
+        error!("JSON serialization error: {:?}", err);
+        err.to_string()
+    })?;
+
+    Ok(body_json_string)
+} else if response.status().is_server_error() {
+    error!("Server error: {:?}", response.status());
+    Err(format!("Server error: {:?}", response.status()))
+} else {
+    error!("Request was not successful: {:?}", response.status());
+    Err(format!("Request was not successful: {:?}", response.status()))
+}
+}
+
+#[tauri::command]
+pub async fn patch_server_request(config_data: Value, url: &str) -> Result<(), String> {
+    // Serialize the JSON data to a string
+    let data = config_data.to_string();
+    info!("PATCH data: {}", data);
+    info!("PATCH request to URL: {}", url);
+
+
+    let response = reqwest::Client::new()
+        .patch(url)
+        .header("Content-Type", "application/json") 
+        .body(data)
+        .send()
+        .await
+        .map_err(|err| {
+            error!("PATCH request error: {:?}", err);
+            err.to_string()
+        })?;
+
+    debug!("Response: {:?}", response);
+
+    if response.status().is_success() {
+        Ok(())
+    } else {
+        response.status().is_server_error().then(|| {
+            error!("Server error: {:?}", response);
+        });
+        error!("PATCH request was not successful: {:?}", response);
+        Err(format!("PATCH request was not successful: {:?}", response.text().await))
+    }
+}
+
+

src-tauri/tauri.conf.json

@@ -27,6 +27,7 @@
         "request": true,
         "scope": [
           "http://*",
+          "http://localhost",
           "https://*"
         ]
       },

src/components/ListBox/listBox.tsx

@@ -0,0 +1,35 @@
+interface ListBoxProps {
+    data: any; // JSON data
+    // An array of field names to display
+}
+
+function ListBox({ data }: ListBoxProps): JSX.Element {
+    const { itemCount, pageCount, items } = data;
+    console.log("itemCount:" + itemCount);
+    console.log("pageCount:" + pageCount);
+    console.log("items:" + items);
+    return (
+        <div className="p-4">
+            <h2 className="text-2xl font-bold">Data Information</h2>
+            <p className="text-lg">Total Items: {itemCount}</p>
+            <p className="text-lg">Total Pages: {pageCount}</p>
+
+            <div className="mt-4">
+                {items.map((item) => (
+                    <div
+                        key={item.id}
+                        className=" bg-window-dark-500 text-white p-2 my-2 rounded"
+                    >
+                        <p>ID: {item.id}</p>
+                        <p>Created: {new Date(item.created).toDateString()}</p>
+                        <p>Remote Address: {item.remoteAddr}</p>
+                        <p>Bytes Received: {item.bytesReceived} bytes</p>
+                        <p>Bytes Sent: {item.bytesSent} bytes</p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default ListBox;

src/components/titlebar/titlebar.tsx

@@ -167,7 +167,7 @@ export function Titlebar() {
                                 </a>
 
                                 <Link
-                                    to="/"
+                                    to="/server"
                                     title="Server"
                                     className="flex rounded-lg px-4 py-2 text-md dark:text-text-dark text-text-light hover:dark:bg-window-dark-100 hover:bg-window-light-600"
                                 >

src/interfaces/IListbox.ts

@@ -0,0 +1,4 @@
+interface ListBoxProps {
+    data: Array<{ [key: string]: any }>; 
+
+}

src/interfaces/IServer.ts

@@ -198,7 +198,6 @@ interface IRtspSettings {
 
 interface IRtmpSettings {
   rtmp: boolean;
-  rtmpDisable: boolean;
   rtmpAddress: string;
   rtmpEncryption: string;
   rtmpsAddress: string;

src/router.tsx

@@ -1,12 +1,17 @@
 import App from "./App";
 import Settings from "./views/Settings";
+import Server from "./views/Server";
 import { createBrowserRouter } from "react-router-dom";
 
 export const router = createBrowserRouter([
     {
         path: "settings",
         element: <Settings />
     },
+    {
+        path: "server",
+        element: <Server />
+    },
     {
         path: "/",
         element: <App />

src/views/Server.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { Titlebar } from "../components/titlebar/titlebar";
+import SideMenu from "../components/sideMenu/sideMenu";
+import Toast from "../components/toast/Toast";
+import RtspServerInfo from "./ServerInfoView/RtspServerInfo";
+export default function ServerInfo() {
+    const [error, setError] = useState<string | null>(null);
+    const [currentSetting, setCurrentSetting] = useState("RTSP"); // Initially show the "API Setting" component
+
+    const menuItems = [
+        { label: "HLS" },
+        { label: "RTSP" },
+        { label: "RTMP" },
+        { label: "WebRTC" },
+        { label: "SRT" }
+    ].sort((a, b) => a.label.localeCompare(b.label));
+
+    function handleDismissErrorToast() {
+        setError(null);
+    }
+
+    return (
+        <>
+            <Titlebar />
+            <div className="flex flex-col  h-screen">
+                <div className="flex">
+                    <div className="w-1/4 mx-auto fixed  h-full">
+                        <SideMenu
+                            menuItems={menuItems}
+                            onMenuItemClick={(menuItem) =>
+                                setCurrentSetting(menuItem.label)
+                            }
+                        />
+                    </div>
+                    <div className="w-3/4 mx-auto mt-4 mr-24">
+                        <div className="mx-auto mt-24">
+                            {currentSetting === "RTSP" && <RtspServerInfo />}
+                        </div>
+                        {error && (
+                            <Toast
+                                message={error}
+                                timer={5000}
+                                type={"error"}
+                                onDismiss={handleDismissErrorToast}
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

src/views/ServerInfoView/RtspServerInfo.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { fadeIn } from "../../utils/animation/screenAnimation";
+import { invoke } from "@tauri-apps/api";
+import ListBox from "../../components/ListBox/listBox";
+
+export default function RtspServerInfo() {
+    const [Rtspdata, setRtspdata] = useState<any[]>([]); // Initialize as an empty array
+
+    useEffect(() => {
+        invoke("get_server_request", {
+            url: "http://127.0.0.1:9997/v3/rtspconns/list"
+        }).then((response: any) => {
+            console.log("response:" + response);
+            setRtspdata(response as any[]);
+            console.log("parsed option:" + JSON.stringify(response));
+        });
+    }, []);
+    const data = {
+        itemCount: 2,
+        pageCount: 1,
+        items: [
+            {
+                id: "f0181de0-b1fb-4efd-93ad-1ede297eea03",
+                created: "2023-10-26T09:19:19.376827665-04:00",
+                remoteAddr: "127.0.0.1:46702",
+                bytesReceived: 127,
+                bytesSent: 128
+            },
+            {
+                id: "4a98da7a-16ad-42db-82c2-c4cae87f77b0",
+                created: "2023-10-26T10:31:22.643908707-04:00",
+                remoteAddr: "127.0.0.1:36982",
+                bytesReceived: 127,
+                bytesSent: 128
+            }
+        ]
+    };
+
+    return (
+        <motion.div
+            variants={fadeIn}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+        >
+            <div className=" my-4">
+                <h2 className="text-center font-bold text-3xl">
+                    RTSP Server Information
+                </h2>
+                <div className="grid grid-cols-2 mt-6 content-between place-content-start gap-4">
+                    <div className="col-span-1">
+                        <div className="flex flex-col text-right items-end">
+                            <label className="font-semibold text-lg my-2">
+                                RTSP Server:
+                            </label>
+                        </div>
+                    </div>
+                    <div className="col-span-1">
+                        <div className="flex flex-col">
+                            <ListBox data={data} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </motion.div>
+    );
+}

src/views/Settings.tsx

@@ -95,7 +95,6 @@ export default function Setting() {
     const [rtmpSettings, setRtmpSettings] = useState<IRtmpSettings>({
         rtmp: configData?.rtmp || true,
         rtmpAddress: configData?.rtmpAddress || ":1935",
-        rtmpDisable: configData?.rtmpDisable || false,
         rtmpEncryption: configData?.rtmpEncryption || "no",
         rtmpsAddress: configData?.rtmpsAddress || ":1936",
         rtmpServerKey: configData?.rtmpServerKey || "server.key",
@@ -175,7 +174,6 @@ export default function Setting() {
                 setRtmpSettings({
                     rtmp: parsedResponse.rtmp || true,
                     rtmpAddress: parsedResponse.rtmpAddress || ":1935",
-                    rtmpDisable: parsedResponse.rtmpDisable || false,
                     rtmpEncryption: parsedResponse.rtmpEncryption || "no",
                     rtmpsAddress: parsedResponse.rtmpsAddress || ":1936",
                     rtmpServerKey: parsedResponse.rtmpServerKey || "server.key",
@@ -257,18 +255,13 @@ export default function Setting() {
     async function patchSetting(configData) {
         try {
             if (configData == null) {
-                setError(
-                    "ConfigData is empty." 
-
-                );
+                setError("ConfigData is empty.");
             }
-
 
-            await invoke("patch_server_config_options", {
+            await invoke("patch_server_request", {
                 configData: configData,
                 url: "http://127.0.0.1:9997/v3/config/global/patch"
             }).then((response: string) => {
-
                 console.log("response: " + response);
                 const parsedResponse: IServer = JSON.parse(response);
                 console.log(
@@ -281,7 +274,6 @@ export default function Setting() {
                 invoke("get_server_config_options", { url: serverUrl }).then(
                     (response: string) => {
                         const parsedResponse: IServer = JSON.parse(response);
-                        console.log(parsedResponse.webrtc);
                         setConfigData(parsedResponse);
                         console.log(
                             "new parsed option:" +

src/views/appSetting/appSetting.tsx

@@ -33,7 +33,6 @@ export async function SetConfig(new_settings) {
 
 export default function GeneralSetting() {
     const [currentPlaceholder, setCurrentPlacholder] = useState("");
-
     const placeholderdata = {
         placeholder: [
             "placeholder-smpte",