1
0
Fork 0
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 2018-03-28 10:57:02 +02:00
parent 8b4c845a9e
commit 144e0f45b9
15 changed files with 787 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -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

View file

@ -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