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

modern style

Browse Source
This commit is contained in:
Adrien MALINGREY
2025-03-30 21:10:30 +02:00
parent 25f0f7cd91
commit 5fc24fc45e
3 changed files with 245 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
index.php
View File

@ -2,50 +2,50 @@
<html lang='fr'> <html lang='fr'>
<head> <head>
<title>Schémas des VLANs</title> <title>Schémas des VLANs</title>
<style> <link rel="stylesheet" type="text/css" href="style.css">
ul {
list-style: none;
}
details {
cursor: pointer
}
</style>
</head> </head>
<body> <body>
<header> <div class="container">
<h1>Schémas des VLANs</h1> <h1>Schémas des VLANs</h1>
</header> <div class="file-list">
<main> <ul>
<?php <?php
$basedir = __DIR__ . "/confs"; $basedir = __DIR__ . "/confs";
function recursive_ls($path) { function recursive_ls($path) {
global $basedir; global $basedir;
$strdir = "";
foreach (scandir($path) as $filename) { if (substr(basename($path), 0, 1) == '.') {
if (substr($filename, 0, 1) != '.') { return "";
$fullpath = $path ."/". $filename; }
if (is_dir($fullpath)) {
$str = ""; if (is_dir($path)) {
$cfgPaths = glob($fullpath . '/*.cfg'); $str = "";
if (count($cfgPaths)) { foreach (scandir($path) as $filename) {
$str .= "<ul>\n"; $str .= recursive_ls("$path/$filename");
foreach ($cfgPaths as $conf) { }
$str .= "<li><a href='vlans.php?switch=" . str_replace($basedir.'/', "", $conf) . "' target='_blank'>" . basename($conf) . "</a></li>\n"; if ($str == "") {
} return "";
$str .= "</ul>\n"; } else {
} if ($path == $basedir) {
$str = recursive_ls($fullpath) . $str; return "<ul>\n$str\n</ul>\n";
if ($str != "") $strdir .= "<li>\n<details>\n<summary>" . $filename . "</summary>\n" . $str . "</details>\n</li>\n";; } else {
return "<li>\n<details>\n<summary>" . basename($path) . "</summary>\n<ul>\n" . $str . "</ul>\n</details>\n</li>\n";
} }
} }
} }
if ($strdir != "") $strdir = "<ul>\n" . $strdir . "</ul>\n";
return $strdir; if (substr($path, -4) == ".cfg") {
return "<li><a href='vlans.php?switch=".str_replace("$basedir/", "", $path)."' target='_blank'>" . basename($path) . "</a></li>\n";
}
return "";
} }
echo recursive_ls($basedir); echo recursive_ls($basedir);
?> ?>
</main> </ul>
</div>
</div>
</body> </body>
</html> </html>

135
style.css
View File

