[Kimchi-devel] [PATCH 5/6] Debug Report Rename UI: Add Rename Page

[Yu Xin Huo]

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);
> +        nameTextbox.prop('disabled', true);
> +        kimchi.renameReport(kimchi.selectedReport, formData, function(result) {
> +            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);
> +            nameTextbox.prop('disabled', false).focus();
> +        });
> +
> +        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" />
The original report name should be displayed in the text box and user 
can modify on top of it.
A clear button can be provided to clear the whole text also.
> +                </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>