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

Compare commits

base: adrien:b54b4f6bfce4d5304a5fa0152c250be8aa00ffca
Branches Tags
adrien:master
...
compare: adrien:master
Branches Tags
adrien:master

29 Commits
b54b4f6bfc ... master

Author SHA1 Message Date
adrien
d5fc01f78f remove member 0 2025-07-09 11:26:10 +02:00
adrien
1bcb980fd6 hide hybrid, better print 2025-07-08 17:50:57 +02:00
adrien
6193ae3edb ptn 2025-05-25 14:04:33 +02:00
adrien
0a4921646e little changes 2025-05-22 13:58:14 +02:00
adrien
abc3d30473 little fixes 2025-05-20 14:56:27 +02:00
adrien
8c4ae9626f fix tagged 2025-05-20 14:53:30 +02:00
adrien
a6189199ee untagged color 2025-05-20 14:33:09 +02:00
adrien
35f9760b24 Merge remote-tracking branch 'origin/HEAD' 2025-05-20 11:41:57 +02:00
adrien
f1dad26944 change hybrid colors 2025-05-20 11:38:54 +02:00
adrien
266ed7e24e ; 2025-05-20 11:13:02 +02:00
adrien
267303d4ce check file_exists 2025-05-20 00:30:25 +02:00
adrien
5f087b1689 no id for label 2025-05-19 22:43:02 +02:00
adrien
30b47dedde [style*="--pvid: ${pvid}"] 2025-05-19 19:15:58 +02:00
adrien
341b017c01 404 2025-05-19 18:15:11 +02:00
adrien
d9415c7fa6 change url 2025-05-19 17:11:28 +02:00
adrien
5a63ac033e schéma 2025-05-19 16:23:52 +02:00
adrien
25db944ae5 fix trunk vlan 2025-05-19 16:21:50 +02:00
adrien
2efdbb339a locale 2025-05-19 15:02:20 +02:00
adrien
e988e09b7f Merge remote-tracking branch 'origin/HEAD' 2025-05-19 14:55:24 +02:00
adrien
a36abb0ddf custom colors 2025-05-19 14:52:05 +02:00
adrien
3886890c06 favicon 2025-05-07 15:08:48 +02:00
adrien
ea88991a9d Revert "7 segments" 
This reverts commit 6258874114.
 2025-05-06 17:54:34 +02:00
adrien
6258874114 7 segments 2025-05-03 02:04:03 +02:00
adrien
c8c376f1dd hybrid 2025-04-30 15:33:15 +02:00
adrien
5c625b0ec2 hybrid return 2025-04-15 11:17:54 +02:00
adrien
93b7498b75 rename 2025-04-11 17:08:07 +02:00
adrien
c5c2dc5a10 tweak style 2025-04-10 17:26:17 +02:00
adrien
74c0812128 pointer 2025-04-03 14:19:51 +02:00
adrien
98f38c51d8 margin li 2025-04-02 16:48:57 +02:00
6 changed files with 152 additions and 111 deletions
Expand all files Collapse all files

4
config.php Normal file
View File

@ -0,0 +1,4 @@
<?php
$basedir = __DIR__ . "/confs";
$locale = "fr_FR.UTF-8";

0
custom.css Normal file
View File

1
favicon.svg Normal file
View File

@ -0,0 +1 @@
<svg role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="#cfd8dc" d="M12.99999994 11.66666662c0 .73633333-.597 1.33333332-1.33333332 1.33333332H2.33333338c-.73633333 0-1.33333332-.597-1.33333332-1.33333332V2.33333338c0-.73633333.597-1.33333332 1.33333332-1.33333332h9.33333324c.73633333 0 1.33333332.597 1.33333332 1.33333332v9.33333324z"/><g fill="#455a64"><path d="M2.66666671 3.33333337h8.66666658v5.33333328H2.66666671z"/><path d="M4.00000003 7.33333333h5.99999994v2.33333331H4.00000003z"/><path d="M5.33333335 8.66666665h3.3333333v1.99999998h-3.3333333z"/></g><path fill="#fdd835" d="M3.6666667 4.00000003h.66666666v2.33333331H3.6666667zm.99999999 0h.66666666v2.33333331h-.66666666zm.99999999 0h.66666666v2.33333331h-.66666666zm.99999999 0h.66666666v2.33333331h-.66666666zm.99999999 0h.66666666v2.33333331h-.66666666zm.99999999 0h.66666666v2.33333331h-.66666666zm.99999999 0h.66666666v2.33333331h-.66666666z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 984 B

