[Kimchi-devel] [PATCH 7/8] Applying new ui at Admin Backup Batch Delete Modal

Friday, 27 November 2015

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           | 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


    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

[Kimchi-devel] [PATCH 7/8] Applying new ui at Admin Backup Batch Delete Modal