[Kimchi-devel] [PATCH 7/8] Applying new ui at Admin Backup Batch Delete Modal
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Fri Nov 27 19:47:56 UTC 2015
From: Andre Teodoro <andreteodoro.work at gmail.com>
Signed-off-by: Andre Teodoro <andreteodoro.work at gmail.com>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
ui/js/host-admin.js | 105 ++++++++++++++++++------------------------
ui/pages/host-admin.html.tmpl | 64 +++++++++++++++++++++----
2 files changed, 99 insertions(+), 70 deletions(-)
diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js
index 294131b..56df1dc 100644
--- a/ui/js/host-admin.js
+++ b/ui/js/host-admin.js
@@ -123,58 +123,51 @@ ginger.initBakDialog = function() {
};
ginger.initBatDelDialog = function() {
- $("#batDelDialog").dialog({
- autoOpen: false,
- modal: true,
- width: 600,
- draggable: false,
- resizable: false,
- closeText: "X",
- open: function() {
- $(".ui-dialog-titlebar-close", $("#batDelDialog").parent()).removeAttr("title");
- },
- beforeClose: function() {
+ $('#batDelDialog').on('show.bs.modal', function(event) {
+ $("#batdel-submit", $(this)).on("click", function(event) {
+ var content = {
+ counts_ago: -1,
+ days_ago: -1
+ };
+ var delOption = $("input:radio[name=batDelType]:checked");
+ var delValue = $("input:text", delOption.parent()).prop("value");
+ console.log('delOption', delOption);
+ console.log('delValue', delValue);
+ content[delOption.val()] = parseInt(delValue);
+ ginger.deleteBackupArchives(content, function() {
+ $('#batDelDialog').modal('hide');
+ $("#bakGridBody").empty();
+ clearForm();
+ ginger.setupBakGrid();
+ });
+ });
+ var clearForm = function() {
$("input:text", "#batDelDialog").prop("value", null);
$("input:text", "#batDelDialog").prop("disabled", true);
$("input:text", "#batDelDialog").removeClass("invalid-field");
$("input:text:first", "#batDelDialog").prop("disabled", false);
$("input:radio[name=batDelType]:first").prop("checked", true);
- $("#batDelFormBtn").button("disable");
- },
- buttons: [{
- id: "batDelFormBtn",
- text: "OK",
- disabled: true,
- click: function() {
- var content = {
- counts_ago: -1,
- days_ago: -1
- };
- var delOption = $("input:radio[name=batDelType]:checked");
- var delValue = $("input:text", delOption.parent()).prop("value");
- content[delOption.val()] = parseInt(delValue);
- ginger.deleteBackupArchives(content, function() {
- $("#batDelDialog").dialog("close");
- $("#bakGridBody").empty();
- ginger.setupBakGrid();
- });
- }
- }]
- });
+ $("#batdel-submit").prop("disabled", true);
+ };
+ var validateInput = function(input) {
+ var isValid = new RegExp('^[0-9]*$').test(input.val());
+ input.toggleClass("invalid-field", !isValid);
- var validateInput = function(input) {
- var isValid = new RegExp('^[0-9]*$').test(input.val());
- input.toggleClass("invalid-field", !isValid);
- $("#batDelFormBtn").button(isValid && input.val().trim() !== "" ? "enable" : "disable");
- };
- $("input:radio[name=batDelType]").on("click", function() {
- $("input:text", "#batDelDialog").prop("disabled", true);
- var activeInput = $("input:text", $("input:radio[name=batDelType]:checked").parent());
- activeInput.prop("disabled", false);
- validateInput(activeInput);
- });
- $("input:text", "#batDelDialog").on("keyup", function() {
- validateInput($(this));
+ if (isValid && input.val().trim() !== "") {
+ $("#batdel-submit").prop("disabled", false);
+ } else {
+ $("#batdel-submit").prop("disabled", true);
+ }
+ };
+ $("input:radio[name=batDelType]").on("click", function() {
+ $("input:text", "#batDelDialog").prop("disabled", true);
+ var activeInput = $("input:text", $("input:radio[name=batDelType]:checked").parent());
+ activeInput.prop("disabled", false);
+ validateInput(activeInput);
+ });
+ $("input:text", "#batDelDialog").on("keyup", function() {
+ validateInput($(this));
+ });
});
};
@@ -231,14 +224,11 @@ ginger.initConfigBak = function() {
ginger.setupBakGrid();
})
});
+
$("#newCustomBakBtn").on("click", function(event) {
event.preventDefault();
$("#newBakDialog").dialog("open");
});
- $("#batDelBtn").on("click", function(event) {
- event.preventDefault();
- $("#batDelDialog").dialog("open");
- });
ginger.setupBakGrid();
ginger.initBakDialog();
@@ -578,7 +568,7 @@ ginger.initSEPConfig = function() {
};
var listSubscriptions = function() {
sepStatus();
- $(".content-body", ".ginger .host-admin .subsc-manage").empty();
+ $(".content-body", ".ginger .host-admin .subsc-manage").remove();
ginger.getSEPSubscriptions(function(result) {
for (var i = 0; i < result.length; i++) {
var subscItem = $.parseHTML(wok.substitute($("#subscItem").html(), {
@@ -672,7 +662,7 @@ ginger.initSEPConfig = function() {
ginger.initUserManagement = function() {
var listUsers = function() {
- $(".content-body", ".ginger .host-admin .user-manage").empty();
+ $(".content-body", ".ginger .host-admin .user-manage").remove();
ginger.getUsers(function(result) {
for (var i = 0; i < result.length; i++) {
var nodeNameItem = $.parseHTML(wok.substitute($("#userItem").html(), {
@@ -680,16 +670,11 @@ ginger.initUserManagement = function() {
userGroup: result[i]["group"],
userProfile: result[i]["profile"]
}));
- $(".ginger .host-admin .user-manage .content-body").append(nodeNameItem);
+ $(".ginger .host-admin .user-manage").append(nodeNameItem);
}
- $(".detach", ".ginger .host-admin .user-manage").button({
- icons: {
- primary: "ui-icon-trash"
- },
- text: false
- }).click(function(event) {
+ $(".detach", ".ginger .host-admin .user-manage").button({}).click(function(event) {
var that = $(this).parent();
- ginger.deleteUser($("div[data-type='name']", that).text(), function() {
+ ginger.deleteUser($("span[data-type='name']", that).text(), function() {
that.remove();
}, function() {});
});
diff --git a/ui/pages/host-admin.html.tmpl b/ui/pages/host-admin.html.tmpl
index c141908..7f4ceda 100644
--- a/ui/pages/host-admin.html.tmpl
+++ b/ui/pages/host-admin.html.tmpl
@@ -90,7 +90,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
<a href="#" id="newCustomBakBtn"><i class="fa fa-file"></i>$_("New Custom Backup")</a>
</li>
<li role="presentation">
- <a href="#" id="batDelBtn"><i class="fa fa-minus-circle"></i>$_("Batch Delete")</a>
+ <a href="#" id="batDelBtn" data-toggle="modal" data-target="#batDelDialog"><i class="fa fa-minus-circle"></i>$_("Batch Delete")</a>
</li>
</ul>
</div>
@@ -255,13 +255,13 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
<span class="sr-only">Detach</span><!--
--></span>
</li>
- <li class="content-body body"></li>
</ul>
<hr>
</div>
</div>
</div>
+<!-- Configuration Backup Modal - Create Custom Backup -->
<div id="newBakDialog" title='$_("Create a backup")' class="ginger-dialog">
<div>$_("Description")</div>
<div class="crt-bak-section"><input type="text" class="desc"></div>
@@ -277,14 +277,51 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
</div>
</div>
-<div id="batDelDialog" class="window modal-content">
+<!-- Configuration Backup Modal - Batch Delete -->
+<div class="modal fade host-modal" id="batDelDialog" tabindex="-1" role="dialog" labelledby="batDelLabel" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content" >
+ <div class="modal-header">
+ <h4 class="modal-title">$_("Delete Backups in Batch")</h4>
+ </div>
+ <div class="modal-body">
+ <form id="form-bat-delete">
+ <div class="form-group">
+ <div id="radio-buttons">
+ <label class="radio-inline">
+ <input type="radio" name="batDelType" class="wok-radio" id="kimchiuser" value="counts_ago" checked/>
+ <label for="kimchiuser">$_("Preserve the latest")</label>
+ <input type="text" class="form-control" style="display: inherit;width: auto;"> $_("backups")
+ </label>
+ </div>
+ </div>
+ <div class="form-group">
+ <div id="radio-buttons">
+ <label class="radio-inline">
+ <input type="radio" name="batDelType" class="wok-radio" id="kimchiuser" value="days_ago"/>
+ <label for="kimchiuser">$_("Preserve the latest")</label>
+ <input type="text" class="form-control" style="display: inherit;width: auto;" disabled> $_("days of backups")
+ </label>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button type="button" id="batdel-submit" class="btn btn-default" data-dismiss="modal" disabled>$_("Submit")</button>
+ <button type="button" id="batdel-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+<!-- <div id="batDelDialog" class="window modal-content">
<div class="del-option">
<input type="radio" name="batDelType" value="counts_ago" checked>$_("Preserve the latest") <input type="text" class=""> $_("backups")
</div>
<div class="del-option">
<input type="radio" name="batDelType" value="days_ago">$_("Preserve the latest") <input type="text" class="" disabled> $_("days of backups")
</div>
-</div>
+</div> -->
<!-- SEP Configuration Modal - Add Subscription -->
<div class="modal fade host-modal" id="subscriptionAdd" tabindex="-1" role="dialog" labelledby="hostsModalLabel" aria-hidden="true">
@@ -342,20 +379,25 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
<label for="usergroup-textbox">$_("Group")</label>
<input type="text" class="form-control inputbox" id="usergroup-textbox" name="userGroup" disabled />
<div class="checkbox">
- <label>
- <input type="checkbox" class="enable-combobox" id="enableEditGroup"> $_("Use Other")
- </label>
+ <input type="checkbox" class="enable-combobox wok-checkbox" id="enableEditGroup" />
+ <label for="enableEditGroup">$_("Use Other")</label>
</div>
</div>
<div class="form-group">
<label>$_("Profile")</label>
<div id="radio-buttons">
<label class="radio-inline">
- <input type="radio" name="userProfile" id="kimchiuser" value="kimchiuser" > $_("Kimchi User")</label>
+ <input type="radio" name="userProfile" class="wok-radio" id="kimchiuser" value="kimchiuser"/>
+ <label for="kimchiuser">$_("Kimchi User")</label>
+ </label>
<label class="radio-inline">
- <input type="radio" name="userProfile" id="virtuser" value="virtuser" > $_("Virt User")</label>
+ <input type="radio" name="userProfile" class="wok-radio" id="virtuser" value="virtuser"/>
+ <label for="virtuser">$_("Virt User")</label>
+ </label>
<label class="radio-inline">
- <input type="radio" name="userProfile" id="admin" value="admin" > $_("Administrator")</label>
+ <input type="radio" name="userProfile" class="wok-radio" id="admin" value="admin" />
+ <label for="admin">$_("Administrator")</label>
+ </label>
</div>
</div>
</form>
@@ -430,10 +472,12 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
</li>
</script>
<script id="userItem" type="text/html">
+ <li class="content-body body">
<span class="column-username" data-type="name">{userName}</span><!--
--><span class="column-usergroup" data-type="group">{userGroup}</span><!--
--><span class="column-userprofile" data-type="profile">{userProfile}</span><!--
--><span class="column-detach btn btn-link detach"><i class="fa fa-trash-o"></i></span>
+ </li>
</script>
<script id="subscItem" type="text/html">
<li class="body">
--
1.9.3
More information about the Kimchi-devel
mailing list