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

items component showing

Browse Source
This commit is contained in:
Sergey Yarkov 2019-12-21 20:44:37 +03:00
parent e40985b168
commit dba4b98260
11 changed files with 98 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
config/server.js
View File

@ -46,6 +46,12 @@ MongoClient.connect(db_config.url, {useNewUrlParser: true, useUnifiedTopology: t
// 404 Redirect // 404 Redirect
server.use((req, res) => res.status(404).render('main/404')); server.use((req, res) => res.status(404).render('main/404'));
server.listen(3000, () => console.log('Listen port 3000...'));
}) })
.catch((error) => {console.log(error)}); .catch((error) => {
server.get('*', (req, res) => {
res.send('Ошибка соединения с БД. Настройте файл database.js');
});
})
.finally(() => {
server.listen(3000, () => console.log('Listen port 3000...'));
});

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

@ -45,6 +45,10 @@ hr {
/* Custom Styles */ /* Custom Styles */
.pagination {
padding-bottom: 24px;
}
#notification { #notification {
width: 300px; width: 300px;
position: fixed; position: fixed;
@ -700,8 +704,8 @@ footer.main-footer {
margin-top: 8px; margin-top: 8px;
} }
.table-buyers, .table-items { .table-buyers, .table-items {
max-height: 365px; max-height: 385px;
overflow-y: scroll; overflow-y: hidden;
} }
footer.admin-footer{ footer.admin-footer{
background-color: #fff; background-color: #fff;

87
dist/views/admin/items.pug vendored
View File

@ -7,7 +7,7 @@ body.has-fixed-sidenav
.col.s12 .col.s12
h2 Редактирование товаров h2 Редактирование товаров
.col.s12 .col.s12
.card #items.card
.card-content .card-content
span.card-title Список товаров span.card-title Список товаров
.search-field .search-field
@ -31,75 +31,22 @@ body.has-fixed-sidenav
.divider .divider
tbody tbody
tr #loader.progress
td .indeterminate
img(src="../img/service-icons/origin.svg", alt="alt") .divider
td Тестовый товар №6 ul.pagination.center
td Origin li.active
td 2019-12-05 a(href="#" class="disabled")
td 18 i.material-icons chevron_left
td 145 ₽ li
td a(href="#" class="active") 1
button.btn.red Удалить li
button.btn.orange Изменить a(href="#") 2
tr li
td a(href="#") 3
img(src="../img/service-icons/origin.svg", alt="alt") li
td Тестовый товар №6 a(href="#" class="disabled")
td Origin i.material-icons chevron_right
td 2019-12-05
td 18
td 145 ₽
td
button.btn.red Удалить
button.btn.orange Изменить
tr
td
img(src="../img/service-icons/origin.svg", alt="alt")
td Тестовый товар №6
td Origin
td 2019-12-05
td 18
td 145 ₽
td
button.btn.red Удалить
button.btn.orange Изменить
tr
td
img(src="../img/service-icons/origin.svg", alt="alt")
td Тестовый товар №6
td Origin
td 2019-12-05
td 18
td 145 ₽
td
button.btn.red Удалить
button.btn.orange Изменить
tr
td
img(src="../img/service-icons/origin.svg", alt="alt")
td Тестовый товар №6
td Origin
td 2019-12-05
td 18
td 145 ₽
td
button.btn.red Удалить
button.btn.orange Изменить
tr
td
img(src="../img/service-icons/origin.svg", alt="alt")
td Тестовый товар №6
td Origin
td 2019-12-05
td 18
td 145 ₽
td
button.btn.red Удалить
button.btn.orange Изменить
include ./assets/templates/footer.pug include ./assets/templates/footer.pug
include ./assets/scripts.pug include ./assets/scripts.pug

31
src/admin/components/categories.component.js
View File

@ -6,23 +6,24 @@ import { renderIcons } from "../templates/icons.template";
export class CategoriesComponent extends Component { export class CategoriesComponent extends Component {
constructor(id) { constructor(id) {
super(id); super(id);
if (this.$el) { }
// обозначим все селекты для рендера в них наши категории и киноки в дальнейшем
this.$editSelect = this.$el.querySelector('#edit select');
this.$dellSelect = this.$el.querySelector('#delete select');
this.$iconsSelect = this.$el.querySelector('#icons select');
this.$dellIconsSelect = this.$el.querySelector('#dellIcon select');
// формы setElems() {
this.$dellIconFrom = this.$el.querySelector('#dellIcon'); // обозначим все селекты для рендера в них наши категории и киноки в дальнейшем
this.$addForm = this.$el.querySelector('#addCategory'); this.$editSelect = this.$el.querySelector('#edit select');
this.$dellForm = this.$el.querySelector('#dellCategory'); this.$dellSelect = this.$el.querySelector('#delete select');
this.$iconsSelect = this.$el.querySelector('#icons select');
this.$dellIconsSelect = this.$el.querySelector('#dellIcon select');
// добавим ивенты на наши формы // формы
this.$dellIconFrom.addEventListener('submit', this.dellIcon.bind(this)); this.$dellIconFrom = this.$el.querySelector('#dellIcon');
this.$addForm.addEventListener('submit', this.addCategory.bind(this)); this.$addForm = this.$el.querySelector('#addCategory');
this.$dellForm.addEventListener('submit', this.deleteCategory.bind(this)); this.$dellForm = this.$el.querySelector('#dellCategory');
}
// добавим ивенты на наши формы
this.$dellIconFrom.addEventListener('submit', this.dellIcon.bind(this));
this.$addForm.addEventListener('submit', this.addCategory.bind(this));
this.$dellForm.addEventListener('submit', this.deleteCategory.bind(this));
} }
async init() { async init() {

23
src/admin/components/items.component.js Normal file
View File

@ -0,0 +1,23 @@
import { Component } from "../core/component";
import { apiService } from "../services/api.service";
import { renderItems } from "../templates/items.template";
export class ItemsComponent extends Component {
constructor(id, {loader}) {
super(id);
this.loader = loader;
}
setElems() {
this.$table = this.$el.querySelector('table tbody');
}
async init() {
const categories = await apiService.getCategories();
const items = await apiService.getItems();
const html = renderItems(items, categories);
this.$table.insertAdjacentHTML('afterbegin', html);
this.loader.hide();
}
}

7
src/admin/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);
}
}

4
src/admin/core/component.js
View File

@ -1,12 +1,14 @@
export class Component { export class Component {
constructor(id) { constructor(id) {
this.$el = document.getElementById(id); this.$el = document.getElementById(id);
this.$el ? this.setElems() : false;
this.$el ? this.init() : false; this.$el ? this.init() : false;
} }
init() {} init() {}
setElems() {}
onShow() {} onShow() {}
onHide() {} onHide() {}

4
src/admin/index.js
View File

@ -1,8 +1,12 @@
import { MaterializeConfig } from "./config/materialize.config.js"; import { MaterializeConfig } from "./config/materialize.config.js";
import { CategoriesComponent } from "./components/categories.component.js"; import { CategoriesComponent } from "./components/categories.component.js";
import { editCategoryModal } from "./modals/editCategory.modal.js"; import { editCategoryModal } from "./modals/editCategory.modal.js";
import { ItemsComponent } from "./components/items.component.js";
import { LoaderComponent } from "./components/loader.component.js";
const loader = new LoaderComponent('loader');
const categories = new CategoriesComponent('categories'); const categories = new CategoriesComponent('categories');
const items = new ItemsComponent('items', {loader});
const editCategory = new editCategoryModal('editCategory', 'edit', 'editCategoryClose'); const editCategory = new editCategoryModal('editCategory', 'edit', 'editCategoryClose');
const materialize = new MaterializeConfig(); const materialize = new MaterializeConfig();
console.log('Control-Panel v1.0.0'); console.log('Control-Panel v1.0.0');

10
src/admin/templates/items.template.js Normal file
View File

@ -0,0 +1,10 @@
export function renderItems(items, categories) {
let html = '';
categories.forEach(category => {
items.forEach(item => {
if (item.category.toLowerCase() === category.title.toLowerCase()) html += `<tr><td><img src="../img/service-icons/${category.img}" alt="alt"></td><td>${item.title}</td><td>${item.category}</td><td>${new Date(item.date).toLocaleDateString()}</td><td>${item.count}</td><td>${item.price} ₽</td><td><button class="btn red">Удалить</button><button class="btn orange">Изменить</button></td></tr>`
});
});
return html;
}

2
src/main/components/items.component.js
View File

@ -26,7 +26,6 @@ export class ItemsComponent extends Component {
const html = renderItems(categories, fData); const html = renderItems(categories, fData);
this.insertItems(html); this.insertItems(html);
this.btnColor(); this.btnColor();
this.loader.hide(); this.loader.hide();
} }
} }
@ -36,6 +35,7 @@ export class ItemsComponent extends Component {
this.$el.querySelector('#roster').innerHTML = ''; this.$el.querySelector('#roster').innerHTML = '';
this.loader.hide(); this.loader.hide();
} }
onShow() { onShow() {
this.$el.querySelector('#roster').innerHTML = ''; this.$el.querySelector('#roster').innerHTML = '';
this.loader.show(); this.loader.show();

7
src/main/templates/items.template.js
View File

@ -1,16 +1,13 @@
export function renderItems(categories, items) { export function renderItems(categories, items) {
const arrayCategories = categories;
const arrayItems = items;
let html = ''; let html = '';
try { try {
arrayCategories.forEach(category => { categories.forEach(category => {
html += `<div class="items-category"> html += `<div class="items-category">
<h2 class="small-title">${category.title}</h2> <h2 class="small-title">${category.title}</h2>
</div>`; </div>`;
category.itemsInCategory = 0; // счетчит для отслеживания категорий где нету айтемов category.itemsInCategory = 0; // счетчит для отслеживания категорий где нету айтемов
try { try {
arrayItems.forEach(item => { items.forEach(item => {
if (item.category.toLowerCase() === category.title.toLowerCase()) { if (item.category.toLowerCase() === category.title.toLowerCase()) {
category.itemsInCategory += 1; category.itemsInCategory += 1;
html += ` html += `