| @@ -8,26 +8,37 @@ | |||||
| </head> | </head> | ||||
| <body> | <body> | ||||
| <?php foreach (array_reverse ($log_data) as $record): ?> | |||||
| <div class="mb-4"> | |||||
| <div> | |||||
| <?= $record['date_time'] ?> | |||||
| </div> | |||||
| <div class="container container-max-width mt-5"> | |||||
| <?php require 'pagination.cmp.php' ?> | |||||
| <div> | <div> | ||||
| <img src="<?= $record['chat_icon'] ?>" /> | |||||
| <?= $record['chat_name'] ?> | |||||
| </div> | |||||
| <?php foreach (array_slice ($log_data, | |||||
| ($page - 1) * $length, | |||||
| $length, | |||||
| true) as $record): ?> | |||||
| <div class="mb-4"> | |||||
| <div> | |||||
| <?= $record['date_time'] ?> | |||||
| </div> | |||||
| <div style="color: blue"> | |||||
| > <span style="font-style: italic"><?= $record['chat_message'] ?></span> | |||||
| </div> | |||||
| <div> | |||||
| <img src="<?= $record['chat_icon'] ?>" /> | |||||
| <?= $record['chat_name'] ?> | |||||
| </div> | |||||
| <div> | |||||
| <?= $record['answer'] ?> | |||||
| <div style="color: blue"> | |||||
| > <span style="font-style: italic"><?= $record['chat_message'] ?></span> | |||||
| </div> | |||||
| <div> | |||||
| <?= $record['answer'] ?> | |||||
| </div> | |||||
| </div> | |||||
| <?php endforeach ?> | |||||
| </div> | </div> | ||||
| <?php require 'pagination.cmp.php' ?> | |||||
| </div> | </div> | ||||
| <?php endforeach ?> | |||||
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> | ||||
| </body> | </body> | ||||
| @@ -4,6 +4,10 @@ const LOG_PATH = './log.txt'; | |||||
| $log_data = []; | $log_data = []; | ||||
| $page = (int) ($_GET['p'] ?? 1); | |||||
| $length = (int) ($_GET['max'] ?? 20); | |||||
| $asc = ($_GET['asc'] ?? 0) != 0; | |||||
| $f = fopen (LOG_PATH, 'r'); | $f = fopen (LOG_PATH, 'r'); | ||||
| if ($f !== false) | if ($f !== false) | ||||
| @@ -25,5 +29,10 @@ fclose ($f); | |||||
| unset ($f); | unset ($f); | ||||
| $pages_max = (int) (count ($log_data) / $length); | |||||
| if (!($asc)) | |||||
| $log_data = array_reverse ($log_data); | |||||
| require_once './index.frm.php'; | require_once './index.frm.php'; | ||||
| @@ -0,0 +1,42 @@ | |||||
| <div class="my-3"> | |||||
| <nav class="d-flex justify-content-center" aria-label="..."> | |||||
| <ul class="pagination"> | |||||
| <?php if ($page > 1): ?> | |||||
| <li class="page-item"> | |||||
| <a class="page-link" href="?p=1">|<</a> | |||||
| </li> | |||||
| <?php else: ?> | |||||
| <li class="page-item disabled"> | |||||
| <span class="page-link">|<</span> | |||||
| </li> | |||||
| <?php endif ?> | |||||
| <?php for ($i = max (min ($page + 5, $pages_max) - 10, 1); $i < $page; ++$i): ?> | |||||
| <li class="page-item"> | |||||
| <a class="page-link" href="?p=<?= $i ?>"> <?= $i ?></a> | |||||
| </li> | |||||
| <?php endfor ?> | |||||
| <li class="page-item active" aria-current="page"> | |||||
| <span class="page-link"><?= $page ?></span> | |||||
| </li> | |||||
| <?php for ($i = $page + 1; $i <= min (max ($page - 5, 1) + 10, $pages_max); ++$i): ?> | |||||
| <li class="pages-item"> | |||||
| <a class="page-link" href="?p=<?= $i ?>"> <?= $i ?></a> | |||||
| </li> | |||||
| <?php endfor ?> | |||||
| <?php if ($page < $pages_max): ?> | |||||
| <li class="page-item"> | |||||
| <a class="page-link" href="?p=<?= $pages_max ?>">>|</a> | |||||
| </li> | |||||
| <?php else: ?> | |||||
| <li class="page-item disabled"> | |||||
| <span class="page-link">>|</span> | |||||
| </li> | |||||
| <?php endif ?> | |||||
| </ul> | |||||
| </nav> | |||||
| </div> | |||||
| @@ -0,0 +1,21 @@ | |||||
| .container-max-width | |||||
| { | |||||
| max-width: 1600px; | |||||
| } | |||||
| .no-wrap | |||||
| { | |||||
| display: inline-block; | |||||
| float: none; | |||||
| } | |||||
| .custom-width | |||||
| { | |||||
| max-width: 1ex; | |||||
| } | |||||
| .row-width | |||||
| { | |||||
| max-width: 6px; | |||||
| } | |||||