TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
							<!DOCTYPE html>
<html>
<head>
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
	<meta charset="UTF-8">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script src="../../script/jquery.min.js"></script>
	<script src="../../script/semantic/semantic.min.js"></script>
    <script src="../arsm/js/moment.min.js"></script>
    <style>
        .hidden{
            display:none;
        }
    </style>
</head>
<body>
    <div class="ui container">
        <div class="ui basic segment">
            <div class="ui header">
                <i class="server icon"></i>
                <div class="content">
                    Cluster Neightbourhood
                    <div class="sub header">Automatic Cluster Discovery Services</div>
                </div>
            </div>
        </div>
        
        <div class="ui divider"></div>
        <div class="ui red message" id="errbox" style="display:none;">
            <div class="header">
                Cluster Scan Error
            </div>
            <p id="errormsg">An unknown error has occurred. Please try again later.</p>
        </div>
        <h4 class="ui header">
            This Host
            <div class="sub header">The broadcasting information sent out by this host server.</div>
        </h4>
        <div class="ui basic segment" id="thisHost">
            
        </div>
        <div class="ui divider"></div>
        <h4 class="ui header">
            Nearby Hosts
            <div class="sub header">The ArozOS broadcast receiver from the Local Area Network.</div>
        </h4>
        <div class="ui basic segment" id="nearybylist">
            
        </div>
        <div class="ui divider"></div>
        <h4 class="ui header">
            Offline Hosts
            <div class="sub header">Host that goes offline for less than 30 days</div>
        </h4>
        <div class="ui basic segment" id="offlineList">
            
        </div>
        <small>All hosts that offline for more than 30 days will be automatically removed from the system record</small>
        <div class="ui divider"></div>
        <p>Last Updates: <span id="lastUpdateTime"></span> seconds ago</p>
        <br><br><br>
    </div>
    <script>

        initClusterScannerList();
        function initClusterScannerList(){
            $.get("../../system/cluster/scan", function(data){
                if (data.error !== undefined){
                    $("#errormsg").text(data.error);
                    $("#errbox").show();
                }else{
                    //Render this Host info
                    if (data.ThisHost != null){
                        var host = data.ThisHost
                        $("#thisHost").append(`<div class="ui icon green message">
                            <i class="server icon"></i>
                            <div class="content">
                                <div class="header">
                                    <a href="//${host.HostName}:${host.Port}" target="_blank">${host.HostName}</a>
                                </div>
                                <div class="ui list">
                                    <div class="item">
                                        <i class="disk icon"></i>
                                        <div class="content">
                                            <b>MODEL:</b> ${host.Model} (${host.Vendor})
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="paperclip icon"></i>
                                        <div class="content">
                                            <b>VER:</b> ${host.MinorVersion} (${host.BuildVersion})
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="marker icon"></i>
                                        <div class="content">
                                            <b>IP:</b> ${host.IPv4.join(" / ")}
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="tag icon"></i>
                                        <div class="content">
                                            <b>UUID:</b> ${host.UUID}
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="server icon"></i>
                                        <div class="content">
                                            <b>MAC:</b> ${host.MacAddr.join(" / ")}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`);
                    }

                    //Render remote host info
                    $("#nearybylist").html("");
                    if (data.NearbyHosts == null){
                        $("#nearybylist").append(`<div class="ui icon teal message">
                                <i class="question icon"></i>
                                <div class="content">
                                    No nearby hosts discovered
                                </div>
                            `);
                    }else{
                        data.NearbyHosts.forEach(host => {
                            var iplinks = [];
                            host.IPv4.forEach(ip => {
                                iplinks.push(`<a href="//${ip}:${host.Port}" target="_blank">${ip}</a>`);
                            }) 
                            var ipDOM = iplinks.join(" / ");
                            var macDOM = host.MacAddr.join(" / ");
                            if (host.MacAddr.length == 0){
                                //Old version of ArozOS, do not support MAC addr broadcast
                                macDOM = "Version Not Supported";
                            }
                            $("#nearybylist").append(`<div class="ui icon teal message">
                                <i class="server icon"></i>
                                <div class="content">
                                    <div class="header">
                                        <a href="//${host.HostName}:${host.Port}" target="_blank">${host.HostName}</a>
                                    </div>
                                    <div class="ui list">
                                        <div class="item">
                                            <i class="disk icon"></i>
                                            <div class="content">
                                                <b>MODEL:</b> ${host.Model} (${host.Vendor})
                                            </div>
                                        </div>
                                        <div class="item">
                                            <i class="paperclip icon"></i>
                                            <div class="content">
                                                <b>VER:</b> ${host.MinorVersion} (${host.BuildVersion})
                                            </div>
                                        </div>
                                        <div class="item">
                                            <i class="marker icon"></i>
                                            <div class="content">
                                                <b>IP:</b> ${ipDOM}
                                            </div>
                                        </div>
                                        <div class="item">
                                            <i class="tag icon"></i>
                                            <div class="content">
                                                <b>UUID:</b> ${host.UUID}
                                            </div>
                                        </div>
                                        <div class="item">
                                            <i class="server icon"></i>
                                            <div class="content">
                                                <b>MAC:</b> ${macDOM}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>`);
                            });
                    }

                   

                    //Update the update time
                    $("#lastUpdateTime").text(Math.floor(Date.now() / 1000) - data.LastUpdate);
                }
            });

            $.get("../../system/cluster/record", function(data){
                $("#offlineList").html("");
                if (data != null){
                    data.forEach(function(host){
                        let ipDOM = "No Record";
                        if (host.LastSeenIP != null && host.LastSeenIP.length > 0){
                            ipDOM = host.LastSeenIP.join(" / ");
                        }
                        let macDOM = "No Record";
                        let wakeOnLanButton = "";
                        if (host.MacAddr != null && host.MacAddr.length > 0){
                            macDOM = host.MacAddr.join(" / ");
                            wakeOnLanButton = `<button class="ui right floated basic button" mac="${encodeURIComponent(JSON.stringify(host.MacAddr))}" onclick="wakeonlan(this);"><i class="power icon"></i> Wake On LAN</button>`;
                        }
                        
                       
                        $("#offlineList").append(`<div class="ui icon message">
                         <i class="server icon"></i>
                            <div class="content">
                                ${wakeOnLanButton}
                                <div class="header">
                                    <span>${host.Name}</a>
                                </div>
                                <div class="ui list">
                                    <div class="item">
                                        <i class="disk icon"></i>
                                        <div class="content">
                                            <b>MODEL:</b> ${host.Model}
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="paperclip icon"></i>
                                        <div class="content">
                                            <b>VER:</b> ${host.Version}
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="marker icon"></i>
                                        <div class="content">
                                            <b>IP:</b> ${ipDOM}
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="tag icon"></i>
                                        <div class="content">
                                            <b>UUID:</b> ${host.UUID}
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="server icon"></i>
                                        <div class="content">
                                            <b>MAC:</b> ${macDOM}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`);
                    });
                }
                if (data == null || data.length == 0){
                    $("#offlineList").append(`<div class="ui message">
                        <div class="content">
                            <i class="checkmark icon"></i> No Offline Network Host
                        </div>
                    `);
                }
            });
        }

        function wakeonlan(object){
            $(object).addClass("disabled");
            let macAddr = $(object).attr("mac");
            macAddr = JSON.parse(decodeURIComponent(macAddr));
            let counter = macAddr.length;
            macAddr.forEach(function(thisMac){
                $.get("../../system/cluster/wol?mac=" + thisMac, function(data){
                    console.log("Wake On Lan packet sent to "  + thisMac + " with results: "+ data);
                    counter--;
                    if (counter == 0){
                        //All WOL packet has been sent
                        let currentButtonText = $(object).html();
                        $(object).addClass("green").addClass("icon");;
                        $(object).html(`<i class="green checkmark icon"></i>`);
                        setTimeout(function(){
                            $(object).removeClass("green").removeClass("remove");
                            $(object).html(currentButtonText);
                            $(object).removeClass("disabled");
                        }, 5000)
                    }
                });
            });
            
        }
       
    </script>
</body>
</html>