require "${General::swroot}/lang.pl";
require "${General::swroot}/header.pl";
-my $css = <<END
+my $extraHead = <<END
<style>
- table {
+ table#zoneconf {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
- tr {
+ #zoneconf tr {
height: 4em;
}
- tr.thin {
- height: 3em;
+ #zoneconf td {
+ padding: 5px 10px;
+ border: 0.5px solid black;
+ text-align: center;
}
- td.narrow {
- width: 11em;
+ /* dark grey header cells */
+ #zoneconf td.heading {
+ background-color: grey;
+ color: white;
+ }
+ #zoneconf td.heading::first-line {
+ font-weight: bold;
+ line-height: 1.6;
}
- td {
- padding: 5px;
- padding-left: 10px;
- padding-right: 10px;
- border: 0.5px solid black;
+ /* narrow left column */
+ #zoneconf tr > td:first-child {
+ width: 11em;
}
- td.slightlygrey {
+ /* alternating row background color */
+ #zoneconf tr:nth-child(2n+3) {
background-color: #F0F0F0;
}
- td.h {
- background-color: grey;
- color: white;
- font-weight: 800;
- }
-
- td.green {
+ #zoneconf td.green {
background-color: $Header::colourgreen;
}
- td.red {
+ #zoneconf td.red {
background-color: $Header::colourred;
}
- td.blue {
+ #zoneconf td.blue {
background-color: $Header::colourblue;
}
- td.orange {
+ #zoneconf td.orange {
background-color: $Header::colourorange;
}
- td.topleft {
- background-color: white;
+ #zoneconf td.topleft {
+ background-color: $Header::pagecolour;
border-top-style: none;
border-left-style: none;
}
- td.disabled {
- background-color: #cccccc;
- }
-
- td.textcenter {
- text-align: center;
- }
-
input.vlanid {
width: 4em;
}
#submit-container.input {
margin-left: auto;
}
-
- button {
- margin-top: 1em;
- }
</style>
+
+<script src="/include/zoneconf.js"></script>
END
;
}
}
-&Header::openpage($Lang::tr{"zoneconf title"}, 1, $css);
+&Header::openpage($Lang::tr{"zoneconf title"}, 1, $extraHead);
&Header::openbigbox('100%', 'center');
### Evaluate POST parameters ###
if ($VALIDATE_error) {
&Header::openbox('100%', 'left', $Lang::tr{"error"});
- print "$VALIDATE_error<br><a href='/cgi-bin/zoneconf.cgi'><button>$Lang::tr{'ok'}</button></a>";
+ print "$VALIDATE_error<br><br><a href='$ENV{'SCRIPT_NAME'}'>$Lang::tr{'back'}</a>\n";
&Header::closebox();
&Header::closebigbox();
print <<END
<form method='post' enctype='multipart/form-data'>
- <table>
- <tr>
- <td class="h narrow topleft" /td>
+ <table id="zoneconf">
+ <tr>
+ <td class="topleft"></td>
END
;
my $red_restricted = ($uc eq "RED" && ! ($red_type eq "STATIC" || $red_type eq "DHCP"));
if ($red_restricted) {
- print "<td class='h textcenter $_'>$uc ($red_type)</td>";
+ print "\t\t<td class='heading $_'>$uc ($red_type)</td>\n";
next; # We're done here
}
}
print <<END
- <td class='h textcenter $_'>$uc</br>
+ <td class='heading $_'>$uc<br>
<select name="MODE $uc">
<option value="DEFAULT" $mode_selected{"DEFAULT"}>$Lang::tr{"zoneconf nicmode default"}</option>
<option value="BRIDGE" $mode_selected{"BRIDGE"}>$Lang::tr{"zoneconf nicmode bridge"}</option>
;
}
-print "</tr>";
-
-my $slightlygrey = "";
+print "\t</tr>\n";
foreach (@nics) {
my $mac = $_->[0];
my $nic = $_->[1];
my $wlan = $_->[2];
- print "<tr><td class='h narrow textcenter'>$nic<br>$mac</td>";
+ print "\t<tr>\n";
+ print "\t\t<td class='heading'>$nic<br>$mac</td>\n";
# Iterate through all zones and check if the current NIC is assigned to it
foreach (@zones) {
my $uc = uc $_;
my $dev_name = $ethsettings{"${uc}_DEV"};
+ my $highlight = "";
if ($dev_name eq "") { # Again, skip the zone if it is not activated
next;
if ($mac eq $ethsettings{"${uc}_MACADDR"}) {
$checked = "checked";
+ $highlight = $_;
}
- print "<td class='textcenter $slightlygrey'><input type='radio' id='PPPACCESS $mac' name='PPPACCESS' value='$mac' $checked></td>";
+ print <<END
+ <td class="$highlight">
+ <input type="radio" name="PPPACCESS" value="$mac" data-zone="RED" data-mac="$mac" onchange="highlightAccess(this)" $checked>
+ </td>
+END
+;
next; # We're done here
}
}
$access_selected{"NONE"} = ($access_selected{"NATIVE"} eq "") && ($access_selected{"VLAN"} eq "") ? "selected" : "";
my $vlan_disabled = ($wlan) ? "disabled" : "";
+ # If the interface is assigned, hightlight table cell
+ if ($access_selected{"NONE"} eq "") {
+ $highlight = $_;
+ }
+
print <<END
- <td class="textcenter $slightlygrey">
- <select name="ACCESS $uc $mac" onchange="document.getElementById('TAG $uc $mac').disabled = (this.value === 'VLAN' ? false : true)">
- <option value="NONE" $access_selected{"NONE"}>- $Lang::tr{"zoneconf access none"} -</option>
- <option value="NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneconf access native"}</option>
- <option value="VLAN" $access_selected{"VLAN"} $vlan_disabled>$Lang::tr{"zoneconf access vlan"}</option>
- </select>
- <input type="number" class="vlanid" id="TAG $uc $mac" name="TAG $uc $mac" min="1" max="4095" value="$zone_vlan_id" $field_disabled>
- </td>
+ <td class="$highlight">
+ <select name="ACCESS $uc $mac" data-zone="$uc" data-mac="$mac" onchange="highlightAccess(this)">
+ <option value="NONE" $access_selected{"NONE"}>- $Lang::tr{"zoneconf access none"} -</option>
+ <option value="NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneconf access native"}</option>
+ <option value="VLAN" $access_selected{"VLAN"} $vlan_disabled>$Lang::tr{"zoneconf access vlan"}</option>
+ </select>
+ <input type="number" class="vlanid" id="TAG-$uc-$mac" name="TAG $uc $mac" min="1" max="4095" value="$zone_vlan_id" $field_disabled>
+ </td>
END
;
}
- print "</tr>";
-
- if ($slightlygrey) {
- $slightlygrey = "";
- } else {
- $slightlygrey = "slightlygrey";
- }
+ print "\t</tr>\n";
}
print <<END
projects / people / pmueller / ipfire-2.x.git / blobdiff