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

flex

Browse Source
This commit is contained in:
Adrien MALINGREY 2025-04-02 12:09:53 +02:00
parent 88228aedae
commit e74d49e34c
3 changed files with 155 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
index.php
View File

@ -1,51 +1,53 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html lang='fr'> <html lang='fr'>
<head> <head>
<title>Schémas des VLANs</title> <title>Schémas des VLANs</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
</head> </head>
<body> <body>
<div class="container"> <h1>Schémas des VLANs</h1>
<h1>Schémas des VLANs</h1> <div class="file-list">
<div class="file-list"> <ul>
<ul> <?php
<?php $basedir = __DIR__ . "/confs";
$basedir = __DIR__ . "/confs";
function recursive_ls($path) { function recursive_ls($path)
global $basedir; {
global $basedir;
if (substr(basename($path), 0, 1) == '.') { if (substr(basename($path), 0, 1) == '.') {
return ""; return "";
}
if (is_dir($path)) {
$str = "";
foreach (scandir($path) as $filename) {
$str .= recursive_ls("$path/$filename");
}
if ($str == "") {
return "";
} else {
if ($path == $basedir) {
return "<ul>\n$str\n</ul>\n";
} else {
return "<li>\n<details>\n<summary>" . basename($path) . "</summary>\n<ul>\n" . $str . "</ul>\n</details>\n</li>\n";
} }
if (is_dir($path)) {
$str = "";
foreach (scandir($path) as $filename) {
$str .= recursive_ls("$path/$filename");
}
if ($str == "") {
return "";
} else {
if ($path == $basedir) {
return "<ul>\n$str\n</ul>\n";
} else {
return "<li>\n<details>\n<summary>" . basename($path) . "</summary>\n<ul>\n" . $str . "</ul>\n</details>\n</li>\n";
}
}
}
if (substr($path, -4) == ".cfg") {
return "<li><a href='show.php?switch=" . str_replace("$basedir/", "", $path) . "' target='_blank'>" . basename($path) . "</a></li>\n";
}
return "";
} }
}
if (substr($path, -4) == ".cfg") { echo recursive_ls($basedir);
return "<li><a href='show.php?switch=".str_replace("$basedir/", "", $path)."' target='_blank'>" . basename($path) . "</a></li>\n"; ?>
} </ul>
</div>
return "";
}
echo recursive_ls($basedir);
?>
</ul>
</div>
</div>
</body> </body>
</html> </html>

206
show.php
View File

