Update tables : use bootstrap tables, x-editable, bootstrap

datepicker...

bower.json

@@ -3,10 +3,11 @@
   "version": "0.0.1",
   "description": "Setup and administration of openvpn with a web interface",
   "dependencies": {
-    "bootstrap": "^3.3.5",
+    "bootstrap": "^3.3.7",
-    "slickgrid": "git://github.com/mleibman/SlickGrid.git#master",
+    "bootstrap-table": "^1.11.0",
-    "js-sha1": "^0.3.0",
+    "jquery": "^2.2.4",
-    "slickgrid-enhancement-pager": "git://github.com/Chocobozzz/SlickGridEnhancementPager#master"
+    "x-editable": "^1.5.1",
+    "bootstrap-datepicker": "^1.6.4"
   },
   "keywords": [
     "openvpn",
@@ -18,4 +19,4 @@
   ],
   "license": "GPLv3",
   "private": true
-}
+}

css/index.css

@@ -1,144 +1,15 @@
 body {
-  margin: auto;
+  padding-top: 10px;
-  padding: 10px;
-  
-  /* Overide jquery ui style with bootstrap */
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
-  font-size: 14px !important;
-  line-height: 1.42857 !important;
-  color: #333 !important;
 }
 
-a.glyphicon {
+.action {
-  color: #333 !important;
+  cursor: pointer;
-}
-
-.delete {
-    cursor: pointer;
-}
-
-#header_admin {
-  margin : 10px;
 }
 
 .block-grid {
   margin: 20px;
 }
 
