TC
/
HomeDynamic


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
							<?php
include_once '../auth.php';
?>
<html>
<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"/>
<head>
<script type='text/javascript' charset='utf-8'>
    // Hides mobile browser's address bar when page is done loading.
      window.addEventListener('load', function(e) {
        setTimeout(function() { window.scrollTo(0, 1); }, 1);
      }, false);
</script>
<title>Homdynm UI</title>
<link rel="stylesheet" href="script/tocas/tocas.css">
<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 menu">
	<a class="item noborder" href="index.php"><img class="ts ultrasmall circular image" src="img/main_icon.png"> Homdynm UI</a>
	<a class="right item" onClick="toggleSideMenu();"><i class="content icon"></i></a>
</div>
<!-- Side bar on the right -->
<div id="sideMenu" class="ts static visible right sidebar vertical menu" style="display:none;">
	<div class="item">
		<div class="ts header">
			Homdynm UI
			<div class="sub header">Prototype Build v0.0.1</div>
		</div>
	</div>
	<a class="selectable item" onClick="loadDevList();hideSideMenu();">
        <i class="refresh icon"></i> Refresh List
    </a>
	<a class="selectable item" onClick="hideSideMenu();" href="hds_scan.php">
        <i class="search icon"></i> Scan Devices
    </a>
	<a class="selectable item" onClick="manualDriverConfig();">
        <i class="edit icon"></i> Manual Device Config
    </a>
	<a class="selectable item" onClick="initNicknameChangeList();">
        <i class="tags icon"></i> Set Nickname
    </a>
	<a class="selectable item">
        <i class="object group icon"></i> Create Action Group
    </a>
	<a class="selectable item">
        <i class="external icon"></i> Start Control Panel
    </a>
	
	<div class="bottom item">
        CopyRight ArOZ Online Project 2019
    </div>
</div>
<div id="devList" class="ts container">

</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>
		<button id="setNicknameButton" class="ts button"  onClick='setNickname();'>Set Nickname</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>
<script>
//Initiate the page content
loadDevList();
var currentlyViewingDevices = "";

//ao_module Float Window functions
ao_module_setWindowIcon("home");
ao_module_setWindowTitle("Homdynm UI");
ao_module_setGlassEffectMode();
ao_module_setWindowSize(465,730,true);
if (!ao_module_virtualDesktop){
    $("body").css("background-color","white");
}


function inputbox(message, placeholder = ""){
    var input = prompt(message, placeholder);

    if (input != null) {
      return input;
    }else{
      return false;
    }
}

function addDevViaIP(){
    var ipaddr = inputbox("Please enter the IP Address of your device.");
    if (ipaddr != false){
         var classType = inputbox("Select the custom driver for this device. Leave empty for default.");
         if (classType == false){
             alert("Driver Type cannot be empty!");
             return;
         }
        $.get("manualDriverConfig.php?ipaddr=" + ipaddr + "&classType=" + classType,function(data){
            //Finished the adding process. Realod the list of custom devices.
            loadCustomDeviceList();
        });
    }else{
        //User cancelled the opr
    }
   
}

function openFolderForDev(){
    if (ao_module_virtualDesktop){
        ao_module_openPath("Homdynm/devices");
    }else{
        window.open('../SystemAOB/functions/file_system/index.php?controlLv=2&subdir=Homdynm/devices');
    }
}

function loadCustomDeviceList(){
    $("#customDevList").html("");
    $.ajax("manualDriverConfig.php").done(function(data){
        if (data.length == 0){
            $("#customDevList").append('<div class="item">N/A</div>');
        }else{
            for (var i =0; i < data.length; i++){
                $("#customDevList").append('<div class="item">' + data[i][1] + " <br>( Config UID: " + data[i][0] + " / Driver Loader: " + data[i][2] +  ")" + '</div>');
            }
        }
    });
}

function manualDriverConfig(){
    //Open manual driver configuration interface
    loadCustomDeviceList();
    $("#manualDevConfig").show();
    hideSideMenu();
}

function setSelectNickname(object){
	currentlyViewingDevices = $(object).attr("uuid");
	setNickname();
}

function initNicknameChangeList(){
	hideSideMenu();
	var template = '<a class="item" uuid="{uuid}" onClick="setSelectNickname(this);">\
					<i class="hashtag icon"></i>\
					<div class="content">\
						<div class="header">Current Nickname: {currentNickname}</div>\
						<div class="description">Device UUID: {uuid} / Device Type: {devClassName}</div>\
					</div>\
				</a>';
	$("#nicknameChangeList").html("");
	$(".HDSDev").each(function(){
	    if ($(this).attr("className") != "offline" && $(this).attr("className") !== undefined){
    		var uuid = $(this).attr("uuid");
    		var devClassname = $(this).attr("classname");
    		var nickName = $(this).attr("nickname");
    		if (nickName === undefined){
    			//This devices has no old nickname
    			nickName = uuid;
    		}
    		var box = template;
    		box = box.split("{uuid}").join(uuid);
    		box = box.split("{currentNickname}").join(nickName);
    		box = box.split("{devClassName}").join(devClassname);
    		$("#nicknameChangeList").append(box);
	    }
	});
	$("#nickNameSelector").fadeIn('fast');
}

