|
|
@@ -0,0 +1,127 @@
|
|
|
+function reducer(state, {type, ШО, СКОКА, ДЕНЬГИ}){ //объект action деструктуризируется на три переменных
|
|
|
+ if (!state){ //начальная уборка в ларьке:
|
|
|
+ return {
|
|
|
+ пиво: {
|
|
|
+ count: 100,
|
|
|
+ price: 30
|
|
|
+ },
|
|
|
+ чипсы:{
|
|
|
+ count: 100,
|
|
|
+ price: 25
|
|
|
+ },
|
|
|
+ сиги:{
|
|
|
+ count: 100,
|
|
|
+ price: 60
|
|
|
+ },
|
|
|
+ КАССА: 0,
|
|
|
+ КОШЕЛЕК: 250
|
|
|
+ };
|
|
|
+ }
|
|
|
+ if (type === 'КУПИТЬ'){ //если тип action - КУПИТЬ, то:
|
|
|
+ if(state[ШО].count < СКОКА){
|
|
|
+ alert('У нас нет такого количества!');
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ [ШО]: {count: state[ШО].count, price: state[ШО].price},
|
|
|
+ }
|
|
|
+ };
|
|
|
+ if(state.КОШЕЛЕК < (state[ШО].price * СКОКА)){
|
|
|
+ alert('У Вас не хватает денег!');
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ [ШО]: {count: state[ШО].count, price: state[ШО].price},
|
|
|
+ }
|
|
|
+ };
|
|
|
+ if(СКОКА <= 0){
|
|
|
+ alert('Вы уверены, что ввели верное количество?');
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ [ШО]: {count: state[ШО].count, price: state[ШО].price},
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //else{
|
|
|
+ //console.log(`${ШО} ${СКОКА} шт`);
|
|
|
+ //}
|
|
|
+ return {
|
|
|
+ ...state, //берем все что было из ассортимента
|
|
|
+ //[ШО]: state[ШО].count - СКОКА,//и уменьшаем то, что покупается на количество
|
|
|
+ [ШО]: {count: state[ШО].count - СКОКА, price: state[ШО].price},
|
|
|
+ КАССА: state.КАССА + state[ШО].price * СКОКА,
|
|
|
+ КОШЕЛЕК: state.КОШЕЛЕК - (state[ШО].price * СКОКА)
|
|
|
+ };
|
|
|
+ }
|
|
|
+ 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 в объект
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const store = createStore(reducer);
|
|
|
+
|
|
|
+function createGoods(select, store){
|
|
|
+ for(let key in store.getState()){
|
|
|
+ if(key === 'КАССА'){
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ let option = document.createElement('option');
|
|
|
+ option.value = key;
|
|
|
+ option.innerHTML = key;
|
|
|
+ select.appendChild(option);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+createGoods(sel, store);
|
|
|
+store.subscribe(() => console.log(store.getState()));
|
|
|
+
|
|
|
+
|
|
|
+btn.onclick = () => store.dispatch({type: 'КУПИТЬ', ШО: sel.value, СКОКА: +input.value});
|
|
|
+
|
|
|
+
|
|
|
+function drawTable () {
|
|
|
+ table.innerHTML = '<tr><th>Goods</th><th>Price</th><th>Total</th></tr>';
|
|
|
+
|
|
|
+ for(let good in store.getState()){
|
|
|
+ let tr = document.createElement('tr');
|
|
|
+ table.appendChild(tr);
|
|
|
+ tr.innerHTML = good;
|
|
|
+
|
|
|
+ for(let pr = 0; pr < 1; pr++){
|
|
|
+ let td = document.createElement('td');
|
|
|
+ tr.appendChild(td);
|
|
|
+ td.innerHTML = store.getState()[good].price + ' ' + 'грн';
|
|
|
+ if(good === 'КАССА' || good === 'КОШЕЛЕК'){
|
|
|
+ td.innerHTML ='';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ for(let c = 0; c < 1; c++){
|
|
|
+ let td = document.createElement('td');
|
|
|
+ tr.appendChild(td);
|
|
|
+ td.innerHTML = store.getState()[good].count + ' ' + 'шт';
|
|
|
+ if(good === 'КАССА' || good === 'КОШЕЛЕК'){
|
|
|
+ td.innerHTML = store.getState()[good] + ' ' + 'грн';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+drawTable();
|
|
|
+store.subscribe(() =>drawTable());
|
