From 72a2b67fc640d8da0ced2de93f7d3cc3ab0f6f52 Mon Sep 17 00:00:00 2001 From: Viktor Svertoka <115661003+ViktorSvertoka@users.noreply.github.com> Date: Mon, 18 Dec 2023 18:54:24 +0200 Subject: [PATCH] Feat(JS) Added pagination --- src/css/utils/command.css | 20 +++++++++ src/js/00-api.js | 18 ++++---- src/js/03-filters.js | 68 ++++++++++++++++++++++++++---- src/js/12-exercises.js | 77 ++++++++++++++++++++++++++++++---- src/partials/03-exercises.html | 1 + 5 files changed, 158 insertions(+), 26 deletions(-) diff --git a/src/css/utils/command.css b/src/css/utils/command.css index 732adcb..ccf2f63 100644 --- a/src/css/utils/command.css +++ b/src/css/utils/command.css @@ -83,3 +83,23 @@ body { height: 20px; } } + +#pagination-number { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; +} + +.pagination-button { + background-color: transparent; + border: none; +} + +.active-btn { + background-color: transparent; + width: 32px; + padding: 5px 12px; + border-radius: 18px; + border: 1px solid #242424; +} diff --git a/src/js/00-api.js b/src/js/00-api.js index e9e63bd..5f1ec64 100644 --- a/src/js/00-api.js +++ b/src/js/00-api.js @@ -10,14 +10,13 @@ export default class APIService { this.page = 0; } - async getExercises(params1, params2) { + async getExercises(params1, params2, page) { try { - this.page += 1; - const response = await axios.get( - `${this.baseURL}exercises?${params1}=${params2}&page=1&limit=10` + `${this.baseURL}exercises?${params1}=${params2}&page=${page}&limit=10` ); - return response.data.results; + + return response.data; } catch (error) { console.log(error); } @@ -25,7 +24,6 @@ export default class APIService { async getSearch(params1, params2, params3) { try { - this.page += 1; const response = await axios.get( `${this.baseURL}exercises?${params1}=${params2}&keyword=${params3}&page=1&limit=10` ); @@ -38,8 +36,6 @@ export default class APIService { async getExercisesById(_id) { try { - this.page += 1; - const response = await axios.get(`${this.baseURL}exercises/${_id}`); return response.data; @@ -48,13 +44,13 @@ export default class APIService { } } - async getFilter(params) { + async getFilter(params, page) { try { const response = await axios.get( - `${this.baseURL}filters?filter=${params}` + `${this.baseURL}filters?filter=${params}&page=${page}&limit=12` ); - return response.data.results; + return response.data; } catch (error) { console.log(error); } diff --git a/src/js/03-filters.js b/src/js/03-filters.js index 13aa054..0636b93 100644 --- a/src/js/03-filters.js +++ b/src/js/03-filters.js @@ -1,25 +1,32 @@ import APIService from './00-api'; const apiService = new APIService(); const listItem = document.querySelector('.js-list'); +const paginationButtons = document.getElementById('pagination-numbers'); +let currentPage = 1; -getFiltersExercises('Muscles'); +getFiltersExercises('Muscles', currentPage); -async function getFiltersExercises(params) { +async function getFiltersExercises(params, currentPage) { try { - const data = await apiService.getFilter(params); + const { results, totalPages } = await apiService.getFilter( + params, + currentPage + ); - displayExercises(data); + setupPagination({ results, totalPages }); + displayExercises(results); } catch (error) { console.log(error); } } -function displayExercises(data) { - const markup = data +function displayExercises(results) { + listItem.innerHTML = ''; + const markup = results .map(({ filter, name, imgURL }) => { return `
  • - ${name} +

    ${filter}

    ${name}

    @@ -36,6 +43,51 @@ document.querySelectorAll('.btnFilters').forEach(button => { button.addEventListener('click', () => { const params = button.innerText; listItem.innerHTML = ''; - getFiltersExercises(params); + currentPage = 1; + getFiltersExercises(params, currentPage); }); }); + +function setupPagination({ results, totalPages }) { + paginationButtons.innerHTML = ''; + + if (totalPages <= 1) return; + + const params = results[0].filter; + + for (let i = 1; i <= totalPages; i++) { + const pageNumber = document.createElement('button'); + pageNumber.className = 'pagination-button'; + pageNumber.textContent = i; + + paginationButtons.appendChild(pageNumber); + + pageNumber.addEventListener('click', () => { + setCurrentPage(params, i); + }); + } + handleActivePageNumber(); +} + +async function setCurrentPage(params, i) { + currentPage = i; + await getFiltersExercises(params, currentPage); + handleActivePageNumber(); + scrollToTop(); +} + +const handleActivePageNumber = () => { + document.querySelectorAll('.pagination-button').forEach((button, page) => { + button.classList.remove('active-btn'); + if (page + 1 === currentPage) { + button.classList.add('active-btn'); + } + }); +}; + +function scrollToTop() { + window.scrollTo({ + top: 830, + behavior: 'auto', + }); +} diff --git a/src/js/12-exercises.js b/src/js/12-exercises.js index acf5c4e..5c59a7e 100644 --- a/src/js/12-exercises.js +++ b/src/js/12-exercises.js @@ -3,9 +3,12 @@ import icons from '../img/sprite.svg'; const apiService = new APIService(); const listItem = document.querySelector('.js-list'); +const paginationButtons = document.getElementById('pagination-numbers'); const searchForm = document.querySelector('.search__form'); const span = document.querySelector('.exersices__span'); const text = document.querySelector('.exersices__text'); +let currentPage = 1; + listItem.addEventListener('click', onCardClick); async function onCardClick(event) { @@ -32,23 +35,29 @@ async function onCardClick(event) { localStorage.setItem('paramSearch', JSON.stringify(obj)); try { - const data = await apiService.getExercises(filter, name); - renderExercises(data); - textExercises(data); + const { results, totalPages } = await apiService.getExercises( + filter, + name, + currentPage + ); + + setupPagination({ filter, name, totalPages }); + renderExercises(results); + textExercises(results); } catch (error) { console.log(error); } } -function textExercises(data) { - text.innerText = `${data[0].bodyPart}`; +function textExercises(results) { + text.innerText = `${results[0].bodyPart}`; text.classList.remove('hidden'); span.classList.remove('hidden'); } -export function renderExercises(data) { +export function renderExercises(results) { listItem.innerHTML = ''; - const markup = data + const markup = results .map(({ _id, rating, name, burnedCalories, bodyPart, target }) => { return `
  • @@ -100,3 +109,57 @@ document.addEventListener('DOMContentLoaded', () => { }); }); }); + +async function setCurrentPage(filter, name, i) { + currentPage = i; + try { + const { results, totalPages } = await apiService.getExercises( + filter, + name, + currentPage + ); + + setupPagination({ filter, name, totalPages }); + renderExercises(results); + textExercises(results); + } catch (error) { + console.log(error); + } + handleActivePageNumber(); + scrollToTop(); +} + +function setupPagination({ filter, name, totalPages }) { + paginationButtons.innerHTML = ''; + + if (totalPages <= 1) return; + + for (let i = 1; i <= totalPages; i++) { + const pageNumber = document.createElement('button'); + pageNumber.className = 'pagination-button'; + pageNumber.textContent = i; + + paginationButtons.appendChild(pageNumber); + + pageNumber.addEventListener('click', () => { + setCurrentPage(filter, name, i); + }); + } + handleActivePageNumber(); +} + +const handleActivePageNumber = () => { + document.querySelectorAll('.pagination-button').forEach((button, page) => { + button.classList.remove('active-btn'); + if (page + 1 === currentPage) { + button.classList.add('active-btn'); + } + }); +}; + +function scrollToTop() { + window.scrollTo({ + top: 830, + behavior: 'auto', + }); +} diff --git a/src/partials/03-exercises.html b/src/partials/03-exercises.html index 2dd4db6..437d747 100644 --- a/src/partials/03-exercises.html +++ b/src/partials/03-exercises.html @@ -84,6 +84,7 @@

    Daily norm of sports

    +