[BC] 自動更新対応完了

broadcast/index.frm.php

@@ -48,7 +48,7 @@
                                     <div class="col-sm">
                                         <div class="row align-items-center">
                                             <div class="col form-check">
-                                                <input class="form-check-input" type="radio" name="order" id="order-desc"<?= $asc ? '' : ' checked="checked"' ?> />
+                                                <input class="form-check-input" type="radio" name="order" id="order-desc" checked="checked" />
 
                                                 <label class="form-check-label" for="order-desc">
                                                     新しい順
@@ -56,7 +56,7 @@
                                             </div>
 
                                             <div class="col form-check">
-                                                <input class="form-check-input" type="radio" name="order" id="order-asc"<?= $asc ? ' checked="checked"' : '' ?> />
+                                                <input class="form-check-input" type="radio" name="order" id="order-asc" />
 
                                                 <label class="form-check-label" for="order-asc">
                                                     古い順
@@ -79,14 +79,12 @@
                                         <input type="text"
                                                class="form-control"
                                                placeholder="YYYY-MM-DD"
-                                               id="filter-date-start"
-                                               value="<?= $date_start ?>" />
+                                               id="filter-date-start" />
                                         <span class="input-group-text">〜</span>
                                         <input type="text"
                                                class="form-control"
                                                placeholder="YYYY-MM-DD"
-                                               id="filter-date-end"
-                                               value="<?= $date_end ?>" />
+                                               id="filter-date-end" />
                                     </div>
                                 </div>
 
@@ -99,8 +97,7 @@
                                         <input type="text"
                                                class="form-control"
                                                placeholder="<?= $april_fool ? 'ﾑﾑﾑﾑ!!  ｸｻﾀﾍﾞﾃﾙ!!!!!' : 'ぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛' ?>"
-                                               id="filter-keyword" 
-                                               value="<?= $keyword ?>"/>
+                                               id="filter-keyword" />
                                     </div>
                                 </div>
                             </div>

broadcast/index.php

@@ -7,64 +7,11 @@ const LOG_PATH = './log.txt';
 
 $log_data = [];
 
