TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
							<!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>
    <title>WiFi Settings</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
     
    </style>
</head>
<body>
    <div class="ui container">
        <div class="ui horizontal segments">
            <div class="ui segment">
                <h4 class="ui header">
                    <i class="signal icon"></i>
                    <div class="content">
                        <span id="SSID">Loading...</span>
                        <div class="sub header">WiFi SSID</div>
                    </div>
                </h4>
            </div>
            <div class="ui segment">
                <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>
        <!-- WiFi Interface Toggle -->
        <div class="ui segment">
            <p>Wireless Interface Power Toggle</p>
            <div class="ui green message" id="updateSucceedMessage" style="display:none;">
                 <p><i class="checkmark icon"></i> Interface Status Updated</p>
            </div>
            <form class="ui form" id="wlanlist">
                <p><i class="remove icon"></i> No wlan interface attached</p>
            </form>
        </div>

        <!-- WiFi Scanning Results-->
        <div>
            <table class="ui very basic celled table">
            <thead>
                <tr>
                    <th>Wifi Access Points</th>
                    <th>Signal Level (Quality)</th>
                    <th>Physical Address</th>
                    <th>Connect</th>
                    <th>Remove</th>
                </tr>
            </thead>
            <div class="ui container">
                <button class="ui small button" onclick="initWiFiScan();"><i class="refresh icon"></i> Rescan</button>
            </div>
            <tbody id="wifilist">
                <tr>
                    <td><i class="loading spinner icon"></i> Scanning Nearby WiFi Access Points</td>
                </tr>
            </tbody>
            </table>
        </div>
    <br><br><br>
    </div>
    <!-- WiFi Connection Interface-->
    <div class="ui modal">
        <i class="close icon"></i>
        <div class="header">
            <span id="wifiName"></span>
        </div>
        <div class="image content">
            <div class="ui mini image">
            <img id="wifiImage" src="">
            </div>
            <div class="description" style="min-width:400px;">
            <div class="ui header">Credential Required</div>
                <div class="ui labeled fluid input" style="margin-top:12px;">
                    <div class="ui teal label">
                        SSID
                    </div>
                    <input type="text" value="" id="ssid" readonly=true>
                </div>
        
                <div class="ui labeled action fluid input" style="margin-top:12px;">
                    <div class="ui teal label">
                        Password
                    </div>
                    <input type="password" id="pwd">
                    <button class="ui icon black button"  onmousedown="showPassword();" onmouseup="hidePassword();" ontouchstart="showPassword();" ontouchend="hidePassword();">
                        <i class="eye icon"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui black deny button">
            Cancel
            </div>
            <div class="ui positive right labeled icon button" onclick="confirmConnection();">
            Connect
            <i class="checkmark icon"></i>
            </div>
        </div>
    </div>

    <script>
        var retryCount = 0;
        //Delete all previous modal if exists
        //Funny bug of Semantic ui
        for (var i =1; i < $(".ui.modal").length; i++){
            $($(".ui.modal")[i]).remove();
        }
        initWiFiScan();
        initWlanPower();
        function initWiFiScan(){
            $("#wifilist").html(` <tr>
                <td><i class="loading spinner icon"></i> Scanning Nearby WiFi Access Points</td>
            </tr>`);
            $.get("../../system/network/scanWifi",function(data){
                if (data.error != undefined){
                    console.log(data.error);
                    if (retryCount > 5){
                        //Stop retrtying
                        $("#wifilist").html(` <tr>
                            <td><i class="remove icon"></i> WiFi Scanning Failed</td>
                        </tr>`);
                        return
                    }
                    //Unknown error. Rescan later
                    setTimeout(function(){
                        initWiFiScan();
                    },3000);
                    retryCount++;
                }else{
                    retryCount = 0;
                    $("#wifilist").html("");
                    for (var i = 0; i < data.length; i++){
                        var thisWiFi = data[i];
                        var signalLevel = thisWiFi.SignalLevel.split(" ").shift();
                        var signalIcon = "signal_0.svg"
                        var warninglevel = 0;
                        try{
                            signalLevel = parseInt(signalLevel);
                            if (signalLevel > -50){
                                signalIcon = "signal_5.svg";
                            }else if (signalLevel > -60){
                                signalIcon = "signal_4.svg";
                            }else if (signalLevel > -70){
                                signalIcon = "signal_3.svg";
                            }else if (signalLevel > -80){
                                signalIcon = "signal_2.svg";
                                warninglevel = 1;
                            }else{
                                signalIcon = "signal_1.svg";
                                warninglevel = 2;
                            }
                        }catch(ex){
                             
                        }

                        //This WiFi might be too week to connect
                        classname = "";
                        if (warninglevel == 0){
                            classname = "positive";
                        }

                        //Only add remove button if the WiFi is connected before
                        removeHTML = "";
                        if (thisWiFi.ConnectedBefore){
                            removeHTML = `<a href="#">Remove</a>`;
                        }

                        //Check if this WiFi has been connected. If yes, hide the connect button
                        var connBtn = ` <td class="selectable" conncetedBefore="${thisWiFi.ConnectedBefore}" image="${signalIcon}" targetESSID="${thisWiFi.ESSID}" onclick="connectThis(this, event);">
                            <a href="#">Connect</a>
                        </td>`;
                        if (thisWiFi.ESSID == $("#SSID").text().trim()){
                            connBtn = `<td conncetedBefore="${thisWiFi.ConnectedBefore}">
                            <i class="checkmark icon"></i>
                        </td>`;
                        }

                        $("#wifilist").append(`<tr class="${classname}">
                        <td>
                            <h4 class="ui image header">
                                <img src="../network/img/${signalIcon}" class="ui mini rounded image">
                                <div class="content">
                                    ${thisWiFi.ESSID}
                                    <div class="sub header"> ${thisWiFi.Frequency} (Channel ${thisWiFi.Channel})
                                </div>
                                </div>
                            </h4>
                        </td>
                        <td>
                            ${thisWiFi.SignalLevel} ( ${thisWiFi.Quality})
                        </td>
                        <td>
                            ${thisWiFi.Address}
                        </td>
                        ${connBtn}
                        <td class="selectable"  image="${signalIcon}" targetESSID="${thisWiFi.ESSID}" onclick="removeThis(this, event);">
                            ${removeHTML}
                        </td>
                    </tr>`);
                    }
                   
                }   
            });
        }

        function initWlanPower(){
            $.get("../../system/network/power", function(data){
                $("#wlanlist").html("");
                if (data.error != undefined){
                    console.log(data.error);
                }else{
                   
                    data.forEach(interface => {
                        var checked = "false";
                        if (interface.Running){
                            checked = "true";
                        }
                        $("#wlanlist").append(`<div class="field"><div class="ui toggle checkbox" id="${interface.Name}">
                            <input type="checkbox" name="${interface.Name}" tabindex="0" class="hidden">
                            <label><i class="wifi icon"></i> ${interface.Name}</label>
                        </div></div>`);
                        if (interface.Running){
                            $("#" + interface.Name).checkbox("check");
                        }else{
                            $("#" + interface.Name).checkbox("uncheck");
                        }
                        
                        $("#" + interface.Name).find("input").attr("onchange","handleInterfacePowerToggle(this);")
                        
                    });

                }
            }); 
        }

        function handleInterfacePowerToggle(object){
            var toggleState = object.checked;
            var interfaeName = $(object).attr("name");
            var status = "on";
            if (toggleState == true){
                status = "on";
            }else{
                status = "off";
            }
            $.ajax({
                url: "../../system/network/power",
                data: {status: status, interface: interfaeName},
                success: function(data){
                    console.log(data);
                    initWlanPower();
                    $("#updateSucceedMessage").stop().finish().slideDown("fast").delay(5000).slideUp("fast");
                }
            })
        }

        function removeThis(obj, event){
            event.preventDefault();
            targetSSID = $(obj).attr("targetESSID");
            $.ajax({
                url: "../../system/network/removeWifi",
                data: {ESSID: targetSSID},
                success: function(data){
                    if (data.error !== undefined){
                        alert(data.error)
                    }else{
                        resetInterface();
                    }
                }
            });
        }

        function resetInterface(obj=undefined){
            $("#wifilist .selectable").removeClass("disabled");
            if (obj !== undefined){
                $(obj).html(`<a href="#">Connect</a>`);
            }
            initWiFiScan();
        }

        function connectThis(obj, event){
            $("#pwd").val("");
            targetSSID = $(obj).attr("targetESSID");
            event.preventDefault();
            //Create DOM elements
            $("#wifiName").text(targetSSID);
            $("#wifiImage").attr('src',"../network/img/" + $(obj).attr("image"));
            $("#ssid").val(targetSSID);
            
            //Check if this is connected before. If yes, send out AP switch request
            if ($(obj).attr("conncetedBefore") == "true"){
                var ESSID = $(obj).attr("targetESSID");
                $("#wifilist .selectable").addClass("disabled");
                $(obj).html(`<div class="ui active centered inline loader"></div>`);
                $.ajax({
                    url: "../../system/network/connectWifi",
                    data: {"ESSID": ESSID, "ConnType":"switch"},
                    method: "POST",
                    success: function(data){
                        console.log(data);
                        initWifiInfo();
                        resetInterface(obj);
                    },
                    error: function(){
                        $("#wifilist .selectable").removeClass("disabled");
                        resetInterface(obj);
                    },
                    timeout: 30000
                });
            }else{
                $('.ui.modal').modal('show');
            }
        }

        function confirmConnection(){
            var ESSID = $("#ssid").val();
            var PWD = $("#pwd").val();
            $("#wifilist .selectable").addClass("disabled");
            $.ajax({
                url: "../../system/network/connectWifi",
                data: {"ESSID": ESSID, "pwd": PWD},
                method: "POST",
                success: function(data){
                    console.log(data);
                    initWifiInfo();
                    resetInterface();
                },
                error: function(){
                    $("#wifilist .selectable").removeClass("disabled");
                    resetInterface();
                },
                timeout: 30000
            });
        }

        function showPassword(){
            $("#pwd").attr("type","text");
        }

        function hidePassword(){
            $("#pwd").attr("type","password");
        }

        //Also init WiFi view in this interface
        initWifiInfo();
        function initWifiInfo(){
            $.ajax({
                url: "../../system/network/wifiinfo",
                method:"GET",
                success: function(data){
                    if (data.error !== undefined){
                        $("#SSID").text("Access Failed");
                        $("#Interface").text("loopback");
                    }else{
                        $("#SSID").text(data.ESSID);
                        $("#Interface").text(data.Interface);
                    }
                }
            });
        }
    </script>
   
</body>

</html>