387 lines
14 KiB
HTML
387 lines
14 KiB
HTML
<style type="text/css">
|
|
#warning_message_box {
|
|
margin: 1rem;
|
|
padding: 1rem;
|
|
height: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cbi-progressbar {
|
|
border: 1px solid var(--border-color-high,var(--progressbarColor));
|
|
border-radius: 3px;
|
|
position: relative;
|
|
min-width: 170px;
|
|
height: 8px;
|
|
margin: 1.4em 0 4px 0;
|
|
background: var(--background-color-medium,var(--progressbarColor));
|
|
}
|
|
|
|
.cbi-progressbar > div {
|
|
background: var(--primary-color-medium,var(--progressbar));
|
|
height: 100%;
|
|
transition: width .25s ease-in;
|
|
width: 0%;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.cbi-progressbar::before {
|
|
position: absolute;
|
|
top: -1.4em;
|
|
left: 0;
|
|
content: attr(title);
|
|
white-space: pre;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
|
|
class LuciTable{
|
|
constructor(){
|
|
this.rows = [];
|
|
this.tbody;
|
|
this.fieldset;
|
|
this.init_table();
|
|
}
|
|
|
|
init_table(){
|
|
//create a luci fieldset (class cbi-section)
|
|
var fieldset = document.createElement('fieldset');
|
|
fieldset.className="cbi-section";
|
|
//set fieldset Header name
|
|
var legend = document.createElement('legend');
|
|
var title_span = document.createElement('h2');
|
|
title_span.className="panel-title"
|
|
//init table
|
|
var table = document.createElement('table');
|
|
var tbody = document.createElement('tbody');
|
|
table.className="table"
|
|
//save
|
|
this.fieldset = fieldset;
|
|
this.tbody = tbody
|
|
this.title_span = title_span
|
|
this.legend = legend
|
|
|
|
fieldset.appendChild(legend);
|
|
fieldset.appendChild(title_span);
|
|
table.appendChild(tbody)
|
|
fieldset.appendChild(table)
|
|
}
|
|
|
|
new_tr(data,index){
|
|
var type = data.type;
|
|
switch(type){
|
|
case "plain_text":
|
|
var key,value,full_name;
|
|
key = data.key;
|
|
value = data.value;
|
|
full_name = data.full_name ? data.full_name : key;
|
|
this.rows[index].left.innerHTML = full_name;
|
|
this.rows[index].right.innerHTML = value;
|
|
|
|
if (value == null || value == "") {
|
|
this.rows[index].row.style.display = "none";
|
|
}
|
|
else{
|
|
this.rows[index].row.style.display = "";
|
|
}
|
|
break;
|
|
case "progress_bar":
|
|
var key,title,min,max,precentage,full_name;
|
|
key = data.key;
|
|
full_name = data.full_name ? data.full_name : key;
|
|
title = `(${data.value}/${data.max_value}${data.unit})`
|
|
min = data.min_value;
|
|
max = data.max_value;
|
|
precentage = (data.value - min) / (max - min) * 100;
|
|
this.rows[index].left.innerHTML = full_name;
|
|
var progress_bar = document.createElement('div')
|
|
progress_bar.className = "cbi-progressbar"
|
|
progress_bar.title = title;
|
|
var progress_bar_bar = document.createElement('div')
|
|
progress_bar_bar.setAttribute("style","width:"+precentage+"%")
|
|
progress_bar.appendChild(progress_bar_bar)
|
|
this.rows[index].right.innerHTML = ""
|
|
this.rows[index].right.appendChild(progress_bar)
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
set title(value){
|
|
this.legend.innerHTML = value;
|
|
this.title_span.innerHTML = value;
|
|
}
|
|
|
|
set object_data(value){
|
|
var row_length = this.rows.length;
|
|
var value_length = Object.keys(value).length;
|
|
if (row_length < value_length) {
|
|
for ( let i = row_length; i < value_length; i++) {
|
|
let row = document.createElement('tr');
|
|
row.className = "tr"
|
|
let cell_left = document.createElement('td');
|
|
cell_left.classList.add("td")
|
|
cell_left.setAttribute("width","33%")
|
|
let cell_right = document.createElement('td');
|
|
cell_right.classList.add("td")
|
|
row.appendChild(cell_left);
|
|
row.appendChild(cell_right);
|
|
this.tbody.appendChild(row);
|
|
var row_dict = {
|
|
"row":row,
|
|
"left":cell_left,
|
|
"right":cell_right,
|
|
}
|
|
this.rows.push(row_dict);
|
|
}
|
|
}
|
|
else if(row_length > value_length){
|
|
for (let i = value_length; i < row_length; i++) {
|
|
this.tbody.removeChild(this.rows[i].row);
|
|
}
|
|
this.rows = this.rows.slice(0,value_length);
|
|
}
|
|
var index = 0;
|
|
for (var key in value) {
|
|
this.rows[index].left.innerHTML = key;
|
|
this.rows[index].right.innerHTML = value[key];
|
|
index++;
|
|
}
|
|
}
|
|
|
|
set array_data(value){
|
|
var row_length = this.rows.length;
|
|
var value_length = value.length;
|
|
if (row_length < value_length) {
|
|
for ( let i = row_length; i < value_length; i++) {
|
|
let row = document.createElement('tr');
|
|
row.className = "tr"
|
|
let cell_left = document.createElement('td');
|
|
cell_left.classList.add("td")
|
|
cell_left.setAttribute("width","33%")
|
|
let cell_right = document.createElement('td');
|
|
cell_right.classList.add("td")
|
|
row.appendChild(cell_left);
|
|
row.appendChild(cell_right);
|
|
this.tbody.appendChild(row);
|
|
var row_dict = {
|
|
"row":row,
|
|
"left":cell_left,
|
|
"right":cell_right,
|
|
}
|
|
this.rows.push(row_dict);
|
|
}
|
|
}
|
|
else if(row_length > value_length){
|
|
for (let i = value_length; i < row_length; i++) {
|
|
this.tbody.removeChild(this.rows[i].row);
|
|
}
|
|
this.rows = this.rows.slice(0,value_length);
|
|
}
|
|
for (let i = 0; i < value.length; i++) {
|
|
this.new_tr(value[i],i);
|
|
}
|
|
}
|
|
|
|
set data(value){
|
|
if (value == null) {
|
|
return;
|
|
}
|
|
if (Array.isArray(value)) {
|
|
this.array_data = value;
|
|
}
|
|
else{
|
|
this.object_data = value;
|
|
}
|
|
}
|
|
}
|
|
|
|
class ModemInfo {
|
|
constructor(cfg_id) {
|
|
this.data = null;
|
|
this.cfg_id = null;
|
|
this.modem_cfg_list = [];
|
|
this.tables = {};
|
|
this.cbi_map = document.getElementById("modem_" + cfg_id)
|
|
this.init_warning_message_box();
|
|
this.cfg_id = cfg_id;
|
|
}
|
|
|
|
init_warning_message_box()
|
|
{
|
|
var warning_message_box,title,message_box;
|
|
warning_message_box = document.createElement('div');
|
|
warning_message_box.className = "alert-message alert-danger";
|
|
warning_message_box.id = "warning_message_box";
|
|
title=document.createElement('strong');
|
|
title.innerHTML = "<%:Warning!%>";
|
|
message_box=document.createElement('div');
|
|
message_box.id = "warning_message";
|
|
warning_message_box.style.display = "none";
|
|
warning_message_box.appendChild(title);
|
|
warning_message_box.appendChild(message_box);
|
|
this.cbi_map.appendChild(warning_message_box);
|
|
this.message_box = message_box;
|
|
this.warning_message_box = warning_message_box;
|
|
}
|
|
|
|
warning_message(node_list)
|
|
{
|
|
this.warning_message_box.style.display = "";
|
|
this.message_box.innerHTML = ""
|
|
this.message_box.appendChild(node_list);
|
|
}
|
|
|
|
hide_warning_message()
|
|
{
|
|
this.warning_message_box.style.display = "none";
|
|
}
|
|
|
|
poll_info(){
|
|
if (this.cfg_id == null){
|
|
return;
|
|
}
|
|
XHR.poll(10,'<%=luci.dispatcher.build_url("admin", "modem", "qmodem", "modem_ctrl")%>',{
|
|
"cfg": this.cfg_id,
|
|
"action": "info",
|
|
"translate": "1"
|
|
}, (x,data) => {
|
|
this.view = data;
|
|
});
|
|
}
|
|
|
|
update(){
|
|
XHR.get('<%=luci.dispatcher.build_url("admin", "modem", "qmodem", "modem_ctrl")%>',{
|
|
"cfg": this.cfg_id,
|
|
"action": "info",
|
|
"translate": "1"
|
|
}, (x,data) => {
|
|
this.view = data;
|
|
});
|
|
}
|
|
|
|
update_modem_cfg_list(){
|
|
XHR.poll(5,'<%=luci.dispatcher.build_url("admin", "modem", "qmodem", "get_modem_cfg")%>',{},(x,data)=>{
|
|
var new_cfg_list = [];
|
|
var cfgs = data.cfgs;
|
|
for (let i = 0; i < cfgs.length; i++) {
|
|
var cfg = cfgs[i];
|
|
var name = cfg.name;
|
|
var value = cfg.cfg;
|
|
new_cfg_list.push({"value":value,"name":name});
|
|
}
|
|
if (new_cfg_list != this.modem_cfg_list) {
|
|
this.cfg_options = new_cfg_list;
|
|
}
|
|
});
|
|
}
|
|
|
|
set cfg_options(value){
|
|
var longger = this.modem_cfg_list.length > value.length ? this.modem_cfg_list : value;
|
|
if (longger.length == 0) {
|
|
return;
|
|
}
|
|
for (let i = 0; i < longger.length; i++) {
|
|
var option = this.selector.options[i];
|
|
if (i < value.length) {
|
|
if (i >= this.selector.options.length) {
|
|
option = document.createElement('option');
|
|
this.selector.appendChild(option);
|
|
}
|
|
option.value = value[i].value;
|
|
option.innerHTML = value[i].name;
|
|
|
|
}
|
|
else{
|
|
this.selector.removeChild(option);
|
|
}
|
|
}
|
|
this.cfg_id = this.selector.value;
|
|
this.modem_cfg_list = value;
|
|
this.update();
|
|
}
|
|
|
|
set view(data){
|
|
this.data = data;
|
|
if (data == null) {
|
|
return;
|
|
}
|
|
var keys = []
|
|
|
|
var tables_map = {}
|
|
|
|
var warning_message = [];
|
|
for (let entry of data){
|
|
let class_name,class_no_translate,full_name,value,type;
|
|
class_no_translate = entry.class_origin;
|
|
class_name = this.cfg_id + " <%:Base Information%>";
|
|
if (entry.type == "warning_message") {
|
|
continue;
|
|
}
|
|
if (class_no_translate != "Base Information" && entry.type != "progress_bar"){
|
|
continue
|
|
}
|
|
if (tables_map[class_name] == null) {
|
|
tables_map[class_name] = []
|
|
}
|
|
tables_map[class_name].push(entry);
|
|
}
|
|
for (let class_name in tables_map) {
|
|
if (this.tables[class_name] == null) {
|
|
this.tables[class_name] = new LuciTable();
|
|
this.cbi_map.appendChild(this.tables[class_name].fieldset);
|
|
}
|
|
this.tables[class_name].title = class_name;
|
|
this.tables[class_name].data = tables_map[class_name];
|
|
}
|
|
for (let table in this.tables) {
|
|
if (tables_map[table] == null) {
|
|
this.cbi_map.removeChild(this.tables[table].fieldset);
|
|
delete this.tables[table];
|
|
}
|
|
}
|
|
|
|
if (warning_message.length > 0) {
|
|
for (let i = 0; i < warning_message.length; i++) {
|
|
let entry = warning_message[i];
|
|
let full_name = entry.full_name ? entry.full_name : entry.key;
|
|
|
|
let node = document.createElement('p');
|
|
node.innerHTML = full_name + entry.value;
|
|
this.warning_message(node);
|
|
}
|
|
}
|
|
else{
|
|
this.hide_warning_message();
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<%
|
|
local uci = luci.model.uci.cursor()
|
|
modem_configs = {}
|
|
local modem = uci:foreach("qmodem", "modem-device",function(s)
|
|
table.insert(modem_configs,s[".name"])
|
|
end)
|
|
for _,v in ipairs(modem_configs) do
|
|
%>
|
|
<div id="modem_<%=v%>">
|
|
|
|
</div>
|
|
<script>
|
|
const modem_info_<%=v%> = new ModemInfo("<%=v%>");
|
|
modem_info_<%=v%>.poll_info();
|
|
modem_info_<%=v%>.update();
|
|
</script>
|
|
|
|
<%
|
|
end
|
|
%>
|