-exec ("(ps -Af | grep -e '^miteruzo' | grep 'python3 main.py') && (ps -Af | grep -e '^miteruzo' | grep 'obs')",
+exec (("(ps -Af | grep -e '^miteruzo' | grep 'python3 main.py')"
+       . " && (ps -Af | grep -e '^miteruzo' | grep 'obs')"),
       $output, $exit_code);
 $available = $exit_code === 0;
 unset ($output, $exit_code);
 
-$page = (int) ($_GET['p'] ?? 1);
-$length = (int) ($_GET['max'] ?? 20);
-$asc = ($_GET['asc'] ?? 0) != 0;
-$keyword = trim ($_GET['q'] ?? '');
-$escaped = ($_GET['escaped'] ?? 0) != 0;
-
-$date_start = ($_GET['start'] ?? null) ?: null;
-$date_end = ($_GET['end'] ?? null) ?: null;
-
-$f = fopen (LOG_PATH, 'r');
-
-if ($f !== false)
-  {
-    while (($dt = fgetcsv ($f, 0, "\t")) !== false)
-      {
-        $chat_info = json_decode ($dt[1]);
-
-        $log_data[] = ['date_time'    => $dt[0],
-                       'chat_icon'    => $chat_info -> author -> imageUrl,
-                       'chat_name'    => $escaped ? htmlspecialchars ($chat_info -> author -> name) : $chat_info -> author -> name,
-                       'chat_message' => $escaped ? htmlspecialchars ($chat_info -> message) : $chat_info -> message,
-                       'answer'       => $escaped ? htmlspecialchars ($dt[2]) : $dt[2]];
-      }
-  }
-
-fclose ($f);
-
-unset ($f);
-
-if ($keyword != '')
-  {
-    $log_data = array_filter ($log_data, fn ($row) => (
-        strpos ($row['chat_name'] . "\n" . $row['chat_message'] . "\n" . $row['answer'],
-                $keyword)
-        !== false));
-  }
-
-if ($date_start)
-  {
-    $log_data = array_filter ($log_data, fn ($row) => (
-        substr ($row['date_time'], 0, 10) >= $date_start));
-  }
-
-if ($date_end)
-  {
-    $log_data = array_filter ($log_data, fn ($row) => (
-        substr ($row['date_time'], 0, 10) <= $date_end));
-  }
-
-$pages_max = (int) ((count ($log_data) - 1) / $length) + 1;
-
-if (!($asc))
-  $log_data = array_reverse ($log_data);
-
 require_once './index.frm.php';
 

broadcast/pagination.cmp.php

@@ -1,63 +1,6 @@
 <!-- vim:set tabstop=4 softtabstop=4 expandtab :-->
 
-<nav class="d-flex justify-content-center" aria-label="...">
-    <ul class="pagination opacity-0">
-        <?php if ($page > 1): ?>
-            <li class="page-item deerjika-tail">
-                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (1)">
-                    <img src="./assets/page-first.png" />
-                    <div class="page-link-text">|&lt;</div>
-                </a>
-            </li>
-        <?php else: ?>
-            <li class="page-item disabled deerjika-tail">
-                <span class="page-link">
-                    <img src="./assets/page-first.png" />
-                    <div class="page-link-text"></div>
-                </span>
-            </li>
-        <?php endif ?>
-
-        <?php for ($i = max (min ($page + 10, $pages_max) - 20, 1); $i < $page; ++$i): ?>
-            <li class="page-item page-<?= $page - $i ?>">
-                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)">
-                    <img src="./assets/page-body.png" />
-                    <div class="page-link-text"><?= $i ?></div>
-                </a>
-            </li>
-        <?php endfor ?>
-
-        <li class="page-item active" aria-current="page">
-            <span class="page-link">
-                <img src="./assets/page-body.png" />
-                <div class="page-link-text"><?= $page ?></div>
-            </span>
-        </li>
-
-        <?php for ($i = $page + 1; $i <= min (max ($page - 10, 1) + 20, $pages_max); ++$i): ?>
-            <li class="page-item page-<?= $i - $page ?>">
-                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)">
-                    <img src="./assets/page-body.png" />
-                    <div class="page-link-text"><?= $i ?></div>
-                </a>
-            </li>
-        <?php endfor ?>
-
-        <?php if ($page < $pages_max): ?>
-            <li class="page-item">
-                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">
-                    <img src="./assets/page-last.png" />
-                    <div class="page-link-text">&gt;|</div>
-                </a>
-            </li>
-        <?php else: ?>
-            <li class="page-item disabled">
-                <span class="page-link">
-                    <img src="./assets/page-last.png" />
-                    <div class="page-link-text"></div>
-                </span>
-            </li>
-        <?php endif ?>
-    </ul>
+<nav class="d-flex justify-content-center d-none" aria-label="...">
+    <ul class="pagination"></ul>
 </nav>
 

broadcast/script.js

@@ -4,21 +4,28 @@ Script
   static
   main ()
   {
+    const self = this;
+
+    self.paramAsc = null;
+    self.paramStart = null;
+    self.paramEnd = null;
+    self.paramQ = null;
+    self.paramP = null;
+
+    self.fetchData ();
+
     const dateOptions = {dateFormat:  'yy-mm-dd',
                          firstDay:    6};
 
     $ ('#filter-date-start').datepicker (dateOptions);
     $ ('#filter-date-end').datepicker (dateOptions);
 
-    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)
+    const filter = function (e)
         {
           let dateStart = $ ('#filter-date-start').val ();
           let dateEnd = $ ('#filter-date-end').val ();
@@ -28,31 +35,30 @@ Script
               && (dateStart > dateEnd))
             [dateStart, dateEnd] = [dateEnd, dateStart];
 
-          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);
-
-          url.searchParams.delete ('start');
-          url.searchParams.delete ('end');
+          self.paramAsc = orderAsc.checked ? '1' : '0';
+          self.paramQ = filterKeyword.value;
 
           if (dateStart !== '')
-            url.searchParams.append ('start', dateStart);
+            self.paramStart = dateStart;
 
           if (dateEnd !== '')
-            url.searchParams.append ('end', dateEnd);
+            self.paramEnd = dateEnd;
 
-          window.location.href = url;
-        });
+          self.paramP = null;
 
