ilya_shyian
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
							<!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" />
        <title>Document</title>
    </head>
    <body>
        <select name="" id="selectItems"></select>
        <input type="number" name="" id="inputAmountToBuy" />
        <button type="button" id="buyBtn">Buy</button>

        <div id="container">
            <table id="stateTable" border="1"></table>
        </div>

        <script>
            const store = createStore(reducer);

            for ([key, value] of Object.entries(store.getState()["продукты"])) {
                let option = document.createElement("option");
                option.innerText = key;
                option.value = key;
                selectItems.append(option);
            }

            const buyItem = (amount, item) => ({
                type: "КУПИТЬ",
                ШО: item,
                СКОКА: amount,
            });

            buyBtn.onclick = () => {
                let amount = inputAmountToBuy.value;
                let item = selectItems.value;
                store.dispatch(buyItem(amount, item));

                console.log(amount);
            };

            const updateTable = () => {
                let str = "<tr><th>Название</th><th>Количество</th><th>Цена</th></tr>";
                let state = store.getState();
                for ([key, value] of Object.entries(state["продукты"])) {
                    str += `<tr><th>${key}</th><td>${value.amount}</td><td>${value.cost}</td></tr>`;
                }
                str += `<th>касса</th><td colspan = "2">${state["касса"]}</td></tr>`;
                stateTable.innerHTML = str;
            };

            store.subscribe(updateTable);
            store.subscribe(() => console.log(store.getState()));
            updateTable();

            function reducer(state, { type, ШО, СКОКА }) {
                //объект action деструктуризируется на три переменных
                if (!state) {
                    //начальная уборка в ларьке:
                    return {
                        продукты: {
                            пиво: { amount: 100, cost: 33 },
                            чипсы: { amount: 100, cost: 13 },
                            сиги: { amount: 100, cost: 43 },
                        },

                        касса: 0,
                    };
                }
                if (type.toUpperCase() === "КУПИТЬ") {
                    let products = state["продукты"];
                    if (СКОКА <= 0 || СКОКА > state["продукты"][ШО]["amount"]) {
                        return state;
                    }

                    return {
                        ...state, //берем все что было из ассортимента
                        ["продукты"]: {
                            ...products,
                            [ШО]: {
                                ...products[ШО],
                                amount: products[ШО]["amount"] - СКОКА,
                            },
                        },
                        касса: +state["касса"] + +products[ШО]["cost"] * +СКОКА, //и уменьшаем то, что покупается на количество
                    };
                }
                return state; //если мы не поняли, что от нас просят в `action` - оставляем все как есть
            }

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

                const getState = () => state; //функция, возвращающая переменную из замыкания
                const subscribe = (cb) => (
                    cbs.push(cb), //запоминаем подписчиков в массиве
                    () => (cbs = cbs.filter((c) => c !== cb))
                ); //возвращаем функцию unsubscribe, которая удаляет подписчика из списка

                const dispatch = (action) => {
                    const newState = reducer(state, action); //пробуем запустить редьюсер
                    if (newState !== state) {
                        //проверяем, смог ли редьюсер обработать action
                        state = newState; //если смог, то обновляем state
                        for (let cb of cbs) cb(); //и запускаем подписчиков
                    }
                };

                return {
                    getState, //добавление функции getState в результирующий объект
                    dispatch,
                    subscribe, //добавление subscribe в объект
                };
            }
        </script>
    </body>
</html>