|
|
@@ -1,113 +0,0 @@
|
|
|
-const select = document.getElementById("select");
|
|
|
-const input = document.getElementById("input");
|
|
|
-const btn = document.getElementById("btn");
|
|
|
-const cash = document.querySelector(".cashbox");
|
|
|
-const bablo = document.getElementById("bablo");
|
|
|
-const cashier = document.getElementById("cashier")
|
|
|
-
|
|
|
-const store = createStore(reducer);
|
|
|
-store.subscribe(updateCashbox);
|
|
|
-const unsubscribe = store.subscribe(() => console.log(store.getState()));
|
|
|
-
|
|
|
-function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
|
|
|
- //объект action деструктуризируется на три переменных
|
|
|
- if (!state) {
|
|
|
- //начальная уборка в ларьке:
|
|
|
- return {
|
|
|
- stock: {
|
|
|
- пиво: {
|
|
|
- price: 20,
|
|
|
- amount: 100,
|
|
|
- },
|
|
|
- чипсы: {
|
|
|
- price: 25,
|
|
|
- amount: 100,
|
|
|
- },
|
|
|
- сиги: {
|
|
|
- price: 50,
|
|
|
- amount: 100,
|
|
|
- },
|
|
|
- },
|
|
|
- cashbox: 0,
|
|
|
- };
|
|
|
- //
|
|
|
- }
|
|
|
- if (type === "КУПИТЬ") {
|
|
|
- //если тип action - КУПИТЬ, то:
|
|
|
- return {
|
|
|
- ...state, //берем все что было из ассортимента
|
|
|
- stock: {
|
|
|
- ...state.stock,
|
|
|
- [ШО]: {
|
|
|
- price: state.stock[ШО].price,
|
|
|
- amount: state.stock[ШО].amount - СКОКА,
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }, //и уменьшаем то, что покупается на количество
|
|
|
- cashbox: state.cashbox + БАБЛО,
|
|
|
-
|
|
|
-
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- 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 в объект
|
|
|
- };
|
|
|
-}
|
|
|
-let html = "";
|
|
|
-for (let key in store.getState().stock) {
|
|
|
- html += `<option>${key}</option>`;
|
|
|
-}
|
|
|
-select.innerHTML = html;
|
|
|
-
|
|
|
-btn.addEventListener("click", buy);
|
|
|
-input.addEventListener("input", counter );
|
|
|
-select.addEventListener("click", counter)
|
|
|
-
|
|
|
-function buy(e) {
|
|
|
- if(bablo.value >= (input.value * store.getState().stock[select.value].price) ){
|
|
|
- store.dispatch({
|
|
|
- type: "КУПИТЬ",
|
|
|
- ШО: select.value,
|
|
|
- СКОКА: input.value,
|
|
|
- БАБЛО: Number(bablo.value),
|
|
|
- });
|
|
|
- console.log(store);
|
|
|
- bablo.value = "";
|
|
|
-}else{
|
|
|
- alert("Не хватает бабла");
|
|
|
-}
|
|
|
-}
|
|
|
-function updateCashbox(){
|
|
|
- cash.innerText = `КАССА : ${store.getState().cashbox}`
|
|
|
-}
|
|
|
-function counter( ){
|
|
|
- cashier.innerText = ` К ОПЛАТЕ : ${ (input.value * store.getState().stock[select.value].price)}`
|
|
|
-
|
|
|
-}
|
