HM-56. Добавлена страница для просмотра логов с фильтрацией, пагинацией (#20)

src/components/pagination/Pagination.js

@@ -0,0 +1,111 @@
+import Component from '../component/index';
+import routeService from '../../services/RouteService';
+import {createElement} from '../../utils/elementUtils';
+import {prepareToNumber} from '../../utils/urlUtils';
+
+const LEFT_ICON = '«';
+const RIGHT_ICON = '»';
+
+const CHAGE_PAGE = 'changePage';
+
+class Pagination extends Component {
+    buttons = [];
+
+    constructor (parentNode) {
+        super('#pagination', parentNode);
+
+        this.currentPage = 0;
+        this.countPages = 0;
+
+        this.container = this.mainNode.querySelector('.pagination');
+
+        routeService.onChange(() => {
+            this.renderButtons();
+        });
+    }
+
+    renderOneButton = (text, isDisabled = false) => {
+        const li = createElement({
+            tagName: 'li',
+            parentNode: this.container,
+            options: {
+                className: 'page-item',
+                disabled: isDisabled,
+            },
+        });
+        const button = createElement({
+            tagName: 'button',
+            parentNode: li,
+            options: {
+                className: 'page-link pe-auto',
+                innerHTML: text,
+            },
+        });
+        if (isDisabled) {
+            li.classList.add('disabled');
+            button.setAttribute('disabled', 'true');
+        }
+        if (text === this.currentPage) {
+            li.classList.add('active');
+        }
+        this.addEventListener(button, 'click', () => {
+            const nextPage = (() => {
+                if (text === LEFT_ICON) {
+                    return this.currentPage - 1;
+                }
+                if (text === RIGHT_ICON) {
+                    return this.currentPage + 1;
+                }
+                return text;
+            })();
+
+            routeService.pushQuery({
+                pageNumber: nextPage,
+            });
+        });
+        this.buttons.push(li);
+    }
+
+    clearButtons = () => {
+        this.buttons.forEach((b) => {
+            b.remove();
+        });
+
+        this.clearListeners();
+
+        this.buttons = [];
+    }
+
+    changeCountPages = (countPages) => {
+        if (countPages !== this.countPages) {
+            this.countPages = countPages;
+
+            this.renderButtons();
+        }
+    }
+
+    renderButtons = () => {
+        this.clearButtons();
+        const {pageNumber} = routeService.getUrlData().query;
+        this.currentPage = prepareToNumber(pageNumber, this.countPages);
+
+        const start = this.currentPage < 3 ? 1 : this.currentPage - 2;
+        const end = start + 4 > this.countPages ? this.countPages : start + 4;
+
+        this.renderOneButton(LEFT_ICON, this.currentPage <= 1);
+
+        for (let i = start; i <= end; i += 1) {
+            this.renderOneButton(i);
+        }
+
+        this.renderOneButton(RIGHT_ICON, this.currentPage >= this.countPages);
+
+        this.next(CHAGE_PAGE, this.currentPage);
+    }
+
+    onPageChange = (listener) => {
+        this.subscribe(CHAGE_PAGE, listener);
+    }
+}
+
+export default Pagination;