ページ化対応

11 months ago · 72b9aecb61
--- a/broadcast/index.frm.php
+++ b/broadcast/index.frm.php
@@ -8,26 +8,37 @@
    </head>

    <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>
                <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">
                &gt; <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">
                            &gt; <span style="font-style: italic"><?= $record['chat_message'] ?></span>
                        </div>

                        <div>
                            <?= $record['answer'] ?>
                        </div>
                    </div>
                <?php endforeach ?>
            </div>

            <?php require 'pagination.cmp.php' ?>
        </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>
    </body>
--- a/broadcast/index.php
+++ b/broadcast/index.php
@@ -4,6 +4,10 @@ const LOG_PATH = './log.txt';

 $log_data = [];

 $page = (int) ($_GET['p'] ?? 1);
 $length = (int) ($_GET['max'] ?? 20);
 $asc = ($_GET['asc'] ?? 0) != 0;

 $f = fopen (LOG_PATH, 'r');

 if ($f !== false)
@@ -25,5 +29,10 @@ fclose ($f);

 unset ($f);

 $pages_max = (int) (count ($log_data) / $length);

 if (!($asc))
  $log_data = array_reverse ($log_data);

 require_once './index.frm.php';

--- a/broadcast/pagination.cmp.php
+++ b/broadcast/pagination.cmp.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">|&lt;</a>
                </li>
            <?php else: ?>
                <li class="page-item disabled">
                    <span class="page-link">|&lt;</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 ?>">&gt;|</a>
                </li>
            <?php else: ?>
                <li class="page-item disabled">
                    <span class="page-link">&gt;|</span>
                </li>
            <?php endif ?>
        </ul>
    </nav>
 </div>

--- a/broadcast/style.css
+++ b/broadcast/style.css
@@ -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;
 }