From c073d18133a4b103d1f83129ad1a8877d8433ddd Mon Sep 17 00:00:00 2001
From: billz <billzimmerman@gmail.com>
Date: Sun, 7 Feb 2021 18:51:21 +0000
Subject: [PATCH] Cleanup + fadeOut deleted cfg

---
 app/js/custom.js              | 16 ++++------------
 templates/openvpn/configs.php | 31 +++++++++++++++----------------
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/app/js/custom.js b/app/js/custom.js
index b1f445ce..dcb05797 100644
--- a/app/js/custom.js
+++ b/app/js/custom.js
@@ -249,22 +249,14 @@ $('#configureClientModal').on('shown.bs.modal', function (e) {
 });
 
 $('#ovpn-confirm-delete').on('click', '.btn-delete', function (e) {
-    var modalDiv = $(e.delegateTarget);
     var cfg_id = $(this).data('recordId');
-    console.log(cfg_id);
-    //console.log(modalDiv.parent().find('.js-remove-openvpn-client').attr('data-record-id'));
-    //console.log(modalDiv.parent().find(
-
     $.post('ajax/openvpn/del_ovpncfg.php',{'cfg_id':cfg_id},function(data){
         jsonData = JSON.parse(data);
-        console.log(jsonData);
-        //$(this).closest('js-openvpn-client-row').fadeOut(300);
         $("#ovpn-confirm-delete").modal('hide');
-        if(jsonData['return'] == 0) {
-            // do something
-        } else if(jsonData['return'] == 2) {
-            // something else
-        }
+        var row = $(document.getElementById("openvpn-client-row-" + cfg_id));
+        row.fadeOut( "slow", function() {
+            row.remove();
+        });
     });
 });
 
diff --git a/templates/openvpn/configs.php b/templates/openvpn/configs.php
index 1839c675..6f8056fd 100644
--- a/templates/openvpn/configs.php
+++ b/templates/openvpn/configs.php
@@ -1,33 +1,32 @@
 <div class="tab-pane fade" id="openvpnconfigs">
   <div class="row">
-    <div class="col-md-6">
+    <div class="col-md">
       <h4 class="mt-3 mb-3"><?php echo _("Configurations"); ?></h4>
         <p id="openvpnconfigs-description" class="mb-3">
           <small><?php echo _("Currently available OpenVPN client configurations are displayed below.") ?></small>
           <br><small class="text-muted"><?php echo _("Activating a configuraton will restart the <code>openvpn-client</code> service.") ?></small>
         </p>
         <div class="openvpn-configs js-openvpn-configs-container">
-              <?php foreach ($clients as $client) :
-                  if ($client == "login.conf") {
-                      $label = file_get_meta(RASPI_OPENVPN_CLIENT_LOGIN,'#\sfilename\s(.*)');
-                      $btn_class = "active";
-                  } else {
-                      $label = trim(pathinfo($client, PATHINFO_FILENAME), "_login");
-                      $client = $label;
-                      $btn_class = "disabled";
-                  }
-              ?>
-              <div class="row openvpn-client-row js-openvpn-client-row mt-2">
-              <div class="col-md-6 col-xs-5">
+          <?php foreach ($clients as $client) :
+                if ($client == "login.conf") {
+                    $label = file_get_meta(RASPI_OPENVPN_CLIENT_LOGIN,'#\sfilename\s(.*)');
+                    $btn_class = "active";
+                } else {
+                    $label = trim(pathinfo($client, PATHINFO_FILENAME), "_login");
+                    $client = $label;
+                    $btn_class = "disabled";
+                }?>
+            <div class="row mt-2" id="openvpn-client-row-<?php echo htmlspecialchars($client, ENT_QUOTES); ?>" >
+              <div class="col-md-6 col-xs-4">
                 <label><?php echo htmlspecialchars($label, ENT_QUOTES); ?></label>
               </div>
-              <div class="col-md-2 col-xs-2">
+              <div class="col-md-auto px-lg-3 col-xs-2">
                 <button type="button" class="btn btn-outline-success <?php echo $btn_class; ?> js-activate-openvpn-client" data-record-id="<?php echo htmlspecialchars($client, ENT_QUOTES); ?>" data-toggle="modal" data-target="#ovpn-confirm-activate" /><i class="far fa-check-circle"></i></button>
               </div>
-              <div class="col-md-2 col-xs-2">
+              <div class="col-md-auto col-xs-2">
                 <button type="button" class="btn btn-outline-danger js-remove-openvpn-client" data-record-id="<?php echo htmlspecialchars($client, ENT_QUOTES); ?>" data-toggle="modal" data-target="#ovpn-confirm-delete" /><i class="far fa-trash-alt"></i></button>
               </div>
-            </div><!-- ./row openvpn -->
+            </div><!-- ./row openvpn-client -->
           <?php endforeach ?>
        </div><!-- /.openvpn-configs -->
       <div class="mb-3"></div>