From dbe32336327995364aa4b05ef51e64ff675c2539 Mon Sep 17 00:00:00 2001
From: Serjoscha Bassauer <bassauer@storms-media.de>
Date: Thu, 12 Oct 2017 00:29:46 +0200
Subject: [PATCH] - moved the configuration interface elements (logs, users,
 webadmins) to tabs; this makes useability a tiny bit better - "enabled" in
 the user config is now a checkbox that can be toggled in order to activate or
 deactivate the user

---
 include/html/grids.php | 151 ++++++++++++++++++++++-------------------
 js/grids.js            |  33 ++++++++-
 2 files changed, 114 insertions(+), 70 deletions(-)

diff --git a/include/html/grids.php b/include/html/grids.php
index 2d7bad1..5c4845f 100644
--- a/include/html/grids.php
+++ b/include/html/grids.php
@@ -1,80 +1,93 @@
-<!-- Users grid -->
-<div class="block-grid row" id="user-grid">
-  <h4>
-    OpenVPN Users <button data-toggle="modal" data-target="#modal-user-add" type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
-  </h4>
-  <table id="table-users" class="table"></table>
+<ul class="nav nav-tabs">
+   <li class="active"><a data-toggle="tab" href="#menu0">OpenVPN Users</a></li>
+   <li><a data-toggle="tab" href="#menu1">OpenVPN logs</a></li>
+   <li><a data-toggle="tab" href="#menu2">Web Admins</a></li>
+</ul>
+<div class="tab-content">
+   <div id="menu0" class="tab-pane fade in active">
+      <!-- Users grid -->
+      <div class="block-grid row" id="user-grid">
+         <h4>
+            OpenVPN Users <button data-toggle="modal" data-target="#modal-user-add" type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
+         </h4>
+         <table id="table-users" class="table"></table>
 
-  <div id="modal-user-add" class="modal fade" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h4 class="modal-title">Add user</h4>
-        </div>
-        <div class="modal-body">
-          <div class="form-group">
-            <label for="modal-user-add-username">Username</label>
-            <input type="text" name="username" id="modal-user-add-username" class="form-control" autofocus/>
-          </div>
-          <div class="form-group">
-            <label for="modal-user-add-password">Password</label>
-            <input type="password" name="password" id="modal-user-add-password" class="form-control" />
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-          <button type="button" class="btn btn-primary" id="modal-user-add-save">Save</button>
-        </div>
+         <div id="modal-user-add" class="modal fade" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+               <div class="modal-content">
+                  <div class="modal-header">
+                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                     <h4 class="modal-title">Add user</h4>
+                  </div>
+                  <div class="modal-body">
+                     <div class="form-group">
+                        <label for="modal-user-add-username">Username</label>
+                        <input type="text" name="username" id="modal-user-add-username" class="form-control" autofocus/>
+                     </div>
+                     <div class="form-group">
+                        <label for="modal-user-add-password">Password</label>
+                        <input type="password" name="password" id="modal-user-add-password" class="form-control" />
+                     </div>
+                  </div>
+                  <div class="modal-footer">
+                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                     <button type="button" class="btn btn-primary" id="modal-user-add-save">Save</button>
+                  </div>
+               </div>
+            </div>
+         </div>
       </div>
-    </div>
-  </div>
-</div>
-
-<!-- Logs grid -->
-<div class="block-grid row" id="log-grid">
-  <h4>
-    OpenVPN logs
-  </h4>
-  <table id="table-logs" class="table"></table>
-</div>
-
-<!-- Admins grid -->
-<div class="block-grid row" id="admin-grid">
-  <h4>
-    Web Admins <button data-toggle="modal" data-target="#modal-admin-add" type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
-  </h4>
-  <table id="table-admins" class="table"></table>
-
-  <div id="modal-admin-add" class="modal fade" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h4 class="modal-title">Add admin</h4>
-        </div>
-        <div class="modal-body">
-          <div class="form-group">
-            <label for="modal-admin-add-username">Username</label>
-            <input type="text" name="username" id="modal-admin-add-username" class="form-control" autofocus/>
-          </div>
-          <div class="form-group">
-            <label for="modal-admin-add-password">Password</label>
-            <input type="password" name="password" id="modal-admin-add-password" class="form-control" />
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-          <button type="button" class="btn btn-primary" id="modal-admin-add-save">Save</button>
-        </div>
+   </div>
+   <div id="menu1" class="tab-pane fade">
+      <!-- Logs grid -->
+      <div class="block-grid row" id="log-grid">
+         <h4>
+            OpenVPN logs
+         </h4>
+         <table id="table-logs" class="table"></table>
       </div>
