diff --git a/ajax.php b/ajax.php index 935aa62..bef21b5 100644 --- a/ajax.php +++ b/ajax.php @@ -16,6 +16,7 @@ // Selection des données if(isset($_POST['select'])){ + // User pouvant se connecter au VPN if($_POST['select'] == "user"){ $req = $bdd->prepare('SELECT * FROM user'); @@ -42,37 +43,54 @@ } // Log du VPN else if($_POST['select'] == "log"){ - $req = $bdd->prepare('SELECT * FROM log'); + // Création du LIMIT de la requête SQL en fonction de la page + if(isset($_POST['pageIndex'], $_POST['pageSize'])) { + $page_actuelle = ($_POST['pageIndex']-1) * $_POST['pageSize']; + $page_max = $_POST['pageSize']; + $page = " LIMIT " . $page_actuelle . ", " . $page_max; + } + else { + $page = ""; + } + + // Sélection des logs + $string_requete = 'SELECT * FROM log ORDER BY log_id DESC' . $page; + $req = $bdd->prepare($string_requete); $req->execute(); - if($data = $req->fetch()) { - do{ - // C'est mieux exprimé en Mo ou Ko - $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]; - - $list[] = array("log_id" => $data['log_id'], - "user_id" => $data['user_id'], - "log_trusted_ip" => $data['log_trusted_ip'], - "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_received" => $received, - "log_send" => $sent); - } while($data = $req->fetch()); + $list = array(); + + while($data = $req->fetch()) { + // C'est mieux exprimé en Mo ou Ko + $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]; - echo json_encode($list); - } - else{ - $list = array(); - echo json_encode($list); + // On ajoute à notre tableau la nouvelle ligne de log + array_push($list, array("log_id" => $data['log_id'], + "user_id" => $data['user_id'], + "log_trusted_ip" => $data['log_trusted_ip'], + "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_received" => $received, + "log_send" => $sent)); } + + // Récupération du nombre lignes de log + $req_nb = $bdd->prepare('SELECT COUNT(*) AS nb FROM log'); + $req_nb->execute(); + $data_nb = $req_nb->fetch()['nb']; + + // On affiche la réponse JSON + $result = array('Total' => $data_nb, 'Rows' => json_encode($list)); + + echo json_encode($result); } // Affichage des personnes pouvant se connecter à l'interface d'administration else if($_POST['select'] == "admin"){ diff --git a/css/dropkick.css b/css/dropkick.css new file mode 100644 index 0000000..8f33fa1 --- /dev/null +++ b/css/dropkick.css @@ -0,0 +1,201 @@ +/** + * Default DropKick theme + * + * Feel free to edit the default theme + * or even add your own. + * + * See the readme for themeing help + * + */ + +/***** Begin Theme, feel free to edit in here! ******/ + +/* One container to bind them... */ +.dk_container { + background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5)); + background: -moz-linear-gradient(top, #fff, #f5f5f5); + background: -o-linear-gradient(top, #fff, #f5f5f5); + background-color: #f5f5f5; + font-family: 'Helvetica', Arial, sans-serif; + font-size: 12px; + font-weight: bold; + line-height: 14px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; +} + .dk_container:focus { + outline: 0; + } + .dk_container a { + cursor: pointer; + text-decoration: none; + } + +/* Opens the dropdown and holds the menu label */ +.dk_toggle { + /** + * Help: Arrow image not appearing + * Try updating this property to your correct dk_arrows.png path + */ + background-image: url('../images/dk_arrows.png'); + background-repeat: no-repeat; + background-position: 90% center; + border: 1px solid #ccc; + color: #333; + margin-top: 2px; + margin-left: 2px; + padding: 4px 2px 2px 4px; + text-shadow: #fff 1px 1px 0; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -webkit-transition: border-color .5s; + -moz-transition: border-color .5s; + -o-transition: border-color .5s; + transition: border-color .5s; +} + .dk_toggle:hover { + border-color: #8c8c8c; + } + /* Applied when the dropdown is focused */ + .dk_focus .dk_toggle { + border-color: #40b5e2; + } + .dk_focus .dk_toggle { + box-shadow: 0 0 5px #40b5e2; + -moz-box-shadow: 0 0 5px #40b5e2; + -webkit-box-shadow: 0 0 5px #40b5e2; + } + +/* Applied whenever the dropdown is open */ +.dk_open { + box-shadow: 0 0 5px #40b5e2; + -moz-box-shadow: 0 0 5px #40b5e2; + -webkit-box-shadow: 0 0 5px #40b5e2; + /** + * Help: Dropdown menu is covered by something + * Try setting this value higher + */ + z-index: 10; +} + .dk_open .dk_toggle { + background-color: #ececec; + border-color: #8c8c8c; + color: #ccc; + box-shadow: inset 0 -2px 5px #ccc; + border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + -webkit-border-radius: 5px 5px 0 0; + } + +/* The outer container of the options */ +.dk_options { + box-shadow: rgba(0, 0, 0, .2) 0 2px 8px; + -moz-box-shadow: rgba(0, 0, 0, .2) 0 2px 8px; + -webkit-box-shadow: rgba(0, 0, 0, .2) 0 2px 8px; + border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + -webkit-border-radius: 0 0 5px 5px; +} + .dk_options a { + background-color: #fff; + border-bottom: 1px solid #999; + font-weight: bold; + padding: 8px 10px; + } + .dk_options li:last-child a { + border-bottom: none; + } + .dk_options a:hover, + .dk_option_current a { + background-color: #0084c7; + border-bottom-color: #004c72; + color: #fff; + text-decoration: none; + text-shadow: rgba(0, 0, 0, .5) 0 1px 0; + } + +/* Inner container for options, this is what makes the scrollbar possible. */ +.dk_options_inner { + border: 1px solid #8c8c8e; + border-bottom-width: 2px; + border-bottom-color: #999; + color: #333; + max-height: 250px; + text-shadow: #fff 0 1px 0; + border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + -webkit-border-radius: 0 0 5px 5px; +} + +/* Set a max-height on the options inner */ +.dk_options_inner, +.dk_touch .dk_options { + max-height: 250px; +} + +/****** End Theme ******/ + +/***** Critical to the continued enjoyment of working dropdowns ******/ + +.dk_container { + display: none; + float: left; + position: relative; +} + .dk_container a { + outline: 0; + } + +.dk_toggle { + display: -moz-inline-stack; + display: inline-block; + *display: inline; + position: relative; + zoom: 1; +} + +.dk_open { + position: relative; +} + .dk_open .dk_options { + display: block; + } + .dk_open .dk_label { + color: inherit; + } + +.dk_options { + display: none; + margin-top: -1px; + position: absolute; + right: 0; + width: 100%; +} + .dk_options a, + .dk_options a:link, + .dk_options a:visited { + display: block; + } + .dk_options_inner { + overflow: auto; + position: relative; + } + +.dk_touch .dk_options { + overflow: hidden; +} + +.dk_touch .dk_options_inner { + max-height: none; + overflow: visible; +} + +.dk_fouc select { + position: relative; + top: -99999em; + visibility: hidden; +} + +/***** End Critical to the continued enjoyment of working dropdowns ******/ diff --git a/css/enhancementpager.css b/css/enhancementpager.css new file mode 100644 index 0000000..83d5704 --- /dev/null +++ b/css/enhancementpager.css @@ -0,0 +1,124 @@ +.slick-enhancement-pager { + width: 100%; + height: 26px; + border: 1px solid gray; + border-top: 0; + background: url('../images/header-columns-bg.gif') repeat-x center bottom; + vertical-align: middle; + position: relative; +} + +.button-base-class { + display: inline-block; + border: #CCC solid 1px; + margin: 4px; + width:16px; + height:16px; + cursor: pointer; + vertical-align: middle; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; +} + +.resultset_first{ + background: url('../images/resultset_first.png') no-repeat; +} + +.resultset_first:hover{ + background: #CEF url('../images/resultset_first.png') no-repeat; +} + +.resultset_prev{ + background: url('../images/resultset_previous.png') no-repeat; +} + +.resultset_prev:hover{ + background: #CEF url('../images/resultset_previous.png') no-repeat; +} + +.resultset_next{ + background: url('../images/resultset_next.png') no-repeat; +} + +.resultset_next:hover{ + background: #CEF url('../images/resultset_next.png') no-repeat; +} + +.resultset_last{ + background: url('../images/resultset_last.png') no-repeat; +} + +.resultset_last:hover{ + background: #CEF url('../images/resultset_last.png') no-repeat; +} + +.spacer{ + width: 1px; + margin: 4px; + display: inline-block; + background: url('../images/spacer.png') no-repeat; +} + +.refresh{ + background: url('../images/arrow_refresh.png') no-repeat; +} + +.refresh:hover{ + background: #CEF url('../images/arrow_refresh.png') no-repeat; +} + +.dataloading{ + display: inline-block; + margin: 4px; + background: url('../images/ajax-loader.gif') no-repeat; + width:16px; + height:16px; + cursor: pointer; + vertical-align: middle; +} + +.pageplus{ + background: url('../images/pageplus.png') no-repeat; +} + +.pageplus:hover{ + background: #CEF url('../images/pageplus.png') no-repeat; +} + +.pageminus{ + background: url('../images/pageminus.png') no-repeat; +} + +.pageminus:hover{ + background: #CEF url('../images/pageminus.png') no-repeat; +} + +.currentrecords{ + position:absolute;right:0px; + background: url('../images/lightbulb.png') no-repeat; +} + +.currentrecords:hover{ + position:absolute;right:0px; + background: #CEF url('../images/lightbulb.png') no-repeat; +} + +.pagerslider{ + display:inline-block; + width:80px; + margin:4px 9px 4px 4px; + vertical-align: middle; +} + +.recordsperpage{ + display:inline-block; + vertical-align: middle; + width:80px; +} + +.recordstate{ + position:absolute; + top:6px; + right:26px; +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index 075b744..cb22006 100644 --- a/css/index.css +++ b/css/index.css @@ -28,13 +28,17 @@ li { margin: 0; } -.grid { +.grid:not(#grid_log) { background: white; outline: 0; border: 1px solid gray; margin-bottom: 20px; } +#pagination { + margin-bottom: 20px; +} + .grid-header { border: 1px solid gray; border-bottom: 0; diff --git a/index.php b/index.php index 8646cee..204e90d 100644 --- a/index.php +++ b/index.php @@ -29,9 +29,11 @@ - - - + + + + + @@ -74,7 +76,8 @@
-
+
+
@@ -94,6 +97,11 @@ + + + + + lists + * https://github.com/JamieLottering/DropKick + * + * © 2011 Jamie Lottering + * + * + */ +(function ($, window, document) { + + var ie6 = false; + + // Help prevent flashes of unstyled content + if ($.browser.msie && $.browser.version.substr(0, 1) < 7) { + ie6 = true; + } else { + document.documentElement.className = document.documentElement.className + ' dk_fouc'; + } + + var + // Public methods exposed to $.fn.dropkick() + methods = {}, + + // Cache every element + $select = $(this), + + // Store a reference to the originally selected