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

untagged color

Browse Source
This commit is contained in:
Adrien MALINGREY 2025-05-20 14:33:09 +02:00
parent 35f9760b24
commit a6189199ee
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
show.php
View File

@ -30,7 +30,7 @@ $endPattern = "(?<!#)";
preg_match_all("/$startPattern$vlanPvidPattern(?:$vlanNamePattern|$vlanDescriptionPattern|$otherPattern)*$endPattern/", $conf, $vlans, PREG_SET_ORDER); 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"; $interfaceAddressPattern = "interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)$NL";
$pvidPattern = " port (?:access|trunk pvid|hybrid pvid) vlan (?P<pvid>\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"; $portHybridPattern = " port hybrid vlan (?:(?P<tagged>\d+)(?: [\d ]*)? tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NL";
$voiceVlanPattern = " voice-vlan (?P<voice_vlan>\d+) enable$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); preg_match_all("/$startPattern$interfaceAddressPattern(?:$pvidPattern|$portHybridPattern|$voiceVlanPattern|$otherPattern)*$endPattern/", $conf, $interfaces, PREG_SET_ORDER);
@ -134,16 +134,19 @@ foreach ($interfaces as $interface) {
</footer> </footer>
<script> <script>
function changeColor(pvid, color) { 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.deleteRule(i) (customColors.sheet.cssRules[i].selectorText == `[style*="--pvid: ${pvid};"]`)
} || (customColors.sheet.cssRules[i].selectorText == `[style*="--tagged: ${pvid};"]`)
if (customColors.sheet.cssRules[i].selectorText == `[style*="--tagged: ${pvid};"]`) { || (customColors.sheet.cssRules[i].selectorText == `[style*="--untagged: ${pvid};"]`)
) {
customColors.sheet.deleteRule(i) customColors.sheet.deleteRule(i)
} }
} }
customColors.sheet.insertRule(`[style*="--pvid: ${pvid};"] { --pvid-color: ${color} }`) customColors.sheet.insertRule(`[style*="--pvid: ${pvid};"] { --pvid-color: ${color} }`)
customColors.sheet.insertRule(`[style*="--tagged: ${pvid};"] { --tagged-color: ${color} }`) customColors.sheet.insertRule(`[style*="--tagged: ${pvid};"] { --tagged-color: ${color} }`)
customColors.sheet.insertRule(`[style*="--untagged: ${pvid};"] { --untagged-color: ${color} }`)
console.log(customColors.sheet.cssRules)
} }
</script> </script>
</body> </body>

2
style.css
View File

@ -190,6 +190,8 @@ main {
.hybrid { .hybrid {
--tagged: 0; --tagged: 0;
--tagged-color: hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness)); --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 50%, var(--tagged-color) 50%); background-image: linear-gradient(145deg, transparent 50%, var(--tagged-color) 50%);
} }