index.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. function reducer(state, { type, good, count, money }) {
  2. if (!state) {
  3. let state = {
  4. пиво: {
  5. количество: 100,
  6. цена: 25,
  7. },
  8. чипсы: {
  9. количество: 100,
  10. цена: 35,
  11. },
  12. сиги: {
  13. количество: 100,
  14. цена: 60,
  15. },
  16. };
  17. let newState = {};
  18. for (let [key, value] of Object.entries(state)) {
  19. newState[key] = "";
  20. if (typeof value === "object") {
  21. newState[`${key}-количество`] = value["количество"];
  22. newState[`${key}-цена`] = value["цена"];
  23. }
  24. }
  25. return newState;
  26. }
  27. if (type === "КУПИТЬ") {
  28. if (money / count >= state[`${good}-цена`]) {
  29. if (state[`${good}-количество`] - count >= 0) {
  30. return {
  31. ...state,
  32. [`${good}-количество`]: state[`${good}-количество`] - count,
  33. };
  34. } else {
  35. alert(
  36. `Товар '${good}' закончилось! ${
  37. state[`${good}-количество`] !== 0
  38. ? "Выдано остаток: " + state[`${good}-количество`]
  39. : `На складе нет остатков товара '${good}'!`
  40. }`
  41. );
  42. return {
  43. ...state,
  44. [`${good}-количество`]: 0,
  45. };
  46. }
  47. } else {
  48. alert(
  49. `У вас не хватает денег! Для ${count} товара '${good}' необходимо ${
  50. state[`${good}-цена`] * count
  51. } гривнів`
  52. );
  53. }
  54. }
  55. return state;
  56. }
  57. function createStore(reducer) {
  58. let state = reducer(undefined, {});
  59. let cbs = [];
  60. const getState = () => state;
  61. const subscribe = (cb) => (
  62. cbs.push(cb), () => (cbs = cbs.filter((c) => c !== cb))
  63. );
  64. const dispatch = (action) => {
  65. const newState = reducer(state, action);
  66. if (newState !== state) {
  67. state = newState;
  68. for (let cb of cbs) cb();
  69. }
  70. };
  71. return {
  72. getState,
  73. dispatch,
  74. subscribe,
  75. };
  76. }
  77. const store = createStore(reducer);
  78. const unsubscribe = store.subscribe(() => console.log(store.getState()));
  79. let buySmth = (good, count, money) => ({
  80. type: "КУПИТЬ",
  81. good,
  82. count,
  83. money,
  84. });
  85. for (let [key] of Object.entries(store.getState())) {
  86. if (!key.includes("-")) {
  87. let option = new Option(key);
  88. goods.append(option);
  89. }
  90. }
  91. let fields = Object.keys(store.getState());
  92. for (let i = 0; i < fields.length; i++) {
  93. let h = document.createElement("h1");
  94. h.id = fields[i];
  95. h.className = "goods";
  96. h.innerText = `${fields[i]} : ${store.getState()[fields[i]]}`;
  97. shop.append(h);
  98. }
  99. quantity.oninput = () => {
  100. if (quantity.value === "" || +quantity.value < 1) {
  101. quantity.value = 1;
  102. }
  103. };
  104. money.oninput = () => {
  105. if (money.value === "" || +money.value < 1) {
  106. money.value = 1;
  107. }
  108. };
  109. buy.onclick = () => {
  110. let headers = document.querySelectorAll(".goods");
  111. for (let i = 0; i < headers.length; i++) {
  112. if (`${goods.value}-количество` === headers[i].id) {
  113. store.subscribe(
  114. () =>
  115. (headers[i].innerText = `${headers[i].id} : ${
  116. store.getState()[headers[i].id]
  117. }`)
  118. );
  119. store.dispatch(buySmth(goods.value, quantity.value, money.value));
  120. money.value = 1;
  121. }
  122. }
  123. };
  124. store.getState();