End of jan

engine/app/controller/MainController.php

@@ -2,17 +2,35 @@
 
 require_once __DIR__ . "/../model/MusicModel.php";
 require_once __DIR__ . "/../view/View.php";
+require_once __DIR__ . "/../../core/Paginator.php";
 
 class MainController
 {
-public function actionIndex() {
+    private $limit = Null;
+    private $offset = Null;
+
+    public function actionIndex()
+    {
         $result = MusicModel::getData();
-    echo(View::render(['box' => $result], 'index_tpl.php'));
+        $builder = new MusicPageBuilder($result);
-}
+        $portial = $builder->setFeed();
+        echo (View::render(['portial' => $portial], 'index_tpl.php'));
+    }
 
 
     public function actionNotFound()
     {
         echo (View::render([], '404.php'));
     }
+
+    public function actionPortial()
+    {
+        // $this->limit = isset($_GET['limit']) ? $_GET['limit'] : Null;
+        // $this->offset = isset($_GET['offset']) ? $_GET['offset'] : Null;
+        $result = MusicModel::getData();
+        // var_dump($result);
+        $builder = new MusicPageBuilder($result);
+        $page = $builder->setFeed();
+        echo $page;
+    }
 }

engine/app/template/index_tpl.php

@@ -38,23 +38,20 @@
     <button id="tab1" class="px-4 py-2 border-b-2 border-blue-500 text-blue-500 font-medium active" onclick="showTab('tab1')">Classic</button>
     <button id="tab2" class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300" onclick="showTab('tab2')">Jazz</button>
     <button id="tab3" class="px-4 py-2 border-b-2 border-transparent text-gray-500 font-medium hover:text-gray-700 hover:border-gray-300" onclick="showTab('tab3')">Rock</button>
-</div>
+  </div>
 
-<div id="content1" class="p-4">
+  <div id="content1" class="p-4">
-<?php foreach ($box as $item): ?> 
+    <div id="feed"><?php echo $portial ?></div>
-    <audio controls> 
+    <button type="button" id="paginator" data-id="1">Далее...</button>
-      <source src="<?php echo $item; ?>" type="audio/mpeg"> 
+    <div id="content2" class="p-4 hidden">
-    </audio> 
-  <?php endforeach; ?>
-<div id="content2" class="p-4 hidden">
       Содержимое вкладки 2
-</div>
+    </div>
-<div id="content3" class="p-4 hidden">
+    <div id="content3" class="p-4 hidden">
       Содержимое вкладки 3
-</div>
+    </div>
 
