HW13 done

js/13/HW13.js

@@ -23,9 +23,10 @@ function createStore(reducer) {
 }
 
 // create Reduser
-function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
+function reducer(state, { type, ШО, СКОКА, БАБЛО, ШО_ДОБАВИТЬ, СКОКА_ДОБАВИТЬ, ЦЕНА_ДОБАВИТЬ }) {
     if (!state) {
         return {
+            касса: 200,
             пиво: {
                 amount: 110,
                 price: 20
@@ -37,8 +38,7 @@ function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
             сиги: {
                 amount: 130,
                 price: 50
-            },
-            касса: 200
+            }
         }
     }
 
@@ -53,6 +53,16 @@ function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
         }
     }
 
+    if (type === 'ДОБАВИТЬ') {
+        return {
+            ...state,
+            [ШО_ДОБАВИТЬ]: {
+                amount: СКОКА_ДОБАВИТЬ,
+                price: ЦЕНА_ДОБАВИТЬ
+            }
+        }
+    }
+
     return state
 }
 const store = createStore(reducer)
@@ -60,7 +70,7 @@ const store = createStore(reducer)
 // create divStore
 const divStore = document.createElement('div')
 divStore.style.cssText = `
-        min-width: 500px;
+        min-width: 700px;
         width: 50%;
         border: 1px solid #A9A9A9;
         border-radius: 8px;
@@ -68,6 +78,13 @@ divStore.style.cssText = `
         padding: 20px;`
 document.body.append(divStore)
 
+// create divStore title
+const divStoreitle = document.createElement('h1')
+divStoreitle.innerText = 'ЛАРЕК'
+divStoreitle.style.cssText = `
+    text-align: center;`
+divStore.append(divStoreitle)
+
 // create Table of Store
 let table, col, row
 
@@ -165,15 +182,19 @@ store.subscribe(() => console.log(store.getState()))
 // create divWindow
 const divWindow = document.createElement('div')
 divWindow.style.cssText = `
-        width: 50%;
-        padding: 10px;
-        margin-top: 30px;
-        text-align: ;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;`
+    min-width: 700px;
+    width: 50%;
+    padding: 10px;
+    margin-top: 30px;`
 document.body.append(divWindow)
 
+// create divWindow title
+const divWindowitle = document.createElement('h2')
+divWindowitle.innerText = 'Покупка в ларьке'
+divWindowitle.style.cssText = `
+    text-align: center;`
+divWindow.append(divWindowitle)
+
 // create inputAmount
 const inputAmount = document.createElement('input')
 inputAmount.type = 'number'
@@ -181,18 +202,6 @@ inputAmount.min = 0
 inputAmount.placeholder = 'Количество товара'
 divWindow.append(inputAmount)
 
-// create selectProduct
-const selectProduct = document.createElement('select')
-divWindow.append(selectProduct)
-
-for (let key of Object.keys(store.getState())) {
-    if (key !== 'касса') {
-        let optionInput = document.createElement('option')
-        optionInput.innerText = `${key}`
-        selectProduct.append(optionInput)
-    }
-}
-
 // ceate inputMoney
 const inputMoney = document.createElement('input')
 inputMoney.type = 'number'
@@ -200,11 +209,72 @@ inputMoney.min = 0
 inputMoney.placeholder = 'Сумма, которую отдаете'
 divWindow.append(inputMoney)
 
+// create selectProduct
+let selectProduct
+const createListProduct = () => {
+    selectProduct = document.createElement('select')
+    divWindow.insertBefore(selectProduct, inputMoney)
+
+    for (let key of Object.keys(store.getState())) {
+        if (key !== 'касса') {
+            let optionInput = document.createElement('option')
+            optionInput.innerText = `${key}`
+            selectProduct.append(optionInput)
+        }
+    }
+
+    return selectProduct
+}
+createListProduct()
+
 // create buyButton 
 const buyButton = document.createElement('button')
 buyButton.innerText = 'Купить'
 divWindow.append(buyButton)
 
+// create add div
+const divAdd = document.createElement('div')
+divAdd.style.cssText = `
+        min-width: 700px;
+        width: 50%;
+        margin-top: 40px;`
+document.body.append(divAdd)
+
+// create add div title
+const divAddTitle = document.createElement('h2')
+divAddTitle.innerText = 'Пополнение ларька'
+divAddTitle.style.cssText = `
+    text-align: center;`
+divAdd.append(divAddTitle)
+
+// create inputAddProduct
+const inputAddProduct = document.createElement('input')
+inputAddProduct.type = 'text'
+inputAddProduct.placeholder = 'Введите имя продукта'
+divAdd.append(inputAddProduct)
+
+// create inputAddAmount
+const inputAddAmount = document.createElement('input')
+inputAddAmount.type = 'number'
+inputAddAmount.min = 0
+inputAddAmount.placeholder = 'Введите количество продукта'
+divAdd.append(inputAddAmount)
+
+// create inputAddPrice
+const inputAddPrice = document.createElement('input')
+inputAddPrice.type = 'number'
+inputAddPrice.min = 0
+inputAddPrice.placeholder = 'Введите цену продукта'
+divAdd.append(inputAddPrice)
+
+// create addProductButton
+const addProductButton = document.createElement('button')
+addProductButton.innerText = 'Добавить продукт'
+divAdd.append(addProductButton)
+
+// start addProductButton
+addProductButton.addEventListener('click', () => store.dispatch({ type: 'ДОБАВИТЬ', ШО_ДОБАВИТЬ: inputAddProduct.value, СКОКА_ДОБАВИТЬ: +inputAddAmount.value, ЦЕНА_ДОБАВИТЬ: +inputAddPrice.value }))
+
 // mistake alert
 buyButton.onclick = () => {
     if (+inputAmount.value > store.getState()[selectProduct.value].amount) {
@@ -220,6 +290,12 @@ buyButton.addEventListener('click', () => store.dispatch({ type: 'КУПИТЬ',
 // Relaod table with new datas
 store.subscribe(() => {
     table.remove(),
-        createTable()
+        selectProduct.remove(),
+        createTable(),
+        createListProduct()
+
+})
 
+store.subscribe(() => {
+    console.log(store.getState())
 })