[Kimchi-devel] [PATCH V2] UI: template supports networks

[Aline Manera]

Reviewed-by: Aline Manera <alinefm at linux.vnet.ibm.com>

On 01/08/2014 06:35 AM, Xin Ding wrote:
> V1 ->V2 use combo box
>
> Add network to edit Template.
>
> Signed-off-by: Xin Ding <xinding at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/template-edit.css | 34 +++++++++++++++++++++++++++++++++-
>   ui/js/src/kimchi.template_edit_main.js | 29 +++++++++++++++++++++++++++++
>   ui/pages/template-edit.html.tmpl       | 21 +++++++++++++++++++--
>   3 files changed, 81 insertions(+), 3 deletions(-)
>
> diff --git a/ui/css/theme-default/template-edit.css b/ui/css/theme-default/template-edit.css
> index e61b2fb..ecc9106 100644
> --- a/ui/css/theme-default/template-edit.css
> +++ b/ui/css/theme-default/template-edit.css
> @@ -20,7 +20,7 @@
>    */
>   #template-edit-window {
>       font-size: 13px;
> -    height: 400px;
> +    height: 420px;
>       width: 1000px;
>   }
>
> @@ -73,3 +73,35 @@
>   .hidden-area {
>       display: none;
>   }
> +
> +.template-edit-wrapper-controls .select-list-box {
> +    width: 272px;
> +    max-height: 168px;
> +    overflow: auto;
> +    margin-top: 5px;
> +    border: 1px solid #ccc;
> +}
> +
> +.template-edit-wrapper-controls .select-list-box>li>label {
> +    display: block;
> +}
> +
> +.template-edit-wrapper-controls .select-list-box>li>label>input[type="checkbox"] {
> +    display: none;
> +}
> +
> +.template-edit-wrapper-controls .select-list-box>li>label>.item {
> +    display: block;
> +    height: 41px;
> +    line-height: 41px;
> +    padding: 0 20px 0 40px;
> +    border-bottom: 1px solid #ccc;
> +    box-shadow: 0px 1px 1px #fff;
> +    text-shadow: -1px -1px 1px #ddd, 1px 1px 1px #fff;
> +    color: #222;
> +    font-size: 12px;
> +}
> +
> +.template-edit-wrapper-controls .select-list-box>li>label>input[type="checkbox"]:CHECKED+.item {
> +    background: #f8f8f8 url(../images/theme-default/check-green.png) no-repeat 10px center;
> +}
> diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
> index efe4a6f..ad535ee 100644
> --- a/ui/js/src/kimchi.template_edit_main.js
> +++ b/ui/js/src/kimchi.template_edit_main.js
> @@ -43,6 +43,26 @@ kimchi.template_edit_main = function() {
>               }
>               kimchi.select('template-edit-storagePool-list', options);
>           });
> +        kimchi.listNetworks(function(result) {
> +            if(result && result.length > 0) {
> +                var html = '';
> +                var tmpl = $('#tmpl-network').html();
> +                $.each(result, function(index, network) {
> +                    html += kimchi.template(tmpl, network);
> +                });
> +                $('#template-edit-network-list').html(html).show();
> +                if(template.networks && template.networks.length > 0) {
> +                    $('input[name="networks"]', templateEditForm).each(function(index, element) {
> +                        var value = $(element).val();
> +                        if(template.networks.indexOf(value) >= 0) {
> +                            $(element).prop('checked', true);
> +                        }
> +                    });
> +                }
> +            } else {
> +                $('#template-edit-network-list').hide();
> +            }
> +        });
>       });
>
>       $('#tmpl-edit-button-cancel').on('click', function() {
> @@ -64,6 +84,15 @@ kimchi.template_edit_main = function() {
>           });
>           data['memory'] = Number(data['memory']);
>           data['cpus']   = Number(data['cpus']);
> +        var networks = templateEditForm.serializeObject().networks;
> +        if (networks instanceof Array) {
> +            data.networks = networks;
> +        } else if (networks != null) {
> +            data.networks = [networks];
> +        } else {
> +            data.networks = [];
> +        }
> +
>           kimchi.updateTemplate($('#template-name').val(), data, function() {
>               kimchi.doListTemplates();
>               kimchi.window.close();
> diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
> index fe7314d..f7921d6 100644
> --- a/ui/pages/template-edit.html.tmpl
> +++ b/ui/pages/template-edit.html.tmpl
> @@ -75,8 +75,6 @@
>                           <input id="template-edit-memory-textbox" name="memory" type="text" />
>                       </div>
>                   </div>
> -            </fieldset>
> -            <fieldset class="template-edit-fieldset">
>                   <div>
>                       <div class="template-edit-wrapper-label">
>                           <label>$_("Disk (GB)")</label>
> @@ -85,6 +83,8 @@
>                           <input id="template-edit-version-textbox" name="disks" type="text" />
>                       </div>
>                   </div>
> +            </fieldset>
> +            <fieldset class="template-edit-fieldset">
>                   <div>
>                       <div class="template-edit-wrapper-label">
>                           <label>$_("CDROM")</label>
> @@ -108,6 +108,23 @@
>                           </div>
>                       </div>
>                   </div>
> +                <div>
> +                    <div class="template-edit-wrapper-label">
> +                        <label>$_("Network")</label>
> +                    </div>
> +                    <div class="template-edit-wrapper-controls">
> +                        <ul class="select-list-box" id="template-edit-network-list">
> +                        </ul>
> +                        <script id="tmpl-network" type="text/html">
> +                            <li>
> +                                <label>
> +                                    <input name="networks" type="checkbox" value="{name}" />
> +                                    <span class="item">{name}</span>
> +                                </label>
> +                            </li>
> +                        </script>
> +                    </div>
> +                </div>
>               </fieldset>
>           </form>
>       </div>