|
|
@@ -0,0 +1,132 @@
|
|
|
+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);
|
|
|
+updateShowCase()
|
|
|
+store.subscribe(updateCashbox);
|
|
|
+store.subscribe(updateShowCase);
|
|
|
+const unsubscribe = store.subscribe(() => console.log(store.getState()));
|
|
|
+
|
|
|
+function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
|
|
|
+ //объект action деструктуризируется на три переменных
|
|
|
+ if (!state) {
|
|
|
+ //начальная уборка в ларьке:
|
|
|
+ return {
|
|
|
+ stock: {
|
|
|
+ пиво: {
|
|
|
+ price: 20,
|
|
|
+ amount: 100,
|
|
|
+ img : "https://pivasik.com.ua/wp-content/uploads/2019/09/orange.png",
|
|
|
+
|
|
|
+ },
|
|
|
+ чипсы: {
|
|
|
+ price: 25,
|
|
|
+ amount: 100,
|
|
|
+ img : "https://cdn.27.ua/499/24/05/74757_4.jpeg",
|
|
|
+ },
|
|
|
+ сиги: {
|
|
|
+ price: 50,
|
|
|
+ amount: 100,
|
|
|
+ img: "https://img1.liveinternet.ru/images/attach/c/8/100/745/100745087_kozak_bf_red500x500.jpg",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ cashbox: 0,
|
|
|
+ };
|
|
|
+ //
|
|
|
+ }
|
|
|
+ if (type === "КУПИТЬ") {
|
|
|
+ //если тип action - КУПИТЬ, то:
|
|
|
+ return {
|
|
|
+ ...state, //берем все что было из ассортимента
|
|
|
+ stock: {
|
|
|
+ ...state.stock,
|
|
|
+ [ШО]: {
|
|
|
+ price: state.stock[ШО].price,
|
|
|
+ amount: state.stock[ШО].amount - СКОКА,
|
|
|
+ img: state.stock[ШО].img
|
|
|
+ }
|
|
|
+ }, //и уменьшаем то, что покупается на количество
|
|
|
+ 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),
|
|
|
+ });
|
|
|
+ bablo.value = "";
|
|
|
+}else{
|
|
|
+ alert("Не хватает бабла");
|
|
|
+}
|
|
|
+}
|
|
|
+function updateCashbox(){
|
|
|
+ cash.innerText = `КАССА : ${store.getState().cashbox}`
|
|
|
+}
|
|
|
+function counter( ){
|
|
|
+ if (input.value > store.getState().stock[select.value].amount){
|
|
|
+ input.value = store.getState().stock[select.value].amount;
|
|
|
+ }
|
|
|
+ cashier.innerText = ` К ОПЛАТЕ : ${ (input.value * store.getState().stock[select.value].price)}`;
|
|
|
+}
|
|
|
+
|
|
|
+function updateShowCase(){
|
|
|
+ const obj = store.getState().stock;
|
|
|
+ const wrapperShowCase = document.querySelector(".wrapperShowCase");
|
|
|
+ wrapperShowCase.innerHTML = "";
|
|
|
+ let html =""
|
|
|
+ for(const good in obj){
|
|
|
+ html += `<div class="showCaseBlock">`;
|
|
|
+ html += `<img class="img" src = ${obj[good].img}>`;
|
|
|
+ html += `<p class="info">ЦЕНА: ${obj[good].price} грн</p>`;
|
|
|
+ html += `<p class="info">в наличии: ${obj[good].amount} шт</p>`
|
|
|
+ html += `</div>`;
|
|
|
+ }
|
|
|
+ wrapperShowCase.innerHTML = html;
|
|
|
+}
|
