better shutdown and voice-vlan detection
This commit is contained in:
parent
26dc6b3b28
commit
25f0f7cd91
109
style.css
109
style.css
@ -1,84 +1,95 @@
|
|||||||
:root {
|
:root {
|
||||||
--k: 1353651.53435435;
|
--k: 1353651.53435435;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: wrap;
|
flex-flow: wrap;
|
||||||
}
|
}
|
||||||
main > table {
|
main > table {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
text-align: left
|
text-align: left;
|
||||||
}
|
}
|
||||||
.member {
|
.member {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 4px solid #335;
|
border: 4px solid #335;
|
||||||
}
|
}
|
||||||
.legend {
|
.legend {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
}
|
}
|
||||||
.member td,
|
.member td,
|
||||||
.legend td {
|
.legend td {
|
||||||
border: 2px inset;
|
border: 2px inset;
|
||||||
}
|
}
|
||||||
.interface {
|
.interface {
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
min-width: 2em;
|
min-width: 2em;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
mix-blend-mode: darken;
|
mix-blend-mode: darken;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
print-color-adjust: exact;
|
print-color-adjust: exact;
|
||||||
}
|
}
|
||||||
.vlan {
|
.vlan {
|
||||||
background-color: hsl(calc(var(--k)*var(--pvid)) 100% 60%);
|
background-color: hsl(calc(var(--k) * var(--pvid)) 100% 60%);
|
||||||
}
|
}
|
||||||
.trunk {
|
.trunk {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border: 4px solid !important;
|
border: 4px solid !important;
|
||||||
border-image-slice: 1 !important;
|
border-image-slice: 1 !important;
|
||||||
border-image-source: linear-gradient(127deg, red, orange, yellow, green, blue, violet) !important;
|
border-image-source: linear-gradient(
|
||||||
padding: 0;
|
127deg,
|
||||||
|
red,
|
||||||
|
orange,
|
||||||
|
yellow,
|
||||||
|
green,
|
||||||
|
blue,
|
||||||
|
violet
|
||||||
|
) !important;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
.hybrid {
|
.hybrid {
|
||||||
background-image: linear-gradient(135deg, hsl(calc(var(--k)*var(--tagged)) 100% 60%) 50%, hsl(calc(var(--k)*var(--untagged)) 100% 60%) 50%);
|
background-image: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
hsl(calc(var(--k) * var(--tagged)) 100% 60%) 50%,
|
||||||
|
hsl(calc(var(--k) * var(--untagged)) 100% 60%) 50%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
.shutdown {
|
.shutdown:not([class*="loopback-detection action shutdown"]) {
|
||||||
background-color: lightgray !important;
|
background-color: lightgray !important;
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
color: gray !important;
|
color: gray !important;
|
||||||
}
|
}
|
||||||
.poe::before {
|
.poe::before {
|
||||||
content: "⚡";
|
content: "⚡";
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.voice-vlan::after {
|
.voice_vlan::after {
|
||||||
content: "📞";
|
content: "📞";
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
#colorSlider {
|
#colorSlider {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
}
|
}
|
||||||
@media print {
|
@media print {
|
||||||
#colorSliderLabel,
|
#colorSliderLabel,
|
||||||
#colorSlider {
|
#colorSlider {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
157
vlans.php
157
vlans.php
@ -11,81 +11,110 @@ $conf = file_get_contents($path);
|
|||||||
preg_match("/ sysname ([\w-]+)/", $conf, $sysname);
|
preg_match("/ sysname ([\w-]+)/", $conf, $sysname);
|
||||||
preg_match("/ip address ([\d.]+)/", $conf, $address);
|
preg_match("/ip address ([\d.]+)/", $conf, $address);
|
||||||
preg_match_all("/(?<=\n)vlan (?P<pvid>\d+)[\r\n]+(?: name (?P<name>.+)[\r\n]+| description (?P<description>.+)[\r\n]+| .*[\r\n]+)*/", $conf, $vlans, PREG_SET_ORDER);
|
preg_match_all("/(?<=\n)vlan (?P<pvid>\d+)[\r\n]+(?: name (?P<name>.+)[\r\n]+| description (?P<description>.+)[\r\n]+| .*[\r\n]+)*/", $conf, $vlans, PREG_SET_ORDER);
|
||||||
preg_match_all("/(?<=\n)interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)[\r\n]+(?: port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+) tagged|(?P<untagged>\d+)(?: \d+)* untagged)[\r\n]+| port (?:access |trunk |hybrid |pvid |vlan )*(?P<pvid>\d+)[\r\n]+| .*[\r\n]+)*(?<!#)/", $conf, $interfaces, PREG_SET_ORDER);
|
preg_match_all("/(?<=\n)interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)[\r\n]+(?: port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+) tagged|(?P<untagged>\d+)(?: \d+)* untagged)[\r\n]+| port (?:access |trunk |hybrid |pvid |vlan )*(?P<pvid>\d+)[\r\n]+| voice-vlan (?P<voice_vlan>\d+) enable[\r\n]+| .*[\r\n]+)*(?<!#)/", $conf, $interfaces, PREG_SET_ORDER);
|
||||||
$stack = array();
|
$stack = array();
|
||||||
foreach ($interfaces as $interface) {
|
foreach ($interfaces as $interface) {
|
||||||
if (!isset($stack[$interface["member"]])) $stack[$interface["member"]] = array();
|
if (!isset($stack[$interface["member"]])) $stack[$interface["member"]] = array();
|
||||||
$interface["style"] = "";
|
$interface["style"] = "";
|
||||||
if (!empty($interface["pvid"])) $interface["style"] .= "--pvid: ${interface["pvid"]}; ";
|
if (!empty($interface["pvid"])) $interface["style"] .= "--pvid: {$interface["pvid"]}; ";
|
||||||
if (!empty($interface["tagged"])) $interface["style"] .= "--tagged: ${interface["tagged"]}; ";
|
if (!empty($interface["tagged"])) $interface["style"] .= "--tagged: {$interface["tagged"]}; ";
|
||||||
if (!empty($interface["untagged"])) $interface["style"] .= "--untagged: ${interface["untagged"]}; ";
|
if (!empty($interface["untagged"])) $interface["style"] .= "--untagged: {$interface["untagged"]}; ";
|
||||||
$stack[$interface["member"]][$interface["port"]] = $interface;
|
$stack[$interface["member"]][$interface["port"]] = $interface;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* echo ("<!--");
|
echo ("<!--");
|
||||||
var_dump($stack);
|
var_dump($interfaces);
|
||||||
echo ("-->"); */
|
echo ("-->");
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE HTML>
|
<!DOCTYPE HTML>
|
||||||
<html lang='fr'>
|
<html lang='fr'>
|
||||||
<head>
|
|
||||||
<title><?=$sysname[1] ?? "Switch sans nom"?> - Tableau des VLANs</title>
|
|
||||||
<link href="style.css" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<h1>
|
|
||||||
<div><?=$sysname[1] ?? "Switch sans nom"?></div>
|
|
||||||
<small><a href="https://<?=$address[1]?>" target="_blank"><?=$address[1]?></a></small>
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<table>
|
|
||||||
<caption><h2>Interfaces</h2></caption>
|
|
||||||
<tbody>
|
|
||||||
<?php
|
|
||||||
function display_interface($interface, $odd) {
|
|
||||||
if ($interface["port"] % 2 == $odd) {
|
|
||||||
echo "<td class='${interface[0]}' title='${interface[0]}' style='${interface["style"]}'>${interface["port"]}</td>\n";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
foreach ($stack as $member => $interfaces) {
|
<head>
|
||||||
echo "<tr>\n<th>$member</th>\n<td>\n<table class='member'>\n<tbody>\n<tr>\n";
|
<title><?= $sysname[1] ?? "Switch sans nom" ?> - Tableau des VLANs</title>
|
||||||
foreach ($interfaces as $interface) display_interface($interface, 1);
|
<link href="style.css" rel="stylesheet" />
|
||||||
echo "</tr>\n<tr>\n";
|
</head>
|
||||||
foreach ($interfaces as $interface) display_interface($interface, 0);
|
|
||||||
echo "</tr>\n</tbody>\n</table>\n</td>\n</tr>\n";
|
<body>
|
||||||
}
|
<header>
|
||||||
?>
|
<h1>
|
||||||
</tbody>
|
<div><?= $sysname[1] ?? "Switch sans nom" ?></div>
|
||||||
</table>
|
<small><a href="https://<?= $address[1] ?>" target="_blank"><?= $address[1] ?></a></small>
|
||||||
<table class='legend'>
|
</h1>
|
||||||
<caption><h2>Légende</h2></caption>
|
</header>
|
||||||
<thead><tr><th>PVID</th><th>Nom</th><th>Description</th></tr></thead>
|
<main>
|
||||||
<tbody>
|
<table>
|
||||||
<?php
|
<caption>
|
||||||
foreach ($vlans as $vlan) {
|
<h2>Interfaces</h2>
|
||||||
if (isset($vlan["pvid"]) and $vlan["pvid"] != 1) {
|
</caption>
|
||||||
$name = $vlan["name"] ?? "";
|
<tbody>
|
||||||
$description = $vlan["description"] ?? "";
|
<?php
|
||||||
echo "<tr title='${vlan[0]}'><td class='interface vlan' style='--pvid: ${vlan["pvid"]}'>${vlan["pvid"]}</td><td>$name</td><td>$description</td></tr>";
|
function display_interface($interface, $odd)
|
||||||
}
|
{
|
||||||
}
|
if ($interface["port"] % 2 == $odd) {
|
||||||
?>
|
echo "<td class='{$interface[0]}" . (isset($interface["voice_vlan"]) ? " voice_vlan" : "") . "' title='{$interface[0]}' style='{$interface["style"]}'>{$interface["port"]}</td>\n";
|
||||||
<tr><td class='interface trunk'></td><td colspan='2'>Trunk</td></tr>
|
}
|
||||||
<tr><td class='interface hybrid' style='--tagged:60; --untagged:0'></td><td colspan='2'>Hybride (tagged/untagged)</td></tr>
|
}
|
||||||
<tr><td class='interface poe'></td><td colspan='2'>Power on Ethernet</td></tr>
|
|
||||||
<tr><td class='interface voice-vlan'></td><td colspan='2'>Voice-VLAN</td></tr>
|
foreach ($stack as $member => $interfaces) {
|
||||||
<tr><td class='interface shutdown'></td><td colspan='2'>Interface désactivée</td></tr>
|
echo "<tr>\n<th>$member</th>\n<td>\n<table class='member'>\n<tbody>\n<tr>\n";
|
||||||
</tbody>
|
foreach ($interfaces as $interface) display_interface($interface, 1);
|
||||||
</table>
|
echo "</tr>\n<tr>\n";
|
||||||
</main>
|
foreach ($interfaces as $interface) display_interface($interface, 0);
|
||||||
<footer>
|
echo "</tr>\n</tbody>\n</table>\n</td>\n</tr>\n";
|
||||||
<label id="colorSliderLabel" for="colorSlider">Changer les couleurs</label>
|
}
|
||||||
<input id="colorSlider" type="range" min="0" max="2000000" step="0.000000001" value="1353651.53435435"
|
?>
|
||||||
oninput="document.documentElement.style.setProperty('--k', this.value);">
|
</tbody>
|
||||||
</footer>
|
</table>
|
||||||
|
<table class='legend'>
|
||||||
|
<caption>
|
||||||
|
<h2>Légende</h2>
|
||||||
|
</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>PVID</th>
|
||||||
|
<th>Nom</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<?php
|
||||||
|
foreach ($vlans as $vlan) {
|
||||||
|
if (isset($vlan["pvid"]) and $vlan["pvid"] != 1) {
|
||||||
|
$name = $vlan["name"] ?? "";
|
||||||
|
$description = $vlan["description"] ?? "";
|
||||||
|
echo "<tr title='{$vlan[0]}'><td class='interface vlan' style='--pvid: {$vlan["pvid"]}'>{$vlan["pvid"]}</td><td>$name</td><td>$description</td></tr>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<tr>
|
||||||
|
<td class='interface trunk'></td>
|
||||||
|
<td colspan='2'>Trunk</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='interface hybrid' style='--tagged:60; --untagged:0'></td>
|
||||||
|
<td colspan='2'>Hybride (tagged/untagged)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='interface poe'></td>
|
||||||
|
<td colspan='2'>Power on Ethernet</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='interface voice_vlan'></td>
|
||||||
|
<td colspan='2'>ToIP (voice-vlan)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='interface shutdown'></td>
|
||||||
|
<td colspan='2'>Interface désactivée</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<label id="colorSliderLabel" for="colorSlider">Changer les couleurs</label>
|
||||||
|
<input id="colorSlider" type="range" min="0" max="2000000" step="0.000000001" value="1353651.53435435"
|
||||||
|
oninput="document.documentElement.style.setProperty('--k', this.value);">
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user