|
|
@@ -0,0 +1,81 @@
|
|
|
+// +сделать отображение всего того, что есть в ларьке (можете хоть витрину нарисовать, если интересно) с количествами;
|
|
|
+//+ сделать select для выбора товара и input type = 'number' для выбора количества и кнопку "купить",
|
|
|
+// которая посылает action в store используя actionCreator для создания action
|
|
|
+// +добавить в reducer проверку на уход в минус, что бы нельзя было продать то, чего нет в должном количестве.
|
|
|
+// +добавить в state цену каждого товара и поле касса.Для этого вместо структуры вида пиво: 100 используйте
|
|
|
+// пиво: КАКОЙ - ТО ОБЪЕКТ С КОЛИЧЕСТВОМ И СТОИМОСТЬЮ ОДНОЙ ЕДИНИЦЫ.
|
|
|
+// +В action добавьте поле "бабло".Всё это пишется в reducer, не забудьте проверки что бабла хватает.
|
|
|
+// +добавьте в интерфейс поле для денег.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function reducer(state, { type, ШО, СКОКА, бабло }) { //объект action деструктуризируется на три переменных
|
|
|
+ if (!state) { //начальная уборка в ларьке:
|
|
|
+ return {
|
|
|
+ пиво: { amount: 100, price: 20 },
|
|
|
+ чипсы: { amount: 100, price: 15 },
|
|
|
+ сиги: { amount: 100, price: 45 },
|
|
|
+ касса:0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type === 'КУПИТЬ') {
|
|
|
+ //если тип action - КУПИТЬ, то:
|
|
|
+ if ((typeof state[ШО] !== "undefined") && ((СКОКА <= state[ШО]['amount']) && СКОКА > 0) && (бабло >= state[ШО]['price'] * СКОКА)) {
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...state, //берем все что было из ассортимента
|
|
|
+ [ШО]: { 'amount': state[ШО]['amount'] - СКОКА, 'price': 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);
|
|
|
+store.subscribe(() => console.log(store.getState()));
|
|
|
+
|
|
|
+for ( const item of Object.keys(store.getState())) { laryok.insertAdjacentHTML('beforeend', `<option >${item}</option>`)}
|
|
|
+
|
|
|
+buyButton.onclick = () => {
|
|
|
+ store.dispatch({ type: "КУПИТЬ", ШО: laryok.value, СКОКА: amount.value, бабло:bablo.value });
|
|
|
+drawTable()}
|
|
|
+
|
|
|
+function drawTable() {
|
|
|
+ goodsTable.innerHTML = "";
|
|
|
+ goodsTable.insertAdjacentHTML('beforeend', '<caption><b>Данные о товарах</b></caption><tr><th>Товар</th><th>Кол-во на складе</th><th>Цена</th></tr>');
|
|
|
+
|
|
|
+ for (const item of Object.entries(store.getState())) {
|
|
|
+ if (item[0] !== 'касса') {
|
|
|
+ const good = document.createElement('tr');
|
|
|
+ good.innerHTML = `<td>${item[0]}</td><td>${item[1]['amount']}</td><td>${item[1]['price']}</td>`
|
|
|
+ goodsTable.appendChild(good);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+drawTable();
|
