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

Compare commits

base: adrien:8dbc082b37c3cd5db4ddb8a894fe0ad5a53ed46b
Branches Tags
adrien:master
...
compare: adrien:master
Branches Tags
adrien:master

31 Commits
8dbc082b37 ... 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
adrien
b54b4f6bfc TMI 2025-04-02 16:37:41 +02:00
adrien
832a0c1232 TMI 2025-04-02 16:00:47 +02:00
6 changed files with 165 additions and 109 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

19
index.php
View File

@ -1,9 +1,21 @@
<?php
require_once "config.php";
setlocale(LC_CTYPE, $locale);
if ($_SERVER["QUERY_STRING"] != "") {
include "switch.php";
exit;
}
?>
<!DOCTYPE HTML>
<html lang='fr'>
<head>
<title>Schémas des VLANs</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/svg" href="favicon.svg">
</head>
<body>
@ -11,10 +23,7 @@
<div class="file-list">
<ul>
<?php
$basedir = __DIR__ . "/confs";
function recursive_ls($path)
{
function recursive_ls($path) {
global $basedir;
if (substr(basename($path), 0, 1) == '.') {
@ -38,7 +47,7 @@
}
if (substr($path, -4) == ".cfg") {
return "<li><a href='show.php?switch=" . str_replace("$basedir/", "", $path) . "' target='_blank'>" . basename($path) . "</a></li>\n";
return "<li><a href='?" . str_replace("$basedir/", "", $path) . "' target='_blank'>" . basename($path) . "</a></li>\n";
}
return "";

90
style.css
View File

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

86
show.php → switch.php
View File

@ -1,48 +1,60 @@
<?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();
$path = realpath($basedir . DIRECTORY_SEPARATOR . ltrim(urldecode($_SERVER["QUERY_STRING"]), '/'));
if (
strpos($path, $basedir) !== 0
|| substr($path, -4) != ".cfg"
|| !file_exists($path)
) {
http_response_code(404);
die("Fichier non trouvé");
}
$conf = file_get_contents($path);
if ($conf === false) {
http_response_code(404);
die("Fichier non trouvé");
}
preg_match("/ sysname ([\w-]+)/", $conf, $sysname);
preg_match("/ip address ([\d.]+)/", $conf, $address);
$startPattern = "(?<=\n)";
$NLP = "[\r\n]+";
$vlanPvidPattern = "vlan (?P<pvid>\d+)$NLP";
$vlanNamePattern = " name (?P<name>.+)$NLP";
$vlanDescriptionPattern = " description (?P<description>.+)$NLP";
$otherPattern = " .*$NLP";
$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+)$NLP";
$portHybridPattern = " port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+)(?: [0-9a-z ]*)? tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NLP";
$portAccessPattern = " port (?:access |trunk |hybrid |pvid |vlan )*(?P<pvid>\d+)$NLP";
$voiceVlanPattern = " voice-vlan (?P<voice_vlan>\d+) enable$NLP";
preg_match_all("/$startPattern$interfaceAddressPattern(?:$portHybridPattern|$portAccessPattern|$voiceVlanPattern|$otherPattern)*$endPattern/", $conf, $interfaces, PREG_SET_ORDER);
$startPtn = "(?<=[\r\n])";
$NL = "(?:[\r\n]+)";
$vlanPvidPtn = "vlan (?P<pvid>\d+)$NL";
$vlanNamePtn = "$startPtn name (?P<name>.+)$NL";
$vlanDescriptionPtn = "$startPtn description (?P<description>.+)$NL";
$otherPtn = "$startPtn .*$NL";
$endPtn = "(?<!#)";
preg_match_all("/$startPtn$vlanPvidPtn(?:$vlanNamePtn|$vlanDescriptionPtn|$otherPtn)*$endPtn/", $conf, $vlans, PREG_SET_ORDER);
$interfaceAddressPtn = "interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)$NL";
$pvidPtn = "$startPtn port (?:access|trunk pvid|hybrid pvid) vlan (?P<pvid>\d+)$NL";
$portHybridPtn = "$startPtn port hybrid vlan (?:(?P<tagged>\d+)(?: (?:to|\d+))* tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NL";
$voiceVlanPtn = "$startPtn voice-vlan (?P<voice_vlan>\d+) enable$NL";
preg_match_all("/$startPtn$interfaceAddressPtn(?:$pvidPtn|$portHybridPtn|$voiceVlanPtn|$otherPtn)*$endPtn/", $conf, $interfaces, PREG_SET_ORDER);
$stack = array();
foreach ($interfaces as $interface) {
if ($interface["member"] == 0) continue;
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"]};";
if (!empty($interface["voice_vlan"])) $interface["style"] .= " --voice-vlan: {$interface["voice_vlan"]};";
$stack[$interface["member"]][1 - $interface["port"] % 2][$interface["port"]] = $interface;
}
/*echo ("<!--");
var_dump($stack);
echo ("-->");*/
?>
<!DOCTYPE HTML>
<html lang='fr'>
<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="custom.css" rel="stylesheet" />
<style id="customColors"></style>
</head>
<body>
@ -88,7 +100,7 @@ foreach ($interfaces as $interface) {
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 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>";
}
}
?>
@ -96,10 +108,10 @@ foreach ($interfaces as $interface) {
<td class='interface trunk'></td>
<td colspan='2'>Trunk</td>
</tr>
<tr>
<!--<tr>
<td class='interface hybrid' style='--tagged:60; --untagged:0'></td>
<td colspan='2'>Hybride (tagged/untagged)</td>
</tr>
<td colspan='2'>Hybride (PVID / tagged)</td>
</tr>-->
<tr>
<td class='interface poe'></td>
<td colspan='2'>Power on Ethernet</td>
@ -116,12 +128,28 @@ foreach ($interfaces as $interface) {
</table>
</main>
<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"
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>
<a href="." class="link no-print">← Retour à la liste</a>
</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>
</html>