@@ -19,48 +19,91 @@ | |||
</h2> | |||
<div id="collapse-filter" class="accordion-collapse collapse show" data-bs-parent="#accordion-filter"> | |||
<div class="accordion-body"> | |||
<div class="accordion-body mx-5"> | |||
<div> | |||
<div class="row d-flex align-items-center my-2"> | |||
<div class="col-2 fw-bold"> | |||
順序 | |||
</div> | |||
<div class="col-2 form-check"> | |||
<input class="form-check-input" type="radio" name="order" id="order-desc"<?= $asc ? '' : ' checked="checked"' ?> /> | |||
<label class="form-check-label" for="order-desc"> | |||
新しい順 | |||
</label> | |||
</div> | |||
<div class="col-2 form-check"> | |||
<input class="form-check-input" type="radio" name="order" id="order-asc"<?= $asc ? ' checked="checked"' : '' ?> /> | |||
<label class="form-check-label" for="order-asc"> | |||
古い順 | |||
</label> | |||
</div> | |||
</div> | |||
<div class="row d-flex align-items-center my-2"> | |||
<div class="col-2 fw-bold"> | |||
フリーワード | |||
</div> | |||
<div class="col"> | |||
<input type="text" class="form-control" placeholder="ぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛" id="filter-keyword" | |||
value="<?= $keyword ?>"/> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="d-grid gap-2 mt-3"> | |||
<button type="button" class="btn btn-primary" id="btn-filter">絞り込む</button> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="mb-4"> | |||
<?php require 'pagination.cmp.php' ?> | |||
</div> | |||
<?php if (count ($log_data) > 0): ?> | |||
<div class="mb-4"> | |||
<?php require 'pagination.cmp.php' ?> | |||
</div> | |||
<div> | |||
<?php foreach (array_slice ($log_data, | |||
($page - 1) * $length, | |||
$length, | |||
true) as $record): ?> | |||
<div class="mb-4"> | |||
<div> | |||
<?= $record['date_time'] ?> | |||
</div> | |||
<div> | |||
<?php foreach (array_slice ($log_data, | |||
($page - 1) * $length, | |||
$length, | |||
true) as $record): ?> | |||
<div class="mb-4"> | |||
<div> | |||
<?= $record['date_time'] ?> | |||
</div> | |||
<div> | |||
<img src="<?= $record['chat_icon'] ?>" /> | |||
<?= $record['chat_name'] ?> | |||
</div> | |||
<div> | |||
<img src="<?= $record['chat_icon'] ?>" /> | |||
<?= $record['chat_name'] ?> | |||
</div> | |||
<div style="color: blue"> | |||
> <span style="font-style: italic"><?= $record['chat_message'] ?></span> | |||
</div> | |||
<div style="color: blue"> | |||
> <span style="font-style: italic"><?= $record['chat_message'] ?></span> | |||
</div> | |||
<div> | |||
<?= $record['answer'] ?> | |||
<div> | |||
<?= $record['answer'] ?> | |||
</div> | |||
</div> | |||
</div> | |||
<?php endforeach ?> | |||
</div> | |||
<?php endforeach ?> | |||
</div> | |||
<div class="mt-5"> | |||
<?php require 'pagination.cmp.php' ?> | |||
</div> | |||
<div class="mt-5"> | |||
<?php require 'pagination.cmp.php' ?> | |||
</div> | |||
<?php else: ?> | |||
何も見つかりませんでしたぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛ | |||
<?php endif ?> | |||
</div> | |||
<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="./script.js" type="text/javascript"></script> | |||
</body> | |||
</html> | |||
@@ -10,6 +10,7 @@ $log_data = []; | |||
$page = (int) ($_GET['p'] ?? 1); | |||
$length = (int) ($_GET['max'] ?? 20); | |||
$asc = ($_GET['asc'] ?? 0) != 0; | |||
$keyword = trim ($_GET['q'] ?? ''); | |||
$f = fopen (LOG_PATH, 'r'); | |||
@@ -25,14 +26,21 @@ if ($f !== false) | |||
'chat_message' => $chat_info -> message, | |||
'answer' => $dt[2]]; | |||
} | |||
} | |||
fclose ($f); | |||
unset ($f); | |||
$pages_max = (int) (count ($log_data) / $length); | |||
if ($keyword != '') | |||
{ | |||
$log_data = array_filter ($log_data, fn ($row) => ( | |||
strpos ($row['chat_name'] . "\n" . $row['chat_message'] . "\n" . $row['answer'], | |||
$keyword) | |||
!== false)); | |||
} | |||
$pages_max = (int) ((count ($log_data) - 1) / $length) + 1; | |||
if (!($asc)) | |||
$log_data = array_reverse ($log_data); | |||
@@ -2,7 +2,7 @@ | |||
<ul class="pagination"> | |||
<?php if ($page > 1): ?> | |||
<li class="page-item"> | |||
<a class="page-link no-wrap" href="?p=1">|<</a> | |||
<a class="page-link no-wrap" href="#" onclick="Script.jumpTo (1)">|<</a> | |||
</li> | |||
<?php else: ?> | |||
<li class="page-item disabled"> | |||
@@ -10,9 +10,9 @@ | |||
</li> | |||
<?php endif ?> | |||
<?php for ($i = max (min ($page + 5, $pages_max) - 10, 1); $i < $page; ++$i): ?> | |||
<?php for ($i = max (min ($page + 3, $pages_max) - 6, 1); $i < $page; ++$i): ?> | |||
<li class="page-item"> | |||
<a class="page-link" href="?p=<?= $i ?>"> <?= $i ?></a> | |||
<a class="page-link" href="#" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a> | |||
</li> | |||
<?php endfor ?> | |||
@@ -20,15 +20,15 @@ | |||
<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> | |||
<?php for ($i = $page + 1; $i <= min (max ($page - 3, 1) + 6, $pages_max); ++$i): ?> | |||
<li class="page-item"> | |||
<a class="page-link" href="#" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a> | |||
</li> | |||
<?php endfor ?> | |||
<?php if ($page < $pages_max): ?> | |||
<li class="page-item"> | |||
<a class="page-link no-wrap" href="?p=<?= $pages_max ?>">>|</a> | |||
<a class="page-link no-wrap" href="#" onclick="Script.jumpTo (<?= $pages_max ?>)">>|</a> | |||
</li> | |||
<?php else: ?> | |||
<li class="page-item disabled"> | |||
@@ -0,0 +1,52 @@ | |||
class | |||
Script | |||
{ | |||
static | |||
main () | |||
{ | |||
const url = new URL (window.location.href); | |||
const orderAsc = document.getElementById ('order-asc'); | |||
const filterKeyword = document.getElementById ('filter-keyword'); | |||
const btnFilter = document.getElementById ('btn-filter'); | |||
const filter = ( | |||
function (e) | |||
{ | |||
url.searchParams.delete ('p'); | |||
url.searchParams.delete ('asc'); | |||
url.searchParams.append ('asc', orderAsc.checked ? '1' : '0'); | |||
url.searchParams.delete ('q'); | |||
url.searchParams.append ('q', filterKeyword.value); | |||
window.location.href = url; | |||
}); | |||
filterKeyword.addEventListener ('keydown', | |||
function (e) | |||
{ | |||
if (e.key === 'Enter') | |||
filter (e); | |||
}); | |||
btnFilter.addEventListener ('click', filter); | |||
} | |||
static | |||
jumpTo (page) | |||
{ | |||
const url = new URL (window.location.href); | |||
url.searchParams.delete ('p'); | |||
url.searchParams.append ('p', page); | |||
window.location.href = url; | |||
} | |||
} | |||
Script.main (); | |||
@@ -18,3 +18,9 @@ | |||
max-width: 6px; | |||
} | |||
.page-item | |||
{ | |||
width: 3.5em; | |||
text-align: center; | |||
} | |||