[Kimchi-devel] [PATCH V3] Fix Add Network window

[Hongliang Wang]

On 02/27/2014 03:31 AM, Rodrigo Trujillo wrote:
> VLans and Interfaces must only be available for selection if network
> type Bridge is selected. This restriction was not implemented in the UI.
> This patch fixes this problem.
>
> Signed-off-by: Rodrigo Trujillo <rodrigo.trujillo at linux.vnet.ibm.com>
> ---
>   ui/js/src/kimchi.network.js     | 22 +++++++++++++++++++++-
>   ui/pages/tabs/network.html.tmpl | 20 +++++++++++---------
>   2 files changed, 32 insertions(+), 10 deletions(-)
>
> diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
> index faf1285..c0fe4ff 100644
> --- a/ui/js/src/kimchi.network.js
> +++ b/ui/js/src/kimchi.network.js
> @@ -210,11 +210,28 @@ kimchi.openNetworkDialog = function(okCallback) {
>       $("#networkConfig").dialog("open");
>   };
>
> +kimchi.enableBridgeOptions = function(enable) {
> +    if (!enable) {
> +        $("#enableVlan").attr("checked", false);
> +        $("#networkVlanID").prop("disabled", true);
Why one is .attr() and the other is .prop()? For input[checked] or 
input[disabled], I suggest always use .prop(). If you'd like to use 
.attr(), please use it as follows:
   $('input').attr('checked', 'checked');
   $('input').attr('disabled', 'disabled');
> +        $("#networkVlanID").val("");
> +        $("#networkInterface").val("");
> +        $("#bridge-options").slideUp(100);
> +    } else if (!$("#networkInterface").val()){
> +        $("#networkInterface").prop("selectedIndex", 0);
> +        $("#bridge-options").slideDown(100);
> +    }
> +};

> +
>   kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
>       $("#networkTypeBri").prop("checked", isInterfaceAvail);
>       $("#networkTypeBri").prop("disabled", !isInterfaceAvail);
> -    $("#networkInterface").prop("disabled", !isInterfaceAvail);
>       $("#networkTypeNat").prop("checked", !isInterfaceAvail);
> +    if (!isInterfaceAvail) {
> +        kimchi.enableBridgeOptions(false);
> +    } else {
> +        $("#bridge-options").slideDown(100);
> +    }
>   };
>
>   kimchi.getNetworkDialogValues = function() {
> @@ -250,12 +267,15 @@ kimchi.setupNetworkFormEvent = function() {
>       });
>       $("#networkTypeIso").on("click", function(event) {
>           $("#networkInterface").prop("disabled", true);
> +        kimchi.enableBridgeOptions(false);
>       });
>       $("#networkTypeNat").on("click", function(event) {
>           $("#networkInterface").prop("disabled", true);
> +        kimchi.enableBridgeOptions(false);
>       });
>       $("#networkTypeBri").on("click", function(event) {
>           $("#networkInterface").prop("disabled", false);
> +        kimchi.enableBridgeOptions(true);
>       });
>   };
>
> diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
> index 83c1d7e..4340e19 100644
> --- a/ui/pages/tabs/network.html.tmpl
> +++ b/ui/pages/tabs/network.html.tmpl
> @@ -71,15 +71,17 @@
>                       <input type="radio" id="networkTypeBri" name="networkType" value="bridged">
>                       <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label>
>                   </div>
> -                <div class="destination">
> -                    <label>$_("Destination"): </label>
> -                    <select id="networkInterface"></select>
> -                </div>
> -                <div class="VLAN">
> -                    <label for="enableVlan">$_("Enable VLAN"): </label>
> -                    <input id="enableVlan" type="checkbox" value=""/>
> -                    <label>$_("VLAN ID"): </label>
> -                    <input type="text" id="networkVlanID" disabled>
> +                <div id=bridge-options>
<div id=*"**bridge-options**"*>
> +                    <div class="destination">
> +                        <label>$_("Destination"): </label>
include *for* attribute for <label> element.
> +                        <select id="networkInterface"></select>
> +                    </div>
> +                    <div class="VLAN">
> +                        <label for="enableVlan">$_("Enable VLAN"): </label>
> +                        <input id="enableVlan" type="checkbox" value=""/>
> +                        <label>$_("VLAN ID"): </label>
include *for* attribute for <label> element.
> +                        <input type="text" id="networkVlanID" disabled>
> +                    </div>
>                   </div>
>               </div>
>           </div>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140227/f3ff5a4c/attachment.html>