From 6c0b9a9abc5b251da100e30b91a1e56b7d99828c Mon Sep 17 00:00:00 2001 From: Florian Eckert Date: Tue, 23 Apr 2024 15:38:54 +0200 Subject: [PATCH] luci-mod-dsl: add missing cbi-section css classes and cbi-section-descr Signed-off-by: Florian Eckert --- .../resources/view/status/dsl/spectrum.js | 71 +++++++++++-------- 1 file changed, 42 insertions(+), 29 deletions(-) diff --git a/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/spectrum.js b/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/spectrum.js index 83884daa84..2d7c1ceb3f 100644 --- a/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/spectrum.js +++ b/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/spectrum.js @@ -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'}, {}) ]); -- 2.30.2