TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!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>
        <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 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(" / ");
                            console.log(host.MacAddr);
                            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);
                }
            });


        }
       
    </script>
</body>
</html>