75
index.php
View File

@ -1,53 +1,62 @@
<?php
require_once "config.php";
setlocale(LC_CTYPE, $locale);
if ($_SERVER["QUERY_STRING"] != "") {
include "switch.php";
exit;
}
?>
<!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">
<link rel="icon" type="image/svg" href="favicon.svg">
</head> </head>
<body> <body>
<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"; function recursive_ls($path) {
global $basedir;
function recursive_ls($path) if (substr(basename($path), 0, 1) == '.') {
{ return "";
global $basedir; }
if (substr(basename($path), 0, 1) == '.') { if (is_dir($path)) {
return ""; $str = "";
} foreach (scandir($path) as $filename) {
$str .= recursive_ls("$path/$filename");
if (is_dir($path)) { }
$str = ""; if ($str == "") {
foreach (scandir($path) as $filename) { return "";
$str .= recursive_ls("$path/$filename"); } else {
} if ($path == $basedir) {
if ($str == "") { return "<ul>\n$str\n</ul>\n";
return ""; } else {
} else { return "<li>\n<details>\n<summary>" . basename($path) . "</summary>\n<ul>\n" . $str . "</ul>\n</details>\n</li>\n";
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 "";
} }
}
}
echo recursive_ls($basedir); if (substr($path, -4) == ".cfg") {
?> return "<li><a href='?" . str_replace("$basedir/", "", $path) . "' target='_blank'>" . basename($path) . "</a></li>\n";
}
return "";
}
echo recursive_ls($basedir);
?>
</ul> </ul>
</div> </div>
</body> </body>
</html> </html>

95
style.css
View File

@ -12,12 +12,15 @@
} }
body { body {
margin: 2rem auto; margin: 0;
padding: 0 1rem; padding: 2rem 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;
display: flex;
flex-direction: column;
height: 100vh;
} }
h1 { h1 {
@ -40,6 +43,7 @@ h2 {
transition: background-color 0.3s; transition: background-color 0.3s;
margin-bottom: 0.5em; margin-bottom: 0.5em;
font-weight: bold; font-weight: bold;
cursor: pointer;
} }
.file-list summary:hover { .file-list summary:hover {
@ -59,7 +63,7 @@ h2 {
} }
.file-list li { .file-list li {
margin-left: 0.5rem; margin-left: 1.2rem;
} }
.file-list a::before { .file-list a::before {
@ -93,10 +97,11 @@ h2 {
} }
main { main {
flex-grow: 2;
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-around;
gap: 1rem; gap: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -135,15 +140,21 @@ main {
vertical-align: middle; vertical-align: middle;
min-width: 2em; min-width: 2em;
height: 2em; height: 2em;
cursor: help;
transition: 0.2s background-color; transition: 0.2s background-color;
border: 2px inset #476079; border: 3px inset #476079;
border-image-width: 4px; border-image-width: 5px;
border-image-slice: 3; border-image-slice: 3;
border-image-source: url(rj45.svg); border-image-source: url(rj45.svg);
border-image-repeat: stretch; border-image-repeat: stretch;
background-color: white; background-color: white;
print-color-adjust: exact; print-color-adjust: exact;
background-size: cover;
background-position: center;
background-origin: border-box;
}
[title] {
cursor: help;
} }
.member tr:nth-child(even) .interface { .member tr:nth-child(even) .interface {
@ -156,11 +167,12 @@ main {
.vlan { .vlan {
--pvid: 0; --pvid: 0;
color: #ecf0f1; --pvid-color: hsl(
text-shadow: 0 1px 2px black;
background-color: hsl(
calc(var(--hue) * var(--pvid)) var(--saturation) var(--lightness) calc(var(--hue) * var(--pvid)) var(--saturation) var(--lightness)
); );
color: #ecf0f1;
text-shadow: 1px 2px 2px black;
background-color: var(--pvid-color);
} }
.vlan:hover { .vlan:hover {
@ -171,43 +183,23 @@ main {
.trunk:not(.shutdown) { .trunk:not(.shutdown) {
font-weight: bold; font-weight: bold;
background-image: linear-gradient( background-image: linear-gradient(
127deg, 140deg,
red, red 18%,
orange, orange,
yellow, yellow,
green, green,
blue, blue,
violet magenta,
) !important; violet 82%
);
} }
/*.trunk:not(.shutdown) {
font-weight: bold;
border: 4px solid;
border-image-slice: 1 !important;
border-image-source: linear-gradient(
127deg,
red,
orange,
yellow,
green,
blue,
violet
) !important;
}*/
/*.hybrid { /*.hybrid {
--tagged: 0; --tagged: 0;
--tagged-color: hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness));
--untagged: var(--pvid); --untagged: var(--pvid);
background-image: linear-gradient( --untagged-color: hsl(calc(var(--hue) * var(--untagged)) var(--saturation) var(--lightness));
135deg, background-image: linear-gradient(145deg, transparent 65%, var(--tagged-color) 65%);
hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness)) 50%,
hsl(calc(var(--hue) * var(--untagged)) var(--saturation) var(--lightness))
50%
);
background-size: cover;
background-position: center;
background-origin: border-box;
}*/ }*/
.shutdown:not([class*="loopback-detection action shutdown"]) { .shutdown:not([class*="loopback-detection action shutdown"]) {
@ -217,20 +209,20 @@ main {
text-shadow: none; text-shadow: none;
} }
.poe::before { .voice_vlan::before {
content: "⚡";
position: absolute;
top: -0.5em;
right: -0.5em;
}
.voice_vlan::after {
content: "📞"; content: "📞";
position: absolute; position: absolute;
bottom: -0.4em; bottom: -0.4em;
left: -0.4em; left: -0.4em;
} }
.poe::after {
content: "⚡";
position: absolute;
top: -0.5em;
right: -0.5em;
}
.legend { .legend {
border-spacing: 0; border-spacing: 0;
} }
@ -251,10 +243,19 @@ footer {
width: 33%; width: 33%;
} }
input[type="color"] {
opacity: 0%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
@media print { @media print {
body { body {
margin: auto; margin: auto;
padding: 0;
background-color: unset; background-color: unset;
} }

88
show.php → switch.php
View File

@ -1,50 +1,60 @@
<?php <?php
$basedir = __DIR__ . "/confs/";
$path = realpath($basedir . filter_input(INPUT_GET, "switch", FILTER_SANITIZE_STRING)); $path = realpath($basedir . DIRECTORY_SEPARATOR . ltrim(urldecode($_SERVER["QUERY_STRING"]), '/'));
if (strpos($path, $basedir) !== 0 || substr($path, -4) != ".cfg") {
header('HTTP/1.1 404 Not Found'); if (
die(); strpos($path, $basedir) !== 0
|| substr($path, -4) != ".cfg"
|| !file_exists($path)
) {
http_response_code(404);
die("Fichier non trouvé");
} }
$conf = file_get_contents($path); $conf = file_get_contents($path);
if ($conf === false) {
http_response_code(404);
die("Fichier non trouvé");
}
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)"; $startPtn = "(?<=[\r\n])";
$NLP = "[\r\n]+"; $NL = "(?:[\r\n]+)";
$vlanPvidPattern = "vlan (?P<pvid>\d+)$NLP"; $vlanPvidPtn = "vlan (?P<pvid>\d+)$NL";
$vlanNamePattern = " name (?P<name>.+)$NLP"; $vlanNamePtn = "$startPtn name (?P<name>.+)$NL";
$vlanDescriptionPattern = " description (?P<description>.+)$NLP"; $vlanDescriptionPtn = "$startPtn description (?P<description>.+)$NL";
$otherPattern = " .*$NLP"; $otherPtn = "$startPtn .*$NL";
$endPattern = "(?<!#)"; $endPtn = "(?<!#)";
preg_match_all("/$startPattern$vlanPvidPattern(?:$vlanNamePattern|$vlanDescriptionPattern|$otherPattern)*$endPattern/", $conf, $vlans, PREG_SET_ORDER); preg_match_all("/$startPtn$vlanPvidPtn(?:$vlanNamePtn|$vlanDescriptionPtn|$otherPtn)*$endPtn/", $conf, $vlans, PREG_SET_ORDER);
$interfaceAddressPattern = "interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)$NLP"; $interfaceAddressPtn = "interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)$NL";
$portAccessPattern = " port (?:access |trunk |hybrid |pvid |vlan )*(?P<pvid>\d+)$NLP"; $pvidPtn = "$startPtn port (?:access|trunk pvid|hybrid pvid) vlan (?P<pvid>\d+)$NL";
$portHybridPattern = " port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+)(?: [0-9a-z ]*)? tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NLP"; $portHybridPtn = "$startPtn port hybrid vlan (?:(?P<tagged>\d+)(?: (?:to|\d+))* tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NL";
$voiceVlanPattern = " voice-vlan (?P<voice_vlan>\d+) enable$NLP"; $voiceVlanPtn = "$startPtn voice-vlan (?P<voice_vlan>\d+) enable$NL";
preg_match_all("/$startPattern$interfaceAddressPattern(?:$portAccessPattern|$portHybridPattern|$voiceVlanPattern|$otherPattern)*$endPattern/", $conf, $interfaces, PREG_SET_ORDER); preg_match_all("/$startPtn$interfaceAddressPtn(?:$pvidPtn|$portHybridPtn|$voiceVlanPtn|$otherPtn)*$endPtn/", $conf, $interfaces, PREG_SET_ORDER);
$stack = array(); $stack = array();
foreach ($interfaces as $interface) { foreach ($interfaces as $interface) {
if ($interface["member"] == 0) continue;
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"]};";
if (!empty($interface["voice_vlan"])) $interface["style"] .= "--voice-vlan: {$interface["voice_vlan"]}; "; if (!empty($interface["voice_vlan"])) $interface["style"] .= " --voice-vlan: {$interface["voice_vlan"]};";
$stack[$interface["member"]][1 - $interface["port"] % 2][$interface["port"]] = $interface; $stack[$interface["member"]][1 - $interface["port"] % 2][$interface["port"]] = $interface;
} }
/*echo ("<!--");
var_dump($stack);
echo ("-->");*/
?> ?>
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html lang='fr'> <html lang='fr'>
<head> <head>
<title><?= $sysname[1] ?? "Switch sans nom" ?> - Tableau des VLANs</title> <title><?= $sysname[1] ?? "Switch sans nom" ?> - Schéma des VLANs</title>
<link rel="icon" type="image/svg" href="favicon.svg">
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<link href="custom.css" rel="stylesheet" />
<style id="customColors"></style>
</head> </head>
<body> <body>
@ -90,7 +100,7 @@ echo ("-->");*/
if (isset($vlan["pvid"]) and $vlan["pvid"] != 1) { if (isset($vlan["pvid"]) and $vlan["pvid"] != 1) {
$name = $vlan["name"] ?? ""; $name = $vlan["name"] ?? "";
$description = $vlan["description"] ?? ""; $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 title='{$vlan[0]}'><td class='interface vlan {$vlan["pvid"]}' style='--pvid: {$vlan["pvid"]};'>{$vlan["pvid"]}<input type='color' oninput='changeColor({$vlan["pvid"]}, this.value)' title='Changer la couleur' /></td><td>$name</td><td>$description</td></tr>";
} }
} }
?> ?>
@ -100,7 +110,7 @@ echo ("-->");*/
</tr> </tr>
<!--<tr> <!--<tr>
<td class='interface hybrid' style='--tagged:60; --untagged:0'></td> <td class='interface hybrid' style='--tagged:60; --untagged:0'></td>
<td colspan='2'>Hybride (tagged/untagged)</td> <td colspan='2'>Hybride (PVID / tagged)</td>
</tr>--> </tr>-->
<tr> <tr>
<td class='interface poe'></td> <td class='interface poe'></td>
@ -118,12 +128,28 @@ echo ("-->");*/
</table> </table>
</main> </main>
<footer> <footer>
<label id="colorSliderLabel" for="colorSlider" class="no-print">Changer les couleurs</label> <label for="colorSlider" class="no-print">Changer les couleurs (ou cliquez dans la légende)</label>
<input id="colorSlider" type="range" min="0" max="360" step="0.000000001" value="58.3" <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" /> 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="<?= 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> <a href="." class="link no-print">← Retour à la liste</a>
</footer> </footer>
<script>
function changeColor(pvid, color) {
for (let i = customColors.sheet.cssRules.length - 1; i >= 0; i--) {
if (
(customColors.sheet.cssRules[i].selectorText == `[style*="--pvid: ${pvid};"]`) ||
(customColors.sheet.cssRules[i].selectorText == `[style*="--tagged: ${pvid};"]`) ||
(customColors.sheet.cssRules[i].selectorText == `[style*="--untagged: ${pvid};"]`)
) {
customColors.sheet.deleteRule(i)
}
}
customColors.sheet.insertRule(`[style*="--pvid: ${pvid};"] { --pvid-color: ${color} }`)
customColors.sheet.insertRule(`[style*="--tagged: ${pvid};"] { --tagged-color: ${color} }`)
customColors.sheet.insertRule(`[style*="--untagged: ${pvid};"] { --untagged-color: ${color} }`)
}
</script>
</body> </body>
</html> </html>