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
5 changed files with 121 additions and 89 deletions
--- a/config.php
+++ b/config.php
@ -0,0 +1,4 @@
+<?php
+
+$basedir = __DIR__ . "/confs";
+$locale = "fr_FR.UTF-8";
--- a/custom.css
+++ b/custom.css
--- a/index.php
+++ b/index.php
@ -1,3 +1,14 @@
+<?php
+
+require_once "config.php";
+
+setlocale(LC_CTYPE, $locale);
+
+if ($_SERVER["QUERY_STRING"] != "") {
+    include "switch.php";
+    exit;
+}
+?>
 <!DOCTYPE HTML>
 <html lang='fr'>

@ -11,42 +22,39 @@
    <h1>Schémas des VLANs</h1>
    <div class="file-list">
        <ul>
-            <?php
-            $basedir = __DIR__ . "/confs";
+<?php
+function recursive_ls($path) {
+    global $basedir;

-            function recursive_ls($path)
-            {
-                global $basedir;
+    if (substr(basename($path), 0, 1) == '.') {
+        return "";
+    }

-                if (substr(basename($path), 0, 1) == '.') {
-                    return "";
-                }
-
-                if (is_dir($path)) {
-                    $str = "";
-                    foreach (scandir($path) as $filename) {
-                        $str .= recursive_ls("$path/$filename");
-                    }
-                    if ($str == "") {
-                        return "";
-                    } else {
-                        if ($path == $basedir) {
-                            return "<ul>\n$str\n</ul>\n";
-                        } else {
-                            return "<li>\n<details>\n<summary>" . basename($path) . "</summary>\n<ul>\n" . $str . "</ul>\n</details>\n</li>\n";
-                        }
-                    }
-                }
-
-                if (substr($path, -4) == ".cfg") {
-                    return "<li><a href='show.php?switch=" . str_replace("$basedir/", "", $path) . "' target='_blank'>" . basename($path) . "</a></li>\n";
-                }
-
-                return "";
+    if (is_dir($path)) {
+        $str = "";
+        foreach (scandir($path) as $filename) {
+            $str .= recursive_ls("$path/$filename");
+        }
+        if ($str == "") {
+            return "";
+        } else {
+            if ($path == $basedir) {
+                return "<ul>\n$str\n</ul>\n";
+            } else {
+                return "<li>\n<details>\n<summary>" . basename($path) . "</summary>\n<ul>\n" . $str . "</ul>\n</details>\n</li>\n";
            }
+        }
+    }

-            echo recursive_ls($basedir);
-            ?>
+    if (substr($path, -4) == ".cfg") {
+        return "<li><a href='?" . str_replace("$basedir/", "", $path) . "' target='_blank'>" . basename($path) . "</a></li>\n";
+    }
+
+    return "";
+}
+
+echo recursive_ls($basedir);
+?>
        </ul>
    </div>
 </body>
--- 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 {
@ -60,7 +63,7 @@ h2 {
 }

 .file-list li {
-  margin-left: 1rem;
+  margin-left: 1.2rem;
 }

 .file-list a::before {
@ -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;
 }
@ -136,7 +140,6 @@ main {
  vertical-align: middle;
  min-width: 2em;
  height: 2em;
-  cursor: help;
  transition: 0.2s background-color;
  border: 3px inset #476079;
  border-image-width: 5px;
@ -150,6 +153,10 @@ main {
  background-origin: border-box;
 }

+[title] {
+  cursor: help;
+}
+
 .member tr:nth-child(even) .interface {
  border-image-source: url(rj45-inverse.svg);
 }
@ -160,11 +167,12 @@ main {

 .vlan {
  --pvid: 0;
-  color: #ecf0f1;
-  text-shadow: 1px 2px 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 {
@ -173,26 +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;
-  background-image: linear-gradient(
-    145deg,
-    transparent 50%,
-    hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness)) 50%
-  );
-}
+  --tagged-color: hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness));
+  --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;
@ -248,7 +256,6 @@ input[type="color"] {
@media print {
  body {
    margin: auto;
-    padding: 0;
    background-color: unset;
  }

--- a/switch.php
+++ b/switch.php
@ -1,51 +1,59 @@
 <?php
-$basedir = __DIR__ . "/confs/";
-$path = escapeshellcmd(realpath($basedir . $_GET["switch"]));
-if (substr($path, -4) != ".cfg") {
+
+$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();
+    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";
-$pvidPattern             = " port (?:access vlan|trunk pvid) (?P<pvid>\d+)$NLP";
-$portHybridPattern       = " port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+)(?: [0-9a-z ]*)? tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NLP";
-$voiceVlanPattern        = " voice-vlan (?P<voice_vlan>\d+) enable$NLP";
-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;
 }
-
-/*echo ("<!--");
-var_dump($stack);
-echo ("-->");*/
 ?>
 <!DOCTYPE HTML>
 <html lang='fr'>

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

@ -92,7 +100,7 @@ echo ("-->");*/
                    if (isset($vlan["pvid"]) and $vlan["pvid"] != 1) {
                        $name = $vlan["name"] ?? "";
                        $description = $vlan["description"] ?? "";
-                        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)' /></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>";
                    }
                }
                ?>
@ -100,10 +108,10 @@ echo ("-->");*/
                    <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>
@ -120,23 +128,28 @@ echo ("-->");*/
        </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 = 0; i < customColors.sheet.cssRules.length; i++) {
-                if (customColors.sheet.cssRules[i].selectorText == `[style*="--pvid: ${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)
-                    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>

-</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
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