<!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>
<p id="error"></p>
<script>
function reducer(state, {type, ШО, СКОКА, БАБЛО}){
if (!state){
return {
пиво:{колво:100, цена: 10},
чипсы:{колво:100, цена:20},
сиги:{колво:100, цена:30},
касса:2700
}
}
if (type === 'КУПИТЬ'){
if((ШО in state) && БАБЛО >= state[ШО].цена * СКОКА && state[ШО].колво - СКОКА >= 0){
return {
...state,
[ШО]:{колво:state[ШО].колво - СКОКА, цена: state[ШО].цена},
касса: +state.касса + (state[ШО].цена*СКОКА)
}
}else{
error.innerHTML='\☹ что-то не так (нет данного товара или не хватает денег) \☹';
setTimeout(()=>error.innerHTML='',2000);
}
}
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())){
if(tovar.value===key){
store.dispatch({type: 'КУПИТЬ', ШО: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';
}
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');
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);
}
document.body.append(table);
})
</script>
</body>
</html>