TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
							<html>
<head>
    <meta name="apple-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">
    <title>ArozOS IoT Hub</title>
    <link rel="stylesheet" href="../../../script/tocas/tocas.css">
    <link rel="manifest" href="manifest.json">
    <script src="../../../script/tocas/tocas.js"></script>
    <script src="../../../script/jquery.min.js"></script>
    <script src="../../../script/ao_module.js"></script>
    <style>
        .ultrasmall.image{
            height:35px;
            margin:0px !important;
            margin-right:10px !important;
        }
        .selectable{
            cursor:pointer;
        }
        .selectable:hover{
            background-color:#f0f0f0;
            
        }
        .noborder{
            border: 1px solid transparent !important;
        }
        .controlBtn{
            position:absolute;
            right:8px;
            bottom:8px;
        }
        .devIcon{
            border-radius: 10px;
        }
        .primary.button{
            background-color: #4aa9eb !important;
        }
        .bottom.item{
            position:absolute;
            bottom: 0px;
            left:0px;
            width:100%;
            font-size:80%;
        }
        #sideMenu{
            height: calc(100% - 85px);
        }
        body{
            height:100%;
            background:rgba(247,247,247,0.95);
        }
    </style>
</head>
<body>
    <div class="ts right sidebar overlapped vertical menu">
        	<div class="item">
        		<div class="ts header">
        			ArozOS IoT Hub
        			<div class="sub header">Universal IoT Controller</div>
        		</div>
        	</div>
        	<a class="selectable item" onClick="loadDevList();hideSideMenu();">
                <i class="refresh icon"></i> Refresh List
            </a>
        	<a class="selectable item" onClick="scanDevices();hideSideMenu();">
                <i class="search icon"></i> Scan Devices
            </a>
			
        	<div class="bottom item">
                CopyRight ArozOS Project 2021
            </div>
    </div>

    <div class="pusher">
        <div class="ts menu">
            <a class="item noborder" href="index.html"><img class="ts ultrasmall circular image" src="img/main_icon.png"> IoT Hub</a>
            <a class="right item" onClick="toggleSideMenu();"><i class="content icon"></i></a>
        </div>
        <div id="devList" class="ts container">

        </div>
        <br><br><br>
    </div>
    
            <div id="moreInfoInterface" class="ts active dimmer" style="display:none;">
        	<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;" onClick='$("#moreInfoInterface").fadeOut("fast");'>
        	
        	</div>
        	<div id="informationItnerface" class="ts segment mainUI" style="height:80%;width:95%;overflow-y:auto;">
    		<div class="ts header">
    			Device Properties
    		</div><br>
    		<div class="ts horizontal form">
    			<div class="field">
    				<label>Device UUID</label>
    				<input id="duid" type="text" readonly="true">
    			</div>
    			<div class="field">
    				<label>Last Seen IP Address</label>
    				<input id="lastseen" type="text"  readonly="true">
    			</div>
    			<div class="field">
    				<label>Device Driver Identifier</label>
    				<input id="ddi" type="text"  readonly="true">
    			</div>
    			<div class="field">
    				<label>Device Information</label>
    				<input id="dinfo" type="text"  readonly="true">
    			</div>
    			<div class="field">
    				<label>Driver Found</label>
    				<input id="driverfound" type="text"  readonly="true">
    			</div>
    		</div>
    		<br>
    		<button class="ts primary button"  onClick='$("#moreInfoInterface").fadeOut("fast");'>Close</button>
    		<br><br>
    	</div>
    </div>
    
    
    <div id="actionInterface" class="ts active dimmer" style="display:none;">
    	<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;" onClick='$("#actionInterface").fadeOut("fast");'>
    	
    	</div>
    	<div id="actionMainUI" class="ts segment mainUI" style="height:80%;width:95%;">
    		<iframe id="controlUI" src="" width="500px" height="800px"> </iframe>
    	</div>
    </div>
    
    <div id="nickNameSelector" class="ts active dimmer" style="display:none;">
    	<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;" onClick='$("#nickNameSelector").fadeOut("fast");'>
    	
    	</div>
    	<div id="nicknameSelectorUI" class="ts segment mainUI" style="height:80%;width:95%;overflow-y:auto;">
    		<div class="ts header">
    			<div class="content">
    				Nickname Settings
    				<div class="sub header">Please select an UUID from below for changing its nickname.</div>
    			</div>
    		</div>
    		<div class="ts container">
    			<div id="nicknameChangeList" class="ts list">
    				
    			</div>
    		</div>
    	</div>
    </div>
    
    <div id="manualDevConfig" class="ts active dimmer" style="display:none;">
    	<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;" onClick='$("#manualDevConfig").fadeOut("fast");'>
    	
    	</div>
    	<div id="manualDevConfigUI" class="ts segment mainUI" style="height:80%;width:95%;">
    		<div class="ts header">
    			<div class="content">
    				Manual Device Configuration
    				<div class="sub header">Add devices that runs other protocol to the system</div>
    			</div>
    		</div>
    		<div class="ts container">
    		    <button class="ts primary tiny button" onClick="addDevViaIP();"><i class="add icon"></i>Add device via IP</button>
    		    <button class="ts tiny button" onClick="openFolderForDev();"><i class="folder icon"></i>Open device folder</button>
    		    <p>Current list of Non-HDS Devices</p>
    		    <div id="customDevList" class="ts ordered list">
                    <div class="item">Loading</div>
                </div>
    		</div>
    	</div>
    </div>
     <div id="loadingMask" class="ts active dimmer" style="display:none;">
        <div class="ts text loader">Loading</div>
    </div>
