Merge pull request #11 from ShmigelskiyAndrey/master

8th module

8-module/1-task/index.js

@@ -20,7 +20,8 @@ export default class CartIcon {
           <span class="cart-icon__count">${cart.getTotalCount()}</span>
           <span class="cart-icon__price">€${cart.getTotalPrice().toFixed(2)}</span>
         </div>`;
-
+
+      this.elementTop = this.elem.getBoundingClientRect().top
       this.updatePosition();
 
       this.elem.classList.add('shake');
@@ -39,6 +40,14 @@ export default class CartIcon {
   }
 
   updatePosition() {
-    // ваш код ...
-  }
+    let rightEdgeOfContainer = document.querySelector('.container').getBoundingClientRect().right
+
+    if (!(window.scrollY > this.elementTop) || document.documentElement.clientWidth <= 767) {
+      this.elem.style = 'position: absolute'
+    } else if (document.documentElement.clientWidth - (rightEdgeOfContainer + 20) - this.elem.offsetWidth < 10) {
+      this.elem.style = `position: fixed; top: 50px; z-index: 1000; left: ${document.documentElement.clientWidth - this.elem.offsetWidth - 10 + 'px'}`
+    } else {
+      this.elem.style = `position: fixed; top: 50px; z-index: 1000; left: ${rightEdgeOfContainer + 20 + 'px'}`
+    }
+   }
 }

8-module/2-task/index.js

@@ -5,5 +5,59 @@ export default class ProductGrid {
   constructor(products) {
     this.products = products;
     this.filters = {};
+
+    this.render();
+  }
+
+  render() {
+    this.container = createElement(`
+      <div class="products-grid">
+        <div class="products-grid__inner">
+        </div>
+      </div>
+    `);
+
+    this.innerContainer = this.container.querySelector('.products-grid__inner');
+    this.renderProducts(this.products);
+  }
+
+  renderProducts(products) {
+    this.innerContainer.innerHTML = '';
+
+    products.forEach(product => {
+      const productCard = new ProductCard(product);
+      this.innerContainer.append(productCard.elem);
+    });
+  }
+
+  updateFilter(filters) {
+    Object.assign(this.filters, filters);
+
+    let filteredProducts = this.products.filter(product => {
+      if (this.filters.noNuts && product.nuts) {
+        return false
+      };
+
+      if (this.filters.vegeterianOnly && !product.vegeterian) {
+        return false
+      };
+
+      if (this.filters.maxSpiciness !== undefined && (product.spiciness > this.filters.maxSpiciness)) {
+        return false
+      };
+
+      if (this.filters.category && (this.filters.category !== product.category)) {
+        return false
+      };
+
+      return true
+    })
+
+    this.renderProducts(filteredProducts)
+  }
+
+
+  get elem() {
+    return this.container
   }
 }

8-module/3-task/index.js

@@ -6,23 +6,41 @@ export default class Cart {
   }
 
   addProduct(product) {
-    // ваш код
+    if (!product) {
+      return
+    };
+
+    let item = this.cartItems.find(item => item.product.id === product.id);
+
+    if (item == undefined) {
+      this.cartItems.push({product, count: 1})
+    } else {
+      item.count++
+    };
+
+    this.onProductUpdate(item);
   }
 
   updateProductCount(productId, amount) {
-    // ваш код
+    let item = this.cartItems.find(item => item.product.id === productId);
+
+    item.count += amount;
+
+    this.cartItems = this.cartItems.filter(item => item.count !== 0);
+
+    this.onProductUpdate(item);
   }
 
   isEmpty() {
-    // ваш код
+    return this.cartItems.length === 0
   }
 
   getTotalCount() {
-    // ваш код
+    return this.cartItems.reduce((totalCount, item) => totalCount + item.count, 0)
   }
 
   getTotalPrice() {
-    // ваш код
+    return this.cartItems.reduce((totalPrice, item) => totalPrice + item.product.price * item.count, 0)
   }
 
   onProductUpdate(cartItem) {

8-module/4-task/index.js

@@ -13,23 +13,41 @@ export default class Cart {
   }
 
   addProduct(product) {
-    // СКОПИРУЙТЕ СЮДЯ СВОЙ КОД
+    if (!product) {
+      return
+    };
+
+    let item = this.cartItems.find(item => item.product.id === product.id);
+
+    if (item == undefined) {
+      this.cartItems.push({product, count: 1})
+    } else {
+      item.count++
+    };
+
+    this.onProductUpdate(item);
   }
 
   updateProductCount(productId, amount) {
-    // СКОПИРУЙТЕ СЮДЯ СВОЙ КОД
+    let item = this.cartItems.find(item => item.product.id === productId);
+
+    item.count += amount;
+
+    this.cartItems = this.cartItems.filter(item => item.count !== 0);
+
+    this.onProductUpdate(item);
   }
 
   isEmpty() {
-    // СКОПИРУЙТЕ СЮДЯ СВОЙ КОД
+    return this.cartItems.length === 0
   }
 
   getTotalCount() {
-    // СКОПИРУЙТЕ СЮДЯ СВОЙ КОД
+    return this.cartItems.reduce((totalCount, item) => totalCount + item.count, 0)
   }
 
   getTotalPrice() {
-    // СКОПИРУЙТЕ СЮДЯ СВОЙ КОД
+    return this.cartItems.reduce((totalPrice, item) => totalPrice + item.product.price * item.count, 0)
   }
 
   renderProduct(product, count) {
@@ -84,17 +102,83 @@ export default class Cart {
   }
 
   renderModal() {
-    // ...ваш код
+    this.modal = new Modal();
+    this.modal.setTitle("Your order");
+
+    let body = createElement(`<div></div>`);
+    this.cartItems.forEach(item => body.append(this.renderProduct(item.product, item.count)));
+    body.append(this.renderOrderForm());
+    this.modal.setBody(body)
+
+    this.modal.open()
+
+    this.modalWindow = document.querySelector('.modal')
+    let cartForm = document.querySelector('.cart-form')
+
+    this.modalWindow.addEventListener('click', e => {
+      let target = e.target.closest('.cart-counter__button');
+
+      if (!target) { return }
+      let productId = target.closest('.cart-product').dataset.productId;
+
+      if (target.classList.contains('cart-counter__button_minus')) {
+        this.updateProductCount(productId, -1);
+      };
+
+      if (target.classList.contains('cart-counter__button_plus')) {
+        this.updateProductCount(productId, 1);
+      };
+    });
+
+    cartForm.addEventListener('submit', e => {
+      e.preventDefault();
+      this.onSubmit(e); 
+    })
   }
 
   onProductUpdate(cartItem) {
-    // ...ваш код
+    if (document.body.classList.contains('is-modal-open')) {
+      let productId = cartItem.product.id;
+      let productCount = this.modalWindow.querySelector(`[data-product-id="${productId}"] .cart-counter__count`);
+      let productPrice = this.modalWindow.querySelector(`[data-product-id="${productId}"] .cart-product__price`);
+      let infoPrice = this.modalWindow.querySelector(`.cart-buttons__info-price`);
+
+      productCount.innerHTML = cartItem.count;
+      productPrice.innerHTML = `€${(cartItem.product.price * cartItem.count).toFixed(2)}`;
+      infoPrice.innerHTML = `€${this.cartItems.reduce((totalPrice, item) => totalPrice + item.product.price * item.count, 0).toFixed(2)}`
+
+      if (this.isEmpty()) {
+        this.modal.close()
+      }
+    };
 
     this.cartIcon.update(this);
   }
 
   onSubmit(event) {
-    // ...ваш код
+    event.preventDefault();
+    let submitButton = document.querySelector('[type="submit"]');
+    submitButton.classList.add('is-loading');
+    let form = document.querySelector('.cart-form')
+
+    fetch('https://httpbin.org/post', {
+      method: "POST",
+      body: new FormData(form)
+    }).then((response) => {
+      if (response.ok) {
+        this.modal.setTitle('Success!');
+        this.cartItems = [];
+        this.cartIcon.update(this);
+        this.modal.setBody(createElement(`
+          <div class="modal__body-inner">
+            <p>
+              Order successful! Your order is being cooked :) <br>
+              We’ll notify you about delivery time shortly.<br>
+              <img src="/assets/images/delivery.gif">
+            </p>
+          </div>
+        `));
+      };})
   };
 
   addEventListeners() {