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

[Aline Manera]

Only one point that I've just noticed
When there is no network you should also remove the label "Network" or 
add a link to "Add network" page

On 01/08/2014 04:26 PM, Aline Manera wrote:
>
> 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>
>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>