@ -1,31 +1,139 @@
:root { :root {
--k: 1353651.53435435; --k: 1353651.53435435;
} }
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body { body {
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;
text-align: center; text-align: center;
} }
h2 {
color: #34495e;
margin-bottom: 0.5rem;
}
.file-list summary {
padding: 0.5rem 1rem;
background-color: white;
border-radius: 4px;
color: #2c3e50;
transition: background-color 0.3s;
margin-bottom: 0.5em;
font-weight: bold;
}
.file-list summary:hover {
background-color: #e0e0e0;
}
.file-list summary::marker {
content: "📁 ";
}
.file-list details[open] summary::marker {
content: "📂 ";
}
.file-list ul {
list-style: none;
}
.file-list li {
margin-left: 0.5rem;
}
.file-list a::before {
content: "📄 "
}
.file-list a {
display: block;
padding: 0.5rem 1rem;
background-color: white;
border-radius: 4px;
text-decoration: none;
color: #2c3e50;
transition: background-color 0.3s;
margin-bottom: 0.5em;
}
.file-list a:hover {
background-color: #e0e0e0;
}
.link {
display: inline-block;
margin-bottom: 1rem;
color: #3498db;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
main { main {
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
gap: 1rem;
} }
ul {
list-style: none;
}
details {
cursor: pointer;
}
main > table { main > table {
margin: auto; margin: auto;
} }
td { td {
text-align: left; text-align: left;
} }
.member { .member {
border-spacing: 0; border-spacing: 0;
margin: 0; margin: 0;
border: 4px solid #335; border: 8px solid #34495e;
border-radius: 6px;
} }
.legend { .legend {
border-spacing: 0; border-spacing: 0;
} }
.legend tbody {
border: 2px solid black;
}
.member td, .member td,
.legend td { .legend td {
border: 2px inset; border: 2px inset #2c3e50;
} }
.interface { .interface {
position: relative; position: relative;
text-align: center; text-align: center;
@ -34,10 +142,24 @@ td {
mix-blend-mode: darken; mix-blend-mode: darken;
padding: 2px; padding: 2px;
print-color-adjust: exact; print-color-adjust: exact;
cursor: help;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: 0.2s background-color;
} }
.interface:hover {
background-color: #ddd;
}
.vlan { .vlan {
background-color: hsl(calc(var(--k) * var(--pvid)) 100% 60%); color: #ecf0f1;
background-color: hsl(calc(var(--k) * var(--pvid)) 65% 60%);
} }
.vlan:hover {
background-color: hsl(calc(var(--k) * var(--pvid)) 65% 70%);
}
.trunk { .trunk {
font-weight: bold; font-weight: bold;
border: 4px solid !important; border: 4px solid !important;
@ -53,6 +175,7 @@ td {
) !important; ) !important;
padding: 0; padding: 0;
} }
.hybrid { .hybrid {
background-image: linear-gradient( background-image: linear-gradient(
135deg, 135deg,
@ -60,11 +183,13 @@ td {
hsl(calc(var(--k) * var(--untagged)) 100% 60%) 50% hsl(calc(var(--k) * var(--untagged)) 100% 60%) 50%
); );
} }
.shutdown:not([class*="loopback-detection action shutdown"]) { .shutdown:not([class*="loopback-detection action shutdown"]) {
background-color: lightgray !important; background-color: lightgray !important;
background-image: none !important; background-image: none !important;
color: gray !important; color: gray !important;
} }
.poe::before { .poe::before {
content: "⚡"; content: "⚡";
font-size: 0.7em; font-size: 0.7em;
@ -72,6 +197,7 @@ td {
top: 0; top: 0;
left: 0; left: 0;
} }
.voice_vlan::after { .voice_vlan::after {
content: "📞"; content: "📞";
font-size: 0.7em; font-size: 0.7em;
@ -79,14 +205,17 @@ td {
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
footer { footer {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
} }
#colorSlider { #colorSlider {
width: 33%; width: 33%;
} }
@media print { @media print {
#colorSliderLabel, #colorSliderLabel,
#colorSlider { #colorSlider {

162
vlans.php
View File

@ -22,9 +22,9 @@ foreach ($interfaces as $interface) {
$stack[$interface["member"]][$interface["port"]] = $interface; $stack[$interface["member"]][$interface["port"]] = $interface;
} }
echo ("<!--"); /*echo ("<!--");
var_dump($interfaces); var_dump($interfaces);
echo ("-->"); echo ("-->");*/
?> ?>
<!DOCTYPE HTML> <!DOCTYPE HTML>
@ -36,85 +36,89 @@ echo ("-->");
</head> </head>
<body> <body>
<header> <div class="container">
<h1> <header>
<div><?= $sysname[1] ?? "Switch sans nom" ?></div> <h1>
<small><a href="https://<?= $address[1] ?>" target="_blank"><?= $address[1] ?></a></small> <div><?= $sysname[1] ?? "Switch sans nom" ?></div>
</h1> <small><a href="https://<?= $address[1] ?>" target="_blank" class="link"><?= $address[1] ?></a></small>
</header> </h1>
<main> </header>
<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) { <main>
echo "<tr>\n<th>$member</th>\n<td>\n<table class='member'>\n<tbody>\n<tr>\n"; <table>
foreach ($interfaces as $interface) display_interface($interface, 1); <caption>
echo "</tr>\n<tr>\n"; <h2>Interfaces</h2>
foreach ($interfaces as $interface) display_interface($interface, 0); </caption>
echo "</tr>\n</tbody>\n</table>\n</td>\n</tr>\n"; <tbody>
} <?php
?> function display_interface($interface, $odd)
</tbody> {
</table> if ($interface["port"] % 2 == $odd) {
<table class='legend'> echo "<td class='{$interface[0]}" . (isset($interface["voice_vlan"]) ? " voice_vlan" : "") . "' title='{$interface[0]}' style='{$interface["style"]}'>{$interface["port"]}</td>\n";
<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>";
} }
}
?> foreach ($stack as $member => $interfaces) {
<tr> echo "<tr>\n<th>$member</th>\n<td>\n<table class='member'>\n<tbody>\n<tr>\n";
<td class='interface trunk'></td> foreach ($interfaces as $interface) display_interface($interface, 1);
<td colspan='2'>Trunk</td> echo "</tr>\n<tr>\n";
</tr> foreach ($interfaces as $interface) display_interface($interface, 0);
<tr> echo "</tr>\n</tbody>\n</table>\n</td>\n</tr>\n";
<td class='interface hybrid' style='--tagged:60; --untagged:0'></td> }
<td colspan='2'>Hybride (tagged/untagged)</td> ?>
</tr> </tbody>
<tr> </table>
<td class='interface poe'></td> <table class='legend'>
<td colspan='2'>Power on Ethernet</td> <caption>
</tr> <h2>Légende</h2>
<tr> </caption>
<td class='interface voice_vlan'></td> <thead>
<td colspan='2'>ToIP (voice-vlan)</td> <tr>
</tr> <th>PVID</th>
<tr> <th>Nom</th>
<td class='interface shutdown'></td> <th>Description</th>
<td colspan='2'>Interface désactivée</td> </tr>
</tr> </thead>
</tbody> <tbody>
</table> <?php
</main> foreach ($vlans as $vlan) {
<footer> if (isset($vlan["pvid"]) and $vlan["pvid"] != 1) {
<label id="colorSliderLabel" for="colorSlider">Changer les couleurs</label> $name = $vlan["name"] ?? "";
<input id="colorSlider" type="range" min="0" max="2000000" step="0.000000001" value="1353651.53435435" $description = $vlan["description"] ?? "";
oninput="document.documentElement.style.setProperty('--k', this.value);"> echo "<tr title='{$vlan[0]}'><td class='interface vlan' style='--pvid: {$vlan["pvid"]}'>{$vlan["pvid"]}</td><td>$name</td><td>$description</td></tr>";
</footer> }
}
?>
<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);">
<a href="index.php" class="link">← Retour à la liste</a>
</footer>
</div>
</body> </body>
</html> </html>