flex
This commit is contained in:
parent
88228aedae
commit
e74d49e34c
80
index.php
80
index.php
@ -1,51 +1,53 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang='fr'>
|
||||
|
||||
<head>
|
||||
<title>Schémas des VLANs</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<title>Schémas des VLANs</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Schémas des VLANs</h1>
|
||||
<div class="file-list">
|
||||
<ul>
|
||||
<?php
|
||||
$basedir = __DIR__ . "/confs";
|
||||
<h1>Schémas des VLANs</h1>
|
||||
<div class="file-list">
|
||||
<ul>
|
||||
<?php
|
||||
$basedir = __DIR__ . "/confs";
|
||||
|
||||
function recursive_ls($path) {
|
||||
global $basedir;
|
||||
function recursive_ls($path)
|
||||
{
|
||||
global $basedir;
|
||||
|
||||
if (substr(basename($path), 0, 1) == '.') {
|
||||
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 (substr(basename($path), 0, 1) == '.') {
|
||||
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 (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") {
|
||||
return "<li><a href='show.php?switch=".str_replace("$basedir/", "", $path)."' target='_blank'>" . basename($path) . "</a></li>\n";
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
echo recursive_ls($basedir);
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
echo recursive_ls($basedir);
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
206
show.php
206
show.php
@ -1,39 +1,39 @@
|
||||
<?php
|
||||
$basedir = __DIR__ . "/confs/";
|
||||
$path = realpath($basedir . filter_input(INPUT_GET, "switch", FILTER_SANITIZE_STRING));
|
||||
if (strpos($path, $basedir) !== 0 || substr($path, -4) != ".cfg") {
|
||||
header('HTTP/1.1 404 Not Found');
|
||||
die();
|
||||
}
|
||||
$basedir = __DIR__ . "/confs/";
|
||||
$path = realpath($basedir . filter_input(INPUT_GET, "switch", FILTER_SANITIZE_STRING));
|
||||
if (strpos($path, $basedir) !== 0 || substr($path, -4) != ".cfg") {
|
||||
header('HTTP/1.1 404 Not Found');
|
||||
die();
|
||||
}
|
||||
|
||||
$conf = file_get_contents($path);
|
||||
$conf = file_get_contents($path);
|
||||
|
||||
preg_match("/ sysname ([\w-]+)/", $conf, $sysname);
|
||||
preg_match("/ip address ([\d.]+)/", $conf, $address);
|
||||
$startPattern = "(?<=\n)";
|
||||
$NLPattern = "[\r\n]+";
|
||||
$vlanPvidPattern = "vlan (?P<pvid>\d+)$NLPattern";
|
||||
$vlanNamePattern = " name (?P<name>.+)$NLPattern";
|
||||
$vlanDescriptionPattern = " description (?P<description>.+)$NLPattern";
|
||||
$otherPattern = " .*$NLPattern";
|
||||
$endPattern = "(?<!#)";
|
||||
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";
|
||||
$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";
|
||||
$voiceVlanPattern = " voice-vlan (?P<voice_vlan>\d+) enable$NLPattern";
|
||||
preg_match_all("/$startPattern$interfaceAddressPattern(?:$portHybridPattern|$portAccessPattern|$voiceVlanPattern|$otherPattern)*$endPattern/", $conf, $interfaces, PREG_SET_ORDER);
|
||||
$stack = array();
|
||||
foreach ($interfaces as $interface) {
|
||||
if (!isset($stack[$interface["member"]])) $stack[$interface["member"]] = [[], []];
|
||||
$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"]}; ";
|
||||
$stack[$interface["member"]][1 - $interface["port"] % 2][$interface["port"]] = $interface;
|
||||
}
|
||||
preg_match("/ sysname ([\w-]+)/", $conf, $sysname);
|
||||
preg_match("/ip address ([\d.]+)/", $conf, $address);
|
||||
$startPattern = "(?<=\n)";
|
||||
$NLPattern = "[\r\n]+";
|
||||
$vlanPvidPattern = "vlan (?P<pvid>\d+)$NLPattern";
|
||||
$vlanNamePattern = " name (?P<name>.+)$NLPattern";
|
||||
$vlanDescriptionPattern = " description (?P<description>.+)$NLPattern";
|
||||
$otherPattern = " .*$NLPattern";
|
||||
$endPattern = "(?<!#)";
|
||||
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";
|
||||
$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";
|
||||
$voiceVlanPattern = " voice-vlan (?P<voice_vlan>\d+) enable$NLPattern";
|
||||
preg_match_all("/$startPattern$interfaceAddressPattern(?:$portHybridPattern|$portAccessPattern|$voiceVlanPattern|$otherPattern)*$endPattern/", $conf, $interfaces, PREG_SET_ORDER);
|
||||
$stack = array();
|
||||
foreach ($interfaces as $interface) {
|
||||
if (!isset($stack[$interface["member"]])) $stack[$interface["member"]] = [[], []];
|
||||
$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"]}; ";
|
||||
$stack[$interface["member"]][1 - $interface["port"] % 2][$interface["port"]] = $interface;
|
||||
}
|
||||
|
||||
/*echo ("<!--");
|
||||
/*echo ("<!--");
|
||||
var_dump($stack);
|
||||
echo ("-->");*/
|
||||
?>
|
||||
@ -46,83 +46,81 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>
|
||||
<div><?= $sysname[1] ?? "Switch sans nom" ?></div>
|
||||
<small><a href="https://<?= $address[1] ?>" target="_blank" class="link"><?= $address[1] ?></a></small>
|
||||
</h1>
|
||||
</header>
|
||||
<header>
|
||||
<h1>
|
||||
<div><?= $sysname[1] ?? "Switch sans nom" ?></div>
|
||||
<small><a href="https://<?= $address[1] ?>" target="_blank" class="link"><?= $address[1] ?></a></small>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="stack">
|
||||
<h2>Interfaces</h2>
|
||||
<main>
|
||||
<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";
|
||||
}
|
||||
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
|
||||
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";
|
||||
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>";
|
||||
}
|
||||
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
|
||||
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" 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>
|
||||
<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" class="no-print">Changer les couleurs</label>
|
||||
<input id="colorSlider" type="range" min="0" max="360" step="0.000000001" value="58.3"
|
||||
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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
32
style.css
32
style.css
@ -1,5 +1,5 @@
|
||||
:root {
|
||||
--hue: 15;
|
||||
--hue: 58.3;
|
||||
--saturation: 80%;
|
||||
--lightness: 65%;
|
||||
}
|
||||
@ -8,21 +8,19 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 1rem;
|
||||
@ -97,8 +95,11 @@ h2 {
|
||||
main {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
row-gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -109,10 +110,6 @@ details {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
main > table {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: left;
|
||||
}
|
||||
@ -151,7 +148,6 @@ td {
|
||||
vertical-align: middle;
|
||||
min-width: 2em;
|
||||
height: 2em;
|
||||
mix-blend-mode: darken;
|
||||
cursor: help;
|
||||
transition: 0.2s background-color;
|
||||
border: 2px inset #476079;
|
||||
@ -223,7 +219,6 @@ td {
|
||||
|
||||
.poe::before {
|
||||
content: "⚡";
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
right: -0.5em;
|
||||
@ -231,10 +226,9 @@ td {
|
||||
|
||||
.voice_vlan::after {
|
||||
content: "📞";
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
bottom: -0.5em;
|
||||
left: -0.5em;
|
||||
bottom: -0.4em;
|
||||
left: -0.3em;
|
||||
}
|
||||
|
||||
.legend {
|
||||
@ -256,10 +250,6 @@ footer {
|
||||
}
|
||||
|
||||
@media print {
|
||||
* {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user