[Kimchi-devel] [PATCH 5/6] Debug Report Rename UI: Add Rename Page
Hongliang Wang
hlwang at linux.vnet.ibm.com
Thu May 22 07:28:56 UTC 2014
On 05/22/2014 02:07 PM, Yu Xin Huo wrote:
> On 5/21/2014 5:09 PM, Hongliang Wang wrote:
>> Added rename page including HTML, CSS, and JS.
>>
>> Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
>> ---
>> ui/css/theme-default/report-rename.css | 22 ++++++++++++++
>> ui/js/src/kimchi.report_rename_main.js | 39 +++++++++++++++++++++++++
>> ui/pages/report-rename.html.tmpl | 53
>> ++++++++++++++++++++++++++++++++++
>> 3 files changed, 114 insertions(+)
>> create mode 100644 ui/css/theme-default/report-rename.css
>> create mode 100644 ui/js/src/kimchi.report_rename_main.js
>> create mode 100644 ui/pages/report-rename.html.tmpl
>>
>> diff --git a/ui/css/theme-default/report-rename.css
>> b/ui/css/theme-default/report-rename.css
>> new file mode 100644
>> index 0000000..959d577
>> --- /dev/null
>> +++ b/ui/css/theme-default/report-rename.css
>> @@ -0,0 +1,22 @@
>> +#report-rename-window {
>> + height: 300px;
>> + width: 400px;
>> +}
>> +
>> +#report-rename-window .field {
>> + font-size: 12px;
>> +}
>> +
>> +#report-name-textbox {
>> + -moz-box-sizing: border-box;
>> + box-sizing: border-box;
>> + margin: .5em 0;
>> + width: 100%;
>> +}
>> +
>> +#button-report-rename[disabled] {
>> + background: #c0c0c0 url(../../images/theme-default/loading.gif) 7px
>> + center no-repeat;
>> + color: #DDD;
>> + prenameing-left: 26px;
>> +}
>> diff --git a/ui/js/src/kimchi.report_rename_main.js
>> b/ui/js/src/kimchi.report_rename_main.js
>> new file mode 100644
>> index 0000000..3bb5020
>> --- /dev/null
>> +++ b/ui/js/src/kimchi.report_rename_main.js
>> @@ -0,0 +1,39 @@
>> +kimchi.report_rename_main = function() {
>> + var renameReportForm = $('#form-report-rename');
>> + var submitButton = $('#button-report-rename');
>> + var nameTextbox = $('input[name="name"]', renameReportForm);
>> + var submitForm = function(event) {
>> + if(submitButton.prop('disabled')) {
>> + return false;
>> + }
>> + var reportName = nameTextbox.val();
>> + var validator = RegExp("^[A-Za-z0-9-]*$");
>> + if (!validator.test(reportName)) {
>> + kimchi.message.error.code('KCHDR6011M');
>> + return false;
>> + }
>> + var formData = renameReportForm.serializeObject();
>> + submitButton.prop('disabled', true); -- remvoe
>> + nameTextbox.prop('disabled', true); -- remove
It is used to block UI to avoid user re-edit and re-submit the form
after he submits it and before the submission response returned. Will
remain it.
>> + kimchi.renameReport(kimchi.selectedReport, formData,
>> function(result) {
>
> submitButton.prop('disabled', true); --add
> nameTextbox.prop('disabled', true); --add
This callback is called after the request is processed successfully and
submitButton and nameTextbox will be destroyed and removed from DOM tree
with kimchi.window.close(); below. Though it's logically complete to
enable fields that are disabled before. I'll add these 2 lines.
>
>> + kimchi.window.close();
>> + kimchi.topic('kimchi/debugReportRenamed').publish({
>> + result: result
>> + });
>> + }, function(result) {
>> + var errText = result &&
>> + result['responseJSON'] &&
>> + result['responseJSON']['reason'];
>> + kimchi.message.error(errText);
>> + submitButton.prop('disabled', false); -- remove
>> + nameTextbox.prop('disabled', false).focus(); -- remove
>
> nameTextbox.focus(); -- add
This is called in error callback so we need enabled fields that are
disabled before. Will remain here.
>
>> + });
> Only a recommend for code re-organize.
>> +
>> + event.preventDefault();
>> + };
>> +
>> + renameReportForm.on('submit', submitForm);
>> + submitButton.on('click', submitForm);
>> +
>> + nameTextbox.val(kimchi.selectedReport).select();
>> +};
>> diff --git a/ui/pages/report-rename.html.tmpl
>> b/ui/pages/report-rename.html.tmpl
>> new file mode 100644
>> index 0000000..7fab0b6
>> --- /dev/null
>> +++ b/ui/pages/report-rename.html.tmpl
>> @@ -0,0 +1,53 @@
>> +#*
>> + * Project Kimchi
>> + *
>> + * Copyright IBM, Corp. 2013
>> + *
>> + * Licensed under the Apache License, Version 2.0 (the "License");
>> + * you may not use this file except in compliance with the License.
>> + * You may obtain a copy of the License at
>> + *
>> + * http://www.apache.org/licenses/LICENSE-2.0
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an "AS IS" BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
>> implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + *#
>> +#unicode UTF-8
>> +#import gettext
>> +#from kimchi.cachebust import href
>> +#silent t = gettext.translation($lang.domain, $lang.localedir,
>> languages=$lang.lang)
>> +#silent _ = t.gettext
>> +#silent _t = t.gettext
>> +<!DOCTYPE html>
>> +<div id="report-rename-window" class="window">
>> + <header>
>> + <h1 class="title">$_("Rename a Debug Report")</h1>
>> + <div class="close">X</div>
>> + </header>
>> + <div class="content">
>> + <form id="form-report-rename">
>> + <section class="form-section">
>> + <h2>
>> + <label for="report-name-textbox">$_("Report
>> Name")</label>
>> + </h2>
>> + <div class="field">
>> + <span>
>> + $_("The name used to identify the report.
>> Name can contain: letters, digits and hyphen (\"-\").")
>> + </span>
>> + <input type="text" class="text"
>> id="report-name-textbox" name="name" />
>> + </div>
>> + </section>
>> + </form>
>> + </div>
>> + <footer>
>> + <div class="btn-group">
>> + <button id="button-report-rename"
>> class="btn-normal"><span class="text">$_("Submit")</span></button>
>> + </div>
>> + </footer>
>> +</div>
>> +<script>
>> + kimchi.report_rename_main();
>> +</script>
>
>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>
More information about the Kimchi-devel
mailing list