inner items and loader

config/routes/routes.js

@@ -73,4 +73,4 @@ module.exports = function(server) {
     server.get('/comments', routes.commentsRoute);
     server.get('/my-orders', routes.myOrdersRoute);
     server.get('/store-api', routes.getItemsRoute);
-}
+}

dist/public/css/style.css

@@ -79,6 +79,9 @@ hr {
 .hide {
     display: none;
 }
+#roster {
+    min-height: 300px;
+}
 
 
 /* Cart */
@@ -432,6 +435,7 @@ footer .container {
 
 .items-list__info {
     margin-top: 5px;
+    min-width: 435px;
 }
 
 .list-icon,
@@ -455,6 +459,7 @@ footer .container {
     background: #E7E7E7;
     text-align: center;
     border-radius: 15px;
+    min-width: 79px;
 }
 
 .list-price {

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')

dist/views/index.pug

@@ -110,78 +110,9 @@ main.main-section
             .items-title.block-title
               i.material-icons list
               h2.small-title Список товаров:
-            .items-category
+            #roster
-              h2.small-title Steam
+              #loader.progress.hide
-            .items-list
+                .indeterminate(style="width: 40%")
-              .items-list__name
-                .list-icon
-                  img(src='./img/service-icons/steam.svg' alt='#')
-                .list-title
-                  a(href='#') Cs:go(prime) + открыта тп + инв. 901руб Cs:go(prime) + открыта тп + инв. 901руб.
-              .items-list__info
-                .list-count
-                  span 1 шт.
-                .list-one
-                  span Цена за 1 шт.
-                .list-price
-                  span 145.00₽
-                .list-buttons
-                  button.btn-small.waves-effect.waves-light Купить
-                  button.btn-small.waves-effect.waves-light
-                    i.material-icons shopping_cart
-            .items-list
-              .items-list__name
-                .list-icon
-                  img(src='./img/service-icons/steam.svg' alt='#')
-                .list-title
-                  a(href='#') Cs:go(prime) + открыта тп + инв. 901руб Cs:go(prime) + открыта тп + инв. 901руб.
-              .items-list__info
-                .list-count
-                  span 1 шт.
-                .list-one
-                  span Цена за 1 шт.
-                .list-price
-                  span 145.00₽
-                .list-buttons
-                  button.btn-small.waves-effect.waves-light Купить
-                  button.btn-small.waves-effect.waves-light
-                    i.material-icons shopping_cart
-            .items-category
-              h2.small-title Origin
-            .items-list
-              .items-list__name
-                .list-icon
-                  img(src='./img/service-icons/origin.svg' alt='#')
-                .list-title
-                  a(href='#') Cs:go(prime) + открыта тп + инв. 901руб Cs:go(prime) + открыта тп + инв. 901руб.
-              .items-list__info
-                .list-count
-                  span 1 шт.
-                .list-one
-                  span Цена за 1 шт.
-                .list-price
-                  span 145.00₽
-                .list-buttons
-                  button.btn-small.waves-effect.waves-light Купить
-                  button.btn-small.waves-effect.waves-light
-                    i.material-icons shopping_cart
-            .items-list
-              .items-list__name
-                .list-icon
-                  img(src='./img/service-icons/origin.svg' alt='#')
-                .list-title
-                  a(href='#') Cs:go(prime) + открыта тп + инв. 901руб Cs:go(prime) + открыта тп + инв. 901руб.
-              .items-list__info
-                .list-count
-                  span 1 шт.
-                .list-one
-                  span Цена за 1 шт.
-                .list-price
-                  span 145.00₽
-                .list-buttons
-                  button.btn-small.waves-effect.waves-light Купить
-                  button.btn-small.waves-effect.waves-light
-                    i.material-icons shopping_cart
             #pagination.items-pagination
               .divider
               ul.pagination

package-lock.json

@@ -1245,6 +1245,22 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+        }
+      }
+    },
     "babel-loader": {
       "version": "8.0.6",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
@@ -2872,6 +2888,29 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "follow-redirects": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "requires": {
+        "debug": "=3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

package.json

@@ -20,6 +20,7 @@
   "homepage": "https://github.com/sergeyyarkov/digital-store#readme",
   "dependencies": {
     "@babel/polyfill": "^7.7.0",
+    "axios": "^0.19.0",
     "express": "^4.17.1",
     "mongodb": "^3.3.4",
     "pug": "^2.0.4"

src/js/components/items.component.js

@@ -0,0 +1,24 @@
+import { Component } from "../core/component";
+import { apiService } from "../services/api.service";
+import { renderItem } from "../templates/item.template";
+
+export class ItemsComponent extends Component {
+    constructor(id, {loader}) {
+        super(id);
+        this.loader = loader;
+        this.loader.show();
+    }
+
+    async init() {
+        
+        if (this.$el) {
+            const fData = await apiService.getItems(),
+                items = fData[0].items,
+                categories = Object.keys(items);
+            
+            const html = renderItem(categories, items);
+            this.$el.querySelector('#roster').insertAdjacentHTML('afterbegin', html);
+            this.loader.hide();
+        }
+    }   
+}

src/js/components/loader.component.js

@@ -0,0 +1,7 @@
+import { Component } from "../core/component";
+
+export class LoaderComponent extends Component {
+    constructor(id) {
+        super(id);
+    }
+}

src/js/index.js

@@ -1,7 +1,11 @@
 import { HeaderComponent } from "./components/header.component.js";
 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";
 
 const header = new HeaderComponent('header');
+const loader = new LoaderComponent('loader');
 const information = new InformationComponent('information');
-const cart = new CartComponent('cart');
+const cart = new CartComponent('cart');
+const items = new ItemsComponent('items', {loader});

src/js/services/api.service.js

@@ -0,0 +1,23 @@
+const axios = require('axios');
+
+class ApiService {
+    constructor(baseUrl) {
+        this.url = baseUrl;
+    }
+
+    async getItems() {
+        try {
+            const request = `${this.url}store-api?auth=yYNfW8ynVO18L1TW5qIkILM1WtWgrVZz&option=all`;
+            return useRequest(request);
+        } catch (err) {
+            console.error(err);
+        }
+    }
+}
+
+async function useRequest(request) {
+    const response = await axios.get(request);
+    return await JSON.parse(response.request.response);
+}
+
+export const apiService = new ApiService('http://localhost:3000/');

src/js/templates/item.template.js

@@ -0,0 +1,69 @@
+export function renderItem(categories, items) {
+
+    let html = '';
+
+    categories.forEach(category => {
+        html += `<div class="items-category">
+                    <h2 class="small-title">${category}</h2>
+                </div>`;
+        items[category].forEach(item => {
+            html += `
+                    <div class="items-list">
+                    <div class="items-list__name">
+                        <div class="list-icon">
+                            <img src="./img/service-icons/${item.image}" alt="#">
+                        </div>
+                        <div class="list-title">
+                            <a href="#">${item.title}</a>
+                        </div>
+                    </div>
+                    <div class="items-list__info">
+                        <div class="list-count">
+                            <span>${item.count} шт.</span>
+                        </div>
+                        <div class="list-one">
+                            <span>Цена за 1 шт.</span>
+                        </div>
+                        <div class="list-price">
+                            <span>${item.price}</span>
+                        </div>
+                        <div class="list-buttons">
+                            <button class="btn-small waves-effect waves-light">Купить</button>
+                            <button class="btn-small waves-effect waves-light"><i
+                                    class="material-icons">shopping_cart</i></button>
+                        </div>
+                    </div>
+                </div>
+            `
+        });
+    });
+
+    return html;
+}
+                            // <div class="items-list">
+                            //     <div class="items-list__name">
+                            //         <div class="list-icon">
+                            //             <img src="./img/service-icons/origin.svg" alt="#">
+                            //         </div>
+                            //         <div class="list-title">
+                            //             <a href="#">Cs:go(prime) + открыта тп + инв. 901руб Cs:go(prime) + открыта
+                            //                 тп + инв. 901руб. .</a>
+                            //         </div>
+                            //     </div>
+                            //     <div class="items-list__info">
+                            //         <div class="list-count">
+                            //             <span>1 шт.</span>
+                            //         </div>
+                            //         <div class="list-one">
+                            //             <span>Цена за 1 шт.</span>
+                            //         </div>
+                            //         <div class="list-price">
+                            //             <span>145.00₽</span>
+                            //         </div>
+                            //         <div class="list-buttons">
+                            //             <button class="btn-small waves-effect waves-light">Купить</button>
+                            //             <button class="btn-small waves-effect waves-light"><i
+                            //                     class="material-icons">shopping_cart</i></button>
+                            //         </div>
+                            //     </div>
+                            // </div>