function setNickname(){
	var newnickname = prompt("Please enter a nickname for this devices.", "");
	if (newnickname == null || newnickname == ""){
		//Opr canceld
	}else{
		if (currentlyViewingDevices != "Unknown"){
			$.ajax("nicknameman.php?nickname=" + newnickname + "&uuid=" + currentlyViewingDevices).done(function(data){
				loadDevList();
				$("#moreInfoInterface").fadeOut('fast');
				$("#nickNameSelector").fadeOut('fast');
			});
		}else{
			alert("Error. Unknown device UUID");
		}
	}
}

function hideSideMenu(){
	$("#sideMenu").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 action(object){
	
	var classType = $(object).parent().parent().attr("classtype");
	var driverFound = ($(object).parent().parent().attr("driverfound") == "true");
	var ip = $(object).parent().parent().attr("devip");
	if (driverFound){
		$("#actionInterface").fadeIn('fast');
		updateIframeSize();
		$("#controlUI").attr("src","drivers/" + classType + "/" + classType + ".php?ip=" + ip);
	}else{
		alert("Driver not found!");
	}
}

function loadDevList(){
	$("#devList").html("");
	var template = '<div class="ts segment HDSDev" devIp="{deviceIP}">\
							<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">{deviceIP}</span>\
											<div class="sub devProperty header"><i class="spinner loading icon"></i> Loading</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>';	
	$.ajax("loadDevList.php").done(function(data){
		if (data.length == 0){
			var nodevFound = '<div class="ts segment">\
			<h5 class="ts center aligned icon header">\
				<i class="remove icon"></i>No Device Found\
					<div class="sub header">No HDS based device is found in your network.<br>\
					Click <a href="readmore.html">here</a> to know more on how to build one yourself.</div>\
				</h5>\
			</div>';
			$("#devList").append(nodevFound);
		}else{
			for (var i =0; i < data.length; i++){
				var ip = data[i];
				var box = template;
				box = box.split("{deviceIP}").join(ip);
				$("#devList").append(box);
			}
		}
		
		//All devices loaded. Get information about the devices.
		$(".HDSDev").each(function(){
			let ip = $(this).attr("devIp");
			requestInfo("http://" + ip + "/info",this);
			requestUUID("http://" + ip + "/uuid",this);
		});
	});
	$.ajax("manualDriverConfig.php").done(function(data){
	    for(var i =0; i < data.length; i++){
	        var uuid = data[i][0];
	        var ipaddr = data[i][1];
	        var classType = data[i][2];
	        var box = template;
	        box = box.split("{deviceIP}").join(ipaddr);
	        box = $(box).attr("uuid",uuid);
	        box = $(box).attr("classtype",classType);
	        box = $(box).attr("classname",classType.split(".").join(" "));
	        box = $(box).removeClass("HDSDev").addClass("CustomDev");
	        $("#devList").append(box);
	    }
	    initCustomDevUI();
	});
}

function initCustomDevUI(){
    $(".CustomDev").each(function(){
        var classType = $(this).attr("classtype");
        loadDevImage(classType,this);
        loadDevDefaultDescription(this);
        getNickName(this);
    });
}

function loadDevDefaultDescription(object){
    var classType = $(object).attr("classtype");
    $.ajax("loadDriverProperties.php?classType=" + classType).done(function(data){
        $(object).find(".devProperty").text(data);
    });
}


function requestUUID(targetAddress, object){
	$.ajax({
    url: targetAddress,
    error: function(){
        //Declare offline
		
    },
    success: function(data){
        //UUID found.
		var uuid = data;
		$(object).attr("uuid",uuid);
		$(object).find(".devHeader").text(uuid);
		getNickName(object);
    },
    timeout: 5000 // sets timeout to 3 seconds
	});
}

function getNickName(object){
	$.ajax({
    url: "nicknameman.php?uuid=" + $(object).attr("uuid"),
    success: function(data){
        //UUID found.
		if (data != false){
			//Replace the uuid with nickname
			$(object).find(".devHeader").text(data);
			$(object).attr("nickname",data);
		}
    },
    timeout: 5000 // sets timeout to 3 seconds
	});
}

function requestInfo(targetAddress,object){
	//This function should work if both devices are in the same subnet. If not, something else will be done.
	$.ajax({
    url: targetAddress,
    error: function(){
        //Declare offline
		$(object).attr("className","offline");
		$(object).attr("classType","offline");
		$(object).find(".devHeader").html("<i class='remove icon'></i> Unable to Connect");
		$(object).find(".devProperty").html("This device is offline or its address has been changed.");
		$(object).find(".devIcon").attr('src',"img/system/unable2connect.png");
    },
    success: function(data){
        //Device in the same subnet. Try to load driver.
		if (data.includes("_")){
			var className = data.split("_")[0];
			var classType = data.split("_")[1];
			$(object).attr("className",className);
			$(object).attr("classType",classType);
			$(object).find(".devProperty").html(className);
			loadDevImage(classType,object);
		}else{
			console.log("[Homdynm] Error. Unknown devices class for ip address: " + $(object).attr("devIP"));
		}
		
    },
    timeout: 5000 // sets timeout to 3 seconds
	});
}

function loadDevImage(classType,object){
	$.ajax("loadDevImage.php?driverClass=" + classType).done(function(data){
		$(object).find(".devIcon").attr('src',data[0]);
		$(object).attr("driverFound",data[1]);
		if (data[1] == false){
			//Driver not found. Update the icon
			$(object).find(".devIcon").attr('src',"img/system/driverNotFound.png");
			
		}
	});
}

function toggleSideMenu(){
	$("#sideMenu").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>