From d6207e7dde899ba2f38002fb6159545f2cd7c515 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Wed, 20 Nov 2019 23:09:10 +0300 Subject: [PATCH] Filter by ascending and descending of price --- config/routes/routes.js | 33 +++++++++------ dist/public/img/service-icons/fortnite.svg | 1 + dist/public/js/bundle.js | 8 ++-- dist/views/index.pug | 2 +- src/js/components/category.component.js | 7 +++- src/js/components/filter.component.js | 47 +++++++++++++++++----- src/js/index.js | 4 +- src/js/services/api.service.js | 23 ++++++++--- 8 files changed, 89 insertions(+), 36 deletions(-) create mode 100644 dist/public/img/service-icons/fortnite.svg diff --git a/config/routes/routes.js b/config/routes/routes.js index 51b2e02..0121040 100644 --- a/config/routes/routes.js +++ b/config/routes/routes.js @@ -20,21 +20,30 @@ function indexRoute(req, res, db) { function getItemsRoute(req, res, db) { const dbo = db.db(dbName); - const queryOptions = { - auth: 'yYNfW8ynVO18L1TW5qIkILM1WtWgrVZz', - option: 'all' - } - // установка кэша при отдачи json данных //res.setHeader("Cache-Control", "public, max-age=20"); - if (req.query.auth === queryOptions.auth) { - if (req.query.option === queryOptions.option) { + if (req.query.auth === 'yYNfW8ynVO18L1TW5qIkILM1WtWgrVZz') { + if (req.query.option === 'all' && !req.query.sorting) { dbo.collection('storeInfo').find().toArray((err, result) => { if (err) throw err; res.send(result[0].items); }) + } else if (!req.query.option && req.query.category && req.query.sorting === 'ascending') { + dbo.collection('storeInfo').find().toArray((err, result) => { + if (err) throw err; + const items = result[0].items[req.query.category]; + items.sort((a, b) => a.price - b.price) // фильтр по возрастанию по цене + res.send(items); + }); + } else if (!req.query.option && req.query.category && req.query.sorting === 'descending') { + dbo.collection('storeInfo').find().toArray((err, result) => { + if (err) throw err; + const items = result[0].items[req.query.category]; + items.sort((a, b) => b.price - a.price) // фильтр по убыванию по цене + res.send(items); + }); } else if (!req.query.option && req.query.category) { dbo.collection('storeInfo').find().toArray((err, result) => { if (err) throw err; @@ -45,18 +54,18 @@ function getItemsRoute(req, res, db) { res.send('Товары в этой категории не найдены или такой категории нет') } }) - } else if (!req.query.option && req.query.sortByAll === 'ascending') { + } else if (req.query.option && req.query.sorting === 'ascending') { dbo.collection('storeInfo').find().toArray((err, result) => { if (err) throw err; const items = result[0].items; - Object.values(items).forEach(arr => arr.sort((a, b) => a.price - b.price)) // фильтр по возрастанию + Object.values(items).forEach(arr => arr.sort((a, b) => a.price - b.price)) // фильтр по возрастанию по цене res.send(items); }); - } else if (!req.query.option && req.query.sortByAll === 'descending') { + } else if (req.query.option && req.query.sorting === 'descending') { dbo.collection('storeInfo').find().toArray((err, result) => { if (err) throw err; const items = result[0].items; - Object.values(items).forEach(arr => arr.sort((a, b) => a.price + b.price)) // фильтр по убыванию + Object.values(items).forEach(arr => arr.sort((a, b) => b.price - a.price)) // фильтр по убыванию по цене res.send(items); }) } else { @@ -129,4 +138,4 @@ module.exports = function (server, db) { server.get('/my-orders', (req, res) => myOrdersRoute(req, res, db)); server.get('/product/:id', (req, res) => onePageItemRoute(req, res, db)); server.get('/store-api', (req, res) => getItemsRoute(req, res, db)); -} \ No newline at end of file +} diff --git a/dist/public/img/service-icons/fortnite.svg b/dist/public/img/service-icons/fortnite.svg new file mode 100644 index 0000000..56d1ce9 --- /dev/null +++ b/dist/public/img/service-icons/fortnite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/public/js/bundle.js b/dist/public/js/bundle.js index f8c6727..d61a3c5 100644 --- a/dist/public/js/bundle.js +++ b/dist/public/js/bundle.js @@ -3906,7 +3906,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"CategoryComponent\", function() { return CategoryComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/js/core/component.js\");\n/* harmony import */ var _services_api_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api.service */ \"./src/js/services/api.service.js\");\n/* harmony import */ var _templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../templates/itemsOne.template */ \"./src/js/templates/itemsOne.template.js\");\n/* harmony import */ var _templates_items_template__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../templates/items.template */ \"./src/js/templates/items.template.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n\n\nvar CategoryComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(CategoryComponent, _Component);\n\n function CategoryComponent(id, _ref) {\n var _this;\n\n var items = _ref.items;\n\n _classCallCheck(this, CategoryComponent);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(CategoryComponent).call(this, id));\n _this.items = items;\n return _this;\n }\n\n _createClass(CategoryComponent, [{\n key: \"init\",\n value: function init() {\n if (this.$el) {\n this.$el.addEventListener('click', buttonHandler.bind(this));\n\n if (localStorage.getItem('category')) {\n localStorage.removeItem('sortByAll', 'true'); // установка значения для компонента Filter\n\n var category = localStorage.getItem('category'),\n bounded = breadcrumbActiveLink.bind(this);\n document.querySelector('#loader').classList.add('hide');\n bounded(category); // <- ф-я окраски li по нажатию на breadcrumb\n // отображем данные если был нажат breadcrumb\n\n (function _callee() {\n var fData, html;\n return regeneratorRuntime.async(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItemsOne(category));\n\n case 2:\n fData = _context.sent;\n html = Object(_templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItemsOne\"])(category, fData);\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);\n\n case 5:\n case \"end\":\n return _context.stop();\n }\n }\n });\n })(); // очищаем ключ category чтобы данные не показывались всегда\n\n\n localStorage.removeItem('category');\n }\n }\n }\n }]);\n\n return CategoryComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\nfunction buttonHandler(e) {\n var category, fData, html, _fData, categories, _html;\n\n return regeneratorRuntime.async(function buttonHandler$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n e.preventDefault();\n\n if (!(e.target.dataset.category && e.target.dataset.category != 'all')) {\n _context2.next = 14;\n break;\n }\n\n localStorage.removeItem('sortByAll'); // установка значения для компонента Filter\n\n this.items.onShow();\n btnActiveLink(e);\n category = e.target.dataset.category.toLowerCase();\n _context2.next = 8;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItemsOne(category));\n\n case 8:\n fData = _context2.sent;\n html = Object(_templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItemsOne\"])(category, fData);\n this.items.onHide();\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);\n _context2.next = 25;\n break;\n\n case 14:\n if (!(e.target.dataset.category === 'all')) {\n _context2.next = 25;\n break;\n }\n\n localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter\n\n this.items.onShow();\n btnActiveLink(e);\n _context2.next = 20;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems());\n\n case 20:\n _fData = _context2.sent;\n categories = Object.keys(_fData);\n _html = Object(_templates_items_template__WEBPACK_IMPORTED_MODULE_3__[\"renderItems\"])(categories, _fData);\n this.items.onHide();\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', _html);\n\n case 25:\n case \"end\":\n return _context2.stop();\n }\n }\n }, null, this);\n} // Окраска li по нажатию\n\n\nfunction btnActiveLink(e) {\n Array.from(e.target.parentNode.parentNode.querySelectorAll('#catLi')).forEach(function (li) {\n return li.classList.remove('active');\n });\n e.target.classList.add('active');\n} // Окраска li по нажатию на breadcrumb\n\n\nfunction breadcrumbActiveLink(category) {\n var links = this.$el.querySelectorAll('#catLi');\n Array.from(links).forEach(function (li) {\n return li.classList.remove('active');\n });\n Array.from(links).forEach(function (li) {\n return li.dataset.category.toLowerCase() === category ? li.classList.add('active') : false;\n });\n}\n\n//# sourceURL=webpack:///./src/js/components/category.component.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"CategoryComponent\", function() { return CategoryComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/js/core/component.js\");\n/* harmony import */ var _services_api_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api.service */ \"./src/js/services/api.service.js\");\n/* harmony import */ var _templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../templates/itemsOne.template */ \"./src/js/templates/itemsOne.template.js\");\n/* harmony import */ var _templates_items_template__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../templates/items.template */ \"./src/js/templates/items.template.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n\n\nvar CategoryComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(CategoryComponent, _Component);\n\n function CategoryComponent(id, _ref, _ref2) {\n var _this;\n\n var items = _ref.items;\n var filter = _ref2.filter;\n\n _classCallCheck(this, CategoryComponent);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(CategoryComponent).call(this, id));\n _this.items = items;\n _this.filter = filter;\n return _this;\n }\n\n _createClass(CategoryComponent, [{\n key: \"init\",\n value: function init() {\n if (this.$el) {\n this.$el.addEventListener('click', buttonHandler.bind(this));\n\n if (localStorage.getItem('category')) {\n localStorage.removeItem('sortByAll', 'true'); // установка значения для компонента Filter\n\n var category = localStorage.getItem('category'),\n bounded = breadcrumbActiveLink.bind(this);\n document.querySelector('#loader').classList.add('hide');\n bounded(category); // <- ф-я окраски li по нажатию на breadcrumb\n // отображем данные если был нажат breadcrumb\n\n (function _callee() {\n var fData, html;\n return regeneratorRuntime.async(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItemsOne(category));\n\n case 2:\n fData = _context.sent;\n html = Object(_templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItemsOne\"])(category, fData);\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);\n\n case 5:\n case \"end\":\n return _context.stop();\n }\n }\n });\n })(); // очищаем ключ category чтобы данные не показывались всегда\n\n\n localStorage.removeItem('category');\n }\n }\n }\n }]);\n\n return CategoryComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\nfunction buttonHandler(e) {\n var category, fData, html, _fData, categories, _html;\n\n return regeneratorRuntime.async(function buttonHandler$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n e.preventDefault();\n\n if (!(e.target.dataset.category && e.target.dataset.category != 'all')) {\n _context2.next = 15;\n break;\n }\n\n localStorage.removeItem('sortByAll'); // установка значения для компонента Filter\n\n this.filter.clearChecked();\n this.items.onShow();\n btnActiveLink(e);\n category = e.target.dataset.category.toLowerCase();\n _context2.next = 9;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItemsOne(category));\n\n case 9:\n fData = _context2.sent;\n html = Object(_templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItemsOne\"])(category, fData);\n this.items.onHide();\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);\n _context2.next = 27;\n break;\n\n case 15:\n if (!(e.target.dataset.category === 'all')) {\n _context2.next = 27;\n break;\n }\n\n localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter\n\n this.filter.clearChecked();\n this.items.onShow();\n btnActiveLink(e);\n _context2.next = 22;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems());\n\n case 22:\n _fData = _context2.sent;\n categories = Object.keys(_fData);\n _html = Object(_templates_items_template__WEBPACK_IMPORTED_MODULE_3__[\"renderItems\"])(categories, _fData);\n this.items.onHide();\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', _html);\n\n case 27:\n case \"end\":\n return _context2.stop();\n }\n }\n }, null, this);\n} // Окраска li по нажатию\n\n\nfunction btnActiveLink(e) {\n Array.from(e.target.parentNode.parentNode.querySelectorAll('#catLi')).forEach(function (li) {\n return li.classList.remove('active');\n });\n e.target.classList.add('active');\n localStorage.setItem('currentCategory', e.target.dataset.category.toLowerCase());\n} // Окраска li по нажатию на breadcrumb\n\n\nfunction breadcrumbActiveLink(category) {\n var links = this.$el.querySelectorAll('#catLi');\n Array.from(links).forEach(function (li) {\n return li.classList.remove('active');\n });\n Array.from(links).forEach(function (li) {\n return li.dataset.category.toLowerCase() === category ? li.classList.add('active') : false;\n });\n Array.from(links).forEach(function (li) {\n return li.dataset.category.toLowerCase() === category ? localStorage.setItem('currentCategory', li.dataset.category.toLowerCase()) : false;\n });\n}\n\n//# sourceURL=webpack:///./src/js/components/category.component.js?"); /***/ }), @@ -3918,7 +3918,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"FilterComponent\", function() { return FilterComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/js/core/component.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\nvar FilterComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(FilterComponent, _Component);\n\n function FilterComponent(id) {\n _classCallCheck(this, FilterComponent);\n\n return _possibleConstructorReturn(this, _getPrototypeOf(FilterComponent).call(this, id));\n }\n\n _createClass(FilterComponent, [{\n key: \"init\",\n value: function init() {\n if (this.$el) {\n this.$el.addEventListener('click', sortByAllHandler.bind(this));\n this.$el.addEventListener('click', sortByOneHandler.bind(this));\n }\n }\n }]);\n\n return FilterComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\nfunction sortByAllHandler(e) {\n if (localStorage.getItem('sortByAll')) {\n if (e.target.id) {\n var sortBy = e.target.id;\n console.log(sortBy, 'By all');\n }\n }\n}\n\nfunction sortByOneHandler(e) {\n if (!localStorage.getItem('sortByAll')) {\n if (e.target.id) {\n var sortBy = e.target.id;\n console.log(sortBy, 'By one');\n }\n }\n}\n\n//# sourceURL=webpack:///./src/js/components/filter.component.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"FilterComponent\", function() { return FilterComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/js/core/component.js\");\n/* harmony import */ var _services_api_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api.service */ \"./src/js/services/api.service.js\");\n/* harmony import */ var _templates_items_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../templates/items.template */ \"./src/js/templates/items.template.js\");\n/* harmony import */ var _templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../templates/itemsOne.template */ \"./src/js/templates/itemsOne.template.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n\n\nvar FilterComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(FilterComponent, _Component);\n\n function FilterComponent(id, _ref) {\n var _this;\n\n var items = _ref.items;\n\n _classCallCheck(this, FilterComponent);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(FilterComponent).call(this, id));\n _this.items = items;\n return _this;\n }\n\n _createClass(FilterComponent, [{\n key: \"init\",\n value: function init() {\n if (this.$el) {\n this.$el.addEventListener('click', sortByAllHandler.bind(this));\n this.$el.addEventListener('click', sortByOneHandler.bind(this));\n }\n }\n }, {\n key: \"clearChecked\",\n value: function clearChecked() {\n if (this.$el) {\n var options = this.$el.querySelectorAll('.filter-options form input');\n Array.from(options).forEach(function (option) {\n return option.checked = false;\n });\n }\n }\n }]);\n\n return FilterComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\nfunction sortByAllHandler(e) {\n var sorting, fData, categories, html;\n return regeneratorRuntime.async(function sortByAllHandler$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n if (!localStorage.getItem('sortByAll')) {\n _context.next = 11;\n break;\n }\n\n if (!e.target.id) {\n _context.next = 11;\n break;\n }\n\n sorting = e.target.id;\n this.items.onShow();\n _context.next = 6;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems(sorting));\n\n case 6:\n fData = _context.sent;\n categories = Object.keys(fData);\n html = Object(_templates_items_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItems\"])(categories, fData);\n this.items.onHide();\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);\n\n case 11:\n case \"end\":\n return _context.stop();\n }\n }\n }, null, this);\n}\n\nfunction sortByOneHandler(e) {\n var sorting, category, fData, html;\n return regeneratorRuntime.async(function sortByOneHandler$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n if (localStorage.getItem('sortByAll')) {\n _context2.next = 11;\n break;\n }\n\n if (!e.target.id) {\n _context2.next = 11;\n break;\n }\n\n sorting = e.target.id;\n this.items.onShow();\n category = localStorage.getItem('currentCategory');\n _context2.next = 7;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItemsOne(category, sorting));\n\n case 7:\n fData = _context2.sent;\n html = Object(_templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_3__[\"renderItemsOne\"])(category, fData);\n this.items.onHide();\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);\n\n case 11:\n case \"end\":\n return _context2.stop();\n }\n }\n }, null, this);\n}\n\n//# sourceURL=webpack:///./src/js/components/filter.component.js?"); /***/ }), @@ -3990,7 +3990,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/header.component.js */ \"./src/js/components/header.component.js\");\n/* harmony import */ var _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/information.component.js */ \"./src/js/components/information.component.js\");\n/* harmony import */ var _components_cart_component_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/cart.component.js */ \"./src/js/components/cart.component.js\");\n/* harmony import */ var _components_loader_component_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/loader.component.js */ \"./src/js/components/loader.component.js\");\n/* harmony import */ var _components_items_component_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/items.component.js */ \"./src/js/components/items.component.js\");\n/* harmony import */ var _components_category_component_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/category.component.js */ \"./src/js/components/category.component.js\");\n/* harmony import */ var _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/breadcrumb.component.js */ \"./src/js/components/breadcrumb.component.js\");\n/* harmony import */ var _components_filter_component_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/filter.component.js */ \"./src/js/components/filter.component.js\");\n\n\n\n\n\n\n\n\nvar header = new _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__[\"HeaderComponent\"]('header');\nvar loader = new _components_loader_component_js__WEBPACK_IMPORTED_MODULE_3__[\"LoaderComponent\"]('loader');\nvar information = new _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__[\"InformationComponent\"]('information');\nvar cart = new _components_cart_component_js__WEBPACK_IMPORTED_MODULE_2__[\"CartComponent\"]('cart');\nvar items = new _components_items_component_js__WEBPACK_IMPORTED_MODULE_4__[\"ItemsComponent\"]('items', {\n loader: loader\n});\nvar category = new _components_category_component_js__WEBPACK_IMPORTED_MODULE_5__[\"CategoryComponent\"]('category', {\n items: items\n});\nvar filter = new _components_filter_component_js__WEBPACK_IMPORTED_MODULE_7__[\"FilterComponent\"]('filter');\nvar breadcumb = new _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_6__[\"BreadcrumbComponent\"]('breadcrumb');\n\n//# sourceURL=webpack:///./src/js/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/header.component.js */ \"./src/js/components/header.component.js\");\n/* harmony import */ var _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/information.component.js */ \"./src/js/components/information.component.js\");\n/* harmony import */ var _components_cart_component_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/cart.component.js */ \"./src/js/components/cart.component.js\");\n/* harmony import */ var _components_loader_component_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/loader.component.js */ \"./src/js/components/loader.component.js\");\n/* harmony import */ var _components_items_component_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/items.component.js */ \"./src/js/components/items.component.js\");\n/* harmony import */ var _components_category_component_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/category.component.js */ \"./src/js/components/category.component.js\");\n/* harmony import */ var _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/breadcrumb.component.js */ \"./src/js/components/breadcrumb.component.js\");\n/* harmony import */ var _components_filter_component_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/filter.component.js */ \"./src/js/components/filter.component.js\");\n\n\n\n\n\n\n\n\nvar header = new _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__[\"HeaderComponent\"]('header');\nvar loader = new _components_loader_component_js__WEBPACK_IMPORTED_MODULE_3__[\"LoaderComponent\"]('loader');\nvar information = new _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__[\"InformationComponent\"]('information');\nvar cart = new _components_cart_component_js__WEBPACK_IMPORTED_MODULE_2__[\"CartComponent\"]('cart');\nvar items = new _components_items_component_js__WEBPACK_IMPORTED_MODULE_4__[\"ItemsComponent\"]('items', {\n loader: loader\n});\nvar filter = new _components_filter_component_js__WEBPACK_IMPORTED_MODULE_7__[\"FilterComponent\"]('filter', {\n items: items\n});\nvar category = new _components_category_component_js__WEBPACK_IMPORTED_MODULE_5__[\"CategoryComponent\"]('category', {\n items: items\n}, {\n filter: filter\n});\nvar breadcumb = new _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_6__[\"BreadcrumbComponent\"]('breadcrumb');\n\n//# sourceURL=webpack:///./src/js/index.js?"); /***/ }), @@ -4002,7 +4002,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _com /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiService\", function() { return apiService; });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nvar axios = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n\nvar API_TOKEN = 'yYNfW8ynVO18L1TW5qIkILM1WtWgrVZz';\n\nvar ApiService =\n/*#__PURE__*/\nfunction () {\n function ApiService(baseUrl) {\n _classCallCheck(this, ApiService);\n\n this.url = baseUrl;\n }\n\n _createClass(ApiService, [{\n key: \"getItems\",\n value: function getItems() {\n var request;\n return regeneratorRuntime.async(function getItems$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n _context.prev = 0;\n request = \"\".concat(this.url, \"store-api?auth=\").concat(API_TOKEN, \"&option=all\");\n return _context.abrupt(\"return\", useRequest(request));\n\n case 5:\n _context.prev = 5;\n _context.t0 = _context[\"catch\"](0);\n console.error(_context.t0);\n\n case 8:\n case \"end\":\n return _context.stop();\n }\n }\n }, null, this, [[0, 5]]);\n }\n }, {\n key: \"getItemsOne\",\n value: function getItemsOne(category) {\n var request;\n return regeneratorRuntime.async(function getItemsOne$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n _context2.prev = 0;\n request = \"\".concat(this.url, \"store-api?auth=\").concat(API_TOKEN, \"&category=\").concat(category);\n return _context2.abrupt(\"return\", useRequest(request));\n\n case 5:\n _context2.prev = 5;\n _context2.t0 = _context2[\"catch\"](0);\n console.error(_context2.t0);\n\n case 8:\n case \"end\":\n return _context2.stop();\n }\n }\n }, null, this, [[0, 5]]);\n }\n }]);\n\n return ApiService;\n}();\n\nfunction useRequest(request) {\n var response;\n return regeneratorRuntime.async(function useRequest$(_context3) {\n while (1) {\n switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return regeneratorRuntime.awrap(axios.get(request));\n\n case 2:\n response = _context3.sent;\n _context3.next = 5;\n return regeneratorRuntime.awrap(JSON.parse(response.request.response));\n\n case 5:\n return _context3.abrupt(\"return\", _context3.sent);\n\n case 6:\n case \"end\":\n return _context3.stop();\n }\n }\n });\n}\n\nvar apiService = new ApiService('http://localhost:3000/', API_TOKEN);\n\n//# sourceURL=webpack:///./src/js/services/api.service.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiService\", function() { return apiService; });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nvar axios = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n\nvar API_TOKEN = 'yYNfW8ynVO18L1TW5qIkILM1WtWgrVZz';\n\nvar ApiService =\n/*#__PURE__*/\nfunction () {\n function ApiService(baseUrl) {\n _classCallCheck(this, ApiService);\n\n this.url = baseUrl;\n }\n\n _createClass(ApiService, [{\n key: \"getItems\",\n value: function getItems(sorting) {\n var request, _request;\n\n return regeneratorRuntime.async(function getItems$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n _context.prev = 0;\n\n if (!sorting) {\n _context.next = 6;\n break;\n }\n\n request = \"\".concat(this.url, \"store-api?auth=\").concat(API_TOKEN, \"&option=all&sorting=\").concat(sorting);\n return _context.abrupt(\"return\", useRequest(request));\n\n case 6:\n _request = \"\".concat(this.url, \"store-api?auth=\").concat(API_TOKEN, \"&option=all\");\n return _context.abrupt(\"return\", useRequest(_request));\n\n case 8:\n _context.next = 13;\n break;\n\n case 10:\n _context.prev = 10;\n _context.t0 = _context[\"catch\"](0);\n console.error(_context.t0);\n\n case 13:\n case \"end\":\n return _context.stop();\n }\n }\n }, null, this, [[0, 10]]);\n }\n }, {\n key: \"getItemsOne\",\n value: function getItemsOne(category, sorting) {\n var request, _request2;\n\n return regeneratorRuntime.async(function getItemsOne$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n _context2.prev = 0;\n\n if (!sorting) {\n _context2.next = 6;\n break;\n }\n\n request = \"\".concat(this.url, \"store-api?auth=\").concat(API_TOKEN, \"&category=\").concat(category, \"&sorting=\").concat(sorting);\n return _context2.abrupt(\"return\", useRequest(request));\n\n case 6:\n _request2 = \"\".concat(this.url, \"store-api?auth=\").concat(API_TOKEN, \"&category=\").concat(category);\n return _context2.abrupt(\"return\", useRequest(_request2));\n\n case 8:\n _context2.next = 13;\n break;\n\n case 10:\n _context2.prev = 10;\n _context2.t0 = _context2[\"catch\"](0);\n console.error(_context2.t0);\n\n case 13:\n case \"end\":\n return _context2.stop();\n }\n }\n }, null, this, [[0, 10]]);\n }\n }]);\n\n return ApiService;\n}();\n\nfunction useRequest(request) {\n var response;\n return regeneratorRuntime.async(function useRequest$(_context3) {\n while (1) {\n switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return regeneratorRuntime.awrap(axios.get(request));\n\n case 2:\n response = _context3.sent;\n _context3.next = 5;\n return regeneratorRuntime.awrap(JSON.parse(response.request.response));\n\n case 5:\n return _context3.abrupt(\"return\", _context3.sent);\n\n case 6:\n case \"end\":\n return _context3.stop();\n }\n }\n });\n}\n\nvar apiService = new ApiService('http://localhost:3000/', API_TOKEN);\n\n//# sourceURL=webpack:///./src/js/services/api.service.js?"); /***/ }), diff --git a/dist/views/index.pug b/dist/views/index.pug index 70b910a..668570f 100644 --- a/dist/views/index.pug +++ b/dist/views/index.pug @@ -102,7 +102,7 @@ main.main-section #loader.progress .indeterminate(style="width: 40%") #roster - #pagination.items-pagination + #pagination.items-pagination.hide .divider ul.pagination li.disabled diff --git a/src/js/components/category.component.js b/src/js/components/category.component.js index 8e3eb57..54887df 100644 --- a/src/js/components/category.component.js +++ b/src/js/components/category.component.js @@ -4,9 +4,10 @@ import { renderItemsOne } from "../templates/itemsOne.template"; import { renderItems } from "../templates/items.template"; export class CategoryComponent extends Component { - constructor(id, {items}) { + constructor(id, {items}, {filter}) { super(id); this.items = items; + this.filter = filter; } init() { @@ -41,6 +42,7 @@ async function buttonHandler(e) { if (e.target.dataset.category && e.target.dataset.category != 'all') { localStorage.removeItem('sortByAll'); // установка значения для компонента Filter + this.filter.clearChecked(); this.items.onShow(); btnActiveLink(e); @@ -53,6 +55,7 @@ async function buttonHandler(e) { } else if (e.target.dataset.category === 'all') { localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter + this.filter.clearChecked(); this.items.onShow(); btnActiveLink(e); @@ -69,6 +72,7 @@ async function buttonHandler(e) { function btnActiveLink(e) { Array.from(e.target.parentNode.parentNode.querySelectorAll('#catLi')).forEach(li => li.classList.remove('active')); e.target.classList.add('active'); + localStorage.setItem('currentCategory', e.target.dataset.category.toLowerCase()); } // Окраска li по нажатию на breadcrumb @@ -76,4 +80,5 @@ function breadcrumbActiveLink(category) { const links = this.$el.querySelectorAll('#catLi'); Array.from(links).forEach(li => li.classList.remove('active')); Array.from(links).forEach(li => li.dataset.category.toLowerCase() === category ? li.classList.add('active') : false); + Array.from(links).forEach(li => li.dataset.category.toLowerCase() === category ? localStorage.setItem('currentCategory', li.dataset.category.toLowerCase()) : false); } \ No newline at end of file diff --git a/src/js/components/filter.component.js b/src/js/components/filter.component.js index 299b096..69861e3 100644 --- a/src/js/components/filter.component.js +++ b/src/js/components/filter.component.js @@ -1,8 +1,12 @@ import { Component } from "../core/component"; +import { apiService } from "../services/api.service"; +import { renderItems } from "../templates/items.template"; +import { renderItemsOne } from "../templates/itemsOne.template"; export class FilterComponent extends Component { - constructor(id) { + constructor(id, {items}) { super(id); + this.items = items; } init() { @@ -11,22 +15,45 @@ export class FilterComponent extends Component { this.$el.addEventListener('click', sortByOneHandler.bind(this)); } } -} -function sortByAllHandler(e) { - if (localStorage.getItem('sortByAll')) { - if (e.target.id) { - const sortBy = e.target.id; - console.log(sortBy, 'By all'); + clearChecked() { + if (this.$el) { + const options = this.$el.querySelectorAll('.filter-options form input'); + Array.from(options).forEach(option => option.checked = false); } } } -function sortByOneHandler(e) { +async function sortByAllHandler(e) { + if (localStorage.getItem('sortByAll')) { + if (e.target.id) { + const sorting = e.target.id; + + this.items.onShow(); + + const fData = await apiService.getItems(sorting), + categories = Object.keys(fData), + html = renderItems(categories, fData); + + this.items.onHide(); + document.querySelector('#roster').insertAdjacentHTML('afterbegin', html); + } + } +} + +async function sortByOneHandler(e) { if (!localStorage.getItem('sortByAll')) { if (e.target.id) { - const sortBy = e.target.id; - console.log(sortBy, 'By one'); + const sorting = e.target.id; + + this.items.onShow(); + + const category = localStorage.getItem('currentCategory'), + fData = await apiService.getItemsOne(category, sorting), + html = renderItemsOne(category, fData); + + this.items.onHide(); + document.querySelector('#roster').insertAdjacentHTML('afterbegin', html); } } } \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js index b5c9474..7f9a0c0 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -12,6 +12,6 @@ const loader = new LoaderComponent('loader'); const information = new InformationComponent('information'); const cart = new CartComponent('cart'); const items = new ItemsComponent('items', {loader}); -const category = new CategoryComponent('category', {items}); -const filter = new FilterComponent('filter'); +const filter = new FilterComponent('filter', {items}); +const category = new CategoryComponent('category', {items}, {filter}); const breadcumb = new BreadcrumbComponent('breadcrumb'); \ No newline at end of file diff --git a/src/js/services/api.service.js b/src/js/services/api.service.js index afe9b34..d2c99c1 100644 --- a/src/js/services/api.service.js +++ b/src/js/services/api.service.js @@ -6,19 +6,30 @@ class ApiService { this.url = baseUrl; } - async getItems() { + async getItems(sorting) { try { - const request = `${this.url}store-api?auth=${API_TOKEN}&option=all`; - return useRequest(request); + if (sorting) { + const request = `${this.url}store-api?auth=${API_TOKEN}&option=all&sorting=${sorting}`; + return useRequest(request); + } else { + const request = `${this.url}store-api?auth=${API_TOKEN}&option=all`; + return useRequest(request); + } + } catch (err) { console.error(err); } } - async getItemsOne(category) { + async getItemsOne(category, sorting) { try { - const request = `${this.url}store-api?auth=${API_TOKEN}&category=${category}`; - return useRequest(request); + if (sorting) { + const request = `${this.url}store-api?auth=${API_TOKEN}&category=${category}&sorting=${sorting}`; + return useRequest(request); + } else { + const request = `${this.url}store-api?auth=${API_TOKEN}&category=${category}`; + return useRequest(request); + } } catch (err) { console.error(err); }