From 65b57dc819a0f6d9cc7824f1cff94212031920fd Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sun, 17 Nov 2019 16:14:49 +0300 Subject: [PATCH] Component Items --- config/routes/routes.js | 65 +++++++++++++++---- dist/public/js/bundle.js | 44 ++++++++++--- dist/views/index.pug | 23 ++----- package-lock.json | 14 ++++ package.json | 1 + src/js/components/category.component.js | 37 +++++++++++ src/js/components/items.component.js | 24 +++++-- src/js/core/component.js | 4 ++ src/js/index.js | 4 +- src/js/services/api.service.js | 14 +++- .../{item.template.js => items.template.js} | 4 +- src/js/templates/itemsOne.template.js | 50 ++++++++++++++ 12 files changed, 232 insertions(+), 52 deletions(-) create mode 100644 src/js/components/category.component.js rename src/js/templates/{item.template.js => items.template.js} (94%) create mode 100644 src/js/templates/itemsOne.template.js diff --git a/config/routes/routes.js b/config/routes/routes.js index 42523b0..ff04048 100644 --- a/config/routes/routes.js +++ b/config/routes/routes.js @@ -1,46 +1,64 @@ const MongoClient = require('mongodb').MongoClient; const routes = { // Index - indexRoute: function(req, res) { - res.render('index', { - pageName: 'index' + indexRoute: function (req, res) { + MongoClient.connect('mongodb://localhost:27017/digital_store', { + useNewUrlParser: true, + useUnifiedTopology: true + }, (err, db) => { + if (err) throw err; + + const dbo = db.db('digital_store'); + dbo.collection('storeInfo').find().toArray((err, result) => { + if (err) throw err; + const array = Object.keys(result[0].items) + const categories = array.map(cat => { + return cat[0].toUpperCase() + cat.slice(1); + }); + res.render('index', { + pageName: 'index', + categories + }); + db.close(); + }) }); - }, + }, // How-to-buy - howToBuyRoute: function(req, res) { + howToBuyRoute: function (req, res) { res.render('how-to-buy', { pageName: 'how-to-buy' }); }, // Contacts - contactsRoute: function(req, res) { + contactsRoute: function (req, res) { res.render('contacts', { pageName: 'contacts' }); }, // Comments - commentsRoute: function(req, res) { + commentsRoute: function (req, res) { res.render('comments', { pageName: 'comments' }); }, - + // My-orders - myOrdersRoute: function(req, res) { + myOrdersRoute: function (req, res) { res.render('my-orders', { pageName: 'my-orders' }); }, // GetItems - getItemsRoute: function(req, res) { + getItemsRoute: function (req, res) { const queryOptions = { auth: 'yYNfW8ynVO18L1TW5qIkILM1WtWgrVZz', option: 'all' } + res.setHeader("Cache-Control", "public, max-age=20"); if (req.query.auth === queryOptions.auth) { if (req.query.option === queryOptions.option) { @@ -57,20 +75,39 @@ const routes = { db.close(); }) }); + } else if (!req.query.option && req.query.category) { + MongoClient.connect('mongodb://localhost:27017/digital_store', { + useNewUrlParser: true, + useUnifiedTopology: true + }, (err, db) => { + if (err) throw err; + + const dbo = db.db('digital_store'); + dbo.collection('storeInfo').find().toArray((err, result) => { + if (err) throw err; + const query = result[0].items[req.query.category] + if (query != undefined) { + res.send(query); + } else { + res.send('Товары в этой категории не найдены или такой категории нет') + } + db.close(); + }) + }); } else { - res.send('Invalid'); + res.send('Запрос неверный'); } } else { - res.send('Invalid'); + res.send('Неверный токен'); } } } -module.exports = function(server) { +module.exports = function (server) { server.get('/', routes.indexRoute); server.get('/how-to-buy', routes.howToBuyRoute); server.get('/contacts', routes.contactsRoute); server.get('/comments', routes.commentsRoute); server.get('/my-orders', routes.myOrdersRoute); server.get('/store-api', routes.getItemsRoute); -} +} \ No newline at end of file diff --git a/dist/public/js/bundle.js b/dist/public/js/bundle.js index cbc0f3b..03258ac 100644 --- a/dist/public/js/bundle.js +++ b/dist/public/js/bundle.js @@ -3886,6 +3886,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ }), +/***/ "./src/js/components/category.component.js": +/*!*************************************************!*\ + !*** ./src/js/components/category.component.js ***! + \*************************************************/ +/*! exports provided: CategoryComponent */ +/***/ (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 }\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$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n e.preventDefault();\n\n if (!(e.target.dataset.category && e.target.dataset.category != 'all')) {\n _context.next = 12;\n break;\n }\n\n this.items.onShow();\n category = e.target.dataset.category.toLowerCase();\n _context.next = 6;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItemsOne(category));\n\n case 6:\n fData = _context.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 _context.next = 21;\n break;\n\n case 12:\n if (!(e.target.dataset.category === 'all')) {\n _context.next = 21;\n break;\n }\n\n this.items.onShow();\n _context.next = 16;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems());\n\n case 16:\n _fData = _context.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 21:\n case \"end\":\n return _context.stop();\n }\n }\n }, null, this);\n}\n\n//# sourceURL=webpack:///./src/js/components/category.component.js?"); + +/***/ }), + /***/ "./src/js/components/header.component.js": /*!***********************************************!*\ !*** ./src/js/components/header.component.js ***! @@ -3918,7 +3930,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__, \"ItemsComponent\", function() { return ItemsComponent; });\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_item_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../templates/item.template */ \"./src/js/templates/item.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\nvar ItemsComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(ItemsComponent, _Component);\n\n function ItemsComponent(id, _ref) {\n var _this;\n\n var loader = _ref.loader;\n\n _classCallCheck(this, ItemsComponent);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(ItemsComponent).call(this, id));\n _this.loader = loader;\n\n _this.loader.show();\n\n return _this;\n }\n\n _createClass(ItemsComponent, [{\n key: \"init\",\n value: function init() {\n var fData, categories, html;\n return regeneratorRuntime.async(function init$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n if (!this.$el) {\n _context.next = 8;\n break;\n }\n\n _context.next = 3;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems());\n\n case 3:\n fData = _context.sent;\n categories = Object.keys(fData);\n html = Object(_templates_item_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItem\"])(categories, fData);\n this.$el.querySelector('#roster').insertAdjacentHTML('afterbegin', html);\n this.loader.hide();\n\n case 8:\n case \"end\":\n return _context.stop();\n }\n }\n }, null, this);\n }\n }]);\n\n return ItemsComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n//# sourceURL=webpack:///./src/js/components/items.component.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ItemsComponent\", function() { return ItemsComponent; });\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\");\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\nvar ItemsComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(ItemsComponent, _Component);\n\n function ItemsComponent(id, _ref) {\n var _this;\n\n var loader = _ref.loader;\n\n _classCallCheck(this, ItemsComponent);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(ItemsComponent).call(this, id));\n _this.loader = loader;\n return _this;\n }\n\n _createClass(ItemsComponent, [{\n key: \"init\",\n value: function init() {\n var fData, categories, html;\n return regeneratorRuntime.async(function init$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n if (!this.$el) {\n _context.next = 7;\n break;\n }\n\n _context.next = 3;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems());\n\n case 3:\n fData = _context.sent;\n categories = Object.keys(fData);\n\n if (categories.length) {\n html = Object(_templates_items_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItems\"])(categories, fData);\n this.$el.querySelector('#roster').insertAdjacentHTML('afterbegin', html);\n } else {\n this.$el.querySelector('#roster').innerHTML = 'Товаров на сайте пока что нету';\n }\n\n this.loader.hide();\n\n case 7:\n case \"end\":\n return _context.stop();\n }\n }\n }, null, this);\n }\n }, {\n key: \"onHide\",\n value: function onHide() {\n this.$el.querySelector('#roster').innerHTML = '';\n this.loader.hide();\n }\n }, {\n key: \"onShow\",\n value: function onShow() {\n this.$el.querySelector('#roster').innerHTML = '';\n this.loader.show();\n }\n }]);\n\n return ItemsComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n//# sourceURL=webpack:///./src/js/components/items.component.js?"); /***/ }), @@ -3942,7 +3954,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__, \"Component\", function() { return Component; });\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 Component =\n/*#__PURE__*/\nfunction () {\n function Component(id) {\n _classCallCheck(this, Component);\n\n this.$el = document.getElementById(id);\n this.init();\n }\n\n _createClass(Component, [{\n key: \"init\",\n value: function init() {}\n }, {\n key: \"hide\",\n value: function hide() {\n this.$el ? this.$el.classList.add('hide') : false;\n }\n }, {\n key: \"show\",\n value: function show() {\n this.$el ? this.$el.classList.remove('hide') : false;\n }\n }]);\n\n return Component;\n}();\n\n//# sourceURL=webpack:///./src/js/core/component.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Component\", function() { return Component; });\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 Component =\n/*#__PURE__*/\nfunction () {\n function Component(id) {\n _classCallCheck(this, Component);\n\n this.$el = document.getElementById(id);\n this.init();\n }\n\n _createClass(Component, [{\n key: \"init\",\n value: function init() {}\n }, {\n key: \"onShow\",\n value: function onShow() {}\n }, {\n key: \"onHide\",\n value: function onHide() {}\n }, {\n key: \"hide\",\n value: function hide() {\n this.$el ? this.$el.classList.add('hide') : false;\n }\n }, {\n key: \"show\",\n value: function show() {\n this.$el ? this.$el.classList.remove('hide') : false;\n }\n }]);\n\n return Component;\n}();\n\n//# sourceURL=webpack:///./src/js/core/component.js?"); /***/ }), @@ -3954,7 +3966,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\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});\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\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});\n\n//# sourceURL=webpack:///./src/js/index.js?"); /***/ }), @@ -3966,19 +3978,31 @@ 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 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=yYNfW8ynVO18L1TW5qIkILM1WtWgrVZz&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\n return ApiService;\n}();\n\nfunction useRequest(request) {\n var response;\n return regeneratorRuntime.async(function useRequest$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return regeneratorRuntime.awrap(axios.get(request));\n\n case 2:\n response = _context2.sent;\n _context2.next = 5;\n return regeneratorRuntime.awrap(JSON.parse(response.request.response));\n\n case 5:\n return _context2.abrupt(\"return\", _context2.sent);\n\n case 6:\n case \"end\":\n return _context2.stop();\n }\n }\n });\n}\n\nvar apiService = new ApiService('http://localhost:3000/');\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() {\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?"); /***/ }), -/***/ "./src/js/templates/item.template.js": -/*!*******************************************!*\ - !*** ./src/js/templates/item.template.js ***! - \*******************************************/ -/*! exports provided: renderItem */ +/***/ "./src/js/templates/items.template.js": +/*!********************************************!*\ + !*** ./src/js/templates/items.template.js ***! + \********************************************/ +/*! exports provided: renderItems */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"renderItem\", function() { return renderItem; });\nfunction renderItem(categories, items) {\n var html = '';\n categories.forEach(function (category) {\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items[category].forEach(function (item) {\n if (item) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price, \"\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\\n \";\n }\n });\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/item.template.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"renderItems\", function() { return renderItems; });\nfunction renderItems(categories, items) {\n var html = '';\n categories.forEach(function (category) {\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items[category].forEach(function (item) {\n if (item) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price, \"\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\\n \";\n }\n });\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/items.template.js?"); + +/***/ }), + +/***/ "./src/js/templates/itemsOne.template.js": +/*!***********************************************!*\ + !*** ./src/js/templates/itemsOne.template.js ***! + \***********************************************/ +/*! exports provided: renderItemsOne */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"renderItemsOne\", function() { return renderItemsOne; });\nfunction renderItemsOne(category, items) {\n var html = '';\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items.forEach(function (item) {\n if (item) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price, \"\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\";\n }\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/itemsOne.template.js?"); /***/ }), diff --git a/dist/views/index.pug b/dist/views/index.pug index eed4326..4deeda5 100644 --- a/dist/views/index.pug +++ b/dist/views/index.pug @@ -63,21 +63,10 @@ main.main-section .category-items ul li - a.active(href='#') Все товары: - li - a(href='#') Steam - li - a(href='#') VKontakte - li - a(href='#') Origin - li - a(href='#') Warface - li - a(href='#') Uplay - li - a(href='#') Fortnite - li - a(href='#') Instagram + a.active(href='#' data-category='all') Все товары: + each val in categories + li + a(href='#' data-category=val) #{val} // Category Block END // Filter Block @@ -110,9 +99,9 @@ main.main-section .items-title.block-title i.material-icons list h2.small-title Список товаров: + #loader.progress + .indeterminate(style="width: 40%") #roster - #loader.progress.hide - .indeterminate(style="width: 40%") #pagination.items-pagination .divider ul.pagination diff --git a/package-lock.json b/package-lock.json index e5fc7a3..83a0da1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1261,6 +1261,15 @@ } } }, + "axios-cache-adapter": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/axios-cache-adapter/-/axios-cache-adapter-2.5.0.tgz", + "integrity": "sha512-YcMPdMoqmSLoZx7A5YD/PdYGuX6/Y9M2tHBhaIXvXrPeGgNnbW7nb3+uArWlT53WGHLfclnu2voMmS7jGXVg6A==", + "requires": { + "cache-control-esm": "1.0.0", + "lodash": "^4.17.11" + } + }, "babel-loader": { "version": "8.0.6", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz", @@ -1650,6 +1659,11 @@ "unset-value": "^1.0.0" } }, + "cache-control-esm": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/cache-control-esm/-/cache-control-esm-1.0.0.tgz", + "integrity": "sha512-Fa3UV4+eIk4EOih8FTV6EEsVKO0W5XWtNs6FC3InTfVz+EjurjPfDXY5wZDo/lxjDxg5RjNcurLyxEJBcEUx9g==" + }, "camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", diff --git a/package.json b/package.json index 2cd070f..ba7d6c2 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dependencies": { "@babel/polyfill": "^7.7.0", "axios": "^0.19.0", + "axios-cache-adapter": "^2.5.0", "express": "^4.17.1", "mongodb": "^3.3.4", "pug": "^2.0.4" diff --git a/src/js/components/category.component.js b/src/js/components/category.component.js new file mode 100644 index 0000000..c56df27 --- /dev/null +++ b/src/js/components/category.component.js @@ -0,0 +1,37 @@ +import { Component } from "../core/component"; +import { apiService } from "../services/api.service"; +import { renderItemsOne } from "../templates/itemsOne.template"; +import { renderItems } from "../templates/items.template"; + +export class CategoryComponent extends Component { + constructor(id, {items}) { + super(id); + this.items = items; + } + + init() { + if (this.$el) { + this.$el.addEventListener('click', buttonHandler.bind(this)); + } + } +} + +async function buttonHandler(e) { + e.preventDefault(); + if (e.target.dataset.category && e.target.dataset.category != 'all') { + this.items.onShow(); + const category = e.target.dataset.category.toLowerCase(); + const fData = await apiService.getItemsOne(category); + const html = renderItemsOne(category, fData); + this.items.onHide(); + document.querySelector('#roster').insertAdjacentHTML('afterbegin', html); + } else if (e.target.dataset.category === 'all') { + this.items.onShow(); + const fData = await apiService.getItems(), + categories = Object.keys(fData); + + const html = renderItems(categories, fData); + this.items.onHide(); + document.querySelector('#roster').insertAdjacentHTML('afterbegin', html); + } +} \ No newline at end of file diff --git a/src/js/components/items.component.js b/src/js/components/items.component.js index faa1801..bc9416f 100644 --- a/src/js/components/items.component.js +++ b/src/js/components/items.component.js @@ -1,12 +1,11 @@ import { Component } from "../core/component"; import { apiService } from "../services/api.service"; -import { renderItem } from "../templates/item.template"; +import { renderItems } from "../templates/items.template"; export class ItemsComponent extends Component { constructor(id, {loader}) { super(id); this.loader = loader; - this.loader.show(); } async init() { @@ -15,9 +14,22 @@ export class ItemsComponent extends Component { const fData = await apiService.getItems(), categories = Object.keys(fData); - const html = renderItem(categories, fData); - this.$el.querySelector('#roster').insertAdjacentHTML('afterbegin', html); - this.loader.hide(); + if (categories.length) { + const html = renderItems(categories, fData); + this.$el.querySelector('#roster').insertAdjacentHTML('afterbegin', html); + } else { + this.$el.querySelector('#roster').innerHTML = 'Товаров на сайте пока что нету'; + } + this.loader.hide(); } - } + } + + onHide() { + this.$el.querySelector('#roster').innerHTML = ''; + this.loader.hide(); + } + onShow() { + this.$el.querySelector('#roster').innerHTML = ''; + this.loader.show(); + } } \ No newline at end of file diff --git a/src/js/core/component.js b/src/js/core/component.js index d5ce536..f4cf53e 100644 --- a/src/js/core/component.js +++ b/src/js/core/component.js @@ -6,6 +6,10 @@ export class Component { init() {} + onShow() {} + + onHide() {} + hide() { this.$el ? this.$el.classList.add('hide') : false } diff --git a/src/js/index.js b/src/js/index.js index 7dac503..2755a7b 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -3,9 +3,11 @@ import { InformationComponent } from "./components/information.component.js"; import { CartComponent } from "./components/cart.component.js"; import { LoaderComponent } from "./components/loader.component.js"; import { ItemsComponent } from "./components/items.component.js"; +import { CategoryComponent } from "./components/category.component.js"; const header = new HeaderComponent('header'); const loader = new LoaderComponent('loader'); const information = new InformationComponent('information'); const cart = new CartComponent('cart'); -const items = new ItemsComponent('items', {loader}); \ No newline at end of file +const items = new ItemsComponent('items', {loader}); +const category = new CategoryComponent('category', {items}); \ No newline at end of file diff --git a/src/js/services/api.service.js b/src/js/services/api.service.js index 7cb7a31..afe9b34 100644 --- a/src/js/services/api.service.js +++ b/src/js/services/api.service.js @@ -1,4 +1,5 @@ const axios = require('axios'); +const API_TOKEN = 'yYNfW8ynVO18L1TW5qIkILM1WtWgrVZz'; class ApiService { constructor(baseUrl) { @@ -7,7 +8,16 @@ class ApiService { async getItems() { try { - const request = `${this.url}store-api?auth=yYNfW8ynVO18L1TW5qIkILM1WtWgrVZz&option=all`; + const request = `${this.url}store-api?auth=${API_TOKEN}&option=all`; + return useRequest(request); + } catch (err) { + console.error(err); + } + } + + async getItemsOne(category) { + try { + const request = `${this.url}store-api?auth=${API_TOKEN}&category=${category}`; return useRequest(request); } catch (err) { console.error(err); @@ -20,4 +30,4 @@ async function useRequest(request) { return await JSON.parse(response.request.response); } -export const apiService = new ApiService('http://localhost:3000/'); \ No newline at end of file +export const apiService = new ApiService('http://localhost:3000/', API_TOKEN); \ No newline at end of file diff --git a/src/js/templates/item.template.js b/src/js/templates/items.template.js similarity index 94% rename from src/js/templates/item.template.js rename to src/js/templates/items.template.js index 700d2b0..12aab40 100644 --- a/src/js/templates/item.template.js +++ b/src/js/templates/items.template.js @@ -1,4 +1,4 @@ -export function renderItem(categories, items) { +export function renderItems(categories, items) { let html = ''; @@ -15,7 +15,7 @@ export function renderItem(categories, items) { #
- ${item.title} + ${item.title}
diff --git a/src/js/templates/itemsOne.template.js b/src/js/templates/itemsOne.template.js new file mode 100644 index 0000000..cb4d176 --- /dev/null +++ b/src/js/templates/itemsOne.template.js @@ -0,0 +1,50 @@ +export function renderItemsOne(category, items) { + let html = ''; + + html += `
+

${category}

+
`; + + items.forEach(item => { + if (item) { + html += ` +
+
+
+ # +
+
+ ${item.title} +
+
+
+
+ ${item.count} шт. +
+
+ Цена за 1 шт. +
+
+ ${item.price} +
+
+ + +
+
+
+ ` + } else { + html += ` +
+
+
+ В этой категории пока что нету товаров +
+
+
`; + } + }); + return html; +} \ No newline at end of file