絞り込み動作確認

This commit is contained in:
2023-12-13 01:38:13 +09:00
parent 5c6f3367ed
commit b1c45a6c84
5 changed files with 149 additions and 40 deletions
+44 -1
View File
@@ -19,12 +19,51 @@
</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>
<?php if (count ($log_data) > 0): ?>
<div class="mb-4">
<?php require 'pagination.cmp.php' ?>
</div>
@@ -58,9 +97,13 @@
<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 -2
View File
@@ -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);
+7 -7
View File
@@ -2,7 +2,7 @@
<ul class="pagination">
<?php if ($page > 1): ?>
<li class="page-item">
<a class="page-link no-wrap" href="?p=1">|&lt;</a>
<a class="page-link no-wrap" href="#" onclick="Script.jumpTo (1)">|&lt;</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 ?>">&gt;|</a>
<a class="page-link no-wrap" href="#" onclick="Script.jumpTo (<?= $pages_max ?>)">&gt;|</a>
</li>
<?php else: ?>
<li class="page-item disabled">
+52
View File
@@ -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 ();
+6
View File
@@ -18,3 +18,9 @@
max-width: 6px;
}
.page-item
{
width: 3.5em;
text-align: center;
}