|
|
@@ -0,0 +1,140 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>Redux2</title>
|
|
|
+ <style>
|
|
|
+ td, th{
|
|
|
+ border: 1px solid black;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+ <!-- <input type="text" id="tovar"> -->
|
|
|
+ <select id='tovar'>
|
|
|
+ <option value="пиво">пиво</option>
|
|
|
+ <option value="чипсы">чипсы</option>
|
|
|
+ <option value="сиги">сиги</option>
|
|
|
+ </select>
|
|
|
+ <input type="number" id="skok" placeholder="сколько надо?">
|
|
|
+ <input type="number" id="bablo" placeholder="сколько денег?">
|
|
|
+ <button id="btn">Купить</button>
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+ function reducer(state, {type, ШО, СКОКА, БАБЛО}){
|
|
|
+ if (!state){
|
|
|
+ return {
|
|
|
+ пиво:{колво:100, цена: 10},
|
|
|
+ чипсы:{колво:100, цена:20},
|
|
|
+ сиги:{колво:100, цена:30},
|
|
|
+ касса:23450
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type === 'КУПИТЬ'){
|
|
|
+ if(ШО in state && БАБЛО > state[ШО].цена * СКОКА){
|
|
|
+ return state[ШО] - СКОКА >= 0 ? {
|
|
|
+ ...state,
|
|
|
+ ШО:{колво:state[ШО].колво - СКОКА, цена: state[ШО].цена},
|
|
|
+ касса: +state.касса + (state[ШО].цена*СКОКА)
|
|
|
+ } : state;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return state;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function createStore(reducer){
|
|
|
+ let state = reducer(undefined, {})
|
|
|
+ let cbs = []
|
|
|
+ const getState = () => state
|
|
|
+ const subscribe = cb => (cbs.push(cb),
|
|
|
+ () => cbs = cbs.filter(c => c !== cb));
|
|
|
+ const dispatch = action => {
|
|
|
+ const newState = reducer(state, action)
|
|
|
+ if (newState !== state){
|
|
|
+ state = newState
|
|
|
+ for (let cb of cbs) cb()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ getState,
|
|
|
+ dispatch,
|
|
|
+ subscribe
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let store=createStore(reducer);
|
|
|
+ btn.onclick=function(){
|
|
|
+ for(let [key] of Object.entries(store.getState())){
|
|
|
+ console.log(key);
|
|
|
+ if(tovar.value===key){
|
|
|
+ store.dispatch({type: 'КУПИТЬ', ШО:{[tovar.value]:[tovar.value].колво}, СКОКА: skok.value, БАБЛО: bablo.value });
|
|
|
+ console.log(store.getState());
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let table=document.createElement('table');
|
|
|
+ for(let [key,value] of Object.entries(store.getState())){
|
|
|
+ let tr=document.createElement('tr');
|
|
|
+ let td=document.createElement('th');
|
|
|
+ let td2=document.createElement('td');
|
|
|
+ let td3=document.createElement('td');
|
|
|
+ td.innerText=key;
|
|
|
+ if(typeof value==='object'){
|
|
|
+ for(let i in value){
|
|
|
+ if(i==='колво'){
|
|
|
+ td2.innerText=+value[i];
|
|
|
+ }
|
|
|
+ if(i==='цена'){
|
|
|
+ td3.innerText=value[i];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ td2.innerText=value;
|
|
|
+ }
|
|
|
+ tr.append(td,td2,td3);
|
|
|
+ table.append(tr);
|
|
|
+
|
|
|
+ table.style.border='1px solid black';
|
|
|
+
|
|
|
+ console.log(key);
|
|
|
+ console.log(value);
|
|
|
+ }
|
|
|
+ document.body.append(table);
|
|
|
+
|
|
|
+ const unsubscribe=store.subscribe(()=>{
|
|
|
+ while (table.hasChildNodes()) {
|
|
|
+ table.removeChild(table.firstChild);
|
|
|
+ }
|
|
|
+ for(let [key,value] of Object.entries(store.getState())){
|
|
|
+ let tr=document.createElement('tr');
|
|
|
+ let td=document.createElement('td');
|
|
|
+ let td2=document.createElement('td');
|
|
|
+ td.innerText=key;
|
|
|
+ if(typeof value==='object'){
|
|
|
+ for(let i in value){
|
|
|
+ if(i==='колво'){
|
|
|
+ td2.innerText=value[i];
|
|
|
+ }
|
|
|
+ if(i==='цена'){
|
|
|
+ td3.innerText=value[i];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ td2.innerText=value;
|
|
|
+ }
|
|
|
+ tr.append(td,td2);
|
|
|
+ td.innerText=key+':'+value;
|
|
|
+ table.append(tr);
|
|
|
+ }
|
|
|
+ document.body.append(table);
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
