diff options
13 files changed, 1537 insertions, 0 deletions
diff --git a/modules/luci-mod-dashboard/Makefile b/modules/luci-mod-dashboard/Makefile new file mode 100644 index 000000000..dfaeeb7e2 --- /dev/null +++ b/modules/luci-mod-dashboard/Makefile @@ -0,0 +1,18 @@ +# +# Copyright 2019-2020 ZHANG Zhao <Zhao.Zhang2@etu.univ-grenoble-alpes.fr> +# +# This is free software, licensed under the Apache License, Version 2.0 . +# + +include $(TOPDIR)/rules.mk + +LUCI_TITLE:=LuCI Dashboard Pages +LUCI_DEPENDS:=+luci-base +libiwinfo + +PKG_BUILD_DEPENDS:=iwinfo +PKG_LICENSE:=Apache-2.0 + +include ../../luci.mk + +# call BuildPackage - OpenWrt buildroot signature + diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css new file mode 100644 index 000000000..62ef169fb --- /dev/null +++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css @@ -0,0 +1,285 @@ +/** + * Dashboard Principals Styles +**/ + +.Dashboard { + color: #212529!important; +} + +.Dashboard h3 { + color:#000; +} + +.Dashboard hr { + border: 0; + height: 0; + overflow: visible; + margin: 0; + box-sizing: content-box; + border-top: 1px solid rgba(0,0,0,.1); +} + +.Dashboard .box-s1 { + min-height: 466px; +} + +.Dashboard .internet-status-self .internet-status-info .title { + height: 97px; +} + +.Dashboard .dashboard-bg { + border-radius: 16px; + background-color: #e0e0e0; +} + +.Dashboard .title { + text-align: center; +} + +.Dashboard .section-content { + display: flex; + vertical-align: top; + padding: 20px 0 0 0; + align-items: flex-start; + justify-content: space-between; +} + +.Dashboard .section-content > div { + width:100%; + padding:1.5em; +} + +.Dashboard .section-content .settings-info { + padding-top:1em; +} + +.Dashboard .section-content .internet-status-info .settings-info { + display: flex; + justify-content: space-around; +} + +.Dashboard .section-content .internet-status-info .settings-info > div > p > i{ + padding: 0 0 0 5px; +} + +.Dashboard .section-content > div:nth-child(2) { + margin-left:20px; +} + +.Dashboard .devices-list .devices-info { + margin-bottom: 0; +} + +.Dashboard .devices-list .devices-info .tr .td{ + padding:0px 0 0 10px; +} + +.Dashboard .devices-list .devices-info .tr .td:first-child { + width: 33%; + word-break: break-all; +} + +.Dashboard .devices-list hr:nth-child(4) { + margin-top: 0; + margin-bottom: 8px; +} + +.Dashboard .router-status-lan .devices-list .table-titles .th:first-child { + width: 35%; +} + +.Dashboard .router-status-self .router-status-info .settings-info { + padding-left:27px; +} + +.Dashboard .router-status-self .router-status-info .title h3 { + margin-top:-2px; +} + +.Dashboard .router-status-info svg { + width: 70px; +} + +.Dashboard .internet-status-self .settings-info p:first-child span:first-child{ + font-size: 15px; + font-weight: 500; +} + +.Dashboard .internet-status-self .settings-info p:nth-child(2) span:first-child, +.Dashboard .router-status-wifi .wifi-info .settings-info p:first-child span:first-child, +.Dashboard .router-status-wifi .wifi-info .settings-info p:nth-child(2) span:first-child{ + font-weight: 700; +} + +.Dashboard .settings-info p span:first-child { + width: 35%; + font-size: 12px; + text-align: right; +} + +.Dashboard .settings-info p span:nth-child(2){ + display: inline-block; + word-break: break-all; + max-width: 150px; + overflow: hidden; + max-height: 16px; + position: relative; + top:2px; +} + +.Dashboard .router-status-info .settings-info p span:nth-child(2){ + max-width: 283px; +} + +.Dashboard .settings-info p span.ssid { + max-height: 18px; + top: 3px; +} + +.Dashboard .settings-info p span.encryption { + max-width: 82px; +} + +.Dashboard .router-status-wifi .wifi-info .settings-info, +.Dashboard .router-status-lan .lan-info .settings-info +{ + display: flex; + justify-content: space-around; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td { + padding: 0 10px 0 10px; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:first-child { + width: 30%; + word-break: break-all; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(2) { + width: 21%; + overflow: hidden; + padding-left:0; + word-break: break-all; +} + +.Dashboard .router-status-wifi .wifi-info .settings-info{ + padding:1em 0 1em 0; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(3) { + width: 22%; + overflow: hidden; + position: relative; + top: -3px; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(5) { + width: initial; +} + +.Dashboard .router-status-wifi .wifi-info > hr:last-child { + margin-bottom:0; +} + +.Dashboard .router-status-wifi .wifi-info .devices-info .device-info .progress { + padding: 0; + width: 100%; + margin: 0; +} + +.Dashboard .wifi-info .devices-info .table-titles { + border-bottom:1px solid rgba(0,0,0,.1); +} + +/** + * Responsive + **/ +@media screen and (min-width: 200px) and (max-width: 640px) { + + .Dashboard .cbi-section-1 > .section-content { + padding-top:10px; + } + + .Dashboard .section-content { + display:block; + } + + .Dashboard .section-content > div{ + padding: 1em; + } + + .Dashboard .section-content > div:first-child { + margin-bottom:10px; + } + + .Dashboard .section-content > div:nth-child(2) { + margin:0; + } + + .Dashboard .router-status-self .router-status-info .settings-info { + padding:0; + } + + .Dashboard .section-content .internet-status-info .settings-info { + display:block; + } + + .Dashboard .section-content .internet-status-info .settings-info > div:first-child { + margin-bottom: 10px; + border-bottom: 1px solid rgba(0,0,0,.1); + } + + .Dashboard .section-content .router-status-lan .devices-info .table-titles { + display:block; + } + + .Dashboard .router-status-wifi .wifi-info .settings-info > div{ + flex:1; + } + + .Dashboard .section-content .router-status-lan .devices-info .table-titles .th:last-child{ + padding-left: 70px; + } + + .Dashboard .section-content .router-status-lan .devices-info .td:first-child{ + flex: 2 2 31%; + } + + .Dashboard .section-content .router-status-lan .devices-info .td:nth-child(2){ + flex: 1 1 24%; + padding: 0; + } + + .Dashboard .section-content .router-status-lan .devices-info .td:last-child{ + word-wrap: normal; + } + + .Dashboard .router-status-wifi .wifi-info .settings-info > div p:nth-child(6) > span:last-child{ + display: inline-block; + overflow: hidden; + height: 14px; + width: 52%; + word-break: break-word; + line-height: 15px; + } + + .Dashboard .wifi-info .devices-info .table-titles { + padding: 0; + margin: 0; + display: flex; + border-radius: initial; + } + + .Dashboard .wifi-info .devices-info .table-titles .th { + flex: 2 2 24%; + } + + .Dashboard .wifi-info .devices-info .tr .td { + flex: 2 2 10%; + } + + .Dashboard .wifi-info hr:nth-child(4) { + margin-bottom: 0; + } +} diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/devices.svg b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/devices.svg new file mode 100644 index 000000000..9fa17f40c --- /dev/null +++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/devices.svg @@ -0,0 +1,132 @@ +<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+ <g>
+ <path d="M196.275,290.129H25.591C11.477,290.129,0,301.615,0,315.721v119.484c0,14.106,11.477,25.591,25.591,25.591h170.684
+ c14.114,0,25.591-11.486,25.591-25.591V315.721C221.867,301.615,210.389,290.129,196.275,290.129z M204.8,435.204
+ c0,4.702-3.823,8.525-8.525,8.525H25.591c-4.702,0-8.525-3.823-8.525-8.525V315.721c0-4.702,3.823-8.525,8.525-8.525h170.684
+ c4.702,0,8.525,3.823,8.525,8.525V435.204z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M213.333,409.596H8.533c-4.71,0-8.533,3.814-8.533,8.533v17.075c0,14.106,11.477,25.591,25.591,25.591h170.684
+ c14.114,0,25.591-11.486,25.591-25.591v-17.075C221.867,413.41,218.044,409.596,213.333,409.596z M204.8,435.204
+ c0,4.702-3.823,8.525-8.525,8.525H25.591c-4.702,0-8.525-3.823-8.525-8.525v-8.542H204.8V435.204z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M136.533,443.729h-51.2c-4.71,0-8.533,3.814-8.533,8.533v51.2c0,4.719,3.823,8.533,8.533,8.533h51.2
+ c4.71,0,8.533-3.814,8.533-8.533v-51.2C145.067,447.543,141.244,443.729,136.533,443.729z M128,494.929H93.867v-34.133H128
+ V494.929z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M162.133,494.929h-102.4c-4.71,0-8.533,3.814-8.533,8.533c0,4.719,3.823,8.533,8.533,8.533h102.4
+ c4.71,0,8.533-3.814,8.533-8.533C170.667,498.743,166.844,494.929,162.133,494.929z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M486.409,290.129H315.725c-14.114,0-25.591,11.486-25.591,25.591v119.484c0,14.106,11.477,25.591,25.591,25.591h170.684
+ c14.114,0,25.591-11.486,25.591-25.591V315.721C512,301.615,500.523,290.129,486.409,290.129z M494.933,435.204
+ c0,4.702-3.823,8.525-8.525,8.525H315.725c-4.702,0-8.525-3.823-8.525-8.525V315.721c0-4.702,3.823-8.525,8.525-8.525h170.684
+ c4.702,0,8.525,3.823,8.525,8.525V435.204z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M503.467,409.596h-204.8c-4.71,0-8.533,3.814-8.533,8.533v17.075c0,14.106,11.477,25.591,25.591,25.591h170.684
+ c14.114,0,25.591-11.486,25.591-25.591v-17.075C512,413.41,508.177,409.596,503.467,409.596z M494.933,435.204
+ c0,4.702-3.823,8.525-8.525,8.525H315.725c-4.702,0-8.525-3.823-8.525-8.525v-8.542h187.733V435.204z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M426.667,443.729h-51.2c-4.71,0-8.533,3.814-8.533,8.533v51.2c0,4.719,3.823,8.533,8.533,8.533h51.2
+ c4.71,0,8.533-3.814,8.533-8.533v-51.2C435.2,447.543,431.377,443.729,426.667,443.729z M418.133,494.929H384v-34.133h34.133
+ V494.929z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M452.267,494.929h-102.4c-4.71,0-8.533,3.814-8.533,8.533c0,4.719,3.823,8.533,8.533,8.533h102.4
+ c4.71,0,8.533-3.814,8.533-8.533C460.8,498.743,456.977,494.929,452.267,494.929z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M341.342,0.004H170.658c-14.114,0-25.591,11.486-25.591,25.591v119.475c0,14.106,11.477,25.591,25.591,25.591h170.684
+ c14.114,0,25.591-11.486,25.591-25.591V25.596C366.933,11.49,355.456,0.004,341.342,0.004z M349.867,145.071
+ c0,4.702-3.823,8.525-8.525,8.525H170.658c-4.702,0-8.525-3.823-8.525-8.525V25.596c0-4.702,3.823-8.525,8.525-8.525h170.684
+ c4.702,0,8.525,3.823,8.525,8.525V145.071z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M358.4,119.462H153.6c-4.71,0-8.533,3.814-8.533,8.533v17.075c0,14.106,11.477,25.591,25.591,25.591h170.684
+ c14.114,0,25.591-11.486,25.591-25.591v-17.075C366.933,123.277,363.11,119.462,358.4,119.462z M349.867,145.071
+ c0,4.702-3.823,8.525-8.525,8.525H170.658c-4.702,0-8.525-3.823-8.525-8.525v-8.542h187.733V145.071z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M281.6,153.596h-51.2c-4.71,0-8.533,3.814-8.533,8.533v51.2c0,4.719,3.823,8.533,8.533,8.533h51.2
+ c4.71,0,8.533-3.814,8.533-8.533v-51.2C290.133,157.41,286.31,153.596,281.6,153.596z M273.067,204.796h-34.133v-34.133h34.133
+ V204.796z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M307.2,204.796H204.8c-4.71,0-8.533,3.814-8.533,8.533c0,4.719,3.823,8.533,8.533,8.533h102.4
+ c4.71,0,8.533-3.814,8.533-8.533C315.733,208.61,311.91,204.796,307.2,204.796z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M401.067,255.996H110.933c-4.71,0-8.533,3.814-8.533,8.533v34.133c0,4.719,3.823,8.533,8.533,8.533
+ s8.533-3.814,8.533-8.533v-25.6h273.067v25.6c0,4.719,3.823,8.533,8.533,8.533s8.533-3.814,8.533-8.533v-34.133
+ C409.6,259.81,405.777,255.996,401.067,255.996z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M256,230.396c-4.71,0-8.533,3.814-8.533,8.533v25.6c0,4.719,3.823,8.533,8.533,8.533s8.533-3.814,8.533-8.533v-25.6
+ C264.533,234.21,260.71,230.396,256,230.396z"/>
+ </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/internet.svg b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/internet.svg new file mode 100644 index 000000000..c6feb0fb9 --- /dev/null +++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/internet.svg @@ -0,0 +1,46 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 479.4 479.4" style="enable-background:new 0 0 479.4 479.4;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#5CB85C;} +</style> +<g> + <g> + <path class="st0" d="M239.4,0c-8.6,0-17.2,0.5-25.7,1.4c-7.8,0.8-15.6,2.1-23.2,3.7c-1.5,0.3-3,0.6-4.4,1 + c-45,10.2-86,33.2-118.3,66.2c-3,3.1-5.9,6.2-8.8,9.5C-28,181.7-17.6,333.3,82.4,420.4c95.7,83.3,239.7,77.8,328.7-12.7 + c3-3.1,5.9-6.2,8.8-9.5c38.4-43.8,59.6-100,59.6-158.2C479.4,107.5,372,0,239.4,0z M78.5,84.3c1.3-1.3,2.6-2.6,3.9-3.8 + c1.5-1.5,3-2.9,4.5-4.4c1.3-1.2,2.7-2.4,4.1-3.7c1.5-1.4,3.1-2.7,4.7-4.1c1.4-1.2,2.8-2.3,4.2-3.4c1.6-1.3,3.2-2.6,4.8-3.8 + c1.5-1.1,2.9-2.2,4.4-3.2c1.7-1.2,3.3-2.4,5-3.5c1.5-1,3-2,4.6-3c1.7-1.1,3.4-2.2,5.2-3.2c1.6-0.9,3.1-1.9,4.7-2.8 + c1.8-1,3.5-2,5.3-3c1.6-0.9,3.2-1.7,4.8-2.5c1.8-0.9,3.7-1.8,5.5-2.7c1.6-0.8,3.3-1.5,4.9-2.2c1.9-0.8,3.8-1.6,5.7-2.4 + c1.7-0.7,3.3-1.3,5-2c1.9-0.7,3.9-1.4,5.9-2.1c1.7-0.6,3.3-1.2,5-1.7c2-0.6,4-1.2,6-1.8c1.7-0.5,3.4-1,5.1-1.4 + c0.6-0.2,1.3-0.3,1.9-0.5c-23.7,23-41.3,51.5-51.1,83c-19-5-37.4-12.1-54.8-21.1C78,84.8,78.3,84.5,78.5,84.3z M67,97.2 + c19.2,10.4,39.6,18.5,60.7,24.2c-10.4,36-15.8,73.2-16.2,110.7H15.6C17.4,182.6,35.4,135.2,67,97.2z M67,382.9 + c-31.6-38-49.6-85.5-51.4-134.8h95.9c0.4,37.5,5.8,74.7,16.2,110.7C106.6,364.3,86.2,372.5,67,382.9z M181.7,456.4 + c-1.6-0.4-3.3-0.9-5-1.4c-2-0.6-4.1-1.2-6.1-1.8c-1.7-0.5-3.4-1.1-5-1.7c-2-0.7-3.9-1.4-5.9-2.1c-1.7-0.6-3.3-1.3-5-2 + c-1.9-0.8-3.8-1.6-5.7-2.4c-1.6-0.7-3.3-1.5-4.9-2.2c-1.9-0.9-3.7-1.8-5.6-2.7c-1.6-0.8-3.2-1.6-4.8-2.5c-1.8-1-3.6-2-5.4-3 + c-1.6-0.9-3.1-1.8-4.7-2.7c-1.8-1.1-3.5-2.1-5.2-3.3c-1.5-1-3-2-4.5-3c-1.7-1.2-3.4-2.4-5.1-3.6c-1.5-1-2.9-2.1-4.4-3.2 + c-1.7-1.2-3.3-2.5-4.9-3.8c-1.4-1.1-2.8-2.2-4.2-3.4c-1.6-1.3-3.1-2.7-4.7-4.1c-1.4-1.2-2.7-2.4-4.1-3.6c-1.5-1.4-3-2.9-4.5-4.4 + c-1.3-1.3-2.6-2.5-3.9-3.8c-0.2-0.2-0.5-0.5-0.7-0.7c17.4-9,35.8-16.1,54.8-21.1c9.9,31.5,27.4,60,51.1,83 + C183,456.7,182.4,456.6,181.7,456.4z M231.4,463.4c-34.2-4.9-64.2-40.6-83.1-93.4c27.3-6.1,55.2-9.4,83.1-9.8L231.4,463.4 + L231.4,463.4z M231.4,344.3c-29.7,0.4-59.2,3.9-88.1,10.5c-10-34.7-15.3-70.6-15.8-106.7h103.9L231.4,344.3L231.4,344.3z + M231.4,232H127.6c0.4-36.1,5.7-72,15.8-106.7c28.9,6.6,58.5,10.1,88.1,10.5V232z M231.4,119.8c-28-0.4-55.8-3.7-83.1-9.8 + c18.9-52.8,48.9-88.5,83.1-93.4L231.4,119.8L231.4,119.8z M411.9,97.2c31.6,38,49.6,85.5,51.4,134.8h-95.9 + c-0.4-37.5-5.8-74.7-16.2-110.7C372.3,115.7,392.7,107.6,411.9,97.2z M297.1,23.6c1.7,0.4,3.4,0.9,5,1.4c2,0.6,4.1,1.2,6.1,1.8 + c1.7,0.5,3.4,1.1,5,1.7c2,0.7,3.9,1.4,5.9,2.1c1.7,0.6,3.3,1.3,5,2c1.9,0.8,3.8,1.6,5.7,2.4c1.6,0.7,3.3,1.5,4.9,2.2 + c1.9,0.9,3.7,1.8,5.6,2.7c1.6,0.8,3.2,1.6,4.8,2.5c1.8,1,3.6,2,5.4,3c1.6,0.9,3.1,1.8,4.7,2.7c1.8,1.1,3.5,2.1,5.2,3.3 + c1.5,1,3,2,4.5,3c1.7,1.2,3.4,2.3,5.1,3.5c1.5,1,2.9,2.1,4.4,3.2c1.6,1.2,3.3,2.5,4.9,3.8c1.4,1.1,2.8,2.2,4.2,3.4 + c1.6,1.3,3.1,2.7,4.7,4.1c1.4,1.2,2.7,2.4,4.1,3.6c1.5,1.4,3,2.9,4.5,4.4c1.3,1.3,2.6,2.5,3.9,3.8c0.2,0.2,0.5,0.5,0.7,0.7 + c-17.4,9-35.8,16.1-54.8,21.1c-9.9-31.5-27.5-60-51.2-83C295.8,23.3,296.5,23.4,297.1,23.6z M247.4,16.7 + c34.2,4.9,64.2,40.6,83.1,93.4c-27.3,6.1-55.2,9.4-83.1,9.8L247.4,16.7L247.4,16.7z M247.4,135.8c29.7-0.4,59.2-3.9,88.1-10.5 + c10,34.7,15.3,70.6,15.8,106.7H247.4V135.8z M247.4,248h103.9c-0.4,36.1-5.7,72-15.8,106.7l0,0c-28.9-6.6-58.5-10.1-88.1-10.5V248 + z M247.4,463.4V360.3c28,0.4,55.8,3.7,83.1,9.8C311.7,422.8,281.7,458.5,247.4,463.4z M400.4,395.7c-1.3,1.3-2.6,2.6-3.9,3.8 + c-1.5,1.5-3,2.9-4.5,4.4c-1.3,1.2-2.7,2.4-4.1,3.6c-1.6,1.4-3.1,2.8-4.7,4.1c-1.4,1.2-2.8,2.3-4.2,3.4c-1.6,1.3-3.2,2.6-4.8,3.8 + c-1.5,1.1-2.9,2.2-4.4,3.2c-1.7,1.2-3.3,2.4-5,3.5c-1.5,1-3,2-4.6,3c-1.7,1.1-3.4,2.2-5.2,3.2c-1.6,0.9-3.1,1.8-4.7,2.8 + c-1.8,1-3.6,2-5.3,3c-1.6,0.9-3.2,1.7-4.8,2.5c-1.8,0.9-3.7,1.8-5.5,2.7c-1.6,0.8-3.3,1.5-4.9,2.2c-1.9,0.8-3.8,1.6-5.7,2.4 + c-1.7,0.7-3.3,1.3-5,2c-2,0.7-3.9,1.4-5.9,2.1c-1.7,0.6-3.3,1.2-5,1.7c-2,0.6-4,1.2-6,1.8c-1.7,0.5-3.4,1-5,1.4 + c-0.6,0.2-1.3,0.3-1.9,0.5c23.7-23,41.3-51.5,51.1-83c19,5,37.4,12.1,54.8,21.1C400.9,395.2,400.6,395.5,400.4,395.7z + M411.9,382.9c-19.2-10.4-39.6-18.5-60.7-24.2c10.4-36,15.8-73.2,16.2-110.7h95.9C461.5,297.4,443.5,344.8,411.9,382.9z"/> + </g> +</g> +</svg> diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/not-internet.svg b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/not-internet.svg new file mode 100644 index 000000000..f1202fe22 --- /dev/null +++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/not-internet.svg @@ -0,0 +1,91 @@ +<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 479.447 479.447" style="enable-background:new 0 0 479.447 479.447;" xml:space="preserve">
+<g>
+ <g>
+ <path d="M239.446,0.022c-8.594,0-17.182,0.462-25.727,1.383c-7.832,0.8-15.568,2.112-23.2,3.704
+ c-1.477,0.309-2.955,0.635-4.432,0.976C141.12,16.323,100.06,39.314,67.831,72.301c-2.997,3.072-5.931,6.235-8.8,9.488
+ c-87.06,99.948-76.612,251.548,23.337,338.608c95.688,83.349,239.723,77.803,328.719-12.656c3.003-3.072,5.936-6.235,8.8-9.488
+ c38.421-43.754,59.594-100.003,59.56-158.232C479.447,107.472,371.995,0.021,239.446,0.022z M78.495,84.301
+ c1.264-1.312,2.576-2.568,3.864-3.84c1.488-1.464,2.968-2.936,4.488-4.352c1.336-1.248,2.712-2.448,4.08-3.664
+ c1.544-1.368,3.08-2.736,4.664-4.056c1.392-1.176,2.824-2.304,4.248-3.44c1.6-1.28,3.2-2.56,4.848-3.792
+ c1.456-1.096,2.936-2.16,4.424-3.2c1.656-1.184,3.32-2.4,5.008-3.504c1.512-1.024,3.04-2.016,4.576-3
+ c1.712-1.096,3.432-2.176,5.168-3.2c1.563-0.933,3.136-1.851,4.72-2.752c1.771-1.008,3.549-1.992,5.336-2.952
+ c1.6-0.853,3.2-1.688,4.8-2.504c1.824-0.92,3.664-1.808,5.512-2.68c1.6-0.76,3.264-1.52,4.912-2.24c1.88-0.8,3.784-1.6,5.688-2.4
+ c1.656-0.68,3.304-1.344,4.976-1.984c1.936-0.736,3.896-1.424,5.856-2.112c1.672-0.584,3.344-1.168,5.04-1.72
+ c1.992-0.64,4-1.232,6.016-1.816c1.688-0.488,3.36-0.992,5.056-1.448c0.648-0.168,1.296-0.304,1.944-0.472
+ c-23.68,22.993-41.253,51.529-51.128,83.024c-18.988-5.008-37.37-12.082-54.816-21.096C78.039,84.821,78.263,84.541,78.495,84.301
+ z M66.991,97.181c19.217,10.412,39.595,18.522,60.712,24.16c-10.352,35.996-15.786,73.227-16.152,110.68h-95.92
+ C17.374,182.632,35.435,135.214,66.991,97.181z M66.991,382.861c-31.554-38.034-49.615-85.452-51.36-134.84h95.92
+ c0.366,37.453,5.799,74.684,16.152,110.68C106.587,364.341,86.209,372.45,66.991,382.861z M181.727,456.429
+ c-1.616-0.408-3.288-0.936-4.952-1.424c-2.024-0.592-4.056-1.184-6.056-1.832c-1.688-0.544-3.352-1.128-5.016-1.712
+ c-1.968-0.68-3.936-1.376-5.88-2.12c-1.664-0.632-3.304-1.296-4.952-1.968c-1.912-0.8-3.824-1.6-5.72-2.4
+ c-1.632-0.72-3.256-1.461-4.872-2.224c-1.864-0.88-3.72-1.776-5.6-2.704c-1.6-0.8-3.2-1.6-4.8-2.472
+ c-1.808-0.968-3.6-1.96-5.392-2.984c-1.6-0.888-3.12-1.8-4.664-2.728c-1.76-1.056-3.488-2.144-5.216-3.256
+ c-1.52-0.968-3.04-1.952-4.536-2.96c-1.704-1.152-3.392-2.352-5.064-3.552c-1.464-1.048-2.928-2.096-4.368-3.2
+ c-1.656-1.248-3.28-2.536-4.896-3.832c-1.416-1.128-2.824-2.248-4.208-3.408c-1.6-1.328-3.144-2.712-4.696-4.088
+ c-1.36-1.208-2.728-2.4-4.056-3.632c-1.528-1.424-3.008-2.904-4.496-4.368c-1.288-1.272-2.6-2.528-3.864-3.832
+ c-0.232-0.248-0.456-0.504-0.688-0.744c17.445-9.018,35.827-16.095,54.816-21.104c9.877,31.494,27.449,60.029,51.128,83.024
+ C183.031,456.741,182.375,456.605,181.727,456.429z M231.447,463.389c-34.232-4.864-64.24-40.592-83.12-93.352
+ c27.296-6.112,55.151-9.391,83.12-9.784V463.389z M231.447,344.253c-29.67,0.39-59.215,3.914-88.144,10.512
+ c-10.045-34.707-15.344-70.615-15.752-106.744h103.896V344.253z M231.447,232.021H127.551
+ c0.407-36.129,5.706-72.037,15.752-106.744c28.929,6.597,58.475,10.121,88.144,10.512V232.021z M231.447,119.789
+ c-27.97-0.39-55.824-3.669-83.12-9.784c18.88-52.76,48.888-88.488,83.12-93.352V119.789z M411.903,97.181
+ c31.554,38.034,49.615,85.452,51.36,134.84h-95.92c-0.366-37.453-5.799-74.684-16.152-110.68
+ C372.307,115.7,392.685,107.591,411.903,97.181z M297.103,23.605c1.68,0.416,3.352,0.944,5.016,1.432
+ c2.024,0.592,4.056,1.184,6.056,1.832c1.688,0.544,3.352,1.128,5.016,1.712c1.968,0.68,3.936,1.376,5.88,2.12
+ c1.664,0.632,3.304,1.296,4.952,1.968c1.912,0.8,3.824,1.6,5.72,2.4c1.632,0.72,3.256,1.461,4.872,2.224
+ c1.864,0.88,3.72,1.776,5.6,2.704c1.6,0.8,3.2,1.6,4.8,2.472c1.808,0.968,3.6,1.96,5.392,2.984c1.6,0.888,3.12,1.8,4.664,2.728
+ c1.76,1.056,3.488,2.144,5.216,3.256c1.52,0.968,3.04,1.952,4.536,2.96c1.704,1.152,3.384,2.344,5.056,3.544
+ c1.472,1.048,2.936,2.104,4.384,3.2c1.648,1.24,3.264,2.528,4.888,3.824c1.408,1.12,2.824,2.24,4.208,3.408
+ c1.6,1.328,3.144,2.712,4.696,4.088c1.36,1.208,2.728,2.4,4.056,3.632c1.528,1.424,3.008,2.904,4.496,4.368
+ c1.288,1.272,2.6,2.528,3.864,3.832c0.232,0.248,0.456,0.504,0.688,0.744c-17.445,9.018-35.827,16.095-54.816,21.104
+ c-9.896-31.498-27.491-60.031-51.192-83.016C295.799,23.293,296.455,23.429,297.103,23.605z M247.447,16.653
+ c34.232,4.864,64.24,40.592,83.12,93.352c-27.296,6.112-55.151,9.391-83.12,9.784V16.653z M247.447,135.789
+ c29.67-0.39,59.215-3.914,88.144-10.512c10.045,34.707,15.344,70.615,15.752,106.744H247.447V135.789z M247.447,248.021h103.896
+ c-0.407,36.129-5.706,72.037-15.752,106.744h0c-28.929-6.597-58.474-10.121-88.144-10.512V248.021z M247.447,463.389V360.253
+ c27.97,0.39,55.824,3.669,83.12,9.784C311.687,422.797,281.679,458.525,247.447,463.389z M400.399,395.741
+ c-1.264,1.304-2.568,2.56-3.856,3.832c-1.488,1.464-2.976,2.944-4.504,4.368c-1.328,1.24-2.696,2.4-4.056,3.64
+ c-1.552,1.376-3.096,2.752-4.68,4.08c-1.4,1.168-2.824,2.296-4.248,3.432c-1.6,1.28-3.2,2.56-4.848,3.792
+ c-1.456,1.096-2.936,2.16-4.424,3.2c-1.656,1.184-3.32,2.4-5.008,3.504c-1.512,1.024-3.04,2.016-4.576,2.992
+ c-1.712,1.104-3.437,2.171-5.176,3.2c-1.6,0.936-3.128,1.848-4.704,2.752c-1.771,1.008-3.552,1.992-5.344,2.952
+ c-1.6,0.853-3.2,1.688-4.8,2.504c-1.824,0.92-3.664,1.808-5.512,2.68c-1.6,0.76-3.264,1.52-4.912,2.24
+ c-1.88,0.8-3.784,1.6-5.688,2.4c-1.656,0.672-3.304,1.344-4.968,1.976c-1.952,0.744-3.912,1.44-5.88,2.12
+ c-1.664,0.584-3.328,1.168-5.016,1.712c-2,0.648-4,1.24-6.04,1.824c-1.672,0.496-3.352,0.992-5.04,1.448
+ c-0.648,0.168-1.296,0.304-1.944,0.472c23.68-22.993,41.253-51.529,51.128-83.024c18.988,5.008,37.37,12.082,54.816,21.096
+ C400.855,395.221,400.631,395.501,400.399,395.741z M411.903,382.861c-19.217-10.412-39.595-18.522-60.712-24.16
+ c10.352-35.996,15.786-73.227,16.152-110.68h95.92C461.521,297.409,443.459,344.828,411.903,382.861z"/>
+ </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/router.svg b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/router.svg new file mode 100644 index 000000000..588504ea8 --- /dev/null +++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/router.svg @@ -0,0 +1 @@ +<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m484.446 333.955h-31.01l-8.34-252.834c-.381-11.538-9.721-20.575-21.264-20.575-11.544 0-20.885 9.038-21.265 20.575l-8.34 252.834h-54.384c-4.151 0-7.515 3.365-7.515 7.515s3.364 7.515 7.515 7.515h144.602c6.906 0 12.524 5.618 12.524 12.524v62.391c0 6.906-5.618 12.525-12.524 12.525h-315.47c-4.151 0-7.515 3.364-7.515 7.515s3.364 7.515 7.515 7.515h315.472c15.193 0 27.554-12.361 27.554-27.554v-62.391c-.001-15.194-12.362-27.555-27.555-27.555zm-66.857-252.339c.112-3.387 2.854-6.041 6.244-6.041 3.389 0 6.131 2.654 6.243 6.041l8.323 252.339h-29.133z"/><path d="m138.916 436.425h-111.362c-6.906 0-12.524-5.618-12.524-12.525v-62.391c0-6.906 5.618-12.524 12.524-12.524h282.232c4.151 0 7.515-3.364 7.515-7.515 0-4.15-3.364-7.515-7.515-7.515h-192.008l-8.34-252.834c-.381-11.538-9.721-20.575-21.264-20.575-11.544 0-20.885 9.038-21.265 20.575l-3.795 115.049c-.137 4.148 3.115 7.621 7.263 7.758 4.126.106 7.621-3.115 7.758-7.263l3.795-115.049c.112-3.387 2.854-6.041 6.244-6.041 3.389 0 6.131 2.654 6.243 6.041l8.323 252.339h-29.133l3.537-107.254c.137-4.148-3.115-7.621-7.263-7.758-4.143-.131-7.622 3.115-7.758 7.263l-3.554 107.749h-31.015c-15.193 0-27.554 12.361-27.554 27.554v62.391c0 15.193 12.361 27.554 27.554 27.554h111.362c4.151 0 7.515-3.365 7.515-7.515s-3.365-7.514-7.515-7.514z"/><path d="m58.241 401.189c-4.151 0-7.515 3.365-7.515 7.515s3.364 7.515 7.515 7.515h24.006c4.151 0 7.515-3.365 7.515-7.515s-3.364-7.515-7.515-7.515z"/><path d="m138.916 401.189h-24.007c-4.151 0-7.515 3.365-7.515 7.515s3.364 7.515 7.515 7.515h24.007c4.151 0 7.515-3.365 7.515-7.515-.001-4.151-3.365-7.515-7.515-7.515z"/><path d="m171.578 401.189c-4.151 0-7.515 3.365-7.515 7.515s3.364 7.515 7.515 7.515h24.006c4.151 0 7.515-3.365 7.515-7.515s-3.364-7.515-7.515-7.515z"/><path d="m228.248 401.189c-4.151 0-7.515 3.365-7.515 7.515s3.364 7.515 7.515 7.515h24.006c4.151 0 7.515-3.365 7.515-7.515s-3.364-7.515-7.515-7.515z"/><path d="m398.135 416.218c4.151 0 7.515-3.365 7.515-7.515s-3.364-7.515-7.515-7.515h-24.006c-4.151 0-7.515 3.365-7.515 7.515s3.364 7.515 7.515 7.515z"/><path d="m454.032 416.218c4.151 0 7.515-3.365 7.515-7.515s-3.364-7.515-7.515-7.515h-24.006c-4.151 0-7.515 3.365-7.515 7.515s3.364 7.515 7.515 7.515z"/><path d="m164.005 184.136c50.728-50.73 133.271-50.728 183.999 0 1.468 1.467 3.391 2.201 5.314 2.201s3.846-.734 5.314-2.201c2.934-2.934 2.934-7.693 0-10.627-56.589-56.589-148.666-56.59-205.255 0-2.934 2.934-2.934 7.693 0 10.627 2.935 2.935 7.693 2.935 10.628 0z"/><path d="m330.129 212.639c2.934-2.935 2.934-7.693 0-10.627-40.831-40.83-107.242-40.871-148.125-.125-2.328 2.218-3.047 5.775-1.534 8.801 1.316 2.633 3.971 4.156 6.727 4.156 1.129 0 2.276-.255 3.355-.795.75-.375 1.419-.865 1.989-1.444 35.017-34.98 91.959-34.966 126.96.034 2.935 2.934 7.693 2.934 10.628 0z"/><path d="m296.847 242.807c1.923 0 3.846-.734 5.314-2.201 2.934-2.934 2.934-7.693 0-10.627-12.329-12.329-28.721-19.119-46.158-19.119-17.435 0-33.828 6.79-46.158 19.119-2.935 2.934-2.935 7.693 0 10.627 2.934 2.935 7.692 2.935 10.628 0 9.49-9.49 22.109-14.717 35.529-14.717 13.422 0 26.039 5.227 35.529 14.717 1.47 1.468 3.393 2.201 5.316 2.201z"/><path d="m234.347 254.425c-1.422 1.407-2.23 3.33-2.23 5.343-.093 6.659 8.347 10.031 12.872 5.27 2.948-2.927 6.858-4.539 11.015-4.539 4.177 0 8.104 1.627 11.057 4.58 7.28 6.791 17.417-3.354 10.628-10.627-11.949-11.949-31.383-11.957-43.342-.027z"/></g></svg>
\ No newline at end of file diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/wireless.svg b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/wireless.svg new file mode 100644 index 000000000..06073fa41 --- /dev/null +++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/wireless.svg @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 490.584 490.584" style="enable-background:new 0 0 490.584 490.584;" xml:space="preserve">
+<g>
+ <g>
+ <path d="M0,127.994l10.448,12.12c135.299-115.396,334.389-115.396,469.688,0l10.448-12.12C349.265,7.465,141.319,7.465,0,127.994z
+ "/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M58.608,226.322l11.312,11.312c96.911-96.697,253.808-96.697,350.72,0l11.312-11.312
+ C328.793,123.379,161.768,123.379,58.608,226.322z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M137.8,305.514l11.312,11.312c53.148-53.025,139.188-53.025,192.336,0l11.312-11.312
+ C293.36,246.252,197.2,246.252,137.8,305.514z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M273.568,384.706c-15.636-15.591-40.94-15.591-56.576,0c-15.619,15.623-15.616,40.95,0.007,56.569
+ c15.623,15.619,40.95,15.616,56.569-0.007C289.184,425.647,289.184,400.326,273.568,384.706z M262.256,429.97
+ c-9.376,9.37-24.572,9.365-33.941-0.011c-9.37-9.376-9.365-24.572,0.011-33.941c9.371-9.365,24.559-9.365,33.93,0
+ C271.609,405.403,271.609,420.585,262.256,429.97z"/>
+ </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/10_router.js b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/10_router.js new file mode 100644 index 000000000..e1ea347d5 --- /dev/null +++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/10_router.js @@ -0,0 +1,322 @@ +'use strict'; +'require baseclass'; +'require fs'; +'require rpc'; +'require network'; + +var callSystemBoard = rpc.declare({ + object: 'system', + method: 'board' +}); + +var callSystemInfo = rpc.declare({ + object: 'system', + method: 'info' +}); + +return baseclass.extend({ + + params: [], + + load: function() { + return Promise.all([ + network.getWANNetworks(), + network.getWAN6Networks(), + L.resolveDefault(callSystemBoard(), {}), + L.resolveDefault(callSystemInfo(), {}) + ]); + }, + + renderHtml: function(data, type) { + + var icon = type; + var title = 'router' == type ? _('System') : _('Internet'); + var container_wapper = E('div', { 'class': type + '-status-self dashboard-bg box-s1'}); + var container_box = E('div', { 'class': type + '-status-info'}); + var container_item = E('div', { 'class': 'settings-info'}); + + if ('internet' == type) { + icon = (data.v4.connected.value || data.v6.connected.value) ? type : 'not-internet'; + } + + container_box.appendChild(E('div', { 'class': 'title'}, [ + E('img', { + 'src': L.resource('view/dashboard/icons/' + icon + '.svg'), + 'width': 'router' == type ? 64 : 54, + 'title': title, + 'class': 'middle' + }), + E('h3', title) + ])); + + container_box.appendChild(E('hr')); + + if ('internet' == type) { + var container_internet_v4 = E('div'); + var container_internet_v6 = E('div'); + + for(var idx in data) { + + for(var ver in data[idx]) { + var classname = ver, + suppelements = '', + visible = data[idx][ver].visible; + + if('connected' === ver) { + classname = data[idx][ver].value ? 'label label-success' : 'label label-danger'; + data[idx][ver].value = data[idx][ver].value ? _('yes') : _('no'); + } + + if ('v4' === idx) { + + if ('title' === ver) { + container_internet_v4.appendChild( + E('p', { 'class': 'mt-2'}, [ + E('span', {'class': ''}, [ data[idx].title ]), + ]) + ); + continue; + } + + if ('addrsv4' === ver) { + var addrs = data[idx][ver].value; + if(Array.isArray(addrs) && addrs.length) { + for(var ip in addrs) { + data[idx][ver].value = addrs[ip].split('/')[0]; + } + } + } + + if (visible) { + container_internet_v4.appendChild( + E('p', { 'class': 'mt-2'}, [ + E('span', {'class': ''}, [ data[idx][ver].title + ':' ]), + E('span', {'class': classname }, [ data[idx][ver].value ]), + suppelements + ]) + ); + } + + } else { + + if ('title' === ver) { + container_internet_v6.appendChild( + E('p', { 'class': 'mt-2'}, [ + E('span', {'class': ''}, [ data[idx].title ]), + ]) + ); + continue; + } + + if (visible) { + container_internet_v6.appendChild( + E('p', {'class': 'mt-2'}, [ + E('span', {'class': ''}, [data[idx][ver].title + ':']), + E('span', {'class': classname}, [data[idx][ver].value]), + suppelements + ]) + ); + } + } + } + } + + container_item.appendChild(container_internet_v4); + container_item.appendChild(container_internet_v6); + } else { + for(var idx in data) { + container_item.appendChild( + E('p', { 'class': 'mt-2'}, [ + E('span', {'class': ''}, [ data[idx].title + ':' ]), + E('span', {'class': ''}, [ data[idx].value ]) + ]) + ); + } + } + + container_box.appendChild(container_item); + container_box.appendChild(E('hr')); + container_wapper.appendChild(container_box); + return container_wapper; + }, + + renderUpdateWanData: function(data, v6) { + + for (var i = 0; i < data.length; i++) { + var ifc = data[i]; + + if (v6) { + this.params.internet.v6.ipprefixv6.value = ifc.getIP6Prefix() || '-'; + this.params.internet.v6.gatewayv6.value = ifc.getGateway6Addr() || '-'; + this.params.internet.v6.protocol.value= ifc.getI18n() || E('em', _('Not connected')); + this.params.internet.v6.addrsv6.value = ifc.getIP6Addrs() || [ '-' ]; + this.params.internet.v6.dnsv6.value = ifc.getDNS6Addrs() || [ '-' ]; + this.params.internet.v6.connected.value = ifc.isUp(); + } else { + var uptime = ifc.getUptime(); + this.params.internet.v4.uptime.value = (uptime > 0) ? '%t'.format(uptime) : '-'; + this.params.internet.v4.protocol.value= ifc.getI18n() || E('em', _('Not connected')); + this.params.internet.v4.gatewayv4.value = ifc.getGatewayAddr() || '0.0.0.0'; + this.params.internet.v4.connected.value = ifc.isUp(); + this.params.internet.v4.addrsv4.value = ifc.getIPAddrs() || [ '-']; + this.params.internet.v4.dnsv4.value = ifc.getDNSAddrs() || [ '-' ]; + } + } + }, + + renderInternetBox: function(data) { + + this.params.internet = { + + v4: { + title: _('IPv4 Internet'), + + connected: { + title: _('Connected'), + visible: true, + value: false + }, + + uptime: { + title: _('Connected since'), + visible: true, + value: '-' + }, + + protocol: { + title: _('Protocol'), + visible: true, + value: '-' + }, + + addrsv4: { + title: _('IPv4'), + visible: true, + value: [ '-' ] + }, + + gatewayv4: { + title: _('GatewayV4'), + visible: true, + value: '-' + }, + + dnsv4: { + title: _('DNSv4'), + visible: true, + value: ['-'] + } + }, + + v6: { + title: _('IPv6 Internet'), + + connected: { + title: _('Connected'), + visible: true, + value: false + }, + + uptime: { + title: _('Connected since'), + visible: true, + value: '-' + }, + + protocol: { + title: _('Protocol'), + visible: true, + value: ' - ' + }, + + ipprefixv6 : { + title: _('IPv6 prefix'), + visible: true, + value: ' - ' + }, + + addrsv6: { + title: _('IPv6'), + visible: false, + value: [ '-' ] + }, + + gatewayv6: { + title: _('GatewayV6'), + visible: true, + value: '-' + }, + + dnsv6: { + title: _('DNSv6'), + visible: true, + value: [ '-' ] + } + } + }; + + this.renderUpdateWanData(data[0], false); + this.renderUpdateWanData(data[1], true); + + return this.renderHtml(this.params.internet, 'internet'); + }, + + renderRouterBox: function(data) { + + var boardinfo = data[2], + systeminfo = data[3]; + + var datestr = null; + + if (systeminfo.localtime) { + var date = new Date(systeminfo.localtime * 1000); + + datestr = '%04d-%02d-%02d %02d:%02d:%02d'.format( + date.getUTCFullYear(), + date.getUTCMonth() + 1, + date.getUTCDate(), + date.getUTCHours(), + date.getUTCMinutes(), + date.getUTCSeconds() + ); + } + + this.params.router = { + uptime: { + title: _('Uptime'), + value: systeminfo.uptime ? '%t'.format(systeminfo.uptime) : null, + }, + + localtime: { + title: _('Local Time'), + value: datestr + }, + + kernel: { + title: _('Kernel Version'), + value: boardinfo.kernel + }, + + model: { + title: _('Model'), + value: boardinfo.model + }, + + system: { + title: _('Architecture'), + value: boardinfo.system + }, + + release: { + title: _('Firmware Version'), + value: boardinfo.release.description + } + }; + + return this.renderHtml(this.params.router, 'router'); + }, + + render: function(data) { + return [this.renderInternetBox(data), this.renderRouterBox(data)]; + } +}); diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/20_lan.js b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/20_lan.js new file mode 100644 index 000000000..2d786c828 --- /dev/null +++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/20_lan.js @@ -0,0 +1,150 @@ +'use strict'; +'require baseclass'; +'require rpc'; +'require network'; + +var callLuciDHCPLeases = rpc.declare({ + object: 'luci-rpc', + method: 'getDHCPLeases', + expect: { '': {} } +}); + +return baseclass.extend({ + title: _('DHCP Devices'), + + params: {}, + + load: function() { + return Promise.all([ + callLuciDHCPLeases(), + network.getDevices() + ]); + }, + + renderHtml: function() { + + var container_wapper = E('div', { 'class': 'router-status-lan dashboard-bg box-s1' }); + var container_box = E('div', { 'class': 'lan-info devices-list' }); + var container_devices = E('div', { 'class': 'table assoclist devices-info' }, [ + E('div', { 'class': 'tr table-titles dashboard-bg' }, [ + E('div', { 'class': 'th nowrap' }, _('Hostname')), + E('div', { 'class': 'th' }, _('IP Address')), + E('div', { 'class': 'th' }, _('MAC')), + ]) + ]); + + var container_deviceslist = E('div', { 'class': 'table assoclist devices-info' }); + + container_box.appendChild(E('div', { 'class': 'title'}, [ + E('img', { + 'src': L.resource('view/dashboard/icons/devices.svg'), + 'width': 55, + 'title': this.title, + 'class': 'middle' + }), + E('h3', this.title) + ])); + + for(var idx in this.params.lan.devices) { + var deivce = this.params.lan.devices[idx]; + + container_deviceslist.appendChild(E('div', { 'class': 'tr cbi-rowstyle-1'}, [ + + E('div', { 'class': 'td device-info'}, [ + E('p', {}, [ + E('span', { 'class': 'd-inline-block'}, [ deivce.hostname ]), + ]), + ]), + + E('div', { 'class': 'td device-info'}, [ + E('p', {}, [ + E('span', { 'class': 'd-inline-block'}, [ deivce.ipv4 ]), + ]), + ]), + + E('div', { 'class': 'td device-info'}, [ + E('p', {}, [ + E('span', { 'class': 'd-inline-block'}, [ deivce.macaddr ]), + ]), + ]) + ])); + } + + container_box.appendChild(E('hr')); + container_box.appendChild(container_devices); + container_box.appendChild(E('hr')); + container_box.appendChild(container_deviceslist); + container_wapper.appendChild(container_box); + + return container_wapper; + }, + + renderUpdateData: function(data, leases) { + + for(var item in data) { + if (/lan|br-lan/ig.test(data[item].ifname) && (typeof data[item].dev == 'object' && !data[item].dev.wireless)) { + var lan_device = data[item]; + var ipv4addr = lan_device.dev.ipaddrs.toString().split('/'); + + this.params.lan.ipv4 = ipv4addr[0] || '?'; + this.params.lan.ipv6 = ipv4addr[0] || '?'; + this.params.lan.macaddr = lan_device.dev.macaddr || '00:00:00:00:00:00'; + this.params.lan.rx_bytes = lan_device.dev.stats.rx_bytes ? '%.2mB'.format(lan_device.dev.stats.rx_bytes) : '-'; + this.params.lan.tx_bytes = lan_device.dev.stats.tx_bytes ? '%.2mB'.format(lan_device.dev.stats.tx_bytes) : '-'; + } + } + + var devices = []; + leases.map(function(lease) { + devices[lease.expires] = { + hostname: lease.hostname || '?', + ipv4: lease.ipaddr || '-', + macaddr: lease.macaddr || '00:00:00:00:00:00', + }; + }); + this.params.lan.devices = devices; + }, + + renderLeases: function(data) { + + var leases = Array.isArray(data[0].dhcp_leases) ? data[0].dhcp_leases : []; + + this.params.lan = { + ipv4: { + title: _('IPv4'), + value: '?' + }, + + macaddr: { + title: _('Mac'), + value: '00:00:00:00:00:00' + }, + + rx_bytes: { + title: _('Upload'), + value: '-' + }, + + tx_bytes: { + title: _('Download'), + value: '-' + }, + + devices: { + title: _('Devices'), + value: [] + } + }; + + this.renderUpdateData(data[1], leases); + + return this.renderHtml(); + }, + + render: function(data) { + if (L.hasSystemFeature('dnsmasq') || L.hasSystemFeature('odhcpd')) + return this.renderLeases(data); + + return E([]); + } +}); diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/30_wifi.js b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/30_wifi.js new file mode 100644 index 000000000..03c9ee606 --- /dev/null +++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/30_wifi.js @@ -0,0 +1,267 @@ +'use strict'; +'require baseclass'; +'require dom'; +'require network'; +'require rpc'; + +return baseclass.extend({ + + title: _('Wireless'), + + params: [], + + load: function() { + return Promise.all([ + network.getWifiDevices(), + network.getWifiNetworks(), + network.getHostHints() + ]).then(function(radios_networks_hints) { + var tasks = []; + + for (var i = 0; i < radios_networks_hints[1].length; i++) + tasks.push(L.resolveDefault(radios_networks_hints[1][i].getAssocList(), []).then(L.bind(function(net, list) { + net.assoclist = list.sort(function(a, b) { return a.mac > b.mac }); + }, this, radios_networks_hints[1][i]))); + + return Promise.all(tasks).then(function() { + return radios_networks_hints; + }); + }); + }, + + renderHtml: function() { + + var container_wapper = E('div', { 'class': 'router-status-wifi dashboard-bg box-s1' }); + var container_box = E('div', { 'class': 'wifi-info devices-list' }); + var container_radio = E('div', { 'class': 'settings-info' }); + var container_radio_item; + + container_box.appendChild(E('div', { 'class': 'title'}, [ + E('img', { + 'src': L.resource('view/dashboard/icons/wireless.svg'), + 'width': 55, + 'title': this.title, + 'class': 'middle' + }), + E('h3', this.title) + ])); + + container_box.appendChild(E('hr')); + + for (var i =0; i < this.params.wifi.radios.length; i++) { + + container_radio_item = E('div', { 'class': 'radio-info' }) + + for(var idx in this.params.wifi.radios[i]) { + var classname = idx, + radio = this.params.wifi.radios[i]; + + if (!radio[idx].visible) { + continue; + } + + if ('actived' === idx) { + classname = radio[idx].value ? 'label label-success' : 'label label-danger'; + radio[idx].value = radio[idx].value ? _('yes') : _('no'); + } + + container_radio_item.appendChild( + E('p', {}, [ + E('span', { 'class': ''}, [ radio[idx].title + ':']), + E('span', { 'class': classname }, [ radio[idx].value ]), + ]) + ); + } + + container_radio.appendChild(container_radio_item); + } + + container_box.appendChild(container_radio); + + var container_devices = E('div', { 'class': 'table assoclist devices-info' }, [ + E('div', { 'class': 'tr table-titles dashboard-bg' }, [ + E('div', { 'class': 'th nowrap' }, _('Hostname')), + E('div', { 'class': 'th' }, _('Wireless')), + E('div', { 'class': 'th' }, _('Signal')), + E('div', { 'class': 'th' }, '%s / %s'.format( _('Up.'), _('Down.'))) + ]) + ]); + + var container_devices_item; + var container_devices_list = E('div', { 'class': 'table assoclist devices-info' }); + + for (var i =0; i < this.params.wifi.devices.length; i++) { + container_devices_item = E('div', { 'class': 'tr cbi-rowstyle-1' }); + + for(var idx in this.params.wifi.devices[i]) { + var device = this.params.wifi.devices[i]; + + if (!device[idx].visible) { + continue; + } + + var container_content; + + if ('progress' == idx) { + container_content = E('div', { 'class' : 'td device-info' }, [ + E('div', { 'class': 'progress' }, [ + E('div', { 'class': 'progress-bar ' + device[idx].value.style, role: 'progressbar', style: 'width:'+device[idx].value.qualite+'%', 'aria-valuenow': device[idx].value.qualite, 'aria-valuemin': 0, 'aria-valuemax': 100 }), + ]) + ]); + } else if ('rate' == idx) { + container_content = E('div', { 'class': 'td device-info' }, [ + E('p', {}, [ + E('span', { 'class': ''}, [ device[idx].value.rx ]), + E('br'), + E('span', { 'class': ''}, [ device[idx].value.tx ]) + ]) + ]); + } else { + container_content = E('div', { 'class': 'td device-info'}, [ + E('p', {}, [ + E('span', { 'class': ''}, [ device[idx].value ]), + ]) + ]); + } + + container_devices_item.appendChild(container_content); + } + + container_devices_list.appendChild(container_devices_item); + } + + container_devices.appendChild(container_devices_list); + container_box.appendChild(E('hr')); + container_box.appendChild(container_devices); + container_box.appendChild(container_devices_list); + container_wapper.appendChild(container_box); + + return container_wapper; + }, + + renderUpdateData: function(radios, networks, hosthints) { + + for (var i = 0; i < radios.sort(function(a, b) { a.getName() > b.getName() }).length; i++) { + var network_items = networks.filter(function(net) { return net.getWifiDeviceName() == radios[i].getName() }); + + for (var j = 0; j < network_items.length; j++) { + var net = network_items[j], + is_assoc = (net.getBSSID() != '00:00:00:00:00:00' && net.getChannel() && !net.isDisabled()), + chan = net.getChannel(), + freq = net.getFrequency(), + rate = net.getBitRate(); + + this.params.wifi.radios.push( + { + ssid : { + title: _('SSID'), + visible: true, + value: net.getActiveSSID() || '?' + }, + + actived : { + title: _('Active'), + visible: true, + value: !net.isDisabled() + }, + + chan : { + title: _('Channel'), + visible: true, + value: chan ? '%d (%.3f %s)'.format(chan, freq, _('GHz')) : '-' + }, + + rate : { + title: _('Bitrate'), + visible: true, + value: rate ? '%d %s'.format(rate, _('Mbit/s')) : '-' + }, + + bssid : { + title: _('BSSID'), + visible: true, + value: is_assoc ? (net.getActiveBSSID() || '-') : '-' + }, + + encryption : { + title: _('Encryption'), + visible: true, + value: is_assoc ? net.getActiveEncryption() : '-' + }, + + associations : { + title: _('Devices Connected'), + visible: true, + value: is_assoc ? (net.assoclist.length || '0') : 0 + } + } + ); + } + } + + for (var i = 0; i < networks.length; i++) { + for (var k = 0; k < networks[i].assoclist.length; k++) { + var bss = networks[i].assoclist[k], + name = hosthints.getHostnameByMACAddr(bss.mac); + + var progress_style; + var q = Math.min((bss.signal + 110) / 70 * 100, 100); + + if (q == 0 || q < 25) + progress_style = 'bg-danger'; + else if (q < 50) + progress_style = 'bg-warning'; + else if (q < 75) + progress_style = 'bg-success'; + else + progress_style = 'bg-success'; + + this.params.wifi.devices.push( + { + hostname : { + title: _('Hostname'), + visible: true, + value: name || '?' + }, + + ssid : { + title: _('SSID'), + visible: true, + value: networks[i].getActiveSSID() + }, + + progress : { + title: _('Channel'), + visible: true, + value: { + qualite: q, + style: progress_style + } + }, + + rate : { + title: _('Bitrate'), + visible: true, + value: { + rx: '%s'.format('%.2mB'.format(bss.rx.bytes)), + tx: '%s'.format('%.2mB'.format(bss.tx.bytes)), + } + } + } + ); + } + } + }, + + render: function(data) { + + this.params.wifi = { + radios: [], + devices: [] + }; + + this.renderUpdateData(data[0], data[1], data[2]); + + return this.renderHtml(); + } +}); diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/index.js b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/index.js new file mode 100644 index 000000000..c3e3b7027 --- /dev/null +++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/index.js @@ -0,0 +1,110 @@ +'use strict'; +'require view'; +'require dom'; +'require poll'; +'require fs'; +'require network'; + +document.querySelector('head').appendChild(E('link', { + 'rel': 'stylesheet', + 'type': 'text/css', + 'href': L.resource('view/dashboard/css/custom.css') +})); + +function invokeIncludesLoad(includes) { + var tasks = [], has_load = false; + + for (var i = 0; i < includes.length; i++) { + if (typeof(includes[i].load) == 'function') { + tasks.push(includes[i].load().catch(L.bind(function() { + this.failed = true; + }, includes[i]))); + + has_load = true; + } + else { + tasks.push(null); + } + } + + return has_load ? Promise.all(tasks) : Promise.resolve(null); +} + +function startPolling(includes, containers) { + var step = function() { + return network.flushCache().then(function() { + return invokeIncludesLoad(includes); + }).then(function(results) { + for (var i = 0; i < includes.length; i++) { + var content = null; + + if (includes[i].failed) + continue; + + if (typeof(includes[i].render) == 'function') + content = includes[i].render(results ? results[i] : null); + else if (includes[i].content != null) + content = includes[i].content; + + if (content != null) { + + if (i > 1) { + dom.append(containers[1], content); + } else { + containers[i].parentNode.style.display = ''; + containers[i].parentNode.classList.add('fade-in'); + containers[i].parentNode.classList.add('Dashboard'); + dom.content(containers[i], content); + } + } + } + + var ssi = document.querySelector('div.includes'); + if (ssi) { + ssi.style.display = ''; + ssi.classList.add('fade-in'); + } + }); + }; + + return step().then(function() { + poll.add(step); + }); +} + +return view.extend({ + load: function() { + return L.resolveDefault(fs.list('/www' + L.resource('view/dashboard/include')), []).then(function(entries) { + return Promise.all(entries.filter(function(e) { + return (e.type == 'file' && e.name.match(/\.js$/)); + }).map(function(e) { + return 'view.dashboard.include.' + e.name.replace(/\.js$/, ''); + }).sort().map(function(n) { + return L.require(n); + })); + }); + }, + + render: function(includes) { + var rv = E([]), containers = []; + + for (var i = 0; i < includes.length - 1; i++) { + + var container = E('div', { 'class': 'section-content' }); + + rv.appendChild(E('div', { 'class': 'cbi-section-' + i, 'style': 'display:none' }, [ + container + ])); + + containers.push(container); + } + + return startPolling(includes, containers).then(function() { + return rv; + }); + }, + + handleSaveApply: null, + handleSave: null, + handleReset: null +}); diff --git a/modules/luci-mod-dashboard/root/usr/share/luci/menu.d/luci-mod-dashboard.json b/modules/luci-mod-dashboard/root/usr/share/luci/menu.d/luci-mod-dashboard.json new file mode 100644 index 000000000..555884674 --- /dev/null +++ b/modules/luci-mod-dashboard/root/usr/share/luci/menu.d/luci-mod-dashboard.json @@ -0,0 +1,13 @@ +{ + "admin/dashboard": { + "title": "Dashboard", + "order": 1, + "action": { + "type": "view", + "path": "dashboard/index" + }, + "depends": { + "acl": [ "luci-mod-dashboard-index" ] + } + } +} diff --git a/modules/luci-mod-dashboard/root/usr/share/rpcd/acl.d/luci-mod-dashboard.json b/modules/luci-mod-dashboard/root/usr/share/rpcd/acl.d/luci-mod-dashboard.json new file mode 100644 index 000000000..1f331e7b4 --- /dev/null +++ b/modules/luci-mod-dashboard/root/usr/share/rpcd/acl.d/luci-mod-dashboard.json @@ -0,0 +1,41 @@ +{ + "luci-mod-dashboard-routes": { + "description": "Grant access to the system route status", + "read": { + "ubus": { + "file": [ "exec" ] + } + } + }, + + "luci-mod-dashboard-index": { + "description": "Grant access to main status display", + "read": { + "file": { + "/www/luci-static/resources/view/status/include": [ "list" ] + }, + "ubus": { + "file": [ "list", "read" ], + "system": [ "board", "info" ] + } + } + }, + + "luci-mod-dashboard-index-dhcp": { + "description": "Grant access to DHCP status display", + "read": { + "ubus": { + "luci-rpc": [ "getDHCPLeases" ] + } + } + }, + + "luci-mod-dashboard-index-wifi": { + "description": "Grant access to wireless status display", + "read": { + "ubus": { + "iwinfo": [ "assoclist" ] + } + } + } +} |