lucaspalomodevelop/core
1
0
Fork 0
mirror of https://github.com/lucaspalomodevelop/core.git synced 2026-03-19 19:15:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

dhcpv4/6: UI tweaks to improve readability of leases pages

Browse Source
This commit is contained in:
Stephan de Wit 2023-08-08 12:59:23 +02:00
parent a2b9144233
commit c605175d85
2 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/opnsense/mvc/app/views/OPNsense/DHCPv4/leases.volt
View File

@ -85,10 +85,14 @@
},
formatters: {
"macformatter": function (column, row) {
let mac = '<span class="overflow">' + row.mac + '</span>';
if (row.man != '') {
return row.mac + '<br/>' + '<small><i>' + row.man + '</i></small>';
mac = mac + '<br/>' + '<small class="overflow"><i>' + row.man + '</i></small>';
}
return row.mac;
return mac;
},
"tooltipformatter": function (column, row) {
return '<span class="overflow">' + row[column.id] + '</span><br/>'
},
"statusformatter": function (column, row) {
let connected = row.status == 'online' ? 'text-success' : 'text-danger';
@ -131,6 +135,14 @@
});
</script>
<style>
.overflow {
text-overflow: clip;
white-space: normal;
word-break: break-all;
}
</style>
<ul class="nav nav-tabs" data-tabs="tabs" id="maintabs"></ul>
<div class="tab-content content-box col-xs-12 __mb">
<div id="inactive-selection-wrapper" style="float: left;">
@ -148,12 +160,12 @@
<thead>
<tr>
<th data-column-id="if_descr" data-type="string">{{ lang._('Interface') }}</th>
<th data-column-id="address" data-identifier="true" data-type="string">{{ lang._('IP Address') }}</th>
<th data-column-id="mac" data-type="string" data-formatter="macformatter">{{ lang._('MAC Address') }}</th>
<th data-column-id="hostname" data-type="string">{{ lang._('Hostname') }}</th>
<th data-column-id="descr" data-type="string">{{ lang._('Description') }}</th>
<th data-column-id="starts" data-type="string">{{ lang._('Start') }}</th>
<th data-column-id="ends" data-type="string">{{ lang._('End') }}</th>
<th data-column-id="address" data-identifier="true" data-type="string" data-width="8em">{{ lang._('IP Address') }}</th>
<th data-column-id="mac" data-type="string" data-formatter="macformatter" data-width="9em">{{ lang._('MAC Address') }}</th>
<th data-column-id="hostname" data-type="string" data-formatter="tooltipformatter">{{ lang._('Hostname') }}</th>
<th data-column-id="descr" data-type="string" data-formatter="tooltipformatter">{{ lang._('Description') }}</th>
<th data-column-id="starts" data-type="string" data-formatter="tooltipformatter">{{ lang._('Start') }}</th>
<th data-column-id="ends" data-type="string" data-formatter="tooltipformatter">{{ lang._('End') }}</th>
<th data-column-id="status" data-type="string" data-formatter="statusformatter">{{ lang._('Status') }}</th>
<th data-column-id="state" data-type="string">{{ lang._('State') }}</th>
<th data-column-id="type" data-type="string">{{ lang._('Lease Type') }}</th>

32
src/opnsense/mvc/app/views/OPNsense/DHCPv6/leases.volt
View File

@ -86,10 +86,14 @@
},
formatters: {
"macformatter": function (column, row) {
let mac = '<span class="overflow">' + row.mac + '</span>';
if (row.man != '') {
return row.mac + '<br/>' + '<small><i>' + row.man + '</i></small>';
mac = mac + '<br/>' + '<small><i>' + row.man + '</i></small>';
}
return row.mac;
return mac;
},
"tooltipformatter": function (column, row) {
return '<span class="overflow">' + row[column.id] + '</span><br/>'
},
"statusformatter": function (column, row) {
let connected = row.status == 'online' ? 'text-success' : 'text-danger';
@ -124,6 +128,8 @@
}
}
}
}).on("loaded.rs.jquery.bootgrid", function (e) {
$(".lease-tooltip").tooltip({placement: "auto left"});
});
$("#grid-prefixes").UIBootgrid({
@ -143,6 +149,14 @@
});
</script>
<style>
.overflow {
text-overflow: clip;
white-space: normal;
word-break: break-all;
}
</style>
<ul class="nav nav-tabs" data-tabs="tabs" id="maintabs">
<li><a data-toggle="tab" href="#leases" id="leases_tab">{{ lang._('Leases') }}</a></li>
<li><a data-toggle="tab" href="#prefixes" id="prefixes_tab">{{ lang._('Delegated Prefixes') }}</a></li>
@ -164,13 +178,13 @@
<thead>
<tr>
<th data-column-id="if_descr" data-type="string">{{ lang._('Interface') }}</th>
<th data-column-id="address" data-identifier="true" data-type="string">{{ lang._('IP Address') }}</th>
<th data-column-id="iaid" data-type="number">{{ lang._('IAID') }}</th>
<th data-column-id="duid" data-type="string" data-width="15em">{{ lang._('DUID') }}</th>
<th data-column-id="mac" data-type="string" data-formatter="macformatter">{{ lang._('MAC Address') }}</th>
<th data-column-id="descr" data-type="string">{{ lang._('Description') }}</th>
<th data-column-id="cltt" data-type="string">{{ lang._('Last Transaction Time') }}</th>
<th data-column-id="ends" data-type="string">{{ lang._('End') }}</th>
<th data-column-id="address" data-identifier="true" data-width="12em">{{ lang._('IP Address') }}</th>
<th data-column-id="iaid" data-type="number" data-formatter="tooltipformatter">{{ lang._('IAID') }}</th>
<th data-column-id="duid" data-type="string" data-formatter="tooltipformatter">{{ lang._('DUID') }}</th>
<th data-column-id="mac" data-type="string" data-width="9em" data-formatter="macformatter">{{ lang._('MAC Address') }}</th>
<th data-column-id="descr" data-type="string" data-formatter="tooltipformatter">{{ lang._('Description') }}</th>
<th data-column-id="cltt" data-type="string" data-formatter="tooltipformatter">{{ lang._('Last Transaction Time') }}</th>
<th data-column-id="ends" data-type="string" data-formatter="tooltipformatter">{{ lang._('End') }}</th>
<th data-column-id="status" data-type="string" data-formatter="statusformatter">{{ lang._('Status') }}</th>
<th data-column-id="state" data-type="string">{{ lang._('State') }}</th>
<th data-column-id="type" data-type="string">{{ lang._('Lease Type') }}</th>