352 lines
8.8 KiB
HTML
352 lines
8.8 KiB
HTML
<script type="text/javascript">//<![CDATA[
|
|
|
|
class LuciField {
|
|
constructor(classList,title){
|
|
this.classList=classList;
|
|
this.newLuciField();
|
|
this.title=title;
|
|
}
|
|
|
|
newLuciField(){
|
|
var field=document.createElement("fieldset");
|
|
for (var class_name of this.classList)
|
|
{
|
|
field.classList.add(class_name);
|
|
}
|
|
var h3title = document.createElement("h3")
|
|
field.appendChild(h3title);
|
|
this.h3title=h3title;
|
|
this.field=field;
|
|
|
|
}
|
|
|
|
set title(t){
|
|
this.h3title.innerHTML=t;
|
|
if (t != "")
|
|
{
|
|
this.h3title.style.display="";
|
|
}
|
|
else
|
|
{
|
|
this.h3title.style.display="none";
|
|
}
|
|
}
|
|
}
|
|
|
|
class LuciBtn {
|
|
constructor(classList,value,callback){
|
|
var btn=document.createElement("input");
|
|
var base_classList = ["cbi-button","btn"];
|
|
this.classList=base_classList.concat(classList);
|
|
for (var class_name of this.classList)
|
|
{
|
|
btn.classList.add(class_name);
|
|
}
|
|
btn.setAttribute('type','button');
|
|
btn.setAttribute('value',value);
|
|
btn.addEventListener('click',callback);
|
|
this.btn=btn;
|
|
}
|
|
}
|
|
|
|
class ModemState
|
|
{
|
|
constructor(){
|
|
this.modem_state_div = document.createElement('div');
|
|
this.modem_state_div.classList.add("modem_status_box");
|
|
this.connect_state = -1;
|
|
}
|
|
|
|
update(modem_datas){
|
|
var entrys = [];
|
|
this.connect_state = -1;
|
|
for (var entry of modem_datas)
|
|
{
|
|
//handle special entry
|
|
if (entry.key=="connect_status")
|
|
{
|
|
var state = '';
|
|
var css = '';
|
|
switch (entry.value)
|
|
{
|
|
case 'Yes':
|
|
entry.value = '<%:Connected%>';
|
|
this.connect_state = 1;
|
|
break;
|
|
case 'No':
|
|
entry.value = '<%:Disconnected%>';
|
|
this.connect_state = 0;
|
|
break;
|
|
default:
|
|
entry.value = '<%:Unknown%>';
|
|
this.connect_state = -1;
|
|
break;
|
|
}
|
|
}
|
|
entrys.push(entry);
|
|
}
|
|
this.render(entrys);
|
|
}
|
|
|
|
|
|
render(entrys){
|
|
this.modem_state_div.innerHTML = "";
|
|
switch (this.connect_state)
|
|
{
|
|
case 1:
|
|
this.modem_state_div.classList.add("alert-message","success");
|
|
break;
|
|
case 0:
|
|
this.modem_state_div.classList.add("alert-message","danger");
|
|
break;
|
|
default:
|
|
this.modem_state_div.classList.add("alert-message","warning");
|
|
break;
|
|
}
|
|
for (var entry of entrys)
|
|
{
|
|
var key,value,full_name;
|
|
key=entry.key;
|
|
value=entry.value;
|
|
full_name=entry.full_name;
|
|
if (key == "connect_status" || key == "name" )
|
|
{
|
|
var div = document.createElement('div');
|
|
var strong = document.createElement('strong');
|
|
strong.innerHTML = value.toUpperCase();
|
|
div.appendChild(strong);
|
|
}
|
|
else
|
|
{
|
|
var div = document.createElement('div');
|
|
var strong = document.createElement('strong');
|
|
var span = document.createElement('span');
|
|
strong.innerHTML = full_name + ": ";
|
|
span.innerHTML = value;
|
|
div.appendChild(strong);
|
|
div.appendChild(span);
|
|
}
|
|
this.modem_state_div.appendChild(div);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
class ModemLog {
|
|
constructor(section_name){
|
|
this.modem_log_div = document.createElement('div');
|
|
this.modem_log_div.style.display = "none";
|
|
this.modem_logmsg_textarea = document.createElement('textarea');
|
|
this.modem_logmsg_textarea.setAttribute('readonly','readonly');
|
|
this.modem_logmsg_textarea.setAttribute('rows','20');
|
|
this.modem_logmsg_textarea.setAttribute('maxlength','160');
|
|
var download_btn = new LuciBtn(["cbi-button-link"],"<%:Download%>",() => {
|
|
this.download();
|
|
}).btn;
|
|
var clear_btn = new LuciBtn(["cbi-button-reset"],"<%:Clear%>",() => {
|
|
this.clear();
|
|
}).btn;
|
|
var btns_div = document.createElement('div');
|
|
btns_div.appendChild(download_btn);
|
|
btns_div.appendChild(clear_btn);
|
|
this.btns_div = btns_div;
|
|
this.modem_log_div.appendChild(this.modem_logmsg_textarea);
|
|
this.modem_log_div.appendChild(this.btns_div);
|
|
this.section_name = section_name;
|
|
this.scroll_top = -1;
|
|
}
|
|
|
|
download(){
|
|
var file_name = this.section_name+"_dial_log.txt";
|
|
var file_content = this.log_msg;
|
|
var blob = new Blob([file_content], {type: "text/plain;charset=utf-8"});
|
|
var url = URL.createObjectURL(blob);
|
|
var a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = file_name;
|
|
a.click();
|
|
}
|
|
|
|
clear(){
|
|
XHR.get('<%=luci.dispatcher.build_url("admin", "network", "qmodem", "modem_ctrl")%>', {"action":"clear_dial_log","cfg":this.section_name},
|
|
function(x, data)
|
|
{
|
|
var state = data.result.state;
|
|
if (state == "1")
|
|
{
|
|
this.log_msg = "";
|
|
this.render();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
update(log_msg){
|
|
this.scroll_top = this.modem_logmsg_textarea.scrollTop;
|
|
this.log_msg = log_msg;
|
|
this.render();
|
|
this.modem_logmsg_textarea.scrollTop = this.scroll_top;
|
|
}
|
|
|
|
render(){
|
|
this.modem_logmsg_textarea.innerHTML=this.log_msg;
|
|
}
|
|
|
|
}
|
|
|
|
class ModemDialOverview {
|
|
constructor(){
|
|
this.modem_state_field=new LuciField(["cbi-section","cbi-section-modem-state"],"<%:Modem Status%>").field;
|
|
this.modem_log_tab_data_field = document.createElement('div');
|
|
this.modem_log_tab_menu_field = document.createElement('ul');
|
|
this.modem_log_tab_menu_field.classList.add("tabs")
|
|
this.modem_log_field=new LuciField(["cbi-section","cbi-section-modem-log"],"<%:Modem Log%>").field;
|
|
this.modems_state = [];
|
|
this.modems_logs = {};
|
|
this.modems_logs_menu = {};
|
|
this.activated_section = "";
|
|
this.modem_log_field.appendChild(this.modem_log_tab_menu_field);
|
|
this.modem_log_field.appendChild(this.modem_log_tab_data_field);
|
|
|
|
this.maincontent = document.getElementById("maincontent");
|
|
this.maincontent.appendChild(this.modem_state_field);
|
|
this.maincontent.appendChild(this.modem_log_field);
|
|
this.poll();
|
|
}
|
|
|
|
activate()
|
|
{
|
|
for (var section_name in this.modems_logs)
|
|
{
|
|
if (section_name == this.activated_section)
|
|
{
|
|
this.modems_logs[section_name].modem_log_div.style.display = "";
|
|
this.modems_logs_menu[section_name].classList.add("active");
|
|
}
|
|
else
|
|
{
|
|
this.modems_logs[section_name].modem_log_div.style.display = "none";
|
|
this.modems_logs_menu[section_name].classList.remove("active");
|
|
}
|
|
}
|
|
}
|
|
|
|
poll()
|
|
{
|
|
XHR.poll(5,'<%=luci.dispatcher.build_url("admin", "network", "qmodem", "modems_dial_overview")%>',{},
|
|
(x,data)=>{
|
|
this.update_modems_state(data.modems);
|
|
this.update_modems_log(data.logs);
|
|
});
|
|
}
|
|
|
|
update_modems_state(modems){
|
|
for (var i in modems)
|
|
{
|
|
var modem_info = modems[i];
|
|
if (this.modems_state[i]==null)
|
|
{
|
|
this.modems_state[i]=new ModemState();
|
|
this.modem_state_field.appendChild(this.modems_state[i].modem_state_div);
|
|
|
|
}
|
|
this.modems_state[i].update(modem_info);
|
|
}
|
|
if (this.modems_state.length> modems.length)
|
|
{
|
|
for (var i = modems.length; i < this.modems_state.length; i++)
|
|
{
|
|
this.modem_state_field.removeChild(this.modems_state[i].modem_state_div);
|
|
delete this.modems_state[i];
|
|
}
|
|
}
|
|
}
|
|
|
|
update_modems_log(logs){
|
|
var menus = [];
|
|
for (var log of logs)
|
|
{
|
|
var section_name,modem_name,log_msg;
|
|
section_name = log.section_name;
|
|
modem_name = log.name;
|
|
log_msg = log.log_msg;
|
|
menus.push(section_name);
|
|
if ( this.modems_logs[section_name]==null )
|
|
{
|
|
this.modems_logs[section_name]=new ModemLog(section_name);
|
|
let a = document.createElement('a');
|
|
let li = document.createElement('li');
|
|
let s = section_name;
|
|
li.appendChild(a);
|
|
a.href = "#";
|
|
a.innerHTML = modem_name.toUpperCase();
|
|
a.addEventListener('click',() => {
|
|
this.activate_tab = s;
|
|
});
|
|
this.modems_logs_menu[section_name]=li;
|
|
this.modem_log_tab_menu_field.appendChild(li);
|
|
this.modem_log_tab_data_field.appendChild(this.modems_logs[section_name].modem_log_div);
|
|
}
|
|
this.modems_logs[section_name].update(log_msg);
|
|
}
|
|
this.update_modems_log_menu();
|
|
//remove the log that not exist
|
|
for (var section_name in this.modems_logs)
|
|
{
|
|
if (menus.indexOf(section_name)==-1)
|
|
{
|
|
this.modem_log_tab_menu_field.removeChild(this.modems_logs_menu[section_name]);
|
|
this.modem_log_tab_data_field.removeChild(this.modems_logs[section_name].modem_log_div);
|
|
delete this.modems_logs[section_name];
|
|
delete this.modems_logs_menu[section_name];
|
|
}
|
|
}
|
|
}
|
|
|
|
update_modems_log_menu(){
|
|
if (this.activated_section == "")
|
|
{
|
|
this.activate_tab = Object.keys(this.modems_logs)[0];
|
|
}
|
|
|
|
}
|
|
|
|
set activate_tab(section_name){
|
|
this.activated_section = section_name;
|
|
this.activate();
|
|
}
|
|
|
|
}
|
|
|
|
window.onload = function(){
|
|
var modem_dial_overview = new ModemDialOverview();
|
|
}
|
|
</script>
|
|
<style type="text/css">
|
|
/* AT命令响应 */
|
|
textarea {
|
|
background:#373737;
|
|
border:none;
|
|
color:#FFF;
|
|
width: 100%;
|
|
border-top-width: 2px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
/* 加载中样式 */
|
|
#modem_status_view img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.modem_status_box {
|
|
display: inline-block;
|
|
margin: 1rem;
|
|
padding: 1rem;
|
|
width: 16rem;
|
|
float: left;
|
|
line-height: 125%;
|
|
}
|
|
</style>
|