better shutdown and voice-vlan detection
This commit is contained in:
parent
26dc6b3b28
commit
25f0f7cd91
111
style.css
111
style.css
@ -1,84 +1,95 @@
|
||||
:root {
|
||||
--k: 1353651.53435435;
|
||||
--k: 1353651.53435435;
|
||||
}
|
||||
body {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
main > table {
|
||||
margin: auto;
|
||||
margin: auto;
|
||||
}
|
||||
td {
|
||||
text-align: left
|
||||
text-align: left;
|
||||
}
|
||||
.member {
|
||||
border-spacing: 0;
|
||||
margin: 0;
|
||||
border: 4px solid #335;
|
||||
border-spacing: 0;
|
||||
margin: 0;
|
||||
border: 4px solid #335;
|
||||
}
|
||||
.legend {
|
||||
border-spacing: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.member td,
|
||||
.legend td {
|
||||
border: 2px inset;
|
||||
border: 2px inset;
|
||||
}
|
||||
.interface {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
min-width: 2em;
|
||||
height: 2em;
|
||||
mix-blend-mode: darken;
|
||||
padding: 2px;
|
||||
print-color-adjust: exact;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
min-width: 2em;
|
||||
height: 2em;
|
||||
mix-blend-mode: darken;
|
||||
padding: 2px;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
.vlan {
|
||||
background-color: hsl(calc(var(--k)*var(--pvid)) 100% 60%);
|
||||
background-color: hsl(calc(var(--k) * var(--pvid)) 100% 60%);
|
||||
}
|
||||
.trunk {
|
||||
font-weight: bold;
|
||||
border: 4px solid !important;
|
||||
border-image-slice: 1 !important;
|
||||
border-image-source: linear-gradient(127deg, red, orange, yellow, green, blue, violet) !important;
|
||||
padding: 0;
|
||||
|
||||
font-weight: bold;
|
||||
border: 4px solid !important;
|
||||
border-image-slice: 1 !important;
|
||||
border-image-source: linear-gradient(
|
||||
127deg,
|
||||
red,
|
||||
orange,
|
||||
yellow,
|
||||
green,
|
||||
blue,
|
||||
violet
|
||||
) !important;
|
||||
padding: 0;
|
||||
}
|
||||
.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 {
|
||||
background-color: lightgray !important;
|
||||
background-image: none !important;
|
||||
color: gray !important;
|
||||
.shutdown:not([class*="loopback-detection action shutdown"]) {
|
||||
background-color: lightgray !important;
|
||||
background-image: none !important;
|
||||
color: gray !important;
|
||||
}
|
||||
.poe::before {
|
||||
content: "⚡";
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "⚡";
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.voice-vlan::after {
|
||||
content: "📞";
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
.voice_vlan::after {
|
||||
content: "📞";
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
#colorSlider {
|
||||
width: 33%;
|
||||
width: 33%;
|
||||
}
|
||||
@media print {
|
||||
#colorSliderLabel,
|
||||
#colorSlider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#colorSliderLabel,
|
||||
#colorSlider {
|
||||
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("/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)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();
|
||||
foreach ($interfaces as $interface) {
|
||||
if (!isset($stack[$interface["member"]])) $stack[$interface["member"]] = array();
|
||||
$interface["style"] = "";
|
||||
if (!empty($interface["pvid"])) $interface["style"] .= "--pvid: ${interface["pvid"]}; ";
|
||||
if (!empty($interface["tagged"])) $interface["style"] .= "--tagged: ${interface["tagged"]}; ";
|
||||
if (!empty($interface["untagged"])) $interface["style"] .= "--untagged: ${interface["untagged"]}; ";
|
||||
if (!empty($interface["pvid"])) $interface["style"] .= "--pvid: {$interface["pvid"]}; ";
|
||||
if (!empty($interface["tagged"])) $interface["style"] .= "--tagged: {$interface["tagged"]}; ";
|
||||
if (!empty($interface["untagged"])) $interface["style"] .= "--untagged: {$interface["untagged"]}; ";
|
||||
$stack[$interface["member"]][$interface["port"]] = $interface;
|
||||
}
|
||||
|
||||
/* echo ("<!--");
|
||||
var_dump($stack);
|
||||
echo ("-->"); */
|
||||
echo ("<!--");
|
||||
var_dump($interfaces);
|
||||
echo ("-->");
|
||||
|
||||
?>
|
||||
<!DOCTYPE HTML>
|
||||
<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) {
|
||||
echo "<tr>\n<th>$member</th>\n<td>\n<table class='member'>\n<tbody>\n<tr>\n";
|
||||
foreach ($interfaces as $interface) display_interface($interface, 1);
|
||||
echo "</tr>\n<tr>\n";
|
||||
foreach ($interfaces as $interface) display_interface($interface, 0);
|
||||
echo "</tr>\n</tbody>\n</table>\n</td>\n</tr>\n";
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</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'>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>
|
||||
<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]}" . (isset($interface["voice_vlan"]) ? " voice_vlan" : "") . "' title='{$interface[0]}' style='{$interface["style"]}'>{$interface["port"]}</td>\n";
|
||||
}
|
||||
}
|
||||
|
||||
foreach ($stack as $member => $interfaces) {
|
||||
echo "<tr>\n<th>$member</th>\n<td>\n<table class='member'>\n<tbody>\n<tr>\n";
|
||||
foreach ($interfaces as $interface) display_interface($interface, 1);
|
||||
echo "</tr>\n<tr>\n";
|
||||
foreach ($interfaces as $interface) display_interface($interface, 0);
|
||||
echo "</tr>\n</tbody>\n</table>\n</td>\n</tr>\n";
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</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>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user