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

Compare commits

base: adrien:fe8274828e9b5959ab907ad57b1916c53dbcd6d4
Branches Tags
adrien:master
..
compare: adrien:9d5e23d8f0a2e756311c3969b6bb806c73c2e53b
Branches Tags
adrien:master

2 Commits
fe8274828e ... 9d5e23d8f0

Author SHA1 Message Date
adrien
9d5e23d8f0 color 2025-03-31 19:23:46 +02:00
adrien
b208841a45 O/2 2025-03-31 19:23:36 +02:00
2 changed files with 17 additions and 20 deletions
Show Stats Expand all files Collapse all files

25
show.php
View File

@ -14,16 +14,16 @@ preg_match_all("/(?<=\n)vlan (?P<pvid>\d+)[\r\n]+(?: name (?P<name>.+)[\r\n]+| d
preg_match_all("/(?<=\n)interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)[\r\n]+(?: port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+) tagged|(?P<untagged>\d+)(?: \d+)* untagged)[\r\n]+| port (?:access |trunk |hybrid |pvid |vlan )*(?P<pvid>\d+)[\r\n]+| voice-vlan (?P<voice_vlan>\d+) enable[\r\n]+| .*[\r\n]+)*(?<!#)/", $conf, $interfaces, PREG_SET_ORDER); preg_match_all("/(?<=\n)interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)[\r\n]+(?: port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+) tagged|(?P<untagged>\d+)(?: \d+)* untagged)[\r\n]+| port (?:access |trunk |hybrid |pvid |vlan )*(?P<pvid>\d+)[\r\n]+| voice-vlan (?P<voice_vlan>\d+) enable[\r\n]+| .*[\r\n]+)*(?<!#)/", $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"]] = array(); 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"]][$interface["port"]] = $interface; $stack[$interface["member"]][1 - $interface["port"] % 2][$interface["port"]] = $interface;
} }
/*echo ("<!--"); /*echo ("<!--");
var_dump($interfaces); var_dump($stack);
echo ("-->");*/ echo ("-->");*/
?> ?>
@ -51,18 +51,15 @@ echo ("-->");*/
</caption> </caption>
<tbody> <tbody>
<?php <?php
function display_interface($interface, $odd) foreach ($stack as $member => $lines) {
{ echo "<tr>\n<th>$member</th>\n<td>\n<table class='member'>\n<tbody>\n";
if ($interface["port"] % 2 == $odd) { foreach ($lines as $interfaces) {
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 ($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 ($stack as $member => $interfaces) {
echo "<tr>\n<th>$member</th>\n<td>\n<table class='member'>\n<tbody>\n<tr>\n";
foreach ($interfaces as $interface) display_interface($interface, 1);
echo "</tr>\n<tr>\n";
foreach ($interfaces as $interface) display_interface($interface, 0);
echo "</tr>\n</tbody>\n</table>\n</td>\n</tr>\n"; echo "</tr>\n</tbody>\n</table>\n</td>\n</tr>\n";
} }
?> ?>

12
style.css
View File

@ -153,11 +153,11 @@ td {
.vlan { .vlan {
color: #ecf0f1; color: #ecf0f1;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
background-color: hsl(calc(var(--k) * var(--pvid)) 97% 60%); background-color: hsl(calc(var(--k) * var(--pvid)) 97% 65%);
} }
.vlan:hover { .vlan:hover {
background-color: hsl(calc(var(--k) * var(--pvid)) 65% 70%); background-color: hsl(calc(var(--k) * var(--pvid)) 65% 75%);
} }
.trunk { .trunk {
@ -179,16 +179,16 @@ td {
.hybrid { .hybrid {
background-image: linear-gradient( background-image: linear-gradient(
135deg, 135deg,
hsl(calc(var(--k) * var(--tagged)) 97% 60%) 50%, hsl(calc(var(--k) * var(--tagged)) 97% 65%) 50%,
hsl(calc(var(--k) * var(--untagged)) 97% 60%) 50% hsl(calc(var(--k) * var(--untagged)) 97% 65%) 50%
); );
} }
.hybrid:hover { .hybrid:hover {
background-image: linear-gradient( background-image: linear-gradient(
135deg, 135deg,
hsl(calc(var(--k) * var(--tagged)) 65% 70%) 50%, hsl(calc(var(--k) * var(--tagged)) 65% 75%) 50%,
hsl(calc(var(--k) * var(--untagged)) 65% 70%) 50% hsl(calc(var(--k) * var(--untagged)) 65% 75%) 50%
); );
} }