-    const resetFilter = (
-        function ()
+          self.fetchData ();
+        };
+
+    const resetFilter = function ()
         {
-          window.location.href = '/';
-        });
+          self.paramAsc = null;
+          self.paramStart = null;
+          self.paramEnd = null;
+          self.paramQ = null;
+          self.paramP = null;
+
+          self.fetchData ();
+        };
 
     filterKeyword.addEventListener ('keydown',
         function (e)
@@ -65,8 +71,6 @@ Script
     $ ('#btn-reset').on ('click', resetFilter);
 
     $ (window).resize (this.setPagination);
-    this.setPagination ();
-    $ ('.pagination').removeClass ('opacity-0');
 
     $ ('#accordion-filter').on ('shown.bs.collapse', function ()
         {
@@ -78,31 +82,24 @@ Script
           $.cookie ('expand-filter', '0');
         });
 
-    $ ('.message-block').on ('click', function ()
-        {
-          const dt = $ (this).find ('.message-block-dt').text ();
-          const chat = $ (this).find ('.message-block-chat').text ();
-          const answer = $ (this).find ('.message-block-answer').text ();
-
-          window.open (`./talk.php?dt=${dt}&chat=${chat}&answer=${answer}`);
-        });
-
     if ($.cookie ('expand-filter') === '0')
     {
       $ ('#collapse-filter').removeClass ('show');
       $ ('#accordion-filter .accordion-button').addClass ('collapsed');
     }
+
+    window.setInterval (function ()
+        {
+          self.fetchData ();
+        }, 60000);
   }
 
   static
   jumpTo (page)
   {
-    const url = new URL (window.location.href);
-
-    url.searchParams.delete ('p');
-    url.searchParams.append ('p', page);
+    this.paramP = page;
 
-    window.location.href = url;
+    this.fetchData ();
   }
 
   static
@@ -120,6 +117,172 @@ Script
         $ (`.page-${i}`).addClass ('d-none');
       }
   }
