fixed event

dist/public/css/style.css

@@ -21,9 +21,9 @@ h1 {
 
 html,
 body {
-    font-family: "Roboto", sans-serif;
+  font-family: 'Roboto', sans-serif;
   font-weight: normal;
-    background-color: #F3F3F3;
+  background-color: #f3f3f3;
   height: 100%;
 }
 
@@ -43,6 +43,10 @@ hr {
   height: 35px;
 }
 
+#addItem i {
+  pointer-events: none;
+}
+
 /* Custom Styles */
 
 @keyframes fadein {
@@ -53,7 +57,8 @@ hr {
     opacity: 1;
   }
 }
-@-moz-keyframes fadein { /* Firefox */
+@-moz-keyframes fadein {
+  /* Firefox */
   from {
     opacity: 0;
   }
@@ -61,7 +66,8 @@ hr {
     opacity: 1;
   }
 }
-@-webkit-keyframes fadein { /* Safari and Chrome */
+@-webkit-keyframes fadein {
+  /* Safari and Chrome */
   from {
     opacity: 0;
   }
@@ -69,7 +75,8 @@ hr {
     opacity: 1;
   }
 }
-@-o-keyframes fadein { /* Opera */
+@-o-keyframes fadein {
+  /* Opera */
   from {
     opacity: 0;
   }
@@ -84,7 +91,7 @@ hr {
 
 .loader-fullscreen {
   background-color: #000;
-    background-color: rgba(0,0,0,.8);
+  background-color: rgba(0, 0, 0, 0.8);
   position: fixed;
   height: 100%;
   width: 100%;
@@ -129,7 +136,9 @@ hr {
   align-items: center;
 }
 
-.block-title h1, .block-title h2, .block-title h3 {
+.block-title h1,
+.block-title h2,
+.block-title h3 {
   padding-left: 10px;
 }
 
@@ -170,7 +179,6 @@ button#addItem {
   margin-left: 5px;
 }
 
-
 /* Cart */
 .cart-btn {
   position: fixed;
@@ -212,7 +220,7 @@ button#addItem {
 
 .c_modal-wrap {
   position: fixed;
-    background: rgba(0, 0, 0, .5);
+  background: rgba(0, 0, 0, 0.5);
   top: 0;
   right: 0;
   left: 0;
@@ -334,10 +342,10 @@ button#addItem {
   transition: all 0.4s;
 }
 
-.modal-content__right input[type="number"] {
+.modal-content__right input[type='number'] {
   background: none;
   height: 18px;
-    border: 1px solid #EAECED;
+  border: 1px solid #eaeced;
   width: 30px;
   margin: 0 5px;
   color: #404751;
@@ -351,12 +359,11 @@ button#addItem {
   color: #99a1aa;
 }
 
-
 /* Information Block */
 .information {
   border-radius: 2px;
   margin-bottom: 1rem;
-    background-color: #FFE8E8;
+  background-color: #ffe8e8;
   color: #333;
   font-size: 15px;
 }
@@ -379,7 +386,7 @@ button#addItem {
 }
 
 .pagination li.active {
-    background-color: #26A69A;
+  background-color: #26a69a;
 }
 
 /* Header */
@@ -392,7 +399,7 @@ header.main-header {
 }
 
 nav {
-    background-color: #26A69A;
+  background-color: #26a69a;
   font-weight: 300;
 }
 
@@ -440,7 +447,7 @@ footer.main-footer .container {
   height: 42px;
   line-height: 42px;
   text-align: center;
-    background: #EFEFEF;
+  background: #efefef;
   color: #929292;
   margin: 3px;
   transition: 0.2s;
@@ -448,7 +455,7 @@ footer.main-footer .container {
 }
 
 .category-items li a:hover {
-    background: #26A69A;
+  background: #26a69a;
   color: #fff;
 }
 
@@ -484,7 +491,7 @@ footer.main-footer .container {
 }
 
 .items-category {
-    background-color: #26A69A;
+  background-color: #26a69a;
   height: 30px;
   display: flex;
   justify-content: center;
@@ -500,7 +507,7 @@ footer.main-footer .container {
 }
 
 .items-list {
-    background-color: #F9F9F9;
+  background-color: #f9f9f9;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -553,7 +560,7 @@ footer.main-footer .container {
 .list-count,
 .list-price {
   height: 24px;
-    background: #E7E7E7;
+  background: #e7e7e7;
   text-align: center;
   border-radius: 15px;
   min-width: 79px;
@@ -586,7 +593,6 @@ footer.main-footer .container {
   margin-top: 1rem;
 }
 
-
 .main-section .background {
   background-color: #fff;
   padding: 40px;
@@ -610,7 +616,7 @@ footer.main-footer .container {
 }
 
 .product .breadcrumb li::after {
-    content: "/";
+  content: '/';
   padding: 0 10px;
   color: #b3b3b3;
 }
@@ -663,7 +669,7 @@ footer.main-footer .container {
 .product-info__count span {
   font-weight: 400;
   font-size: 14px;
-    background: #E7E7E7;
+  background: #e7e7e7;
   padding: 2px 13px;
   border-radius: 15px;
   color: #000;
@@ -674,7 +680,7 @@ footer.main-footer .container {
 .product-info__price span {
   font-weight: 400;
   font-size: 14px;
-    background: #E7E7E7;
+  background: #e7e7e7;
   padding: 2px 13px;
   border-radius: 15px;
   color: #000;
@@ -690,7 +696,7 @@ footer.main-footer .container {
 
 /* Product-info Right */
 .product-info__right {
-    background-color: #F9F9F9;
+  background-color: #f9f9f9;
   min-height: 450px;
   width: 100%;
   border-radius: 4px;
@@ -757,7 +763,9 @@ footer.main-footer {
 .login-form__content button {
   width: 100%;
 }
-.sidenav .collapsible-header, .sidenav.fixed .collapsible-header, .sidenav li>a {
+.sidenav .collapsible-header,
+.sidenav.fixed .collapsible-header,
+.sidenav li > a {
   padding: 0 20px;
 }
 .nav-wrapper .brand-logo {
@@ -790,7 +798,8 @@ footer.main-footer {
 .card .card-content h3 {
   margin-top: 8px;
 }
-.table-buyers, .table-items {
+.table-buyers,
+.table-items {
   max-height: 385px;
 }
 #items .card-content {
@@ -806,14 +815,14 @@ footer.admin-footer{
 }
 .admin-footer ul li a {
   color: #999;
-    font-size: .9rem;
+  font-size: 0.9rem;
   font-weight: 300;
   margin: 5px 0;
 }
 .admin-footer h5 {
   font-size: 1.64rem;
   line-height: 110%;
-    margin: 1.0933333333rem 0 .656rem 0;
+  margin: 1.0933333333rem 0 0.656rem 0;
 }
 .admin-footer ul li {
   margin-bottom: 5px;
@@ -833,7 +842,8 @@ footer.admin-footer{
 .modal .modal-content h4 {
   margin-bottom: 10px;
 }
-div.table td, div.table th {
+div.table td,
+div.table th {
   text-align: center;
 }
 div.table > table > tbody > tr > td:nth-child(1) > img {
@@ -842,10 +852,13 @@ div.table > table > tbody > tr > td:nth-child(1) > img{
 div.table > table > tbody > tr > td:nth-child(7) > button.btn.orange {
   margin-left: 5px;
 }
-.sidenav .collapsible-body>ul:not(.collapsible)>li.active, .sidenav.sidenav-fixed .collapsible-body>ul:not(.collapsible)>li.active {
+.sidenav .collapsible-body > ul:not(.collapsible) > li.active,
-    background-color: #4E978C;
+.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
+  background-color: #4e978c;
 }
-.sidenav .collapsible-body>ul:not(.collapsible)>li.active a, .sidenav.sidenav-fixed .collapsible-body>ul:not(.collapsible)>li.active a, .sidenav.sidenav-fixed .collapsible-body>ul:not(.collapsible)>li.active i {
+.sidenav .collapsible-body > ul:not(.collapsible) > li.active a,
+.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a,
+.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active i {
   color: #f6f6f6;
 }
 .card h5 {

src/main/components/items.component.js

@@ -1,120 +1,119 @@
-import { Component } from "../core/component";
+import { Component } from '../core/component'
-import { apiService } from "../services/api.service";
+import { apiService } from '../services/api.service'
-import { insertCount } from "../other/counter";
+import { insertCount } from '../other/counter'
-import { renderItems } from "../templates/items.template";
+import { renderItems } from '../templates/items.template'
 
 export class ItemsComponent extends Component {
   constructor(id, { loader }, { notification }) {
-        super(id);
+    super(id)
-        this.loader = loader;
+    this.loader = loader
-        this.notification = notification;
+    this.notification = notification
-        this.$el ? this.roster = this.$el.querySelector('#roster') : false;
+    this.$el ? (this.roster = this.$el.querySelector('#roster')) : false
     if (localStorage.getItem('cart')) {
-            this.cart = JSON.parse(localStorage.getItem('cart'));
+      this.cart = JSON.parse(localStorage.getItem('cart'))
     } else {
-            this.cart = [];
+      this.cart = []
     }
   }
 
   async init() {
     if (this.$el) {
-            localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter
+      localStorage.setItem('sortByAll', 'true') // установка значения для компонента Filter
-            this.$el.addEventListener('click', addItem.bind(this));
+      this.$el.addEventListener('click', addItem.bind(this))
-            if (!localStorage.getItem('category')) { // Получаем все товары и выводим их если нету ключа category в ls
+      if (!localStorage.getItem('category')) {
-                const fData = await apiService.getItems();
+        // Получаем все товары и выводим их если нету ключа category в ls
-                const categories = await apiService.getCategories();
+        const fData = await apiService.getItems()
-                const html = renderItems(categories, fData);
+        const categories = await apiService.getCategories()
-                this.insertItems(html);
+        const html = renderItems(categories, fData)
-                this.btnColor();
+        this.insertItems(html)
-                this.loader.hide(); 
+        this.btnColor()
+        this.loader.hide()
       }
     }
   }
 
   onHide() {
-        this.$el.querySelector('#roster').innerHTML = '';
+    this.$el.querySelector('#roster').innerHTML = ''
-        this.loader.hide();
+    this.loader.hide()
   }
 
   onShow() {
-        this.$el.querySelector('#roster').innerHTML = '';
+    this.$el.querySelector('#roster').innerHTML = ''
-        this.loader.show();
+    this.loader.show()
   }
 
   btnColor() {
     if (localStorage.getItem('cart')) {
       // Окраска кнопок айтемов которые находятся в корзине
-            const obj = JSON.parse(localStorage.getItem('cart'));
+      const obj = JSON.parse(localStorage.getItem('cart'))
 
-            obj.forEach(item => {
+      obj.forEach((item) => {
-                if (this.$el.querySelector(`#rosterButtons[data-id="${item.id}"] #addItem`)) {
+        if (
-                    this.$el.querySelector(`#rosterButtons[data-id="${item.id}"] #addItem`).classList.add('orange');
+          this.$el.querySelector(
-                    this.$el.querySelector(`#rosterButtons[data-id="${item.id}"] #addItem i`).innerHTML = 'close';
+            `#rosterButtons[data-id="${item.id}"] #addItem`
+          )
+        ) {
+          this.$el
+            .querySelector(`#rosterButtons[data-id="${item.id}"] #addItem`)
+            .classList.add('orange')
+          this.$el.querySelector(
+            `#rosterButtons[data-id="${item.id}"] #addItem i`
+          ).innerHTML = 'close'
         }
-            });
+      })
     }
   }
 
   insertItems(html) {
-        this.roster.insertAdjacentHTML('afterbegin', html);
+    this.roster.insertAdjacentHTML('afterbegin', html)
-        this.btnColor();
+    this.btnColor()
   }
 }
 
 function addItem(e) {
-
   if (e.target.localName === 'button' && e.target.id === 'addItem') {
-        const target = e.target;
+    const target = e.target
     const item = {
       id: e.target.parentNode.dataset.id,
       title: e.target.parentNode.dataset.title,
       count: e.target.parentNode.dataset.count,
-            price: e.target.parentNode.dataset.price
+      price: e.target.parentNode.dataset.price,
     }
-        renderObj(item, this, target);
+    renderObj(item, this, target)
-    } else if (e.target.localName === 'i') {
-        const target = e.target.parentNode;
-        const item = {
-            id: e.target.parentNode.parentNode.dataset.id,
-            title: e.target.parentNode.parentNode.dataset.title,
-            count: e.target.parentNode.parentNode.dataset.count,
-            price: e.target.parentNode.parentNode.dataset.price
-        }
-        renderObj(item, this, target);
   }
 }
 
 function renderObj(obj, context, target) {
   if (context.cart.length > 0) {
-        let insterted = false;
+    let insterted = false
-        let index;
+    let index
     // Проверка на существующий айтем в корзине
     context.cart.forEach((item, i) => {
       if (item.id === obj.id) {
-                insterted = true;
+        insterted = true
-                index = i;  
+        index = i
       }
-        });
+    })
     if (insterted === false) {
       context.cart.push(obj)
-            localStorage.setItem('cart', JSON.stringify(context.cart));
+      localStorage.setItem('cart', JSON.stringify(context.cart))
-            target.classList.add('orange');
+      target.classList.add('orange')
-            target.querySelector('i').innerHTML = 'close';
+      target.querySelector('i').innerHTML = 'close'
-            insertCount('counter', context.cart);
+      insertCount('counter', context.cart)
       window.M.toast({ html: 'Товар был успешно добавлен в корзину.' })
     } else {
-            context.cart.splice(index, 1);
+      context.cart.splice(index, 1)
-            localStorage.setItem('cart', JSON.stringify(context.cart)); 
+      localStorage.setItem('cart', JSON.stringify(context.cart))
-            target.classList.remove('orange');
+      target.classList.remove('orange')
-            target.querySelector('i').innerHTML = 'shopping_cart';
+      target.querySelector('i').innerHTML = 'shopping_cart'
-            insertCount('counter', context.cart);
+      insertCount('counter', context.cart)
     }
   } else {
-      context.cart.push(obj);
+    context.cart.push(obj)
-      localStorage.setItem('cart', JSON.stringify(context.cart));
+    localStorage.setItem('cart', JSON.stringify(context.cart))
-      target.classList.add('orange');
+    target.classList.add('orange')
-      target.querySelector('i').innerHTML = 'close';
+    target.querySelector('i').innerHTML = 'close'
-      insertCount('counter', context.cart);
+    insertCount('counter', context.cart)
     window.M.toast({ html: 'Товар был успешно добавлен в корзину.' })
   }
-};
+}