TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
    <script type="text/javascript" src="../../script/ao.css"></script>

    <link href="../../script/aos/aos.css" rel="stylesheet">
    <script src="../../script/aos/aos.js"></script>

    <title>WiFi Info</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>

        .gradientbg{
            border-radius: 12px;
            background: rgb(253,255,254);
            background: linear-gradient(104deg, rgba(253,255,254,1) 29%, rgba(240,250,255,1) 100%);
        }

        .statusIcon{
            color: #ffffff;
            padding: 4em !important;
            text-align: center;
        }

        #status{
            font-size: 1.2em;
            color: #1f1f1f;
        }

        #status.error{
            color: rgb(245, 86, 86);
        }

        #status.connected{
            color: rgb(68, 177, 132);
        }

        #wifiicon{
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
    </style>
</head>
<body>
    <br><br>
    <div class="ui container gradientbg">
        <div class="ui stackable grid">
            <div class="six wide column statusIcon" data-aos="fade-right"  align="center">
                <img id="wifiicon" class="ui small image"  src="../network/img/wifi-on.svg">
                <div id="status">Loading...</div>
            </div>
            <div class="ten wide column">
                <div class="ui container" style="padding: 4em;" data-aos="fade-left">
                    <div class="ui segment">
                        <h4 class="ui header">
                            <i class="signal icon"></i>
                            <div class="content">
                                <span id="SSID"><i class="loading spinner icon"></i> Loading...</span>
                                <div class="sub header" >WiFi SSID</div>
                            </div>
                        </h4>
                        <h4 class="ui header">
                            <i class="globe icon"></i>
                            <div class="content">
                                <span id="Interface">Loading...</span>
                                <div class="sub header">Interface</div>
                            </div>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ui container" style="margin-top: 2em;">
        <div class="ui divider"></div>
        <small>WiFi information is supplied by wpa-supplicant or nmcli on Linux and Wireless AutoConfig Service (wlansvc) on Windows</small>
    </div>
    <script>
        AOS.init();

        initWifiInfo();
        function initWifiInfo(){
            $.ajax({
                url: "../../system/network/wifiinfo",
                method:"GET",
                success: function(data){
                    if (data.error !== undefined){
                        $("#SSID").text("N/A");
                        $("#Interface").text("loopback");
                        $("#status").text("Access Error");
                        $("#wifiicon").attr('src', "../network/img/wifi-off.svg");
                        console.log(data.error);
                    }else if (data.ESSID == "" && data.Interface != ""){
                        //Have WiFi interface but not connected to any hostspot
                        $("#SSID").text("N/A");
                        $("#Interface").text(data.Interface);
                        $("#status").text("Standby");
                        $("#wifiicon").attr('src', "../network/img/wifi-on.svg");
                    }else if (data.Interface == ""){
                        //No WiFi Interface
                        $("#SSID").text("N/A");
                        $("#Interface").text("No WiFi Interface");
                        $("#status").html(`<i class="ui remove icon"></i> Missing WiFi Interface`);
                        $("#wifiicon").attr('src', "../network/img/wifi-noiface.svg");
                        $("#status").addClass("error");
                    }else{
                        //Connection Established
                        $("#SSID").text(data.ESSID);
                        $("#Interface").text(data.Interface);
                        $("#status").html(`<i class="ui checkmark icon"></i> Connected`);
                        $("#wifiicon").attr('src', "../network/img/wifi-on.svg");
                        $("#status").addClass("connected");
                    }
                }
            });
        }
    </script>
</body>

</html>