|
|
@@ -2,6 +2,78 @@
|
|
|
|
|
|
<body>
|
|
|
<script>
|
|
|
+ const addCell = (row, value) => {
|
|
|
+ let cell = document.createElement("td");
|
|
|
+ cell.innerText = value;
|
|
|
+ row.append(cell);
|
|
|
+ return cell;
|
|
|
+ }
|
|
|
+ const createAssortTable = (store) => {
|
|
|
+ let state = store.getState();
|
|
|
+ let table = document.createElement("table");
|
|
|
+ let row = document.createElement("tr");
|
|
|
+ table.append(row);
|
|
|
+ addCell(row, "NAME");
|
|
|
+ addCell(row, "PRICE");
|
|
|
+ addCell(row, "AMOUNT");
|
|
|
+ for (const itemKey in state) {
|
|
|
+ if (itemKey == "cashbox")
|
|
|
+ continue;
|
|
|
+ let item = state[itemKey];
|
|
|
+ let row = document.createElement("tr");
|
|
|
+ table.append(row);
|
|
|
+ addCell(row, itemKey);
|
|
|
+
|
|
|
+ addCell(row, item.price);
|
|
|
+
|
|
|
+ let amountVal = addCell(row, item.amount);
|
|
|
+
|
|
|
+ store.subscribe(() => {
|
|
|
+ const state = store.getState();
|
|
|
+ const item = state[itemKey];
|
|
|
+ const amount = item.amount;
|
|
|
+ amountVal.innerText = amount;
|
|
|
+ });
|
|
|
+ //store.getState()[itemKey].amount);
|
|
|
+ }
|
|
|
+ return table;
|
|
|
+ }
|
|
|
+
|
|
|
+ const createSale = (store) => {
|
|
|
+ let state = store.getState();
|
|
|
+ let resDiv = document.createElement("div")
|
|
|
+ let select = document.createElement("select");
|
|
|
+ resDiv.append(select);
|
|
|
+ for (itemKey in state) {
|
|
|
+ if (itemKey == "cashbox")
|
|
|
+ continue;
|
|
|
+ let option = document.createElement("option");
|
|
|
+ option.value = itemKey;
|
|
|
+ option.text = itemKey;
|
|
|
+ select.append(option);
|
|
|
+ }
|
|
|
+ select.onchange = () => {
|
|
|
+ priceDiv.innerText = state[select.value].price;
|
|
|
+ }
|
|
|
+
|
|
|
+ let priceDiv = document.createElement("div");
|
|
|
+ priceDiv.innerText = state[select.value].price;
|
|
|
+ resDiv.append(priceDiv);
|
|
|
+ let amountInp = document.createElement("input");
|
|
|
+ amountInp.value = 0;
|
|
|
+ resDiv.append(amountInp);
|
|
|
+ let cashInp = document.createElement("input");
|
|
|
+ cashInp.value = 0;
|
|
|
+ resDiv.append(cashInp);
|
|
|
+ let buyBtn = document.createElement("button");
|
|
|
+ buyBtn.innerText = "BUY";
|
|
|
+ buyBtn.onclick = () => {
|
|
|
+ store.dispatch({ type: 'BUY', item: select.value, amount: +amountInp.value, cash: +cashInp.value });
|
|
|
+ }
|
|
|
+ resDiv.append(buyBtn);
|
|
|
+
|
|
|
+ return resDiv;
|
|
|
+ }
|
|
|
function createStore(reducer) {
|
|
|
let state = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
|
|
|
let cbs = [] //массив подписчиков
|
|
|
@@ -70,30 +142,17 @@
|
|
|
let store = createStore(seller);
|
|
|
const unsubscribe = store.subscribe(() => console.log(store.getState()))
|
|
|
|
|
|
- store.dispatch({ type: 'BUY', item: 'cigars', amount: 3, cash: 58 })
|
|
|
+ /*store.dispatch({ type: 'BUY', item: 'cigars', amount: 3, cash: 58 })
|
|
|
store.dispatch({ type: 'BUY', item: 'vodka', amount: 3, cash: 92 })
|
|
|
store.dispatch({ type: 'SUPPLY', item: 'vodka', amount: 5 })
|
|
|
- store.dispatch({ type: 'SUPPLY', item: 'cukerky', amount: 5, price: 3 })
|
|
|
+ store.dispatch({ type: 'SUPPLY', item: 'cukerky', amount: 5, price: 3 })*/
|
|
|
|
|
|
+ document.body.append(createAssortTable(store));
|
|
|
+ document.body.append(document.createElement("br"));
|
|
|
+ document.body.append(createSale(store));
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
+<footer>
|
|
|
|
|
|
-const store = createStore(reducer)
|
|
|
-
|
|
|
-//запомнит функцию во внутреннем массиве cbs.
|
|
|
-//она будет запущена при любом успешном dispatch
|
|
|
-const unsubscribe = store.subscribe(() => console.log(store.getState()))
|
|
|
-
|
|
|
-setTimeout(unsubscribe, 10000) //отпишемся через 10 секунд, например
|
|
|
-
|
|
|
-//происходит запуск редьюсера, который создает новый state.
|
|
|
-//dispatch запускает всех подписчиков из массива cbs
|
|
|
-store.dispatch({type: 'КУПИТЬ', ШО: 'пиво', СКОКА: 3})
|
|
|
-
|
|
|
-const купиПиваса = СКОКА => ({type: 'КУПИТЬ', ШО: 'пиво', СКОКА})
|
|
|
-const купиЧипсики = СКОКА => ({type: 'КУПИТЬ', ШО: 'чипсы', СКОКА})
|
|
|
-
|
|
|
-store.dispatch(купиПиваса(3))
|
|
|
-store.dispatch(купиЧипсики(6))
|
|
|
-store.dispatch(купиПиваса(30))
|
|
|
+</footer>
|
