adrien/tableau-vlans
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

rj45

Browse Source
This commit is contained in:
Adrien MALINGREY 2025-04-01 02:01:47 +02:00
parent 9d5e23d8f0
commit 144edde8e1
3 changed files with 66 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
rj45.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="20"
height="20"
viewBox="0 0 5.2916665 5.2916666"
version="1.1"
id="svg1"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs1" /><g
id="layer1"><path
id="rect1"
style="fill:#2c3e50;fill-opacity:1;stroke-width:0.070003"
d="M 0,0 V 5.2916667 H 5.2916667 V 0 Z m 2.2245153,0.26456284 h 0.9264484 c 0.1791197,0 0.3233547,0.17861648 0.3233547,0.40046728 v 0.0861369 h 1.1373691 c 0.2740052,0 0.4152798,0.19374878 0.4152798,0.53312048 v 2.9297312 c 0,0.339372 -0.1412746,0.5329357 -0.4152798,0.5329357 H 0.67997917 c -0.27400514,0 -0.41541633,-0.1935637 -0.41541633,-0.5329357 V 1.2842875 c 0,-0.3393717 0.14141119,-0.53312052 0.41541633,-0.53312052 H 1.9011608 v -0.0861369 c 0,-0.2218508 0.1442347,-0.40046728 0.3233545,-0.40046724 z" /></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 984 B

34
show.php
View File

@ -45,26 +45,22 @@ echo ("-->");*/
</header>
<main>
<table>
<caption>
<h2>Interfaces</h2>
</caption>
<tbody>
<?php
foreach ($stack as $member => $lines) {
echo "<tr>\n<th>$member</th>\n<td>\n<table class='member'>\n<tbody>\n";
foreach ($lines as $interfaces) {
echo "<tr>\n";
foreach ($interfaces as $interface) {
echo "<td class='{$interface[0]}" . (isset($interface["voice_vlan"]) ? " voice_vlan" : "") . "' title='{$interface[0]}' style='{$interface["style"]}'>{$interface["port"]}</td>\n";
};
echo "</tr>\n";
}
echo "</tr>\n</tbody>\n</table>\n</td>\n</tr>\n";
<div class="stack">
<h2>Interfaces</h2>
<?php
foreach ($stack as $member_id => $lines) {
echo "<div class='member'>\n<span class='member-id'>$member_id</span>\n<table class='interfaces'>\n<tbody>\n";
foreach ($lines as $interfaces) {
echo "<tr>\n";
foreach ($interfaces as $interface) {
echo "<td class='{$interface[0]}" . (isset($interface["voice_vlan"]) ? " voice_vlan" : "") . "' title='{$interface[0]}' style='{$interface["style"]}'>{$interface["port"]}</td>\n";
};
echo "</tr>\n";
}
?>
</tbody>
</table>
echo "</tr>\n</tbody>\n</table>\n</div>\n";
}
?>
</div>
<table class='legend'>
<caption>
<h2>Légende</h2>

52
style.css
View File

@ -116,22 +116,29 @@ td {
}
.member {
display: flex;
border: 8px outset #476079;
border-radius: 6px;
background-color: #34495e;
margin-bottom: .5rem;
}
.member-id {
background: #777;
align-content: center;
color: lightgreen;
font-weight: bold;
border: 1px inset black;
font-family: monospace;
font-size: 1.3em;
margin: 1em 0.5em;
padding: 0.2em 0.4em;
}
.interfaces {
border-spacing: 0;
margin: 0;
border: 8px solid #34495e;
border-radius: 6px;
}
.legend {
border-spacing: 0;
}
.member td {
border: 2px inset #2c3e50;
}
.legend td {
border: 1px inset #2c3e50;
background-color: white;
}
.interface {
@ -140,10 +147,12 @@ td {
min-width: 2em;
height: 2em;
mix-blend-mode: darken;
/*! padding: 0; */
print-color-adjust: exact;
cursor: help;
transition: 0.2s background-color;
background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 5.2916665 5.2916666" version="1.1" id="svg1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs1" /><g id="layer1"><path id="rect1" style="fill:%232c3e50;fill-opacity:1;stroke-width:0.070003" d="M 0,0 V 5.2916667 H 5.2916667 V 0 Z m 2.2245153,0.26456284 h 0.9264484 c 0.1791197,0 0.3233547,0.17861648 0.3233547,0.40046728 v 0.0861369 h 1.1373691 c 0.2740052,0 0.4152798,0.19374878 0.4152798,0.53312048 v 2.9297312 c 0,0.339372 -0.1412746,0.5329357 -0.4152798,0.5329357 H 0.67997917 c -0.27400514,0 -0.41541633,-0.1935637 -0.41541633,-0.5329357 V 1.2842875 c 0,-0.3393717 0.14141119,-0.53312052 0.41541633,-0.53312052 H 1.9011608 v -0.0861369 c 0,-0.2218508 0.1442347,-0.40046728 0.3233545,-0.40046724 z" /></g></svg>');
background-size: cover;
padding-top: 0.2em;
}
.interface:hover {
@ -160,7 +169,7 @@ td {
background-color: hsl(calc(var(--k) * var(--pvid)) 65% 75%);
}
.trunk {
.trunk:not(.shutdown) {
font-weight: bold;
border: 4px solid !important;
border-image-slice: 1 !important;
@ -193,8 +202,7 @@ td {
}
.shutdown:not([class*="loopback-detection action shutdown"]) {
background-color: lightgray !important;
background-image: none !important;
background-color: lightgray;
color: gray !important;
}
@ -214,6 +222,14 @@ td {
left: 0;
}
.legend {
border-spacing: 0;
}
.legend td {
border: 1px inset #2c3e50;
}
footer {
display: flex;
flex-flow: column;