-.grid {
+.btn .glyphicon {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  top: 2px;
 }
-
-/*.slick-header-column {
-  font-weight: bold;
-  border-bottom: 2px solid rgba(0, 0, 0, 0.2) !important;
-}*/
-
-/* Fix with slickgrid and bootstrap association */
-.slick-header *, *:before, *.after {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-
-/* Editor */
-/* Slick.Editors.Text, Slick.Editors.Date */
-input.editor-text {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  margin: 0;
-  background: transparent;
-  outline: 0;
-  padding: 0;
-
-}
-
-.ui-datepicker-trigger {
-  margin-top: 2px;
-  padding: 0;
-  vertical-align: top;
-}
-
-/* Slick.Editors.PercentComplete */
-input.editor-percentcomplete {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  margin: 0;
-  background: transparent;
-  outline: 0;
-  padding: 0;
-
-  float: left;
-}
-
-.editor-percentcomplete-picker {
-  position: relative;
-  display: inline-block;
-  width: 16px;
-  height: 100%;
-  background: url("../images/pencil.gif") no-repeat center center;
-  overflow: visible;
-  z-index: 1000;
-  float: right;
-}
-
-.editor-percentcomplete-helper {
-  border: 0 solid gray;
-  position: absolute;
-  top: -2px;
-  left: -9px;
-  background: url("../images/editor-helper-bg.gif") no-repeat top left;
-  padding-left: 9px;
-
-  width: 120px;
-  height: 140px;
-  display: none;
-  overflow: visible;
-}
-
-.editor-percentcomplete-wrapper {
-  background: beige;
-  padding: 20px 8px;
-
-  width: 100%;
-  height: 98px;
-  border: 1px solid gray;
-  border-left: 0;
-}
-
-.editor-percentcomplete-buttons {
-  float: right;
-}
-
-.editor-percentcomplete-buttons button {
-  width: 80px;
-}
-
-.editor-percentcomplete-slider {
-  float: left;
-}
-
-.editor-percentcomplete-picker:hover .editor-percentcomplete-helper {
-  display: block;
-}
-
-.editor-percentcomplete-helper:hover {
-  display: block;
-}
-
-/* Slick.Editors.YesNoSelect */
-select.editor-yesno {
-  width: 100%;
-  margin: 0;
-  vertical-align: middle;
-}
-
-/* Slick.Editors.Checkbox */
-input.editor-checkbox {
-  margin: 0;
-  height: 100%;
-  padding: 0;
-  border: 0;
-}

include/functions.php

@@ -1,37 +1,29 @@
 <?php
-  
+
-  function dateToSql($date) {
-    return implode('-', array_reverse(explode('/', $date)));
-  }
-  
-  function dateFromSql($date) {
-    return implode('/', array_reverse(explode('-', $date)));
-  }
-  
   function printError($str) {
     echo '<div class="alert alert-danger" role="alert">' . $str . '</div>';
   }
-  
+
   function printSuccess($str) {
     echo '<div class="alert alert-success" role="alert">' . $str . '</div>';
   }
-  
+
   function isInstalled($bdd) {
     $req = $bdd->prepare("SHOW TABLES LIKE 'admin'");
     $req->execute();
-    
+
     if(!$req->fetch())
       return false;
-    
+
     return true;
   }
-  
+
   function hashPass($pass) {
     return password_hash($pass, PASSWORD_DEFAULT);
   }
-  
+
   function passEqual($pass, $hash) {
     return password_verify($pass, $hash);
   }
-  
+
-?>
+?>

include/grids.php

@@ -1,75 +1,67 @@
 <?php
   session_start();
-  
+
   if(!isset($_SESSION['admin_id']))
     exit -1;
 
   require(dirname(__FILE__) . '/connect.php');
   require(dirname(__FILE__) . '/functions.php');
-  
+
-  
+
   // ---------------- SELECT ----------------
-  if(isset($_POST['select'])){
+  if(isset($_GET['select'])){
-      
+
     // Select the users
-    if($_POST['select'] == "user"){
+    if($_GET['select'] == "user"){
       $req = $bdd->prepare('SELECT * FROM user');
       $req->execute();
-      
+
-      if($data = $req->fetch()) {               
+      if($data = $req->fetch()) {
-        do {                   
+        do {
           $list[] = array("user_id" => $data['user_id'],
                           "user_pass" => $data['user_pass'],
                           "user_mail" => $data['user_mail'],
                           "user_phone" => $data['user_phone'],
                           "user_online" => $data['user_online'],
                           "user_enable" => $data['user_enable'],
-                          "user_start_date" => dateFromSql($data['user_start_date']),
+                          "user_start_date" => $data['user_start_date'],
-                          "user_end_date" => dateFromSql($data['user_end_date']));
+                          "user_end_date" => $data['user_end_date']);
-        } while($data = $req->fetch());                      
+        } while($data = $req->fetch());
-        
+
-        echo json_encode($list);           
+        echo json_encode($list);
       }
       // If it is an empty answer, we need to encore an empty json object
       else{
         $list = array();
-        echo json_encode($list);   
+        echo json_encode($list);
       }
     }
-    
+
     // Select the logs
-    else if($_POST['select'] == "log"){
+    else if($_GET['select'] == "log" && isset($_GET['offset'], $_GET['limit'])){
+      $offset = intval($_GET['offset']);
+      $limit = intval($_GET['limit']);
+
       // Creation of the LIMIT for build different pages
-      if(isset($_POST['pageIndex'], $_POST['pageSize'])) {
+      $page = "LIMIT $offset, $limit";
-        $actual_page = ($_POST['pageIndex']-1) * $_POST['pageSize'];
+
-        $max_page = $_POST['pageSize'];
-        $page = "LIMIT $actual_page, $max_page";
-      }
-      else {
-        $page = "";
-      }
-      
       // Select the logs
-      $string_requete = "SELECT *, (SELECT COUNT(*) FROM log) AS nb FROM log ORDER BY log_id DESC $page";
+      $req_string = "SELECT *, (SELECT COUNT(*) FROM log) AS nb FROM log ORDER BY log_id DESC $page";
-      $req = $bdd->prepare($string_requete);
+      $req = $bdd->prepare($req_string);
       $req->execute();
-      
+
       $list = array();
-      
+
       $data = $req->fetch();
-      
+
       if($data) {
         $nb = $data['nb'];
-                    
+
         do {
           // Better in Kb or Mb
           $received = ($data['log_received'] > 100000) ? $data['log_received']/100000 . " Mo" : $data['log_received']/100 . " Ko";
           $sent = ($data['log_send'] > 100000) ? $data['log_send']/100000 . " Mo" : $data['log_send']/100 . " Ko";
-          $start_time_array = explode(' ', $data['log_start_time']);
+
-          $start_time = dateFromSql($start_time_array[0]) . ' ' . $start_time_array[1];
-          $end_time_array = explode(' ', $data['log_end_time']);
-          $end_time = dateFromSql($end_time_array[0]) . ' ' . $end_time_array[1];
-          
           // We add to the array the new line of logs
           array_push($list, array(
                                   "log_id" => $data['log_id'],
@@ -78,126 +70,132 @@
                                   "log_trusted_port" => $data['log_trusted_port'],
                                   "log_remote_ip" => $data['log_remote_ip'],
                                   "log_remote_port" => $data['log_remote_port'],
-                                  "log_start_time" => $start_time,
+                                  "log_start_time" => $data['log_start_time'],
-                                  "log_end_time" => $end_time,
+                                  "log_end_time" => $data['log_end_time'],
                                   "log_received" => $received,
                                   "log_send" => $sent));
-          
+
-          
+
         } while ($data = $req->fetch());
       }
       else {
         $nb = 0;
       }
-      
+
       // We finally print the result
-      $result = array('Total' => $nb, 'Rows' => json_encode($list)); 
+      $result = array('total' => intval($nb), 'rows' => $list);
-      
+
       echo json_encode($result);
     }
-    
+
     // Select the admins
-    else if($_POST['select'] == "admin"){
+    else if($_GET['select'] == "admin"){
       $req = $bdd->prepare('SELECT * FROM admin');
       $req->execute();
-      
+
-      if($data = $req->fetch()) {               
+      if($data = $req->fetch()) {
-        do{    
+        do{
           $list[] = array(
                           "admin_id" => $data['admin_id'],
                           "admin_pass" => $data['admin_pass']
                           );
-        } while($data = $req->fetch());                      
+        } while($data = $req->fetch());
-        
+
-        echo json_encode($list);           
+        echo json_encode($list);
       }
       else{
         $list = array();
-        echo json_encode($list);   
+        echo json_encode($list);
       }
     }
   }
- 
+
   // ---------------- ADD USER ----------------
-  else if(isset($_POST['add_user'])){
+  else if(isset($_POST['add_user'], $_POST['user_id'], $_POST['user_pass'])){
     // Put some default values
     $id = $_POST['user_id'];
-    $pass = "";
+    $pass = hashPass($_POST['user_pass']);
     $mail = "";
     $phone = "";
     $online = 0;
     $enable = 1;
     $start = "0000-00-00";
     $end = "0000-00-00";
-    
+
     $req = $bdd->prepare('INSERT INTO user (user_id, user_pass, user_mail, user_phone, user_online, user_enable, user_start_date, user_end_date)
                         VALUES (?, ?, ?, ?, ?, ?, ?, ?)');
     $req->execute(array($id, $pass, $mail, $phone, $online, $enable, $start, $end));
-    
+
     $res = array("user_id" => $id,
       "user_pass" => $pass,
       "user_mail" => $mail ,
       "user_phone" => $phone,
       "user_online" => $online,
       "user_enable" => $enable,
-      "user_start_date" => dateFromSql($start),
+      "user_start_date" => $start,
-      "user_end_date" => dateFromSql($end)
+      "user_end_date" => $end
     );
-    
+
     echo json_encode($res);
   }
-  
+
   // ---------------- UPDATE USER ----------------
   else if(isset($_POST['set_user'])){
     $valid = array("user_id", "user_pass", "user_mail", "user_phone", "user_enable", "user_start_date", "user_end_date");
-    $set_field = $set_value = array();
+
-    
+    $field = $_POST['name'];
-    // Only update what was modified
+    $value = $_POST['value'];
-    foreach($_POST as $key => $value){
+    $pk = $_POST['pk'];
-      if(in_array($key, $valid)){
+
-        array_push($set_field, $key . "=?");
+    if (!isset($field) || !isset($pk) || !in_array($field, $valid)) {
-        
+      return;
-        if($key == "user_pass")
-          if($value == "")
-            array_push($set_value, $value);
-          else
-            array_push($set_value, hashPass($value));
-        else if($key == "user_start_date" || $key == "user_end_date")
-          array_push($set_value, dateToSql($value));
-        else
-          array_push($set_value, $value);
-      }
     }
-    // Build the request
+
-    array_push($set_value, $_POST['set_user']);
+    if ($field === 'user_pass') {
-    
+      $value = hashPass($value);
-    $req_string = 'UPDATE user SET ' . implode(',', $set_field) . ' WHERE user_id = ?';
+    }
+
+    // /!\ SQL injection: field was checked with in_array function
+    $req_string = 'UPDATE user SET ' . $field . ' = ? WHERE user_id = ?';
     $req = $bdd->prepare($req_string);
-    $req->execute($set_value);
+    $req->execute(array($value, $pk));
   }
-  
+
   // ---------------- REMOVE USER ----------------
-  else if(isset($_POST['del_user_id'])){
+  else if(isset($_POST['del_user'], $_POST['del_user_id'])){
     $req = $bdd->prepare('DELETE FROM user WHERE user_id = ?');
     $req->execute(array($_POST['del_user_id']));
   }
-  
+
   // ---------------- ADD ADMIN ----------------
-  else if(isset($_POST['add_admin'])){
+  else if(isset($_POST['add_admin'], $_POST['admin_id'], $_POST['admin_pass'])){
     $req = $bdd->prepare('INSERT INTO admin(admin_id, admin_pass) VALUES (?, ?)');
-    $req->execute(array($_POST['admin_id'], ""));
+    $req->execute(array($_POST['admin_id'], hashPass($_POST['admin_pass'])));
   }
-  
+
   // ---------------- UPDATE ADMIN ----------------
   else if(isset($_POST['set_admin'])){
-    $mdp = $_POST['admin_pass'] ? hashPass($_POST['admin_pass']) : "";
+    $valid = array("admin_id", "admin_pass");
-    
+
-    $req = $bdd->prepare('UPDATE admin SET admin_id = ?, admin_pass = ? WHERE admin_id = ?');
+    $field = $_POST['name'];
-    $req->execute(array($_POST['admin_id'], $mdp, $_POST['set_admin']));
+    $value = $_POST['value'];
+    $pk = $_POST['pk'];
+
+    if (!isset($field) || !isset($pk) || !in_array($field, $valid)) {
+      return;
+    }
+
+    if ($field === 'admin_pass') {
+      $value = hashPass($value);
+    }
+
+    $req_string = 'UPDATE admin SET ' . $field . ' = ? WHERE admin_id = ?';
+    $req = $bdd->prepare($req_string);
+    $req->execute(array($value, $pk));
   }
-  
+
   // ---------------- REMOVE ADMIN ----------------
-  else if(isset($_POST['del_admin_id'])){
+  else if(isset($_POST['del_admin'], $_POST['del_admin_id'])){
     $req = $bdd->prepare('DELETE FROM admin WHERE admin_id = ?');
     $req->execute(array($_POST['del_admin_id']));
   }

include/html/grids.php

@@ -1,41 +1,83 @@
 <!-- Users grid -->
 <div class="block-grid row" id="user-grid">
-  <div class="grid-header">
+  <h4>
-    <label>OpenVPN Users</label>
+    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" />
+          </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 class="grid" id="grid_user"></div>
 </div>
 
 <!-- Logs grid -->
 <div class="block-grid row" id="log-grid">
-  <div class="grid-header">
+  <h4>
-    <label>OpenVPN Logs</label>
+    OpenVPN logs
-  </div>
+  </h4>
-  <div class="grid" id="grid_log"></div>
+  <table id="table-logs" class="table"></table>
-  <div id="pager" class="slick-enhancement-pager"></div>
 </div>
 
 <!-- Admins grid -->
 <div class="block-grid row" id="admin-grid">
-  <div class="grid-header">
+  <h4>
-    <label>Web Admins</label>
+    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" />
+          </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 class="grid" id="grid_admin"></div>
 </div>
 
-<script src="vendor/slickgrid/lib/jquery-1.7.min.js"></script>
+<script src="/vendor/jquery/dist/jquery.min.js"></script>
-<script src="vendor/slickgrid/lib/jquery-ui-1.8.16.custom.min.js"></script>
+<script src="/vendor/bootstrap/js/modal.js"></script>
-<script src="vendor/slickgrid/lib/jquery.event.drag-2.2.js"></script>
+<script src="/vendor/bootstrap/js/tooltip.js"></script>
-<script src="vendor/slickgrid/slick.core.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>
-<script src="vendor/slickgrid/slick.formatters.js"></script>
+<script src="/vendor/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
-<script src="vendor/slickgrid/slick.editors.js"></script>
+<script src="/vendor/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
-<script src="vendor/slickgrid/slick.grid.js"></script>
+<script src="/js/grids.js"></script>
-
-<script src="vendor/slickgrid-enhancement-pager/libs/jquery.json-2.3.min.js"></script>
-<script src="vendor/slickgrid-enhancement-pager/libs/jquery.dropkick-2.1.6.js"></script>
-<script src="vendor/slickgrid-enhancement-pager/slick.enhancementpager.js"></script>
-
-<script src="vendor/js-sha1/src/sha1.js"></script>
-<script src="js/grids.js"></script>

index.php

@@ -93,14 +93,12 @@
 
     <title>OpenVPN-Admin</title>
 
-    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
+    <link rel="stylesheet" href="/vendor/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
-    <link rel="stylesheet" href="css/index.css" type="text/css"/>
+    <link rel="stylesheet" href="/vendor/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" type="text/css" />
+    <link rel="stylesheet" href="/vendor/bootstrap-table/dist/bootstrap-table.min.css" type="text/css" />
+    <link rel="stylesheet" href="/vendor/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" type="text/css" />
+    <link rel="stylesheet" href="/css/index.css" type="text/css" />
 
-    <link rel="stylesheet" href="vendor/slickgrid/slick.grid.css" type="text/css" />
-    <link rel="stylesheet" href="vendor/slickgrid/slick-default-theme.css" type="text/css" />
-    <link rel="stylesheet" href="vendor/slickgrid/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
-    <link rel="stylesheet" href="vendor/slickgrid-enhancement-pager/libs/dropkick.css" type="text/css" />
-    <link rel="stylesheet" href="vendor/slickgrid-enhancement-pager/libs/enhancementpager.css" type="text/css" />
 
   </head>
   <body class='container-fluid'>

js/grids.js

@@ -1,365 +1,236 @@
 $(function () {
   "use strict";
 
+  // ------------------------- GLOBAL definitions -------------------------
+  var gridsUrl = '/include/grids.php';
+
+  function deleteFormatter() {
+    return "<span class='glyphicon glyphicon-remove action'></span";
+  }
+
+  function refreshTable($table) {
+    $table.bootstrapTable('refresh');
+  }
+
+  function onAjaxError (xhr, textStatus, error) {
+    console.error(error);
+    alert('Error: ' + textStatus);
+  }
+
+  // ------------------------- USERS definitions -------------------------
+  var $userTable = $('#table-users');
+  var $modalUserAdd = $('#modal-user-add');
+  var $userAddSave = $modalUserAdd.find('#modal-user-add-save');
+
+  function addUser(username, password) {
+    $.ajax({
+      url: gridsUrl,
+      method: 'POST',
+      data: {
+        add_user: true,
+        user_id: username,
+        user_pass: password
+      },
+      success: function() {
+        refreshTable($userTable);
+      },
+      error: onAjaxError
+    });
+  }
+
+  function deleteUser(user_id) {
+    $.ajax({
+      url: gridsUrl,
+      data: {
+        del_user: true,
+        del_user_id: user_id
+      },
+      method: 'POST',
+      success: function() {
+        refreshTable($userTable);
+      },
+      error: onAjaxError
+    });
+  }
+
+  var userEditable = {
+    url: gridsUrl,
+    params: function (params) {
+      params.set_user = true;
+
+      return params;
+    },
+    success: function () {
+      refreshTable($userTable);
+    }
+  }
+
+  // ES 2015 so be prudent
+  if (typeof Object.assign == 'function') {
+    var userDateEditable = Object.assign({ type: 'date', placement: 'bottom' }, userEditable);
+  } else {
+    console.warn('Your browser does not support Object.assign. You will not be able to modify the date inputs.');
+  }
+
+
+  // ------------------------- ADMIN definitions -------------------------
+  var $adminTable = $('#table-admins');
+  var $modalAdminAdd = $('#modal-admin-add');
+  var $adminAddSave = $modalAdminAdd.find('#modal-admin-add-save');
+
+  function addAdmin(username, password) {
+    $.ajax({
+      url: gridsUrl,
+      method: 'POST',
+      data: {
+        add_admin: true,
+        admin_id: username,
+        admin_pass: password
+      },
+      success: function() {
+        refreshTable($adminTable);
+      },
+      error: onAjaxError
+    });
+  }
+
+  function deleteAdmin(admin_id) {
+    $.ajax({
+      url: gridsUrl,
+      data: {
+        del_admin: true,
+        del_admin_id: admin_id
+      },
+      method: 'POST',
+      success: function() {
+        refreshTable($adminTable);
+      },
+      error: onAjaxError
+    });
+  }
+
+  var adminEditable = {
+    url: gridsUrl,
+    params: function (params) {
+      params.set_admin = true;
+
+      return params;
+    },
+    success: function () {
+      refreshTable($adminTable);
+    }
+  }
+
+  // ------------------------- ADMIN definitions -------------------------
+  var $logTable = $('#table-logs');
+
+
   // -------------------- USERS --------------------
-  $.ajax({
-    type: "POST",
-    url: "include/grids.php",
-    dataType: 'json',
-    data: "select=user",
-    success: function (json) {
-      // Button to format a cell and remove an user
-      function buttonFormatter(row, cell, value, columnDef, dataContext) {
-        var button = "<span class='glyphicon glyphicon-remove delete del_user' data-row='" + row + "' id='" + dataContext.user_id + "'></span>";
-        return button;
-      }
 
-      var i;
+  // Bootstrap table definition
-      var columns = [
+  $userTable.bootstrapTable({
-        { id: "user_id", name: "ID", field: "user_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    url: gridsUrl,
-        { id: "user_pass", name: "Pass", field: "user_pass", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    sortable: false,
-        { id: "user_mail", name: "Mail", field: "user_mail", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    queryParams: function (params) {
-        { id: "user_phone", name: "Phone", field: "user_phone", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+      params.select = 'user';
-        { id: "user_online", name: "Online", field: "user_online", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+      return params;
-        { id: "user_enable", name: "Enabled", field: "user_enable", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    },
-        { id: "user_start_date", name: "Start Date", field: "user_start_date", width: 120, cssClass: "cell-title", editor: Slick.Editors.Date },
+    // Primary key
-        { id: "user_end_date", name: "End Date", field: "user_end_date", width: 120, cssClass: "cell-title", editor: Slick.Editors.Date },
+    idField: 'user_id',
-        { id: "user_del", name: 'Delete', field: "user_del", width: 250, formatter: buttonFormatter }
+    columns: [
-      ];
+      { title: "ID", field: "user_id", editable: userEditable },
-
+      { title: "Pass", field: "user_pass", editable: userEditable },
-      // Grid options
+      { title: "Mail", field: "user_mail", editable: userEditable },
-      var options = {
+      { title: "Phone", field: "user_phone", editable: userEditable },
-        editable: true,
+      { title: "Online", field: "user_online" },
-        enableAddRow: true,
+      { title: "Enabled", field: "user_enable" },
-        enableCellNavigation: true,
+      { title: "Start Date", field: "user_start_date", editable: userDateEditable },
-        asyncEditorLoading: false,
+      { title: "End Date", field: "user_end_date", editable: userDateEditable },
-        autoEdit: false,
+      {
-        autoHeight: true
+        title: 'Delete',
-      };
+        field: "user_del",
-      
+        formatter: deleteFormatter,
-      var data = [];
+        events: {
-
+          'click .glyphicon': function (e, value, row) {
-      // Save the old user_id when the admin update an user
+            if (confirm('Are you sure you want to delete this user?')) {
-      var save = null;
+              deleteUser(row.user_id);
-
+            }
-      var grid = null;
-      
-      // Action when we want to remove an user
-      $('#user-grid').on('click', '.del_user', function () {
-
-        // Remove from the database
-        var me = $(this), id = me.attr('id');
-        var data = grid.getData();
-
-        $.ajax({
-          type: "POST",
-          url: "include/grids.php",
-          dataType: "json",
-          data: { del_user_id: id },
-          success: function() {
-            // Remove the line
-            data.splice(me.attr('data-row'), 1);
-            grid.setData(data);
-            grid.render();
-          },
-          error: function () {
-            alert("Error: cannot update the database.");
           }
-        });        
-      });
-
-
-      for (i = 0; i < json.length; i += 1) {
-        data[i] = {
-          user_id: json[i].user_id,
-          user_pass: json[i].user_pass,
-          user_mail: json[i].user_mail,
-          user_phone: json[i].user_phone,
-          user_online: json[i].user_online,
-          user_enable: json[i].user_enable,
-          user_start_date: json[i].user_start_date,
-          user_end_date: json[i].user_end_date
-        };
-      }
-
-      // Grid of the users
-      grid = new Slick.Grid($("#grid_user"), data, columns, options);
-
-      $("#grid_user").on('click', function () {
-        var $active = grid.getActiveCell();
-
-        if ($active && $active.cell === 0) {
-          save = $(grid.getActiveCellNode()).html();
-        } else {
-          save = null;
         }
-      });
+      }
+    ]
+  });
 
-      // When we want to modify an user
+  // When we want to add a user
-      grid.onCellChange.subscribe(function (e, args) {
+  $userAddSave.on('click', function () {
-        var item = args.item;
+    var $usernameInput = $modalUserAdd.find('input[name=username]');
-
+    var $passwordInput = $modalUserAdd.find('input[name=password]');
-        if (save)
+    addUser($usernameInput.val(), $passwordInput.val());
-          item.set_user = save;
+    $modalUserAdd.modal('hide');
-        else
-          item.set_user = item.user_id;
-
-        // Remove in the database
-        $.ajax({
-          type: "POST",
-          url: "include/grids.php",
-          dataType: "json",
-          data: item,
-          success: function () {
-            // If we edited the password, hash it
-            if(args.cell === 1) {
-              grid.invalidateRow(args.row);
-              data[args.row][grid.getColumns()[args.cell].field] = sha1(data[args.row][grid.getColumns()[args.cell].field]);
-              grid.render();  
-            }
-          },
-          error: function () {
-            alert("Error : cannot update the database.");
-          }
-        });
-
-        delete item.set_user;
-      });
-
-      // Add a new user
-      grid.onAddNewRow.subscribe(function (e, args) {
-        var item = args.item;
-
-        // We only can add a new user if we specify his id
-        if (!item.user_id)
-          return;
-          
-        item.add_user = true;
-
-        // Update the database
-        $.ajax({
-          type: "POST",
-          url: "include/grids.php",
-          dataType: "json",
-          data: item,
-          success: function(res) {
-            // Update the grid
-            grid.invalidateRow(data.length);
-            data.push(res);
-            grid.updateRowCount();
-            grid.render();
-          },
-          error: function () {
-            alert("Error : cannot update the database.");
-          }
-        });
-        
-        delete item.add_user;
-      });
-
-      grid.autosizeColumns();
-    },
-    error: function () {
-      alert('Error : cannot get the data.');
-    }
   });
 
 
-  // -------------------- ADMINISTRATORS --------------------
+  // -------------------- ADMINS --------------------
-  $.ajax({
-    type: "POST",
-    url: "include/grids.php",
-    dataType: 'json',
-    data: "select=admin",
-    success: function (json) {
-      // Create the button to remove an administrator
-      function buttonFormatter(row, cell, value, columnDef, dataContext) {  
-        var button = "<span class='glyphicon glyphicon-remove delete del_admin' data-row='" + row + "' id='" + dataContext.admin_id + "'></span>";
-        return button;
-      }
 
-      var i;
+  // Bootstrap table definition
-
+  $adminTable.bootstrapTable({
-      // Header
+    url: gridsUrl,
-      var columns = [
+    sortable: false,
-        { id: "admin_id", name: "Admin ID", field: "admin_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    queryParams: function (params) {
-        { id: "admin_pass", name: "Admin Pass", field: "admin_pass", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+      params.select = 'admin';
-        { id: "admin_del", name: 'Delete', field: "admin_del", width: 250, formatter: buttonFormatter }
+      return params;
-      ];
-
-      // Grid options
-      var  options = {
-        editable: true,
-        enableAddRow: true,
-        enableCellNavigation: true,
-        asyncEditorLoading: false,
-        autoEdit: false,
-        autoHeight: true
-      };
-
-      var data = [];
-      var grid = null;
-
-      // Save the old admin id when we update one
-      var save = null;
-
-      // When we want to remove an administrator
-      $('#admin-grid').on('click', '.del_admin', function () {
-        var me = $(this);
-        var id = me.attr('id');
-        var data = grid.getData();
-        
-        // Update the database
-        $.ajax({
-          type: "POST",
-          url: "include/grids.php",
-          dataType: "json",
-          data: { del_admin_id: id },
-          success: function() {
-            // Update the grid
-            data.splice(me.attr('data-row'), 1);
-            grid.setData(data);
-            grid.render();
-          },
-          error: function () {
-            alert("Error : cannot update the database.");
-          }
-        });
-      });
-
-
-      for (i = 0; i < json.length; i += 1) {
-        data[i] = {
-          admin_id: json[i].admin_id,
-          admin_pass: json[i].admin_pass
-        };
-      }
-
-      grid = new Slick.Grid($("#grid_admin"), data, columns, options);
-
-      $("#grid_admin").on('click', function () {
-        var $active = grid.getActiveCell();
-
-        if ($active !== undefined && $active.cell === 0)
-          save = $(grid.getActiveCellNode()).html();
-        else
-          save = null;
-      });
-
-      // When we update the administrator
-      grid.onCellChange.subscribe(function (e, args) {
-        var item = args.item;
-
-        // We save the old admin id
-        if (save)
-          item.set_admin = save;
-        else
-          item.set_admin = item.admin_id;
-
-        // Update the database
-        $.ajax({
-          type: "POST",
-          url: "include/grids.php",
-          dataType: "json",
-          data: item,
-          success: function() {
-            // Hash the password
-            if(args.cell === 1) {
-              grid.invalidateRow(args.row);
-              data[args.row][grid.getColumns()[args.cell].field] = sha1(data[args.row][grid.getColumns()[args.cell].field]);
-              grid.render();  
-            }
-          },
-          error: function () {
-            alert("Error : cannot update the database");
-          }
-        });
-
-        delete item.set_admin;
-      });
-
-      // When we want to add a new administrator
-      grid.onAddNewRow.subscribe(function (e, args) {
-        var item = args.item;
-
-        // We only add an administrator if we specify the ID
-        if (!item.admin_id)
-          return;
-
-        item.add_admin = true;
-
-        // Update the database
-        $.ajax({
-          type: "POST",
-          url: "include/grids.php",
-          dataType: "json",
-          data: item,
-          success: function() {
-            // Update the grid
-            grid.invalidateRow(data.length);
-            data.push(item);
-            grid.updateRowCount();
-            grid.render();
-          },
-          error: function () {
-            alert("Error : cannot update the database.");
-          }
-        });
-
-        delete item.add_admin;
-
-        
-      });
-
-      grid.autosizeColumns();
     },
-    error: function () {
+    // Primary key
-      alert('Erreur dans la récupération des données...');
+    idField: 'admin_id',
-    }
+    columns: [
+      { title: "ID", field: "admin_id", editable: adminEditable },
+      { title: "Pass", field: "admin_pass", editable: adminEditable },
+      {
+        title: 'Delete',
+        field: "admin_del",
+        formatter: deleteFormatter,
+        events: {
+          'click .glyphicon': function (e, value, row) {
+            if (confirm('Are you sure you want to delete this admin?')) {
+              deleteAdmin(row.admin_id);
+            }
+          }
+        }
+      }
+    ]
   });
-  
+
-  
+  // When we want to add a user
-  
+  $adminAddSave.on('click', function () {
+    var $usernameInput = $modalAdminAdd.find('input[name=username]');
+    var $passwordInput = $modalAdminAdd.find('input[name=password]');
+    addAdmin($usernameInput.val(), $passwordInput.val());
+    $modalAdminAdd.modal('hide');
+  });
+
   // -------------------- LOGS --------------------
-  var i;
 
-  // Headers
+  // Bootstrap table definition
-  var columns = [
+  $logTable.bootstrapTable({
-    { id: "log_id", name: "Log ID", field: "log_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    url: gridsUrl,
-    { id: "user_id", name: "User ID", field: "user_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    sortable: false,
-    { id: "log_trusted_ip", name: "Trusted IP", field: "log_trusted_ip", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    sidePagination: 'server',
-    { id: "log_trusted_port", name: "Trusted Port", field: "log_trusted_port", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    pagination: true,
-    { id: "log_remote_ip", name: "Remote IP", field: "log_remote_ip", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    queryParams: function (params) {
-    { id: "log_remote_port", name: "Remote Port", field: "log_remote_port", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+      params.select = 'log';
-    { id: "log_start_time", name: "Start Time", field: "log_start_time", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+      return params;
-    { id: "log_end_time", name: "End Time", field: "log_end_time", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    },
-    { id: "log_received", name: "Receveid", field: "log_received", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
+    columns: [
-    { id: "log_send", name: "Sent", field: "log_send", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text }
+      { title: "Log ID", field: "log_id" },
-  ];
+      { title: "User ID", field: "user_id" },
-
+      { title: "Trusted IP", field: "log_trusted_ip" },
-  // Grid options
+      { title: "Trusted Port", field: "log_trusted_port" },
-  var options = {
+      { title: "Remote IP", field: "log_remote_ip" },
-    editable: false,
+      { title: "Remote Port", field: "log_remote_port" },
-    enableAddRow: false,
+      { title: "Start Time", field: "log_start_time" },
-    enableCellNavigation: true,
+      { title: "End Time", field: "log_end_time" },
-    asyncEditorLoading: false,
+      { title: "Receveid", field: "log_received" },
-    autoEdit: false,
+      { title: "Sent", field: "log_send" }
-    autoHeight: true
+    ]
-  };
-  
-  var data = [];
-  
-  // Creation of the grid
-  var grid = new Slick.Grid($("#grid_log"), data, columns, options);
-  
-  var pager = new Slick.Controls.EnhancementPager({
-    container: $("#pager"),
-    remoteUrl: "include/grids.php",
-    params: { select: "log" },
-    datagrid: grid,
-    pagerType: ""
   });
-
-  grid.autosizeColumns();
-  
 });

update.sh

@@ -6,7 +6,7 @@ print_help () {
 }
 
 # Ensure to be root
-if [ "$EUID" -ne 0 ]; then 
+if [ "$EUID" -ne 0 ]; then
   echo "Please run as root"
   exit
 fi
@@ -30,12 +30,12 @@ user=$(ls -l "$www/include/config.php" | awk '{ print $3 }')
 group=$(ls -l "$www/include/config.php" | awk '{ print $4 }')
 
 
-rm -r "${www:?}/"{index.php,bower.json,.bowerrc,js,include/html,include/connect.php,include/functions.php,include/grids.php,css}
+rm -r "${www:?}/"{index.php,bower.json,.bowerrc,js,include/html,include/connect.php,include/functions.php,include/grids.php,css,vendor}
 
 cp -r "$base_path/"{index.php,bower.json,.bowerrc,js,css} "$www"
 cp -r "$base_path/include/"{html,connect.php,functions.php,grids.php} "$www/include"
 
-cd "$www"
+cd "$www" || exit
 
 bower --allow-root install
 chown -R "$user:$group" "$www"