- 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

@@ -1,5 +1,12 @@
-<!-- Users grid -->
+<ul class="nav nav-tabs">
-<div class="block-grid row" id="user-grid">
+   <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>
@@ -29,18 +36,21 @@
                </div>
             </div>
          </div>
-</div>
+      </div>
-
+   </div>
-<!-- Logs grid -->
+   <div id="menu1" class="tab-pane fade">
-<div class="block-grid row" id="log-grid">
+      <!-- Logs grid -->
+      <div class="block-grid row" id="log-grid">
          <h4>
             OpenVPN logs
          </h4>
          <table id="table-logs" class="table"></table>
-</div>
+      </div>
+   </div>
 
-<!-- Admins grid -->
+   <div id="menu2" class="tab-pane fade">
-<div class="block-grid row" id="admin-grid">
+      <!-- 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>
@@ -70,11 +80,14 @@
                </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>

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 },
       {