<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Device {{ device }}{% endblock %}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='codebase/dhtmlx.css') }}"/>
<script type=text/javascript src="{{ url_for('static', filename='jquery-2.2.1.js') }}"></script>
<script src="{{ url_for('static', filename='codebase/dhtmlx.js') }}"></script>
<script src="{{ url_for('static', filename='check_err.js') }}"></script>
<script>
var propsTree
function createPropertyTree(branch, id) {
function getPropertyItemsOnLevel(branch, id) {
pathToProperties = "{{ url_for('get_property_list_json') }}"
completePath = pathToProperties + '?branch=' + branch
$.getJSON(completePath,
function(json) {
checkError(json)
parsePropertyItems(json, branch, id)
});
}
function parsePropertyItems(json, branch, id) {
function loadPropertyInfo(branch) {
var pathToProperties = "{{ url_for('get_property_list') }}"
var completePath = pathToProperties + '?branch=' + branch
$("#prop_info_place").load(completePath)
}
function setPropertyField(id, name, branch) {
var func = function(){loadPropertyInfo(branch)}
propsTree.insertNewItem(id, branch,
name,
func);
propsTree.closeAllItems()
}
for(var i = 0; i < json.length; i++) {
setPropertyField(id, json[i].name, json[i].path)
if(json[i].flags.indexOf("childs") != -1)
getPropertyItemsOnLevel(json[i].path, json[i].path)
}
}
getPropertyItemsOnLevel(branch, id)
}
var regTree
function createRegistersList() {
function parseJsonRegisterList(json) {
checkError(json)
if(json.lenght <= 0)
return
//sort registers by bank
function compareRegistersByBank(a,b) {
if (a.bank < b.bank)
return -1;
else if (a.bank > b.bank)
return 1;
else
return 0;
}
json.sort(compareRegistersByBank)
//create bank dirs
var curBankName = json[0].bank
var created = 0
for(var i = 0; i < json.length; i++) {
//create new bank tab if it has not created already
if(json[i].bank != curBankName) {
curBankName = json[i].bank
created = 0
}
if(!created) {
regTree.insertNewItem(0, json[i].bank, json[i].bank, 0);
created = 1
}
//insert register info to bank
function loadRegisterInfo(bank, name) {
var pathToGetProperty = "{{ url_for('get_register_info') }}"
var completePath = pathToGetProperty + '?bank=' + bank +
'&name=' + name
$("#reg_info_place").load(completePath)
}
function setRegisterField(id, bank, name) {
var itemId = bank + "_" + name
var func = function(){loadRegisterInfo(bank, name)}
regTree.insertNewItem(id, itemId, name, func)
regTree.closeAllItems()
}
setRegisterField(json[i].bank, json[i].bank, json[i].name)
}
}
//get registers json list
getRegistersListPath = "{{ url_for('get_registers_list_json') }}"
$.getJSON(getRegistersListPath, parseJsonRegisterList);
}
function doOnLoad()
{
propsTree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
propsTree.setImagePath("codebase/imgs/dhxtree_skyblue/");
//generating properties list
createPropertyTree('', 0)
regTree = new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0,0,0,0,'SELECT')
regTree.setImagePath("codebase/imgs/dhxtree_skyblue/");
createRegistersList()
}
</script>
</head>
<body onload="doOnLoad()">
{% block info %}
<div class="block1" >
<h2>Device {{ device }} model={{ model }} control page </h2>
</div>
{% endblock %}
<style>
.tabs > div, .tabs > input { display: none; }
.tabs label {
padding: 5px;
border: 1px solid #aaa;
line-height: 28px;
cursor: pointer;
position: relative;
bottom: 1px;
background: #fff;
}
.tabs input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }
.tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2) {
display: block;
padding: 5px;
border:
1px solid #aaa;
}
.tree {
height: 85vh;
padding: 5px;
border: 1px solid #aaa;
line-height: 28px;
cursor: pointer;
position: relative;
bottom: 1px;
background: #fff;
overflow:auto;
}
.infoTable {
padding: 5px;
border: 1px solid #aaa;
line-height: 28px;
cursor: pointer;
position: relative;
background: #fff;
overflow:auto;
bottom: 1px;
text-align: left;
}
</style>
<div class="tabs">
<input type="radio" name="current" checked="checked" id="props_id"/>
<label for="props_id">Properties</label>
<input type="radio" name="current" id="labels_id"/>
<label for="labels_id">Registers</label>
<div>
<table>
<tr>
<td valign="top">
<div id="treeboxbox_tree" class = "tree"></div>
</td>
<td valign="top" id="prop_info_place" />
</tr>
</table>
</div>
<div>
<table>
<tr>
<td valign="top">
<div id="treeboxbox_tree2" class="tree"></div>
</td>
<td valign="top" id="reg_info_place" />
</tr>
</table>
</div>
</div>
{% block content %}
{% endblock %}
</body>
</html>