絞り込み動作確認

broadcast/index.frm.php

@@ -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>
 

broadcast/index.php

@@ -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);

broadcast/pagination.cmp.php

@@ -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">

broadcast/script.js

@@ -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 ();
+

broadcast/style.css

@@ -18,3 +18,9 @@
   max-width:  6px;
 }
 
+.page-item
+{
+  width:      3.5em;
+  text-align: center;
+}
+