-<script>
+    <script>
-function showTab(tabId) {
+      function showTab(tabId) {
         const tabs = document.querySelectorAll('.flex button');
         const contents = document.querySelectorAll('.p-4');
 
@@ -76,8 +73,35 @@ function showTab(tabId) {
         document.getElementById(tabId).classList.remove('border-transparent');
         document.getElementById(tabId).classList.remove('text-gray-500');
         document.getElementById(`content${tabId.slice(-1)}`).classList.remove('hidden');
-}
+      }
-</script>
+
+      async function getFetch(url) {
+        const response = await fetch(url, {
+          method: 'get'
+        })
+        return await response.text();
+
+      }
+      async function getPage(event) {
+        event.stopPropagation()
+        event.preventDefault()
+        let num_page = parseInt(event.target.getAttribute('data-id'))
+        console.log(num_page)
+        let limit = 5
+        url = 'portial?offset=' + limit * num_page + '&limit=' + limit
+        // console.log(url)
+        let data = await getFetch(url)
+        if (!data) event.target.remove()
+        //  event.target.remove()
+        feed = document.getElementById('feed')
+        feed.innerHTML = feed.innerHTML + data
+        event.target.setAttribute('data-id', parseInt(num_page) + 1)
+
+      }
+
+      const parent = document.getElementById('paginator')
+      parent.addEventListener('click', getPage)
+    </script>
 
 
 </body>

engine/app/template/portial_music.php

@@ -0,0 +1,15 @@
+<?php
+    $audioFiles = $box; // Переименовали переменную для ясности
+    foreach ($audioFiles as $file):
+        if (file_exists($file)) : ?>
+            <div class="audio-player">
+                <audio controls="controls">
+                    <source src="<?php echo htmlspecialchars($file); ?>" type="audio/mpeg">
+                    Ваш браузер не поддерживает HTML5 audio.
+                </audio>
+            </div>
+        <?php else: ?>
+            <p>Файл "<?php echo htmlspecialchars($file); ?>" не найден.</p>
+    <?php endif;
+    endforeach;
+    ?>

engine/app/template/tpl_layout.php

@@ -28,23 +28,45 @@
     <?php else: ?>
         <div class="login"><a href="login.php">Вход</a></div>
     <?php endif; ?>
+    <div id="feed">
+        <?php echo $portial ?>
 
-    <?php
-    $audioFiles = $box; // Переименовали переменную для ясности
-    foreach ($audioFiles as $file):
-        if (file_exists($file)) : ?>
-            <div class="audio-player">
-                <audio controls="controls">
-                    <source src="<?php echo htmlspecialchars($file); ?>" type="audio/mpeg">
-                    Ваш браузер не поддерживает HTML5 audio.
-                </audio>
     </div>
-        <?php else: ?>
+    <button type="button" id="paginator">Далее...</button>
-            <p>Файл "<?php echo htmlspecialchars($file); ?>" не найден.</p>
-    <?php endif;
-    endforeach;
-    ?>
-
 </body>
+<script>
+    async function getFetch(url) {
+        const response = await fetch(url, {
+            method: 'get'
+        })
+        return await response.text();
+
+    }
+    async function getPage(event) {
+        event.stopPropagation()
+        event.preventDefault()
+
+        let num_page = event.target.getAttribute('data-id')
+        console.log(num_page)
+        let limit = 5
+        url = 'portial?offset=' + limit * num_page + '&limit=' + limit
+        console.log(url)
+        let data = await getFetch(url)
+        console.log(data)
+        if (!data) {
+            event.target.remove() 
+            console.log("No data")
+        } else
+        {   console.log("Data")
+                }
+        feed = document.getElementById('feed')
+        feed.innerHTML = feed.innerHTML + data
+        event.target.setAttribute('data-id', parseInt(num_page) + 1)
+
+    }
+
+    const parent = document.getElementById('paginator')
+    parent.addEventListener('click', getPage)
+</script>
 
 </html>

engine/core/Autoloader.php

@@ -5,7 +5,7 @@ class Autoloader
     {
         spl_autoload_register(function ($class_name) {
             // print('auto: ' . $class_name);
-            $dir = ['/../app/controller/'];
+            $dir = ['/../app/controller/', '../app/view'];
             // print($dir);
             foreach ($dir as $path) {
                 $path = __DIR__ . $path . $class_name . '.php';

engine/core/Paginator.php

@@ -0,0 +1,80 @@
+<?php
+
+require_once __DIR__ . "/../app/view/View.php";
+
+class Page
+{
+    public string $html = "";
+    public string $feed = "";
+    public string $paginator = "";
+    // ... другие свойства
+
+    public function __construct() {} // Пустой конструктор
+
+    public function __toString(): string
+    {
+        return $this->html;
+    }
+}
+
+
+interface PageBuilder
+{
+    public function setFeed();
+    public function setPaginator();
+    //    ... другие методы для установки свойств
+}
+
+//implements PageBuilder {
+class MusicPageBuilder  implements PageBuilder
+{
+
+    private Page $page;
+
+    const LIMIT = 5;
+    const OFFSET = 0;
+    private $data = [];
+    private $limit = Null;
+    private $offset = Null;
+    private $flag = 'ajax';
+
+
+    public function __construct($data, $flag = 'ajax')
+    {
+
+        $this->page = new Page();
+        $this->flag = $flag;
+        $this->data = $data;
+        $this->limit = isset($_GET['limit']) ? $_GET['limit'] : self::LIMIT;
+        $this->offset = isset($_GET['offset']) ? $_GET['offset'] : self::OFFSET;
+    }
+
+    public function setFeed()
+    {
+        $portial = array_slice($this->data, $this->offset, $this->limit);
+        $data = View::render(['box' => $portial], 'portial_music.php');
+        // var_dump ($data);
+        return $data;
+    }
+
+    public function setPaginator()
+    {
+        $len = sizeof($this->data);
+        $contPage = intdiv($len, $this->limit);
+        for ($i = 0; $i < $contPage; $i++) {
+            $this->page->paginator .= '<a href="portial.php?offset=' . self::LIMIT * $i .
+                '&limit=' . self::LIMIT . '">' . $i . '</a>&nbsp; ';
+        }
+        return $this;
+    }
+}
+
+// Клиентский код
+// $builder = new MusicPageBuilder($arrMusic);
+// $page = $builder->setFeed()->setPaginator()->build();
+// echo $page . PHP_EOL;
+
+// $p = new Paginator($arrMusic);
+// $p->renderFeed();
+// $p->renderPaginator();
+// $p->renderPage();

engine/routes.php

@@ -10,6 +10,7 @@ return array(
     'logout' => 'auth/logout',
     'upload' => 'upload/index',
     'file_upload' => 'upload/addfile',
+    'portial' => 'main/portial'
 );
 // - где 'news' - строка запроса
 // 'news/index' - имя контроллера и экшена для обработки этого запроса (путь обработчика)