Merge pull request #145 from JSZMonkey/patch-2

fix style like this see pic
This commit is contained in:
Derry 2021-11-29 11:43:30 +08:00 committed by GitHub
commit 9074593e5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 59 deletions

View File

@ -4,7 +4,27 @@ local dsp = require "luci.dispatcher"
-%>
#display{
display: flex;
padding: 10px;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
-o-box-align: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
table.imagetable {
@ -14,6 +34,7 @@ table.imagetable {
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
padding-top:10px;
}
<!--
table.imagetable th {
@ -34,7 +55,7 @@ table.imagetable td {
<script type="text/javascript" src="<%=resource%>/echarts.min.js"></script>
<script type="text/javascript" src="<%=resource%>/echarts.min.js?v=5.0"></script>
<script type="text/javascript">//<![CDATA[
window.onload =function(){
@ -297,7 +318,7 @@ table.imagetable td {
hostname=st[i].hostname;
}
var tr = tb.insertRow(-1);
//tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
tr.className = 'tr cbi-rowstyle-' + ((i % 2) + 1);
tr.insertCell(-1).innerHTML = st[i].appname;
tr.insertCell(-1).innerHTML = hostname;
tr.insertCell(-1).innerHTML = st[i].mac;
@ -320,6 +341,11 @@ table.imagetable td {
tr.insertCell(-1).innerHTML = total_time_str;
tr.insertCell(-1).innerHTML = action_status;
var childs = tr.childNodes;
Array.prototype.forEach.call(childs,function(child){
child.className = 'td';
});
}
}
@ -329,23 +355,23 @@ table.imagetable td {
//]]></script>
<fieldset class="cbi-section">
<div class="cbi-section cbi-tblsection">
<div id="display">
<div id="main" style="width: 500px;height:300px;"></div>
<div id="main2" style="width: 400px;height:300px;"></div>
<div id="main" style="min-width: 600px;height:300px;"></div>
<div id="main2" style="min-width: 600px;height:300px;"></div>
</div>
<table class="imagetable" id="user_status_table">
<tr>
<th ><%:App Name%></th>
<th ><%:Hostname%></th>
<th ><%:Mac%></th>
<th><%:Start Time%></th>
<th><%:Visit Time%></th>
<th><%:Filter Status%></th>
<table class="table cbi-section-table" id="user_status_table">
<tr class="tr table-titles">
<th class="th"><%:App Name%></th>
<th class="th"><%:Hostname%></th>
<th class="th"><%:Mac%></th>
<th class="th"><%:Start Time%></th>
<th class="th"><%:Visit Time%></th>
<th class="th"><%:Filter Status%></th>
</tr>
<tr>
<td colspan="8"><em><br /><%:Collecting data...%></em></td>
<tr class="tr table-titles">
<td class="td" colspan="8"><em><br /><%:Collecting data...%></em></td>
</tr>
</table>
</fieldset>
</div>

View File

@ -1,32 +1,6 @@
<style type="text/css">
<%
local dsp = require "luci.dispatcher"
-%>
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
<!--
table.imagetable th {
background:#f5f5f5
border-width: 0px;
padding: 5px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#ffffffff
border-width: 0px;
padding: 5px;
border-style: solid;
border-color: #999999;
}-->
</style>
<script type="text/javascript">//<![CDATA[
XHR.poll(5, '<%=url('admin/network/dev_app_status')%>', null,
function(x, st)
@ -48,7 +22,7 @@ table.imagetable td {
hostname=devlist[i].hostname;
}
var tr = tb.insertRow(-1);
//tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
tr.className = 'tr cbi-rowstyle-' + ((i % 2) + 1);
tr.insertCell(-1).innerHTML = i + 1;
tr.insertCell(-1).innerHTML = hostname;
tr.insertCell(-1).innerHTML = "<a href='<%=url('admin/network/appfilter/')%>"+devlist[i].mac+"'>"+devlist[i].mac+"</a>";
@ -64,10 +38,16 @@ table.imagetable td {
app_list_str="--"
}
tr.insertCell(-1).innerHTML = app_list_str;
if (devlist[i].online == 1)
if (devlist[i].online == 1){
tr.insertCell(-1).innerHTML = "<%:Online%>";
else
}else{
tr.insertCell(-1).innerHTML = "<%:Offline%>";
}
var childs = tr.childNodes;
Array.prototype.forEach.call(childs,function(child){
child.className = 'td';
});
}
}
}
@ -76,19 +56,19 @@ table.imagetable td {
//]]></script>
<fieldset class="cbi-section">
<legend><%:Client List%></legend>
<table class="imagetable" id="user_status_table">
<tr>
<th ><%:Id%></th>
<th ><%:Hostname%></th>
<th ><%:Mac%></th>
<th ><%:Ip%></th>
<th><%:Common App(TOP5)%></th>
<th><%:Online Status%></th>
<div class="cbi-section cbi-tblsection">
<h3><%:Client List%></h3>
<table class="table cbi-section-table" id="user_status_table">
<tr class="tr table-titles">
<th class="th"><%:Id%></th>
<th class="th"><%:Hostname%></th>
<th class="th"><%:Mac%></th>
<th class="th"><%:Ip%></th>
<th class="th"><%:Common App(TOP5)%></th>
<th class="th"><%:Online Status%></th>
</tr>
<tr>
<td colspan="8"><em><br /><%:Collecting data...%></em></td>
<tr class="tr">
<td class="td" colspan="8"><em><br /><%:Collecting data...%></em></td>
</tr>
</table>
</fieldset>
</div>