Browse Source

絞り込み動作確認

bc-detail
みてるぞ 11 months ago
parent
commit
b1c45a6c84
5 changed files with 146 additions and 37 deletions
  1. +71
    -28
      broadcast/index.frm.php
  2. +10
    -2
      broadcast/index.php
  3. +7
    -7
      broadcast/pagination.cmp.php
  4. +52
    -0
      broadcast/script.js
  5. +6
    -0
      broadcast/style.css

+ 71
- 28
broadcast/index.frm.php View File

@@ -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">
&gt; <span style="font-style: italic"><?= $record['chat_message'] ?></span>
</div>
<div style="color: blue">
&gt; <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
- 2
broadcast/index.php 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
broadcast/pagination.cmp.php 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
- 0
broadcast/script.js 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
- 0
broadcast/style.css View File

@@ -18,3 +18,9 @@
max-width: 6px;
}

.page-item
{
width: 3.5em;
text-align: center;
}


Loading…
Cancel
Save