-    </div>
-  </div>
+   </div>
+
+   <div id="menu2" class="tab-pane fade">
+      <!-- Admins grid -->
+      <div class="block-grid row" id="admin-grid">
+         <h4>
+            Web Admins <button data-toggle="modal" data-target="#modal-admin-add" type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
+         </h4>
+         <table id="table-admins" class="table"></table>
+
+         <div id="modal-admin-add" class="modal fade" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+               <div class="modal-content">
+                  <div class="modal-header">
+                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                     <h4 class="modal-title">Add admin</h4>
+                  </div>
+                  <div class="modal-body">
+                     <div class="form-group">
+                        <label for="modal-admin-add-username">Username</label>
+                        <input type="text" name="username" id="modal-admin-add-username" class="form-control" autofocus/>
+                     </div>
+                     <div class="form-group">
+                        <label for="modal-admin-add-password">Password</label>
+                        <input type="password" name="password" id="modal-admin-add-password" class="form-control" />
+                     </div>
+                  </div>
+                  <div class="modal-footer">
+                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                     <button type="button" class="btn btn-primary" id="modal-admin-add-save">Save</button>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
 </div>
 
 <script src="vendor/jquery/dist/jquery.min.js"></script>
 <script src="vendor/bootstrap/js/modal.js"></script>
 <script src="vendor/bootstrap/js/tooltip.js"></script>
+<script src="vendor/bootstrap/js/tab.js"></script>
 <script src="vendor/bootstrap/js/popover.js"></script>
 <script src="vendor/bootstrap-table/dist/bootstrap-table.min.js"></script>
 <script src="vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
diff --git a/js/grids.js b/js/grids.js
index f74c6db..637800e 100644
--- a/js/grids.js
+++ b/js/grids.js
@@ -17,6 +17,10 @@ $(function () {
     alert('Error: ' + textStatus);
   }
 
+   function checkFormatter(value, row, index) {
+      return '<input type="checkbox" '+(parseInt(value)===1?'checked':'')+' />';
+   }
+
   // ------------------------- USERS definitions -------------------------
   var $userTable = $('#table-users');
   var $modalUserAdd = $('#modal-user-add');
@@ -53,6 +57,23 @@ $(function () {
     });
   }
 
+  function genericSetField(field, new_value, pk) {
+    $.ajax({
+      url: gridsUrl,
+      data: {
+        set_user: true,
+        name: field,
+        value: new_value,
+        pk : pk
+      },
+      method: 'POST',
+      success: function() {
+        refreshTable($userTable);
+      },
+      error: onAjaxError
+    });
+  }
+
   var userEditable = {
     url: gridsUrl,
     params: function (params) {
@@ -131,6 +152,7 @@ $(function () {
   $userTable.bootstrapTable({
     url: gridsUrl,
     sortable: false,
+    checkboxHeader: false,
     queryParams: function (params) {
       params.select = 'user';
       return params;
@@ -143,7 +165,16 @@ $(function () {
       { title: "Mail", field: "user_mail", editable: userEditable },
       { title: "Phone", field: "user_phone", editable: userEditable },
       { title: "Online", field: "user_online" },
-      { title: "Enabled", field: "user_enable" },
+      {
+         title: "Enabled",
+         field: "user_enable",
+         formatter : checkFormatter,
+         events: {
+            'click input': function (e, value, row) {
+               genericSetField('user_enable', $(this).is(':checked') ? '1' : '0', row.user_id);
+            }
+         }
+      },
       { title: "Start Date", field: "user_start_date", editable: userDateEditable },
       { title: "End Date", field: "user_end_date", editable: userDateEditable },
       {