bubble/digital-store
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/digital-store.git synced 2026-10-11 18:29:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

inner items and loader

Browse Source
This commit is contained in:
Sergey Yarkov 2019-11-16 22:53:44 +03:00
parent 3f13519744
commit d9f3d3ef5f
13 changed files with 557 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/routes/routes.js
View File

@ -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);
}
}

5
dist/public/css/style.css vendored
View File

@ -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 {

371
dist/public/js/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/views/assets/templates/footer.pug vendored
View File

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

75
dist/views/index.pug vendored
View File

@ -110,78 +110,9 @@ main.main-section
.items-title.block-title
i.material-icons list
h2.small-title Список товаров:
.items-category
h2.small-title Steam
.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-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
#roster
#loader.progress.hide
.indeterminate(style="width: 40%")
#pagination.items-pagination
.divider
ul.pagination

39
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"

24
src/js/components/items.component.js Normal file
View File

@ -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();
}
}
}

7
src/js/components/loader.component.js Normal file
View File

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

6
src/js/index.js
View File

@ -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});

23
src/js/services/api.service.js Normal file
View File

@ -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/');

9
src/js/services/axios.service.js Normal file
View File

File diff suppressed because one or more lines are too long

69
src/js/templates/item.template.js Normal file
View File

@ -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>