Product page

config/routes/routes.js

@@ -1,14 +1,15 @@
 const MongoClient = require('mongodb').MongoClient;
+const dbName = 'digital_store';
 const routes = {
     // Index
     indexRoute: function (req, res) {
-        MongoClient.connect('mongodb://localhost:27017/digital_store', {
+        MongoClient.connect(`mongodb://localhost:27017/${dbName}`, {
             useNewUrlParser: true,
             useUnifiedTopology: true
         }, (err, db) => {
             if (err) throw err;
 
-            const dbo = db.db('digital_store');
+            const dbo = db.db(dbName);
             dbo.collection('storeInfo').find().toArray((err, result) => {
                 if (err) throw err;
                 const array = Object.keys(result[0].items)
@@ -62,13 +63,13 @@ const routes = {
 
         if (req.query.auth === queryOptions.auth) {
             if (req.query.option === queryOptions.option) {
-                MongoClient.connect('mongodb://localhost:27017/digital_store', {
+                MongoClient.connect(`mongodb://localhost:27017/${dbName}`, {
                     useNewUrlParser: true,
                     useUnifiedTopology: true
                 }, (err, db) => {
                     if (err) throw err;
 
-                    const dbo = db.db('digital_store');
+                    const dbo = db.db(dbName);
                     dbo.collection('storeInfo').find().toArray((err, result) => {
                         if (err) throw err;
                         res.send(result[0].items);
@@ -76,13 +77,13 @@ const routes = {
                     })
                 });
             } else if (!req.query.option && req.query.category) {
-                MongoClient.connect('mongodb://localhost:27017/digital_store', {
+                MongoClient.connect(`mongodb://localhost:27017/${dbName}`, {
                     useNewUrlParser: true,
                     useUnifiedTopology: true
                 }, (err, db) => {
                     if (err) throw err;
 
-                    const dbo = db.db('digital_store');
+                    const dbo = db.db(dbName);
                     dbo.collection('storeInfo').find().toArray((err, result) => {
                         if (err) throw err;
                         const query = result[0].items[req.query.category]
@@ -100,6 +101,45 @@ const routes = {
         } else {
             res.send('Неверный токен');
         }
+    },
+
+    // OnePageItem
+    onePageItem: function (req, res) {
+        const query = {
+            id: req.params.id
+        }
+        MongoClient.connect(`mongodb://localhost:27017/${dbName}`, {
+            useNewUrlParser: true,
+            useUnifiedTopology: true
+        }, (err, db) => {
+            if (err) throw err;
+
+            const dbo = db.db(dbName);
+            dbo.collection('storeInfo').find().toArray((err, result) => {
+                if (err) throw err;
+                const items = result[0].items;
+                const keys = Object.keys(result[0].items);
+
+                keys.forEach(key => {
+                    items[key].forEach(item => {
+                        if (item._id != undefined) {
+                            if (item._id == query.id) {
+                                res.render('product', {
+                                    title: item.title,
+                                    image: item.image,
+                                    count: item.count,
+                                    category: item.category[0].toUpperCase() + item.category.slice(1),
+                                    price: item.price,
+                                    description: item.description
+                                });
+                            } 
+                        }
+                    })
+                })        
+                db.close();
+            })
+        });
+
     }
 }
 
@@ -109,5 +149,6 @@ module.exports = function (server) {
     server.get('/contacts', routes.contactsRoute);
     server.get('/comments', routes.commentsRoute);
     server.get('/my-orders', routes.myOrdersRoute);
+    server.get('/product/:id', routes.onePageItem);
     server.get('/store-api', routes.getItemsRoute);
 }

config/server.js

@@ -4,6 +4,7 @@ const path = require('path');
 
 // Pug config
 server.use(express.static(path.join(__dirname, '../dist/public')));
+// server.use('/css', express.static(__dirname + '../dist/public/css'));
 server.set('view engine', 'pug');
 server.set('views', path.join(__dirname, '../dist/views'));
 

dist/views/assets/head.pug

@@ -6,9 +6,9 @@ html(lang='ru')
         // Materialize CSS
         link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css")
         // Style CSS
-        link(rel="stylesheet", href="./css/style.css")
+        link(rel="stylesheet", href="../css/style.css")
         // Media CSS
-        link(rel="stylesheet", href="./css/media.css")
+        link(rel="stylesheet", href="../css/media.css")
         // Material Icons
         link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons")
     body

dist/views/assets/templates/footer.pug

@@ -6,5 +6,5 @@ footer
 // Maretialize JS
 script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js')
 // Script JS
-script(src='./js/bundle.js')
+script(src='../js/bundle.js')
-script(src='./js/materialize.config.js')
+script(src='../js/materialize.config.js')

dist/views/assets/templates/modals/pay.pug

@@ -24,7 +24,7 @@
                 .payment-field
                   label(for='payment') Способ оплаты
                   select#payment(name='payment')
-                    option(value='qiwi' data-icon='./img/payments-icons/qiwi.svg') QIWI
+                    option(value='qiwi' data-icon='../img/payments-icons/qiwi.svg') QIWI
               .modal-content__purchase
                 button.purchase-btn.waves-effect.btn(type='submit' href='#') Перейти к оплате
 // Pay Modal END

dist/views/product.pug

@@ -0,0 +1,62 @@
+//- Head HTML
+include ./assets/head.pug
+//- Header Template
+include ./assets/templates/header.pug
+
+main.main-section
+  include ./assets/templates/modals/cart.pug
+  include ./assets/templates/modals/pay.pug
+  .container
+    .row
+      .col.s12
+        #product.product.background
+          .product-content
+            .product-breadcrumb
+              #breadcrumb.breadcrumb
+                ul
+                  li
+                    a(href='/') Главная
+                  li
+                    a(href='/') #{category}
+                  li #{title}
+              hr
+            .product-title.block-title
+              h1 #{title}
+            .product-info
+              .product-info__left
+                .product-left__pay
+                  img(src='../img/service-icons/'+image alt='#')
+                  button.waves-effect.waves-light.btn Купить
+                .product-info__cost
+                  .product-info__count
+                    span #{count} шт
+                  p Цена за 1шт.
+                  .product-info__price
+                    span #{price}
+              .product-info__right
+                .product-right__title
+                  span Описание:
+                  hr
+                  p #{description}
+                .product-right__content
+                  h2 Тип аккаунтов  #{category}
+                  p
+                    | Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos tempora quidem
+                    | velit facilis exercitationem eveniet porro vitae quisquam officia.
+                    | Explicabo, iure quis doloribus totam nihil esse minus, vero animi ex
+                    | corrupti ea officia, dolor fuga itaque ad deserunt quo. Sint!
+                  h2 Формат аккаунтов #{category}
+                  p Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, magni.
+                  hr
+                  h3 Рекомендации к покупке аккаунтов.
+                  p
+                    | Lorem ipsum dolor sit amet consectetur adipisicing elit. A saepe ad, atque
+                    | cum officia ullam similique repudiandae excepturi at accusamus hic deserunt
+                    | molestiae mollitia? Labore numquam officiis natus repellat fugit ipsum
+                    | nesciunt, nam officia? Sunt ut quod provident dolore architecto laborum ab
+                    | repellat ea sequi optio dolorum, tenetur quis eius rerum quibusdam nisi
+                    | minus, debitis non. Impedit molestiae beatae, fugit similique sit labore quo
+                    | incidunt id corporis quia officiis pariatur.
+
+//- Footer Template
+include ./assets/templates/footer.pug

src/js/components/category.component.js

@@ -20,13 +20,17 @@ async function buttonHandler(e) {
     e.preventDefault();
     if (e.target.dataset.category && e.target.dataset.category != 'all') {
         this.items.onShow();
+        activeLink(e);
+
         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();
+        activeLink(e);
         const fData = await apiService.getItems(),
                 categories = Object.keys(fData);
 
@@ -35,3 +39,8 @@ async function buttonHandler(e) {
         document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);
     }
 }
+
+function activeLink(e) {
+    e.target.parentNode.parentNode.querySelectorAll('li a').forEach(li => li.classList.remove('active'));
+    e.target.classList.add('active');
+}

src/js/templates/items.template.js

@@ -15,7 +15,7 @@ export function renderItems(categories, items) {
                                 <img src="./img/service-icons/${item.image}" alt="#">
                             </div>
                             <div class="list-title">
-                                <a href="/item/${item._id}">${item.title}</a>
+                                <a href="/product/${item._id}">${item.title}</a>
                             </div>
                         </div>
                         <div class="items-list__info">

src/js/templates/itemsOne.template.js

@@ -14,7 +14,7 @@ export function renderItemsOne(category, items) {
                                     <img src="./img/service-icons/${item.image}" alt="#">
                                 </div>
                                 <div class="list-title">
-                                    <a href="/item/${item._id}">${item.title}</a>
+                                    <a href="/product/${item._id}">${item.title}</a>
                                 </div>
                             </div>
                             <div class="items-list__info">