<script>
var currentlyViewingDevices = "";
var uselocal = false; //Use Local as command sender or use Host as command sender
var username = $("#data_session_username").text().trim();
//ao_module Float Window functions
ao_module_setWindowTitle("IoT Hub");
ao_module_setWindowSize(465,730,true);
if (!ao_module_virtualDesktop){
    $("body").css("background-color","white");
}

//Initiate the page content
loadDevList();

    
function inputbox(message, placeholder = ""){
    var input = prompt(message, placeholder);
    if (input != null) {
      return input;
    }else{
      return false;
    }
}


function scanDevices(){
    
}


function hideSideMenu(){
	ts('.right.sidebar').sidebar('hide');
}

function showMore(object){
	var device = $(object).parent().parent();
	var duid = device.attr("uuid");
	var lastseen = device.attr("devip");
	var ddi = device.attr("classtype");
	var dinfo = device.attr("classname");
	var dfound = device.attr("driverfound");
	if (duid === undefined){
		duid = "Unknown";
		$("#setNicknameButton").hide();
	}else{
		$("#setNicknameButton").show();
	}
	if (dfound === undefined){
		dfound = "Offline";
	}
	$("#duid").val(duid);
	$("#lastseen").val(lastseen);
	$("#ddi").val(ddi);
	$("#dinfo").val(dinfo);
	$("#driverfound").val(dfound);
	currentlyViewingDevices = duid;
	$("#moreInfoInterface").fadeIn('fast');
}


function loadDevList(){
	$("#devList").html("");
	$.get("../../../system/iot/list", function(data){
		 if (data.error !== undefined){
			 alert(data.error);
		 }else{
			data.forEach(device => {
				deviceData = encodeURIComponent(JSON.stringify(device));
				$("#devList").append(`<div class="ts segment HDSDev" devicedata="${deviceData}" uuid="${device.DeviceUUID}" devIp="${device.IPAddr}" port="${device.Port}" location="local">
					<div class="ts grid">
						<div class="four wide column"><img class="ts tiny devIcon image" src="img/system/loading.gif"></div>
						<div class="twelve wide column">
							<div class="ts container">
								<div class="ts header">
									<span class="devHeader">${device.Name}</span>
									<div class="sub devProperty header">${device.Model}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="controlBtn infoMount">
						<button class="ts icon button" onClick="showMore(this);"><i class="notice icon"></i></button>
						<button class="ts primary icon button" onClick="action(this);"><i class="external icon"></i></button>
					</div>
				</div>`);
			});
			
		 }
	});
}

function toggleSideMenu(){
	//$("#sideMenu").toggle();
	ts('.right.sidebar').sidebar('toggle');
}

function updateIframeSize(){
	$("#controlUI").attr("width",$("#actionMainUI").width());
	$("#controlUI").attr("height",$("#actionMainUI").height());
	$("#controlUI").css("width",$("#actionMainUI").width());
	$("#controlUI").css("height",$("#actionMainUI").height());
}

$(window).on("resize",function(){
	updateIframeSize();
});
</script>
</body>
</html>