Market fixed

Market GraphQL + Redux/script.js

@@ -394,12 +394,13 @@ store.subscribe(() => {
     if (catById?.payload && route === "category") {
         const { name, goods, subCategories } = catById?.payload;
         categoryName.innerHTML = `<h1>${name}</h1>`;
-
         var element = document.getElementById("productBlock");
         while (element.firstChild) {
             element.removeChild(element.firstChild);
         }
 
+        
+
         if (subCategories) {
             for (let { name, _id } of subCategories) {
                 const link = document.createElement("a");
@@ -409,23 +410,31 @@ store.subscribe(() => {
                 productBlock.append(link);
             }
         }
-
-        for (let { _id, name, price, images } of goods) {
+        
+        for (let { _id, name, price, images, } of goods) {
+            // console.log()
             const description = document.createElement("div");
             const textBlock = document.createElement("div");
             const imgProduct = document.createElement("img");
             const a = document.createElement("p");
             const productPrice = document.createElement("p");
             const linkCard = document.createElement("a");
+            const addToCartButton = document.createElement('button')
+            
+            addToCartButton.innerHTML = "add to cart"
+            addToCartButton.id = "addToCartButtonn"
 
-            productBlock.append(linkCard);
+            linkCard.innerHTML = "About the product"
             linkCard.href = `#/good/${_id}`;
+            
+            linkCard.className = "linkCard"
 
-            linkCard.append(description);
+            productBlock.append(description);
             description.setAttribute("class", "card");
             description.id = "card";
 
             description.append(imgProduct);
+            
 
             imgProduct.src = `${backendURL}/${images[0].url}`;
 
@@ -437,10 +446,13 @@ store.subscribe(() => {
             productPrice.innerHTML = "price: " + price;
             textBlock.append(productPrice);
 
-            const addToCartButton = document.createElement("p");
-            addToCartButton.innerText = "click to buy";
-            addToCartButton.className = "addToCartButton";
-            textBlock.append(addToCartButton);
+            textBlock.append(linkCard);
+            textBlock.append(addToCartButton)
+
+            addToCartButton.onclick = () => {
+            store.dispatch(actionCartAdd({_id, name, price, images,}));
+        };
+           
         }
     }
 });
@@ -454,6 +466,7 @@ const goodFineOneImg = document.createElement("img");
 const goodFineOnePrice = document.createElement("p");
 const goodFineOneDescription = document.createElement("p");
 const goodFineOneAddToCartButton = document.createElement("button");
+
 const buttonPlus = document.createElement("button");
 const buttonMinus = document.createElement("button");
 buttonPlus.innerHTML = "+";
@@ -487,6 +500,12 @@ store.subscribe(() => {
         goodFineOneAddToCartButton.onclick = () => {
             store.dispatch(actionCartAdd(GoodFineOne.payload));
         };
+        
+        // const a = document.getElementById(addToCartButtonn)
+        // a.onclick = () => {
+        //     store.dispatch(actionCartAdd(GoodFineOne.payload));
+        // };
+
     }
 });
 
@@ -542,18 +561,20 @@ store.subscribe(() => {
 
         divToCardBlock.id = "divToCartBlock";
         const divToCart = document.createElement("div");
-
         const goodByIdImage = document.createElement("img");
         const goodByIdName = document.createElement("h2");
         const goodByIdCount = document.createElement("h2");
         const buttonPlus = document.createElement("button");
         const buttonMinus = document.createElement("button");
+        const removePosition = document.createElement("button")
 
         buttonBuy.style.display = "block";
         buttonBuy.innerHTML = "Buy";
 
         goodByIdPrice.innerHTML = "Total: " + priceSum;
 
+        removePosition.innerHTML = "Remove"
+        removePosition.id = "removePosition"
         buttonPlus.innerHTML = "+";
         buttonMinus.innerHTML = "-";
         buttonPlus.id = "buttonPlus";
@@ -567,6 +588,7 @@ store.subscribe(() => {
         divToCart.append(goodByIdCount);
         divToCart.append(buttonPlus);
         divToCart.append(buttonMinus);
+        divToCart.append(removePosition)
         bPoputContainer.append(buyBlock);
         buyBlock.append(goodByIdPrice);
         buyBlock.append(buttonBuy);
@@ -586,6 +608,8 @@ store.subscribe(() => {
             store.dispatch(actionCartDelete(value.good));
             console.log(value.good, "this");
         };
+
+        removePosition.onclick = () => store.dispatch(actionCartRemove(value.good))
     }
 
     shoppingCart.innerHTML = "Cart: " + countSum;
@@ -733,13 +757,22 @@ store.subscribe(() => {
 
         for (let [key, value] of Object.entries(history.payload)) {
             const { _id, createdAt, total, orderGoods } = value;
-            const h2 = document.createElement("h2");
-            h2.className = "h2History"
-            const dateOfOrder = new Date(+createdAt);
-            h2.innerHTML = `${dateOfOrder.toLocaleDateString()} ${dateOfOrder.toLocaleTimeString()}
-                            Order ID: ${_id} от , c ${orderGoods.length} goods worth: ${total}`;
-                            bPopupContent.append(h2);
-        
+            const historyDiv = document.createElement("div")
+            historyDiv.style = 'padding-right: 100px'
+            bPopupContent.append(historyDiv)
+            const card      = document.createElement('div')
+            card.style     = 'width: 100%;border-style: groove;border-color: #black;padding: 10px;border-radius: 10px;margin: 5px;' 
+            card.innerHTML = `<h3>Order: ${createdAt}</h3>`
+            for (const {count, good} of orderGoods){2
+                const divGood      = document.createElement('div')
+                divGood.style= "display:flex;margin-bottom: 20px;"
+                
+                divGood.innerHTML += `<div>Product: <b>${good.name}</b><br> Price: <b>${good.price}</b><br> Count: <b>${count} </b></b></div><img style="max-width: 80px;margin-right: 20px;display: block;margin-left: auto;" src="http://shop-roles.node.ed.asmer.org.ua/${good.images[0].url}"/><br><br>`
+                card.append(divGood)
+            }
+            card.innerHTML += 'Date: <b>'+new Date(+createdAt).toLocaleString().replace(/\//g, '.')+'</b>'
+            card.innerHTML += `<br>Total: <b style="color:red;">${total}</b>`
+            historyDiv.append(card)
             
         }
 
@@ -757,6 +790,31 @@ store.subscribe(() => {
     };
 });
 
+// store.subscribe(() => {
+//     const {orderFind} = (store.getState()).promise 
+//     const [,route, _id] = location.hash.split('/')
+    
+//     if (orderFind?.payload && route === 'orderFind'){
+//         main.innerHTML='<h1>История заказов</h1>'
+
+//         for (const {_id, createdAt, total,orderGoods} of orderFind.payload.reverse()){
+//             const card      = document.createElement('div')
+//             card.style     = 'width: 100%;border-style: groove;border-color: #ced4da17;padding: 10px;border-radius: 10px;margin: 5px;' 
+//             card.innerHTML = `<h3>Заказ: ${createdAt}</h3>`
+//             for (const {count, good} of orderGoods){2
+//                 const divGood      = document.createElement('div')
+//                 divGood.style= "display:flex;margin-bottom: 20px;"
+                
+//                 divGood.innerHTML += `<div>Товар: <b>${good.name}</b><br> Цена: <b>${good.price} грн.</b><br> Количество: <b>${count} шт.</b></b></div><img style="max-width: 80px;margin-right: 20px;display: block;margin-left: auto;" src="http://shop-roles.node.ed.asmer.org.ua/${good.images[0].url}"/><br><br>`
+//                 card.append(divGood)
+//             }
+//             card.innerHTML += 'Дата: <b>'+new Date(+createdAt).toLocaleString().replace(/\//g, '.')+'</b>'
+//             card.innerHTML += `<br>Всего: <b style="color:red;">${total} грн.</b>`
+//             main.append(card)
+//         }
+//     }
+// })
+
 login.onclick = () => {
     bPopupCreate(buttonLogin);
     buttonLogin.onclick = () => {

Market GraphQL + Redux/style.css

@@ -284,6 +284,21 @@ flexBlock img {
     font-size: 14px;
 }
 
+.linkCard { 
+    border: 2px solid darkblue;
+    background-color: aqua;
+    color: darkblue;
+    border-radius: 15px;
+    padding: 12px;
+    margin-left: 30px;
+    font-size: 20px;
+}
+
+.card div button {
+    margin-left: 20px;
+    border-radius: 15px;
+}
+
 .footer {
     padding-top: 20px;
     color: white;
@@ -294,3 +309,11 @@ flexBlock img {
 
 }
 
+.b-popup-content::-webkit-scrollbar{
+    width: 0px;
+    height: 0px;
+  }
+
+#removePosition {
+    width: 100px;
+}