Merge pull request #7080 from TDT-AG/pr/20240423-luci-mod-dsl

luci-mod-dsl: improve view for the luci-theme-material
This commit is contained in:
Florian Eckert 2024-04-24 09:26:49 +02:00 committed by GitHub
commit 2f54ddd75a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 44 additions and 31 deletions

View File

@ -20,37 +20,50 @@ return view.extend({
render: function(data) {
window.json = data[0];
var v = E([], [
var v = E('div', {'class': 'cbi-map'}, [
E('h2', {'style': "height: 40px"}, [ _('DSL line spectrum') ]),
E('p', {}, _('Graphs below show Signal-to-noise ratio, Bit allocation, Quiet line noise and Channel characteristics function (HLOG) per sub-carrier.')),
E('div', {'style': "height: 360px; width: 1024px"},
E('canvas', {
'id': 'dbChart',
'height': 360,
'width': 1024},
["chart"])
),
E('div', {'style': "height: 360px; width:1024px"},
E('canvas', {
'id': 'bitsChart',
'height': 360,
'width': 1024},
["chart2"])
),
E('div', {'style': "height: 360px; width:1024px"},
E('canvas', {
'id': 'qlnChart',
'height': 360,
'width': 1024},
["chart2"])
),
E('div', {'style': "height: 360px; width:1024px"},
E('canvas', {
'id': 'hlogChart',
'height': 360,
'width': 1024},
["chart2"])
E('div', {'class': 'cbi-map-descr'}, _('The following diagrams show graphically prepared DSL characteristics that are important for evaluating the DSL connection.')),
E('div', {'class': 'cbi-section'}, [
E('div', {'style': "height: 360px; width: 1024px"},
E('canvas', {
'id': 'dbChart',
'height': 360,
'width': 1024},
["chart"])
),
E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The graph shows the signal to noise ratio (SNR) per subcarrier in the uplink and downlink direction')),
]),
E('div', {'class': 'cbi-section'}, [
E('div', {'style': "height: 360px; width:1024px"},
E('canvas', {
'id': 'bitsChart',
'height': 360,
'width': 1024},
["chart2"])
),
E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The graph shows th amount of bits actually allocated per subcarrier in the uplink and downlink direction')),
]),
E('div', {'class': 'cbi-section'}, [
E('div', {'style': "height: 360px; width:1024px"},
E('canvas', {
'id': 'qlnChart',
'height': 360,
'width': 1024},
["chart2"])
),
E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The diagram shows the quiet line noise (QLN) per subcarrier in uplink and downlink direction')),
]),
E('div', {'class': 'cbi-section'}, [
E('div', {'style': "height: 360px; width:1024px"},
E('canvas', {
'id': 'hlogChart',
'height': 360,
'width': 1024},
["chart2"])
),
E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The diagram shows the Channel Characteristics Function (HLOG) per subcarrier in uplink and downlink direction')),
]),
E('script', {'src':'/luci-static/resources/view/status/dsl/graph.js'}, {})
]);

View File

@ -59,7 +59,7 @@ return view.extend({
]));
}
return table;
return E('div', { 'class': 'cbi-section' }, table);
},
renderTable: function(data) {
@ -80,7 +80,7 @@ return view.extend({
]));
}
return table;
return E('div', { 'class': 'cbi-section' }, table);
},
renderContent: function(data) {