[Kimchi-devel] [PATCH 5/8] Applying new-ui at SEP Configuration Modal

From: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- ui/js/host-admin.js | 97 ++++++++++++++++++------------------------- ui/pages/host-admin.html.tmpl | 43 ++++++++++++------- 2 files changed, 69 insertions(+), 71 deletions(-) diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js index 30110df..87a15ff 100644 --- a/ui/js/host-admin.js +++ b/ui/js/host-admin.js @@ -613,68 +613,53 @@ ginger.initSEPConfig = function() { }); }; - $(".add-subscription", ".ginger .host-admin .subsc-manage").button({ - text: false - }).click(function(event) { + $('#subscriptionAdd').on('show.bs.modal', function(event) { var clearSubscriptionSubmit = function(clear) { if (clear) { - $(".subsc-add-body .subsc-add-content .subsc-input", "#subscriptionAdd").val(""); + $("form#form-subscription-add :input", "#subscriptionAdd").val(""); } - $(".subsc-add-content .subsc-input").attr("disabled", false); - $("input", ".subsc-add-content .subsc-input").attr("disabled", false); - $("#subsc-submit").button("option", "disabled", true); - $("#subsc-cancel").button("option", "disabled", false); + $("form#form-subscription-add :input").attr("disabled", false); + $("#subsc-submit").prop("disabled", true); + $("#subsc-cancel").prop("disabled", false); }; - $("#subscriptionAdd").dialog({ - modal: true, - width: 350, - draggable: false, - resizable: false, - closeText: "X", - open: function() { - $(".subsc-add-content .inputbox").keyup(function() { - var sum = 0; - $(".subsc-add-content .inputbox").each(function(index, data) { - if ($(data).val() === "") { - sum += 1; - } - }) - if (sum != 0) { - $("#subsc-submit").button("option", "disabled", true); - } else { - $("#subsc-submit").button("option", "disabled", false); - } - }); - $("#subsc-submit", $(this)).button().click(function(event) { - $(".subsc-add-content .subsc-input").attr("disabled", true); - $("input", ".subsc-add-content .subsc-input").attr("disabled", true); - $("#subsc-submit").button("option", "disabled", true); - $("#subsc-cancel").button("option", "disabled", true); - var hostname = $(".subsc-add-content .subsc-input[name='hostname']", ".subsc-add-body").val(); - var port = parseInt($(".subsc-add-content .subsc-input[name='port']", ".subsc-add-body").val()); - var community = $(".subsc-add-content .subsc-input[name='community']", ".subsc-add-body").val(); - var dataSubmit = { - hostname: hostname, - port: port, - community: community, - }; - ginger.addSEPSubscription(dataSubmit, function() { - $("#subscriptionAdd").dialog("close"); - listSubscriptions(); - }, function(error) { - wok.message.error(error.responseJSON.reason); - clearSubscriptionSubmit(false); - }); - }); - $("#subsc-cancel", $(this)).button().click(function(event) { - $("#subscriptionAdd").dialog("close"); - }); - }, - beforeClose: function() { - clearSubscriptionSubmit(true); - $("#subsc-submit").unbind("click"); + $("#subscriptionAdd, .input").keyup(function() { + var sum = 0; + $("form#form-subscription-add :input").each(function(index, data) { + if ($(data).val() === "") { + sum += 1; + } + }) + if (sum != 0) { + $("#subsc-submit").prop("disabled", true); + } else { + $("#subsc-submit").prop("disabled", false); } }); + $("#subsc-submit", $(this)).button().click(function(event) { + $("form#form-subscription-add :input").attr("disabled", true); + $("#subsc-submit").prop("disabled", true); + $("#subsc-cancel").prop("disabled", true); + var hostname = $("#subscriptionAdd, .input[name='hostname']", ".modal-body").val(); + var port = parseInt($("#subscriptionAdd, .input[name='port']", ".modal-body").val()); + var community = $("#subscriptionAdd, .input[name='community']", ".modal-body").val(); + var dataSubmit = { + hostname: hostname, + port: port, + community: community, + }; + ginger.addSEPSubscription(dataSubmit, function() { + clearSubscriptionSubmit(true); + $('#subscriptionAdd').modal('hide') + listSubscriptions(); + }, function(error) { + wok.message.error(error.responseJSON.reason); + clearSubscriptionSubmit(false); + }); + + }); + $("#subsc-cancel", $(this)).button().click(function(event) { + $('#subscriptionAdd').modal('hide') + }); }); $("#sepStart").button().click(function() { sepStart(); diff --git a/ui/pages/host-admin.html.tmpl b/ui/pages/host-admin.html.tmpl index 62ac84c..42d8bca 100644 --- a/ui/pages/host-admin.html.tmpl +++ b/ui/pages/host-admin.html.tmpl @@ -223,7 +223,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA --><span id="sepStatusLog" style="font-weight: bold;"></span><!-- --><button class="btn btn-primary" type="submit" id="sepStart">$_("Start")</button><!-- --><button class="btn btn-primary" type="submit" id="sepStop">$_("Stop")</button><!-- - --><button class="btn btn-primary add-subscription" type="submit">$_("Subscribe")</button> + --><button class="btn btn-primary add-subscription" type="submit" data-toggle="modal" data-target="#subscriptionAdd">$_("Subscribe")</button> </li> <li class='header'> <span class="column-hostname">$_("Hostname")</span><!-- @@ -286,20 +286,33 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </div> </div> -<div id="subscriptionAdd" title='$_("Add Subscription")' class="ginger-dialog"> - <div class="subsc-add-body"> - <div class="subsc-add-label subsc-colume"> - <div class="subsc-label">$_("Hostname")</div> - <div class="subsc-label">$_("Port")</div> - <div class="subsc-label">$_("Community")</div> - </div> - <div class="subsc-add-content subsc-colume"> - <input class="subsc-input inputbox" name="hostname" /><br> - <input class="subsc-input inputbox" name="community" /><br> - </div> - <div class="subsc-manage-footer"> - <button id="subsc-submit" disabled>$_("Submit")</button> - <button id="subsc-cancel">$_("Cancel")</button> +<!-- SEP Configuration Modal - Add Subscription --> +<div class="modal fade host-modal" id="subscriptionAdd" tabindex="-1" role="dialog" labelledby="hostsModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content" > + <div class="modal-header"> + <h4 class="modal-title">$_("Add Subscription")</h4> + </div> + <div class="modal-body"> + <form id="form-subscription-add"> + <div class="form-group"> + <label for="hostname-textbox">$_("Hostname")</label> + <input type="text" class="form-control input" id="hostname-textbox" name="hostname" /> + </div> + <div class="form-group"> + <label for="port-textbox">$_("Port")</label> + <input type="text" class="form-control input" id="port-textbox" name="port" /> + </div> + <div class="form-group"> + <label for="community-textbox">$_("Community")</label> + <input type="text" class="form-control input" id="community-textbox" name="community" /> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="button" id="subsc-submit" class="btn btn-default" data-dismiss="modal" disabled>$_("Submit")</button> + <button type="button" id="subsc-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> + </div> </div> </div> </div> -- 1.9.3