From c6df983e60bc8f7a442a61143ef9fd1629b93c80 Mon Sep 17 00:00:00 2001
From: fujr <fjrcn@outlook.com>
Date: Thu, 24 Oct 2024 23:16:47 +0800
Subject: [PATCH] add modem_overview (for lua luci index page)

---
 .../luasrc/view/qmodem/modem_overview.htm     | 386 ++++++++++++++++++
 1 file changed, 386 insertions(+)
 create mode 100644 luci/luci-app-qmodem/luasrc/view/qmodem/modem_overview.htm

diff --git a/luci/luci-app-qmodem/luasrc/view/qmodem/modem_overview.htm b/luci/luci-app-qmodem/luasrc/view/qmodem/modem_overview.htm
new file mode 100644
index 0000000..f3a7648
--- /dev/null
+++ b/luci/luci-app-qmodem/luasrc/view/qmodem/modem_overview.htm
@@ -0,0 +1,386 @@
+<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
+%>