index.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. function reducer(state, {type, ШО, СКОКА }){
  2. if (!state){
  3. return {
  4. пиво: {storage : 100 , price: 65},
  5. чипсы: {storage: 145 , price: 120},
  6. сиги: {storage : 220 , price: 75.50},
  7. горілка: {storage : 140 , price: 200.50},
  8. корсары: {storage : 330 , price: 15.50},
  9. чупа_чупс: {storage : 220 , price: 14.50},
  10. вино_777: {storage : 220 , price: 14.50},
  11. касса: 0
  12. }
  13. }
  14. if(type === 'ВЫБОР'){
  15. if(СКОКА <= 0 || СКОКА > state[ШО].storage){
  16. return state;
  17. }return{
  18. ...state,
  19. касса: +state.касса + (СКОКА * state[ШО].price),
  20. }
  21. }
  22. if (type === 'КУПИТЬ'){
  23. if(state[ШО].storage >= СКОКА){
  24. state[ШО].storage = state[ШО].storage - СКОКА
  25. }return {
  26. ...state
  27. }
  28. }
  29. if(type === 'ТРАНЗАКЦИЯ'){
  30. if(state.касса >= 0){
  31. return{
  32. ...state,
  33. касса : state.касса * 0,
  34. }
  35. }
  36. }
  37. return state
  38. }
  39. const store = createStore(reducer)
  40. console.log(store.getState())
  41. function createStore(reducer){
  42. let state = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
  43. let cbs = [] //массив подписчиков
  44. const getState = () => state //функция, возвращающая переменную из замыкания
  45. const subscribe = cb => (cbs.push(cb), () => cbs = cbs.filter(c => c !== cb)) //возвращаем функцию unsubscribe, которая удаляет подписчика из списка
  46. const dispatch = action => {
  47. const newState = reducer(state, action) //пробуем запустить редьюсер
  48. if (newState !== state){ //проверяем, смог ли редьюсер обработать action
  49. state = newState //если смог, то обновляем state
  50. for (let cb of cbs) cb() //и запускаем подписчиков
  51. }
  52. }
  53. return {
  54. getState, //добавление функции getState в результирующий объект
  55. dispatch,
  56. subscribe //добавление subscribe в объект
  57. }
  58. }
  59. for(let [key, value] of Object.entries(store.getState())){
  60. let div = document.getElementById('content')
  61. let btn = document.createElement('button')
  62. var text = document.getElementById('text')
  63. let stock = document.getElementById('stock')
  64. let sklad = document.createElement('div')
  65. sklad.style.backgroundColor = 'silver'
  66. sklad.style.display = 'flex'
  67. let btn1 = document.createElement('div')
  68. let buy = document.getElementById('buy')
  69. stock.append(sklad)
  70. text.append(btn1)
  71. div.append(btn)
  72. btn.id = 'product'
  73. btn.innerHTML = `${key} (${value.price + "грн"})`
  74. btn.onclick = () => {
  75. store.dispatch({type: 'КУПИТЬ', ШО: key, СКОКА: 1})
  76. store.dispatch({type: 'ВЫБОР' , ШО : key , СКОКА: 1})
  77. console.log(store.getState())
  78. }
  79. buy.onclick = () => {
  80. let div = document.createElement('div')
  81. let content = document.getElementById('buy_content')
  82. var allMoney = `${store.getState().касса}`
  83. var result = Number(allMoney)
  84. moneyStorage.push(result)
  85. arraySum(moneyStorage)
  86. console.log(moneyStorage)
  87. content.append(div)
  88. div.innerHTML = `Транзакция ${Date()}: ${store.getState().касса} грн`
  89. store.dispatch({type: 'ТРАНЗАКЦИЯ', ШО: 'касса', СКОКА: 0})
  90. store.dispatch({type: 'КАССА', ШО: 'касса', СКОКА: 0})
  91. console.log(store.getState())
  92. }
  93. store.subscribe(()=> sklad.innerHTML = '/' + ` ${key} ${value.storage} шт.` + ' ' );
  94. let moneyStorage = []
  95. function arraySum(array){
  96. var money = document.getElementById('total')
  97. var sum = 0;
  98. for(var i = 0; i < array.length; i++){
  99. sum += array[i];
  100. }
  101. money.innerText = sum + " грн";
  102. }
  103. }
  104. function casa(){
  105. const h1 = document.createElement('h1');
  106. h1.id = 'change'
  107. h1.style.color = 'red'
  108. text.append(h1);
  109. store.subscribe(() => h1.innerText = `До сплати: ${store.getState().касса} грн`);
  110. h1.innerText = `До сплати:${store.getState().касса}`;
  111. }
  112. casa();