Update tables : use bootstrap tables, x-editable, bootstrap
datepicker...
This commit is contained in:
Chocobozzz
parent
a2e20d9c2c
commit
9848026575
@ -3,10 +3,11 @@
|
||||
"version": "0.0.1",
|
||||
"description": "Setup and administration of openvpn with a web interface",
|
||||
"dependencies": {
|
||||
"bootstrap": "^3.3.5",
|
||||
"slickgrid": "git://github.com/mleibman/SlickGrid.git#master",
|
||||
"js-sha1": "^0.3.0",
|
||||
"slickgrid-enhancement-pager": "git://github.com/Chocobozzz/SlickGridEnhancementPager#master"
|
||||
"bootstrap": "^3.3.7",
|
||||
"bootstrap-table": "^1.11.0",
|
||||
"jquery": "^2.2.4",
|
||||
"x-editable": "^1.5.1",
|
||||
"bootstrap-datepicker": "^1.6.4"
|
||||
},
|
||||
"keywords": [
|
||||
"openvpn",
|
||||
|
||||
139
css/index.css
139
css/index.css
@ -1,144 +1,15 @@
|
||||
body {
|
||||
margin: auto;
|
||||
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;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
a.glyphicon {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.delete {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#header_admin {
|
||||
margin : 10px;
|
||||
.action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.block-grid {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*.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;
|
||||
.btn .glyphicon {
|
||||
top: 2px;
|
||||
}
|
||||
@ -1,13 +1,5 @@
|
||||
<?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>';
|
||||
}
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
|
||||
|
||||
// ---------------- 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();
|
||||
|
||||
@ -24,8 +24,8 @@
|
||||
"user_phone" => $data['user_phone'],
|
||||
"user_online" => $data['user_online'],
|
||||
"user_enable" => $data['user_enable'],
|
||||
"user_start_date" => dateFromSql($data['user_start_date']),
|
||||
"user_end_date" => dateFromSql($data['user_end_date']));
|
||||
"user_start_date" => $data['user_start_date'],
|
||||
"user_end_date" => $data['user_end_date']);
|
||||
} while($data = $req->fetch());
|
||||
|
||||
echo json_encode($list);
|
||||
@ -38,20 +38,16 @@
|
||||
}
|
||||
|
||||
// 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'])) {
|
||||
$actual_page = ($_POST['pageIndex']-1) * $_POST['pageSize'];
|
||||
$max_page = $_POST['pageSize'];
|
||||
$page = "LIMIT $actual_page, $max_page";
|
||||
}
|
||||
else {
|
||||
$page = "";
|
||||
}
|
||||
$page = "LIMIT $offset, $limit";
|
||||
|
||||
// Select the logs
|
||||
$string_requete = "SELECT *, (SELECT COUNT(*) FROM log) AS nb FROM log ORDER BY log_id DESC $page";
|
||||
$req = $bdd->prepare($string_requete);
|
||||
$req_string = "SELECT *, (SELECT COUNT(*) FROM log) AS nb FROM log ORDER BY log_id DESC $page";
|
||||
$req = $bdd->prepare($req_string);
|
||||
$req->execute();
|
||||
|
||||
$list = array();
|
||||
@ -65,10 +61,6 @@
|
||||
// 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(
|
||||
@ -78,8 +70,8 @@
|
||||
"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_end_time" => $end_time,
|
||||
"log_start_time" => $data['log_start_time'],
|
||||
"log_end_time" => $data['log_end_time'],
|
||||
"log_received" => $received,
|
||||
"log_send" => $sent));
|
||||
|
||||
@ -91,13 +83,13 @@
|
||||
}
|
||||
|
||||
// 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();
|
||||
|
||||
@ -119,10 +111,10 @@
|
||||
}
|
||||
|
||||
// ---------------- 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;
|
||||
@ -140,8 +132,8 @@
|
||||
"user_phone" => $phone,
|
||||
"user_online" => $online,
|
||||
"user_enable" => $enable,
|
||||
"user_start_date" => dateFromSql($start),
|
||||
"user_end_date" => dateFromSql($end)
|
||||
"user_start_date" => $start,
|
||||
"user_end_date" => $end
|
||||
);
|
||||
|
||||
echo json_encode($res);
|
||||
@ -150,54 +142,60 @@
|
||||
// ---------------- 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();
|
||||
|
||||
// Only update what was modified
|
||||
foreach($_POST as $key => $value){
|
||||
if(in_array($key, $valid)){
|
||||
array_push($set_field, $key . "=?");
|
||||
$field = $_POST['name'];
|
||||
$value = $_POST['value'];
|
||||
$pk = $_POST['pk'];
|
||||
|
||||
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);
|
||||
}
|
||||
if (!isset($field) || !isset($pk) || !in_array($field, $valid)) {
|
||||
return;
|
||||
}
|
||||
// Build the request
|
||||
array_push($set_value, $_POST['set_user']);
|
||||
|
||||
$req_string = 'UPDATE user SET ' . implode(',', $set_field) . ' WHERE user_id = ?';
|
||||
if ($field === 'user_pass') {
|
||||
$value = hashPass($value);
|
||||
}
|
||||
|
||||
// /!\ 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 = ?');
|
||||
$req->execute(array($_POST['admin_id'], $mdp, $_POST['set_admin']));
|
||||
$field = $_POST['name'];
|
||||
$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']));
|
||||
}
|
||||
|
||||
@ -1,41 +1,83 @@
|
||||
<!-- Users grid -->
|
||||
<div class="block-grid row" id="user-grid">
|
||||
<div class="grid-header">
|
||||
<label>OpenVPN Users</label>
|
||||
<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">×</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">
|
||||
<label>OpenVPN Logs</label>
|
||||
</div>
|
||||
<div class="grid" id="grid_log"></div>
|
||||
<div id="pager" class="slick-enhancement-pager"></div>
|
||||
<h4>
|
||||
OpenVPN logs
|
||||
</h4>
|
||||
<table id="table-logs" class="table"></table>
|
||||
</div>
|
||||
|
||||
<!-- Admins grid -->
|
||||
<div class="block-grid row" id="admin-grid">
|
||||
<div class="grid-header">
|
||||
<label>Web Admins</label>
|
||||
<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">×</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/slickgrid/lib/jquery-ui-1.8.16.custom.min.js"></script>
|
||||
<script src="vendor/slickgrid/lib/jquery.event.drag-2.2.js"></script>
|
||||
<script src="vendor/slickgrid/slick.core.js"></script>
|
||||
|
||||
|
||||
<script src="vendor/slickgrid/slick.formatters.js"></script>
|
||||
<script src="vendor/slickgrid/slick.editors.js"></script>
|
||||
<script src="vendor/slickgrid/slick.grid.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>
|
||||
<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/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/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
|
||||
<script src="/vendor/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
|
||||
<script src="/js/grids.js"></script>
|
||||
|
||||
12
index.php
12
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="css/index.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="/vendor/bootstrap/dist/css/bootstrap.min.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'>
|
||||
|
||||
561
js/grids.js
561
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;
|
||||
var columns = [
|
||||
{ id: "user_id", name: "ID", field: "user_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "user_pass", name: "Pass", field: "user_pass", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "user_mail", name: "Mail", field: "user_mail", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "user_phone", name: "Phone", field: "user_phone", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "user_online", name: "Online", field: "user_online", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ 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 },
|
||||
{ id: "user_end_date", name: "End Date", field: "user_end_date", width: 120, cssClass: "cell-title", editor: Slick.Editors.Date },
|
||||
{ id: "user_del", name: 'Delete', field: "user_del", width: 250, formatter: buttonFormatter }
|
||||
];
|
||||
|
||||
// Grid options
|
||||
var options = {
|
||||
editable: true,
|
||||
enableAddRow: true,
|
||||
enableCellNavigation: true,
|
||||
asyncEditorLoading: false,
|
||||
autoEdit: false,
|
||||
autoHeight: true
|
||||
};
|
||||
|
||||
var data = [];
|
||||
|
||||
// Save the old user_id when the admin update an user
|
||||
var save = null;
|
||||
|
||||
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.");
|
||||
// Bootstrap table definition
|
||||
$userTable.bootstrapTable({
|
||||
url: gridsUrl,
|
||||
sortable: false,
|
||||
queryParams: function (params) {
|
||||
params.select = 'user';
|
||||
return params;
|
||||
},
|
||||
// Primary key
|
||||
idField: 'user_id',
|
||||
columns: [
|
||||
{ title: "ID", field: "user_id", editable: userEditable },
|
||||
{ title: "Pass", field: "user_pass", editable: userEditable },
|
||||
{ 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: "Start Date", field: "user_start_date", editable: userDateEditable },
|
||||
{ title: "End Date", field: "user_end_date", editable: userDateEditable },
|
||||
{
|
||||
title: 'Delete',
|
||||
field: "user_del",
|
||||
formatter: deleteFormatter,
|
||||
events: {
|
||||
'click .glyphicon': function (e, value, row) {
|
||||
if (confirm('Are you sure you want to delete this user?')) {
|
||||
deleteUser(row.user_id);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
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
|
||||
grid.onCellChange.subscribe(function (e, args) {
|
||||
var item = args.item;
|
||||
|
||||
if (save)
|
||||
item.set_user = save;
|
||||
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.');
|
||||
}
|
||||
// When we want to add a user
|
||||
$userAddSave.on('click', function () {
|
||||
var $usernameInput = $modalUserAdd.find('input[name=username]');
|
||||
var $passwordInput = $modalUserAdd.find('input[name=password]');
|
||||
addUser($usernameInput.val(), $passwordInput.val());
|
||||
$modalUserAdd.modal('hide');
|
||||
});
|
||||
|
||||
|
||||
// -------------------- ADMINISTRATORS --------------------
|
||||
$.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;
|
||||
}
|
||||
// -------------------- ADMINS --------------------
|
||||
|
||||
var i;
|
||||
|
||||
// Header
|
||||
var columns = [
|
||||
{ id: "admin_id", name: "Admin ID", field: "admin_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "admin_pass", name: "Admin Pass", field: "admin_pass", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "admin_del", name: 'Delete', field: "admin_del", width: 250, formatter: buttonFormatter }
|
||||
];
|
||||
|
||||
// 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();
|
||||
// Bootstrap table definition
|
||||
$adminTable.bootstrapTable({
|
||||
url: gridsUrl,
|
||||
sortable: false,
|
||||
queryParams: function (params) {
|
||||
params.select = 'admin';
|
||||
return params;
|
||||
},
|
||||
error: function () {
|
||||
alert('Erreur dans la récupération des données...');
|
||||
}
|
||||
// Primary key
|
||||
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
|
||||
var columns = [
|
||||
{ id: "log_id", name: "Log ID", field: "log_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "user_id", name: "User ID", field: "user_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "log_trusted_ip", name: "Trusted IP", field: "log_trusted_ip", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "log_trusted_port", name: "Trusted Port", field: "log_trusted_port", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "log_remote_ip", name: "Remote IP", field: "log_remote_ip", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "log_remote_port", name: "Remote Port", field: "log_remote_port", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ id: "log_start_time", name: "Start Time", field: "log_start_time", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
|
||||
{ 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 },
|
||||
{ id: "log_send", name: "Sent", field: "log_send", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text }
|
||||
];
|
||||
|
||||
// Grid options
|
||||
var options = {
|
||||
editable: false,
|
||||
enableAddRow: false,
|
||||
enableCellNavigation: true,
|
||||
asyncEditorLoading: false,
|
||||
autoEdit: false,
|
||||
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: ""
|
||||
// Bootstrap table definition
|
||||
$logTable.bootstrapTable({
|
||||
url: gridsUrl,
|
||||
sortable: false,
|
||||
sidePagination: 'server',
|
||||
pagination: true,
|
||||
queryParams: function (params) {
|
||||
params.select = 'log';
|
||||
return params;
|
||||
},
|
||||
columns: [
|
||||
{ title: "Log ID", field: "log_id" },
|
||||
{ title: "User ID", field: "user_id" },
|
||||
{ title: "Trusted IP", field: "log_trusted_ip" },
|
||||
{ title: "Trusted Port", field: "log_trusted_port" },
|
||||
{ title: "Remote IP", field: "log_remote_ip" },
|
||||
{ title: "Remote Port", field: "log_remote_port" },
|
||||
{ title: "Start Time", field: "log_start_time" },
|
||||
{ title: "End Time", field: "log_end_time" },
|
||||
{ title: "Receveid", field: "log_received" },
|
||||
{ title: "Sent", field: "log_send" }
|
||||
]
|
||||
});
|
||||
|
||||
grid.autosizeColumns();
|
||||
|
||||
});
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user