remove member 0

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;
 }
 ?>

style.css

@@ -12,12 +12,15 @@
 }
 
 body {
-  margin: 2rem auto;
+  margin: 0;
-  padding: 0 1rem;
+  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,11 +167,12 @@ main {
 
 .vlan {
   --pvid: 0;
-  color: #ecf0f1;
+  --pvid-color: hsl(
-  text-shadow: 1px 2px 2px black;
-  background-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 {
@@ -176,26 +181,26 @@ main {
 }
 
 .trunk:not(.shutdown) {
+  font-weight: bold;
   background-image: linear-gradient(
-    145deg,
+    140deg,
-    transparent 60%,
+    red 18%,
-    red,
     orange,
     yellow,
     green,
     blue,
-    violet
+    magenta,
+    violet 82%
   );
 }
 
-.hybrid {
+/*.hybrid {
   --tagged: 0;
-  background-image: linear-gradient(
+  --tagged-color: hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness));
-    145deg,
+  --untagged: var(--pvid);
-    transparent 50%,
+  --untagged-color: hsl(calc(var(--hue) * var(--untagged)) var(--saturation) var(--lightness));
-    hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness)) 50%
+  background-image: linear-gradient(145deg, transparent 65%, var(--tagged-color) 65%);
-  );
+}*/
-}
 
 .shutdown:not([class*="loopback-detection action shutdown"]) {
   background-color: lightgray;
@@ -251,7 +256,6 @@ input[type="color"] {
 @media print {
   body {
     margin: auto;
-    padding: 0;
     background-color: unset;
   }
 

switch.php

@@ -14,28 +14,29 @@ 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)";
+$startPtn           = "(?<=[\r\n])";
-$NL                     = "[\r\n]+";
+$NL                     = "(?:[\r\n]+)";
-$vlanPvidPattern        = "vlan (?P<pvid>\d+)$NL";
+$vlanPvidPtn        = "vlan (?P<pvid>\d+)$NL";
-$vlanNamePattern        = " name (?P<name>.+)$NL";
+$vlanNamePtn        = "$startPtn name (?P<name>.+)$NL";
-$vlanDescriptionPattern = " description (?P<description>.+)$NL";
+$vlanDescriptionPtn = "$startPtn description (?P<description>.+)$NL";
-$otherPattern           = " .*$NL";
+$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+)$NL";
+$interfaceAddressPtn = "interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)$NL";
-$pvidPattern             = " port (?:access|trunk pvid) vlan (?P<pvid>\d+)$NL";
+$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)$NL";
+$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$NL";
+$voiceVlanPtn        = "$startPtn voice-vlan (?P<voice_vlan>\d+) enable$NL";
-preg_match_all("/$startPattern$interfaceAddressPattern(?:$pvidPattern|$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();
 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"]};";
@@ -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,17 +132,22 @@ 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++) {
+            for (let i = customColors.sheet.cssRules.length - 1; i >= 0; i--) {
-                if (customColors.sheet.cssRules[i].selectorText == `[style*="--pvid: ${pvid};"]`) {
+                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)
-                    break
                 }
             }
-            customColors.sheet.insertRule(`[style*="--pvid: ${pvid};"] { background-color: ${color} }`)
+            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>