+
+  static
+  fetchData ()
+  {
+    const self = this;
+
+    const postData = {}
+  
+    if (this.paramAsc != null)
+      postData.asc = this.paramAsc;
+
+    if (this.paramStart != null)
+      postData.start = this.paramStart;
+
+    if (this.paramEnd != null)
+      postData.end = this.paramEnd;
+
+    if (this.paramQ != null)
+      postData.q = this.paramQ;
+
+    if (this.paramP != null)
+      postData.p = this.paramP;
+
+    const done = function (data)
+        {
+          $ ('.pagination').empty ();
+
+          if (data.page > 1)
+            {
+              ($ ('.pagination')
+               .append ($ ('<li>', {class:  'page-item deerjika-tail'})
+                        .append ($ ('<a>', {class:    'page-link',
+                                            href:     'javascript: void 0',
+                                            onclick:  'Script.jumpTo (1)'})
+                                 .append ($ ('<img>',
+                                             {src:  './assets/page-first.png'}))
+                                 .append ($ ('<div>', {class: 'page-link-text'})
+                                          .append ('|&lt;')))));
+            }
+          else
+            {
+              ($ ('.pagination')
+               .append ($ ('<li>', {class:  'page-item disabled deerjika-tail'})
+                        .append ($ ('<span>', {class: 'page-link'})
+                                 .append ($ ('<img>',
+                                             {src:  './assets/page-first.png'}))
+                                 .append ($ ('<div>', {class: 'page-link-text'})))));
+            }
+
+          for (let i = Math.max (Math.min (data.page + 10, data.max) - 20, 1);
+               i < data.page;
+               ++i)
+            {
+              ($ ('.pagination')
+               .append ($ ('<li>', {class:  `page-item page-${ data.page - i }`})
+                        .append ($ ('<a>', {class:    'page-link',
+                                            href:     'javascript: void 0',
+                                            onclick:  `Script.jumpTo (${ i })`})
+                                 .append ($ ('<img>',
+                                             {src:  './assets/page-body.png'}))
+                                 .append ($ ('<div>', {class: 'page-link-text'})
+                                          .append (i)))));
+            }
+
+          ($ ('.pagination')
+           .append ($ ('<li>', {class:          'page-item active',
+                                'aria-current': 'page'})
+                    .append ($ ('<span>', {class: 'page-link'})
+                             .append ($ ('<img>', {src: './assets/page-body.png'}))
+                             .append ($ ('<div>', {class: 'page-link-text'})
+                                      .append (data.page)))));
+
+          for (let i = data.page + 1;
+               i <= Math.min (Math.max (data.page - 10, 1) + 20, data.max);
+               ++i)
+            {
+              ($ ('.pagination')
+               .append ($ ('<li>', {class:  `page-item page-${ i - data.page }`})
+                        .append ($ ('<a>', {class:    'page-link',
+                                            href:     'javascript: void 0',
+                                            onclick:  `Script.jumpTo (${ i })`})
+                                 .append ($ ('<img>',
+                                             {src:  './assets/page-body.png'}))
+                                 .append ($ ('<div>', {class: 'page-link-text'})
+                                          .append (i)))));
+            }
+
+          if (data.page < data.max)
+            {
+              ($ ('.pagination')
+               .append ($ ('<li>', {class:  'page-item'})
+                        .append ($ ('<a>',
+                                    {class:   'page-link',
+                                     href:    'javascript: void 0',
+                                     onclick: `Script.jumpTo (${ data.max })`})
+                                 .append ($ ('<img>',
+                                             {src: './assets/page-last.png'}))
+                                 .append ($ ('<div>', {class: 'page-link-text'})
+                                          .append ('&gt;|')))));
+            }
+          else
+            {
+              ($ ('.pagination')
+               .append ($ ('<li>', {class:  'page-item disabled'})
+                        .append ($ ('<span>', {class: 'page-link'})
+                                 .append ($ ('<img>',
+                                             {src: './assets/page-last.png'}))
+                                 .append ($ ('<div>', {class: 'page-link-text'})))));
+            }
+
+          $ ('#message-list').empty ();
+
+          for (let datum of data.data)
+            {
+              ($ ('#message-list')
+               .append ($ ('<div>', {class: 'mb-4 message-block'})
+                        .append ($ ('<div>')
+                                 .append ($ ('<span>', {
+                                            class:  'message-block-dt'})
+                                          .append (datum.dateTime)))
+                        .append ($ ('<div>')
+                                 .append ($ ('<img>', {src:     datum.chatIcon,
+                                                       width:   '64',
+                                                       height:  '64'}))
+                                 .append (datum.chatName))
+                        .append ($ ('<div>', {style:  'color: blue'})
+                                 .append ('&gt; ')
+                                 .append ($ ('<span>',
+                                             {class:  'message-block-chat',
+                                              style:  'font-style: italic'})
+                                          .append (datum.chatMessage)))
+                        .append ($ ('<div>')
+                                 .append ($ ('<span>',
+                                             {class: 'message-block-answer'})
+                                          .append (datum.answer)))));
+            }
+
+          $ ('.message-block').on ('click', function ()
+              {
+                const dt = $ (this).find ('.message-block-dt').text ();
+                const chat = $ (this).find ('.message-block-chat').text ();
+                const answer = $ (this).find ('.message-block-answer').text ();
+
+                window.open (
+                    `./talk.php?dt=${dt}&chat=${chat}&answer=${answer}`);
+              });
+
+          self.setPagination ();
+
+
+          if (data.data.length > 0)
+            $ ('nav').removeClass ('d-none');
+          else
+            {
+              $ ('nav').addClass ('d-none');
+
+              ($ ('#message-list')
+               .text ('何も見つかりませんでしたぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛'));
+            }
+        };
+
+    $.post ({url:       './services/fetch_data.php',
+             dataType:  'json',
+             data:      postData})
+     .done (done);
+  }
 }
 
 

broadcast/services/fetch_data.php

@@ -60,7 +60,8 @@ $pages_max = (int) ((count ($log_data) - 1) / $length) + 1;
 if (!($asc))
   $log_data = array_reverse ($log_data);
 
-$log_data = array_slice ($log_data, ($page - 1) * $length, $length, true);
+$log_data = array_slice ($log_data, ($page - 1) * $length, $length, false);
 
-echo json_encode ($log_data);
+echo ('{"data": ' . json_encode ($log_data) . ', "max": ' . $pages_max
+      . ', "page": ' . $page . '}');