DmitriyPanasenko
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    
</head>
<body>
    <script>
        {
            function reducer(state, { type, productName, productQuantity, summ }) { //объект action деструктуризируется на три переменных
                if (!state) { //начальная уборка в ларьке:
                    return {
                        пиво: {
                            quantity: 100,
                            price: 30,
                        },
                        чипсы: {
                            quantity: 100,
                            price: 52,
                        },
                        сиги: {
                            quantity: 100,
                            price: 89,
                        },
                        касса: 0
                    }
                }
                if (type === 'КУПИТЬ' && productQuantity <= state[productName].quantity && summ >= state[productName].price * productQuantity) { //если тип action - КУПИТЬ, то:
                    return {
                        ...state, //берем все что было из ассортимента
                        [productName]: {
                            quantity: state[productName].quantity - productQuantity,
                            price: state[productName].price
                        },
                        касса: state.касса + state[productName].price * productQuantity
                        //и уменьшаем то, что покупается на количество
                    }
                }

                return state //если мы не поняли, что от нас просят в `action` - оставляем все как есть
            }

            /*Store
        Переделайте функцию createStore (та, которая хранилище Redux) на конструктор Store. Прототип не используйте; оставьте переменные state, cbs и reducer замкнутыми. Соответственно методы subscribe, dispatch и getState должны быть объявлены внутри функции-конструктора и не могут быть в прототипе. Проверьте переделанный конструктор на вашем ДЗ по ларьку;*/

            function createStore(reducer) {
                let state = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
                let cbs = []                     //массив подписчиков

                this.getState = () => state //функция, возвращающая переменную из замыкания + добавление функции getState в результирующий объект
                this.dispatch = action => {
                    const newState = reducer(state, action) //пробуем запустить редьюсер
                    if (newState !== state) { //проверяем, смог ли редьюсер обработать action
                        state = newState //если смог, то обновляем state 
                        for (let cb of cbs) cb() //и запускаем подписчиков
                    }
                }
                this.subscribe = cb => (cbs.push(cb),   //запоминаем подписчиков в массиве
                    () => cbs = cbs.filter(c => c !== cb)) //добавление subscribe в объект

            }

            function actionCreator(type, productName, productQuantity, summ) {
                return {
                    type,
                    productName,
                    productQuantity,
                    summ
                }
            }

            const store = new createStore(reducer)
            myState = store.getState()

            const showcase = document.createElement('section')
            document.body.append(showcase)
            showcase.classList.add('showcase')

            const orderSection = document.createElement('section')
            document.body.append(orderSection)
            orderSection.classList.add('orderSection')

            const orderSelectProd = document.createElement('select')
            orderSection.append(orderSelectProd)

            const orderInputQuantity = document.createElement('input')
            orderInputQuantity.type = 'number'
            orderInputQuantity.min = '0'
            orderSection.append(orderInputQuantity)

            const orderInputQuantityName = document.createElement('div')
            orderInputQuantity.before(orderInputQuantityName)
            orderInputQuantityName.innerText = 'количество товара:'

            const orderSendMoney = document.createElement('input')
            orderSendMoney.type = 'number'
            orderSendMoney.min = '0'
            orderSection.append(orderSendMoney)

            const orderSendMoneyName = document.createElement('div')
            orderSendMoney.before(orderSendMoneyName)
            orderSendMoneyName.innerText = 'сумма:'

            const orderBuyButton = document.createElement('input')
            orderBuyButton.type = 'button'
            orderBuyButton.value = 'КУПИТЬ'
            orderSection.append(orderBuyButton)
            orderBuyButton.onclick = () => { store.dispatch(actionCreator(orderBuyButton.value, orderSelectProd.value, +orderInputQuantity.value, +orderSendMoney.value)) }


            for (const elemProduct in store.getState()) {
                if (elemProduct === 'касса') continue

                const productCard = document.createElement('div')
                const productName = document.createElement('h2')
                const productPrice = document.createElement('div')
                const productQuantity = document.createElement('div')

                productCard.append(productName)
                productCard.append(productQuantity)
                productCard.append(productPrice)
                showcase.append(productCard)

                productCard.classList.add('productCard')
                productName.classList.add('productName')
                productPrice.classList.add('productPrice')
                productQuantity.classList.add('productQuantity')

                productName.innerText = elemProduct
                productPrice.innerText = store.getState()[elemProduct].price + ' грн'
                productQuantity.innerText = store.getState()[elemProduct].quantity + ' шт\nв наличии'

                const selectProdOption = document.createElement('option')
                selectProdOption.value = selectProdOption.innerText = elemProduct
                orderSelectProd.append(selectProdOption)
                const productPriceUnsubscribe = store.subscribe(() => {
                    productPrice.innerText = store.getState()[elemProduct].price + ' грн'
                })
                const productQuantityUnsubscribe = store.subscribe(() => {
                    productQuantity.innerText = store.getState()[elemProduct].quantity + ' шт\nв наличии'
                })

            }
        }


    </script>
</body>

</body>
</html>