mirror of
https://github.com/Ysurac/openmptcprouter-feeds.git
synced 2025-03-09 15:40:03 +00:00
Add OpenMPTCProuter status view
This commit is contained in:
Ycarus
parent
8b4c845a9e
commit
144e0f45b9
15 changed files with 787 additions and 3 deletions
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,52 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="-435 234.7 87.6 92.3" style="enable-background:new -435 234.7 87.6 92.3;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<rect x="-430.9" y="294" class="st0" width="71.9" height="29"/>
|
||||
<rect id="backgound_modem" x="-430.9" y="294" class="st0" width="71.9" height="29"/>
|
||||
<path id="XMLID_582_" d="M-423.4,309c0-0.5,0.1-0.9,0.3-1.3c0.2-0.4,0.4-0.8,0.7-1.1c0.3-0.3,0.7-0.5,1.1-0.7
|
||||
c0.4-0.2,0.8-0.3,1.3-0.3s0.9,0.1,1.3,0.3c0.4,0.2,0.8,0.4,1.1,0.7c0.3,0.3,0.5,0.7,0.7,1.1c0.2,0.4,0.3,0.9,0.3,1.3
|
||||
c0,0.5-0.1,0.9-0.3,1.3c-0.2,0.4-0.4,0.8-0.7,1.1c-0.3,0.3-0.7,0.5-1.1,0.7c-0.4,0.2-0.9,0.3-1.3,0.3c-0.5,0-0.9-0.1-1.3-0.3
|
||||
c-0.4-0.2-0.8-0.4-1.1-0.7c-0.3-0.3-0.5-0.7-0.7-1.1C-423.3,309.9-423.4,309.5-423.4,309z"/>
|
||||
<path id="XMLID_571_" d="M-409.1,309c0-0.5,0.1-0.9,0.3-1.3c0.2-0.4,0.4-0.8,0.7-1.1c0.3-0.3,0.7-0.5,1.1-0.7
|
||||
c0.4-0.2,0.8-0.3,1.3-0.3s0.9,0.1,1.3,0.3c0.4,0.2,0.8,0.4,1.1,0.7c0.3,0.3,0.5,0.7,0.7,1.1c0.2,0.4,0.3,0.9,0.3,1.3
|
||||
c0,0.5-0.1,0.9-0.3,1.3c-0.2,0.4-0.4,0.8-0.7,1.1c-0.3,0.3-0.7,0.5-1.1,0.7c-0.4,0.2-0.9,0.3-1.3,0.3c-0.5,0-0.9-0.1-1.3-0.3
|
||||
c-0.4-0.2-0.8-0.4-1.1-0.7c-0.3-0.3-0.5-0.7-0.7-1.1C-409,309.9-409.1,309.5-409.1,309z"/>
|
||||
<path id="XMLID_696_" d="M-365.4,290H-376v-31h-4v31h-44.5c-6,0-10.5,5.1-10.5,11.1v15.4c0,6,4.5,10.5,10.5,10.5h58.4
|
||||
c6,0,11.2-4.6,11.2-10.6v-16.1C-355,294.7-359.8,290-365.4,290z M-359,316.4c0,3.8-3.4,6.6-7.2,6.6h-58.3c-3.8,0-6.5-2.8-6.5-6.5
|
||||
v-15.4c0-3.8,2.8-7.1,6.5-7.1h59.1c3.3,0,6.4,3,6.4,6.3V316.4z"/>
|
||||
<g id="XMLID_526_">
|
||||
<path id="XMLID_514_" d="M-398.6,283.4l-1.4-1.5l-0.1-0.1c-2.7-2.8-4.8-6.2-6.3-10.1c-1.5-3.8-2.2-8.1-2.2-12.7s0.7-8.8,2.2-12.7
|
||||
c1.5-3.9,3.6-7.3,6.3-10.1c0,0.1,0.1,0,0.1-0.1l1.4-1.4l2.8,2.8l-1.6,1.6c-2.3,2.4-4.1,5.3-5.4,8.7c-1.3,3.4-1.9,7.2-1.9,11.3
|
||||
s0.7,7.9,1.9,11.3c1.3,3.4,3.1,6.3,5.4,8.7c0,0,0,0,0.1,0.1l1.4,1.4L-398.6,283.4z"/>
|
||||
</g>
|
||||
<g id="XMLID_525_">
|
||||
<path id="XMLID_512_" d="M-393,277.7l-1.4-1.4c-0.1-0.1-0.2-0.1-0.2-0.2c-2-2.1-3.6-4.6-4.7-7.5c-1.1-2.9-1.7-6.1-1.7-9.5
|
||||
c0-3.4,0.6-6.6,1.6-9.5c1.1-2.9,2.7-5.4,4.7-7.6c0.1-0.1,0.2-0.1,0.2-0.2l1.5-1.4l2.9,2.8l-1.4,1.4c-0.1,0.1-0.1,0.1-0.2,0.2
|
||||
c-1.7,1.7-3,3.8-3.9,6.2c-0.9,2.4-1.4,5.1-1.4,8.1c0,2.9,0.5,5.6,1.4,8.1c0.9,2.4,2.2,4.5,3.9,6.2c0.1,0.1,0.1,0.1,0.2,0.2l1.4,1.4
|
||||
L-393,277.7z"/>
|
||||
</g>
|
||||
<g id="XMLID_524_">
|
||||
<path id="XMLID_511_" d="M-387,271.8l-1.4-1.4c-0.2-0.1-0.3-0.2-0.3-0.3c-1.3-1.4-2.3-3-3.1-4.9c-0.7-1.9-1.1-3.9-1.1-6.1
|
||||
c0-2.2,0.4-4.3,1.1-6.1c0.7-1.9,1.7-3.5,3.1-4.9c0.1-0.1,0.2-0.2,0.3-0.3l1.5-1.5l2.8,2.9l-1.7,1.6c-0.9,1-1.7,2.2-2.2,3.6
|
||||
s-0.8,3-0.8,4.7c0,1.7,0.3,3.3,0.8,4.7s1.3,2.6,2.2,3.6c0.1,0.1,0.2,0.2,0.3,0.2l1.4,1.4L-387,271.8z"/>
|
||||
</g>
|
||||
<g id="XMLID_523_">
|
||||
<path id="XMLID_509_" d="M-368.4,271.4l-2.9-2.7l1.4-1.5c0.9-1,1.6-2.1,2.1-3.4c0.5-1.4,0.8-3,0.8-4.7c0-1.7-0.3-3.3-0.8-4.7
|
||||
c-0.5-1.3-1.2-2.5-2.1-3.5l-1.4-1.5l2.9-2.7l1.4,1.5c1.2,1.4,2.2,3,2.9,4.7c0.7,1.9,1.1,3.9,1.1,6.1s-0.4,4.3-1.1,6.1
|
||||
c-0.7,1.8-1.7,3.4-2.9,4.7L-368.4,271.4z"/>
|
||||
</g>
|
||||
<g id="XMLID_522_">
|
||||
<path id="XMLID_491_" d="M-362.5,277.3l-2.9-2.7l1.4-1.5c1.6-1.7,2.8-3.7,3.6-6c0.9-2.4,1.4-5.1,1.4-8.1c0-2.9-0.5-5.6-1.4-8.1
|
||||
c-0.9-2.3-2.1-4.3-3.7-6l-1.4-1.5l2.9-2.7l1.4,1.5c1.9,2.1,3.4,4.5,4.5,7.3c1.1,2.9,1.6,6.1,1.6,9.5c0,3.4-0.6,6.6-1.6,9.5
|
||||
c-1,2.8-2.5,5.2-4.5,7.3L-362.5,277.3z"/>
|
||||
</g>
|
||||
<g id="XMLID_521_">
|
||||
<path id="XMLID_490_" d="M-356.9,282.9l-2.9-2.7l1.4-1.5c2.2-2.4,3.9-5.2,5.1-8.4c1.3-3.4,1.9-7.2,1.9-11.3s-0.7-7.9-1.9-11.3
|
||||
c-1.2-3.2-2.9-6-5.2-8.4l-1.4-1.5l2.9-2.7l1.5,1.6c2.6,2.8,4.6,6,6,9.7c1.5,3.8,2.2,8.1,2.2,12.7s-0.7,8.8-2.2,12.7
|
||||
c-1.5,3.6-3.5,6.9-6,9.6L-356.9,282.9z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,304 @@
|
|||
.container {
|
||||
/* container for entire page. fixes bootstrap theme's ridiculously small page width */
|
||||
max-width: 1044px;
|
||||
}
|
||||
#interface_field {
|
||||
padding: 12px 20px 20px 20px;
|
||||
}
|
||||
#mwan_status_text {
|
||||
display: table;
|
||||
font-size: 14px;
|
||||
margin: auto;
|
||||
max-width: 1044px;
|
||||
min-width: 246px;
|
||||
width: 100%;
|
||||
}
|
||||
.wanon {
|
||||
background-color: #1cc82c;
|
||||
}
|
||||
.wanoff {
|
||||
background-color: #e55712;
|
||||
}
|
||||
.wanon,
|
||||
.wanoff {
|
||||
border-radius: 60px;
|
||||
box-shadow: 0px 2px 5px -3px;
|
||||
float: left;
|
||||
margin: 8px 3px 0px 3px;
|
||||
min-height: 30px;
|
||||
min-width: 235px;
|
||||
padding: 5px 10px 8px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
/* Mwan3 ligthed CSS */
|
||||
.container {
|
||||
/* container for entire page. fixes bootstrap theme's ridiculously small page width */
|
||||
max-width: 1044px;
|
||||
}
|
||||
#interface_field {
|
||||
padding: 0px;
|
||||
}
|
||||
#interface_field td {
|
||||
padding: 0px;
|
||||
}
|
||||
#interface_status_text {
|
||||
display: table;
|
||||
font-size: 14px;
|
||||
margin: auto;
|
||||
max-width: 1044px;
|
||||
min-width: 246px;
|
||||
width: 100%;
|
||||
}
|
||||
ul {
|
||||
margin: 0px;
|
||||
}
|
||||
/*Now the CSS*/
|
||||
.tree ul {
|
||||
position: relative;
|
||||
float: left;
|
||||
transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
}
|
||||
.tree li {
|
||||
float: left;
|
||||
text-align: left;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
padding: 5px 0px 5px 85px;
|
||||
transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
}
|
||||
.tree ul ul {
|
||||
padding-left: 85px;
|
||||
position: relative;
|
||||
}
|
||||
.tree > ul > li:first-child {
|
||||
position: relative;
|
||||
padding-left: 0px;
|
||||
}
|
||||
.tree > ul > li#first-child > a {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
}
|
||||
/*We will use ::before and ::after to draw the connectors
|
||||
Before: Bottom part of the element
|
||||
After: Top part of the element
|
||||
*/
|
||||
.tree ul ul li::before,
|
||||
.tree ul ul li::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
border-left: 2px solid black;
|
||||
width: 85px;
|
||||
height: 50%;
|
||||
float: left;
|
||||
z-index: -10;
|
||||
/*
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
border-top: 2px solid black;
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
background-color: red;
|
||||
*/
|
||||
}
|
||||
.tree ul ul li::after {
|
||||
top: auto;
|
||||
bottom: 50%;
|
||||
border-left: 2px solid black;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
.tree li:first-child {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
}
|
||||
/*We need to remove first top and the last bottom border */
|
||||
.tree li:only-child::after {
|
||||
display: none;
|
||||
}
|
||||
/*Remove space from the top of single children*/
|
||||
.tree li:only-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
/*Remove left connector from first child and
|
||||
right connector from last child*/
|
||||
.tree li:first-child::after,
|
||||
.tree li:last-child::before {
|
||||
border-left: 0px;
|
||||
}
|
||||
/*Adding back the vertical connector to the last nodes*/
|
||||
/*
|
||||
.tree li:last-child::before{
|
||||
//border-top: 2px solid black;
|
||||
border-radius: 0 5px 0 0;
|
||||
-webkit-border-radius: 0 5px 0 0;
|
||||
-moz-border-radius: 0 5px 0 0;
|
||||
}
|
||||
.tree li:first-child::after{
|
||||
border-radius: 5px 0 0 0;
|
||||
-webkit-border-radius: 5px 0 0 0;
|
||||
-moz-border-radius: 5px 0 0 0;
|
||||
}
|
||||
*/
|
||||
/*Time to add right connectors from parents*/
|
||||
.tree ul ul::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
border-top: 2px solid black;
|
||||
width: 85px;
|
||||
height: 100%;
|
||||
}
|
||||
.tree li a {
|
||||
display: inline-block;
|
||||
background-color: #f3f3f3;
|
||||
text-decoration: none;
|
||||
/*
|
||||
border: 1px solid @color-bg-gray;
|
||||
padding: 5px 10px;
|
||||
|
||||
font-family: arial, verdana, tahoma;
|
||||
font-size: 11px;
|
||||
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
|
||||
transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
*/
|
||||
}
|
||||
/*Exception*/
|
||||
.tree li.remote-from-lease {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.tree li.remote-from-lease::before,
|
||||
.tree li#networkRootNode::before {
|
||||
display: none;
|
||||
}
|
||||
.tree li#networkRootNode::after {
|
||||
border: none;
|
||||
}
|
||||
.tree li.remote-from-lease::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 83px;
|
||||
border-left: 2px solid black;
|
||||
border-bottom: none;
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
z-index: -10;
|
||||
}
|
||||
.tree li#networkRootNode {
|
||||
padding: 25px 0 0 0;
|
||||
}
|
||||
.tree li.subnode-only-child::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
border-top: 2px solid black;
|
||||
width: 85px;
|
||||
height: 0;
|
||||
}
|
||||
.tree ul li#networkRootNode:not(:first-child) td::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-left: 2px solid black;
|
||||
border-bottom: none;
|
||||
width: 2px;
|
||||
height: 50%;
|
||||
left: 200px;
|
||||
z-index: -10;
|
||||
}
|
||||
/*Time for some hover effects*/
|
||||
/*We will apply the hover effect the the lineage of the element also*/
|
||||
/*
|
||||
.tree li a:hover, .tree li a:hover+ul li a {
|
||||
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
|
||||
}
|
||||
.tree li a:hover+ul li::after,
|
||||
.tree li a:hover+ul li::before,
|
||||
.tree li a:hover+ul::before,
|
||||
.tree li a:hover+ul ul::before{
|
||||
border-color: #94a0b4;
|
||||
}
|
||||
*/
|
||||
/*Thats all. I hope you enjoyed it.
|
||||
Thanks :)*/
|
||||
.network-node {
|
||||
position: relative;
|
||||
background-color: #f3f3f3;
|
||||
padding: 12px;
|
||||
width: 400px;
|
||||
max-width: 400px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.network-node .equipment-icon {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 64px;
|
||||
max-width: 64px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.network-node .equipment-icon emded,
|
||||
.network-node .equipment-icon img {
|
||||
width: 64px;
|
||||
max-width: 64px;
|
||||
}
|
||||
.network-node .equipment-icon img {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
.network-node .status-icon {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 30px;
|
||||
max-width: 30px;
|
||||
margin-left: 24px;
|
||||
margin-rigth: 8px;
|
||||
top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.network-node .status-icon img {
|
||||
max-width: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.network-node .info {
|
||||
position: relative;
|
||||
float: right;
|
||||
width: 250px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
color: #757575;
|
||||
}
|
||||
.network-node .info .title {
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
}
|
||||
.network-node .info .status-message {
|
||||
display: block;
|
||||
}
|
||||
.network-node .info .status-message.error {
|
||||
color: #e55712;
|
||||
}
|
||||
.network-node .info .status-message.warning {
|
||||
color: #eb9e10;
|
||||
}
|
||||
.network-node .info .content {
|
||||
display: block;
|
||||
}
|
||||
#networkRootNode table td {
|
||||
border-top: 0px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 536 B |
Binary file not shown.
|
After Width: | Height: | Size: 607 B |
Binary file not shown.
|
After Width: | Height: | Size: 575 B |
Binary file not shown.
|
After Width: | Height: | Size: 536 B |
Binary file not shown.
|
After Width: | Height: | Size: 544 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Add table
Add a link
Reference in a new issue