remove member 0

hide hybrid, better print
ptn
2025-07-09 11:26:10 +02:00 · 2025-07-08 17:50:57 +02:00 · 2025-05-25 14:04:33 +02:00 · 2025-05-22 13:58:14 +02:00 · 2025-05-20 14:56:27 +02:00 · 2025-05-20 14:53:30 +02:00
4 changed files with 54 additions and 42 deletions
--- a/custom.css
+++ b/custom.css
--- a/index.php
+++ b/index.php
@ -5,7 +5,7 @@ require_once "config.php";
 setlocale(LC_CTYPE, $locale);

 if ($_SERVER["QUERY_STRING"] != "") {
-    include "show.php";
+    include "switch.php";
    exit;
 }
 ?>
--- a/style.css
+++ b/style.css
@ -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 {
@ -94,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;
 }
@ -163,7 +167,9 @@ main {

 .vlan {
  --pvid: 0;
-  --pvid-color: hsl(calc(var(--hue) * var(--pvid)) var(--saturation) var(--lightness));
+  --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);
@ -175,23 +181,26 @@ main {
 }

 .trunk:not(.shutdown) {
+  font-weight: bold;
  background-image: linear-gradient(
-    145deg,
-    transparent 60%,
-    red,
+    140deg,
+    red 18%,
    orange,
    yellow,
    green,
    blue,
-    violet
+    magenta,
+    violet 82%
  );
 }

-.hybrid {
+/*.hybrid {
  --tagged: 0;
  --tagged-color: hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness));
-  background-image: linear-gradient(145deg, transparent 50%, var(--tagged-color) 50%);
-}
+  --untagged: var(--pvid);
+  --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;
@ -247,7 +256,6 @@ input[type="color"] {
@media print {
  body {
    margin: auto;
-    padding: 0;
    background-color: unset;
  }

--- a/switch.php
+++ b/switch.php
@ -6,7 +6,7 @@ if (
    strpos($path, $basedir) !== 0
    || substr($path, -4) != ".cfg"
    || !file_exists($path)
-    ) {
+) {
    http_response_code(404);
    die("Fichier non trouvé");
 }
@ -14,34 +14,35 @@ if (
 $conf = file_get_contents($path);

 if ($conf === false) {
-    http_error_code(404);
+    http_response_code(404);
    die("Fichier non trouvé");
 }

 preg_match("/ sysname ([\w-]+)/", $conf, $sysname);
 preg_match("/ip address ([\d.]+)/", $conf, $address);
-$startPattern           = "(?<=\n)";
-$NL                     = "[\r\n]+";
-$vlanPvidPattern        = "vlan (?P<pvid>\d+)$NL";
-$vlanNamePattern        = " name (?P<name>.+)$NL";
-$vlanDescriptionPattern = " description (?P<description>.+)$NL";
-$otherPattern           = " .*$NL";
-$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+)$NL";
-$pvidPattern             = " 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)$NL";
-$voiceVlanPattern        = " voice-vlan (?P<voice_vlan>\d+) enable$NL";
-preg_match_all("/$startPattern$interfaceAddressPattern(?:$pvidPattern|$portHybridPattern|$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"]}; ";
+    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;
 }
 ?>
@ -50,8 +51,9 @@ foreach ($interfaces as $interface) {

 <head>
    <title><?= $sysname[1] ?? "Switch sans nom" ?> - Schéma des VLANs</title>
-    <link href="style.css" rel="stylesheet" />
    <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>

@ -106,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 (PVID / tagged)</td>
-                </tr>
+                </tr>-->
                <tr>
                    <td class='interface poe'></td>
                    <td colspan='2'>Power on Ethernet</td>
@ -130,22 +132,24 @@ foreach ($interfaces as $interface) {
        <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 = 0; i < customColors.sheet.cssRules.length; i++) {
-                if (customColors.sheet.cssRules[i].selectorText == `[style*="--pvid: ${pvid};"]`) {
-                    customColors.sheet.deleteRule(i)
-                }
-                if (customColors.sheet.cssRules[i].selectorText == `[style*="--tagged: ${pvid};"]`) {
+            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>
+</html>
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