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

datepicker...
This commit is contained in:
Chocobozzz 2016-08-25 11:59:49 +02:00
parent a2e20d9c2c
commit 9848026575
8 changed files with 409 additions and 636 deletions

View File

@ -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",
@ -18,4 +19,4 @@
],
"license": "GPLv3",
"private": true
}
}

View File

@ -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);
.btn .glyphicon {
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;
}

View File

@ -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);
}
?>
?>

View File

@ -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()) {
do {
if($data = $req->fetch()) {
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_end_date" => dateFromSql($data['user_end_date']));
} while($data = $req->fetch());
echo json_encode($list);
"user_start_date" => $data['user_start_date'],
"user_end_date" => $data['user_end_date']);
} while($data = $req->fetch());
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'])) {
$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();
$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_end_time" => $end_time,
"log_start_time" => $data['log_start_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()) {
do{
if($data = $req->fetch()) {
do{
$list[] = array(
"admin_id" => $data['admin_id'],
"admin_pass" => $data['admin_pass']
);
} while($data = $req->fetch());
echo json_encode($list);
} while($data = $req->fetch());
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_end_date" => dateFromSql($end)
"user_start_date" => $start,
"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();
// Only update what was modified
foreach($_POST as $key => $value){
if(in_array($key, $valid)){
array_push($set_field, $key . "=?");
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);
}
$field = $_POST['name'];
$value = $_POST['value'];
$pk = $_POST['pk'];
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']) : "";
$req = $bdd->prepare('UPDATE admin SET admin_id = ?, admin_pass = ? WHERE admin_id = ?');
$req->execute(array($_POST['admin_id'], $mdp, $_POST['set_admin']));
$valid = array("admin_id", "admin_pass");
$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']));
}

View File

@ -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">&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">
<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">&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/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>

View File

@ -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'>

View File

@ -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();
});

View File

@ -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"