@ -1,39 +1,39 @@
<?php <?php
$basedir = __DIR__ . "/confs/"; $basedir = __DIR__ . "/confs/";
$path = realpath($basedir . filter_input(INPUT_GET, "switch", FILTER_SANITIZE_STRING)); $path = realpath($basedir . filter_input(INPUT_GET, "switch", FILTER_SANITIZE_STRING));
if (strpos($path, $basedir) !== 0 || substr($path, -4) != ".cfg") { if (strpos($path, $basedir) !== 0 || substr($path, -4) != ".cfg") {
header('HTTP/1.1 404 Not Found'); header('HTTP/1.1 404 Not Found');
die(); die();
} }
$conf = file_get_contents($path); $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);
$startPattern = "(?<=\n)"; $startPattern = "(?<=\n)";
$NLPattern = "[\r\n]+"; $NLPattern = "[\r\n]+";
$vlanPvidPattern = "vlan (?P<pvid>\d+)$NLPattern"; $vlanPvidPattern = "vlan (?P<pvid>\d+)$NLPattern";
$vlanNamePattern = " name (?P<name>.+)$NLPattern"; $vlanNamePattern = " name (?P<name>.+)$NLPattern";
$vlanDescriptionPattern = " description (?P<description>.+)$NLPattern"; $vlanDescriptionPattern = " description (?P<description>.+)$NLPattern";
$otherPattern = " .*$NLPattern"; $otherPattern = " .*$NLPattern";
$endPattern = "(?<!#)"; $endPattern = "(?<!#)";
preg_match_all("/$startPattern$vlanPvidPattern(?:$vlanNamePattern|$vlanDescriptionPattern|$otherPattern)*$endPattern/", $conf, $vlans, PREG_SET_ORDER); preg_match_all("/$startPattern$vlanPvidPattern(?:$vlanNamePattern|$vlanDescriptionPattern|$otherPattern)*$endPattern/", $conf, $vlans, PREG_SET_ORDER);
$interfaceAddressPattern = "interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)$NLPattern"; $interfaceAddressPattern = "interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)$NLPattern";
$portHybridPattern = " port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+)(?: [0-9a-z ]*)? tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NLPattern"; $portHybridPattern = " port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+)(?: [0-9a-z ]*)? tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NLPattern";
$portAccessPattern = " port (?:access |trunk |hybrid |pvid |vlan )*(?P<pvid>\d+)$NLPattern"; $portAccessPattern = " port (?:access |trunk |hybrid |pvid |vlan )*(?P<pvid>\d+)$NLPattern";
$voiceVlanPattern = " voice-vlan (?P<voice_vlan>\d+) enable$NLPattern"; $voiceVlanPattern = " voice-vlan (?P<voice_vlan>\d+) enable$NLPattern";
preg_match_all("/$startPattern$interfaceAddressPattern(?:$portHybridPattern|$portAccessPattern|$voiceVlanPattern|$otherPattern)*$endPattern/", $conf, $interfaces, PREG_SET_ORDER); preg_match_all("/$startPattern$interfaceAddressPattern(?:$portHybridPattern|$portAccessPattern|$voiceVlanPattern|$otherPattern)*$endPattern/", $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"]] = [[], []]; if (!isset($stack[$interface["member"]])) $stack[$interface["member"]] = [[], []];
$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"]][1 - $interface["port"] % 2][$interface["port"]] = $interface; $stack[$interface["member"]][1 - $interface["port"] % 2][$interface["port"]] = $interface;
} }
/*echo ("<!--"); /*echo ("<!--");
var_dump($stack); var_dump($stack);
echo ("-->");*/ echo ("-->");*/
?> ?>
@ -46,83 +46,81 @@
</head> </head>
<body> <body>
<div class="container"> <header>
<header> <h1>
<h1> <div><?= $sysname[1] ?? "Switch sans nom" ?></div>
<div><?= $sysname[1] ?? "Switch sans nom" ?></div> <small><a href="https://<?= $address[1] ?>" target="_blank" class="link"><?= $address[1] ?></a></small>
<small><a href="https://<?= $address[1] ?>" target="_blank" class="link"><?= $address[1] ?></a></small> </h1>
</h1> </header>
</header>
<main> <main>
<div class="stack"> <div class="stack">
<h2>Interfaces</h2> <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";
}
echo "</tr>\n</tbody>\n</table>\n</div>\n";
}
?>
</div>
<table class='legend'>
<caption>
<h2>Légende</h2>
</caption>
<thead>
<tr>
<th>PVID</th>
<th>Nom</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<?php <?php
foreach ($stack as $member_id => $lines) { foreach ($vlans as $vlan) {
echo "<div class='member'>\n<span class='member-id'>$member_id</span>\n<table class='interfaces'>\n<tbody>\n"; if (isset($vlan["pvid"]) and $vlan["pvid"] != 1) {
foreach ($lines as $interfaces) { $name = $vlan["name"] ?? "";
echo "<tr>\n"; $description = $vlan["description"] ?? "";
foreach ($interfaces as $interface) { echo "<tr title='{$vlan[0]}'><td class='interface vlan' style='--pvid: {$vlan["pvid"]}'>{$vlan["pvid"]}</td><td>$name</td><td>$description</td></tr>";
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</div>\n";
} }
?> ?>
</div> <tr>
<table class='legend'> <td class='interface trunk'></td>
<caption> <td colspan='2'>Trunk</td>
<h2>Légende</h2> </tr>
</caption> <tr>
<thead> <td class='interface hybrid' style='--tagged:60; --untagged:0'></td>
<tr> <td colspan='2'>Hybride (tagged/untagged)</td>
<th>PVID</th> </tr>
<th>Nom</th> <tr>
<th>Description</th> <td class='interface poe'></td>
</tr> <td colspan='2'>Power on Ethernet</td>
</thead> </tr>
<tbody> <tr>
<?php <td class='interface voice_vlan'></td>
foreach ($vlans as $vlan) { <td colspan='2'>ToIP (voice-vlan)</td>
if (isset($vlan["pvid"]) and $vlan["pvid"] != 1) { </tr>
$name = $vlan["name"] ?? ""; <tr>
$description = $vlan["description"] ?? ""; <td class='interface shutdown'></td>
echo "<tr title='{$vlan[0]}'><td class='interface vlan' style='--pvid: {$vlan["pvid"]}'>{$vlan["pvid"]}</td><td>$name</td><td>$description</td></tr>"; <td colspan='2'>Interface désactivée</td>
} </tr>
} </tbody>
?> </table>
<tr> </main>
<td class='interface trunk'></td> <footer>
<td colspan='2'>Trunk</td> <label id="colorSliderLabel" for="colorSlider" class="no-print">Changer les couleurs</label>
</tr> <input id="colorSlider" type="range" min="0" max="360" step="0.000000001" value="58.3"
<tr> oninput="document.documentElement.style.setProperty('--hue', this.value);" class="no-print" />
<td class='interface hybrid' style='--tagged:60; --untagged:0'></td> <a href="<?= str_replace(__DIR__ . "/", "", $path) ?>" target="_blank" class="link no-print">Télécharger la configuration</a>
<td colspan='2'>Hybride (tagged/untagged)</td> <a href="index.php" class="link no-print">← Retour à la liste</a>
</tr> </footer>
<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" class="no-print">Changer les couleurs</label>
<input id="colorSlider" type="range" min="0" max="360" step="0.000000001" value="15"
oninput="document.documentElement.style.setProperty('--hue', this.value);" class="no-print" />
<a href="<?= str_replace(__DIR__ . "/", "", $path) ?>" target="_blank" class="link no-print">Télécharger la configuration</a>
<a href="index.php" class="link no-print">← Retour à la liste</a>
</footer>
</div>
</body> </body>
</html> </html>

32
style.css
View File

@ -1,5 +1,5 @@
:root { :root {
--hue: 15; --hue: 58.3;
--saturation: 80%; --saturation: 80%;
--lightness: 65%; --lightness: 65%;
} }
@ -8,21 +8,19 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
overflow: visible !important;
} }
body { body {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
line-height: 1.6; line-height: 1.6;
background-color: #f5f5f5; background-color: #f5f5f5;
color: #333; color: #333;
} }
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
h1 { h1 {
color: #2c3e50; color: #2c3e50;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -97,8 +95,11 @@ h2 {
main { main {
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
gap: 1rem; align-items: center;
justify-content: space-between;
row-gap: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
width: 100%;
} }
ul { ul {
@ -109,10 +110,6 @@ details {
cursor: pointer; cursor: pointer;
} }
main > table {
margin: auto;
}
td { td {
text-align: left; text-align: left;
} }
@ -151,7 +148,6 @@ td {
vertical-align: middle; vertical-align: middle;
min-width: 2em; min-width: 2em;
height: 2em; height: 2em;
mix-blend-mode: darken;
cursor: help; cursor: help;
transition: 0.2s background-color; transition: 0.2s background-color;
border: 2px inset #476079; border: 2px inset #476079;
@ -223,7 +219,6 @@ td {
.poe::before { .poe::before {
content: "⚡"; content: "⚡";
font-size: 0.7em;
position: absolute; position: absolute;
top: -0.5em; top: -0.5em;
right: -0.5em; right: -0.5em;
@ -231,10 +226,9 @@ td {
.voice_vlan::after { .voice_vlan::after {
content: "📞"; content: "📞";
font-size: 0.7em;
position: absolute; position: absolute;
bottom: -0.5em; bottom: -0.4em;
left: -0.5em; left: -0.3em;
} }
.legend { .legend {
@ -256,10 +250,6 @@ footer {
} }
@media print { @media print {
* {
overflow: visible !important;
}
.no-print { .no-print {
display: none; display: none;
} }