diff options
Diffstat (limited to 'html_server/templates/base.html')
| -rw-r--r-- | html_server/templates/base.html | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/html_server/templates/base.html b/html_server/templates/base.html new file mode 100644 index 0000000..639dc00 --- /dev/null +++ b/html_server/templates/base.html @@ -0,0 +1,219 @@ +<!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> |