|
@@ -0,0 +1,138 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="en">
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
+ <title>Document</title>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body>
|
|
|
|
|
+ <header>
|
|
|
|
|
+ <div class="header" style="text-align: center; background-color: #8091b4; padding: 5px;">
|
|
|
|
|
+ <h1>ЛАРЁК</h1>
|
|
|
|
|
+ <div id="money" style="margin: 8px;">Касса: 0 грн</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </header>
|
|
|
|
|
+ <main style="background-color: #EEEFF1; text-align: center; padding: 15px;">
|
|
|
|
|
+ <select id="myselect" style="width: 150px; height: 32px;text-align: center;background-color: #8091b4;">
|
|
|
|
|
+ <option>ВЫБЕРИТЕ ТОВАР</option>
|
|
|
|
|
+ </select>
|
|
|
|
|
+ <container id="container">
|
|
|
|
|
+ <section id="section">
|
|
|
|
|
+ </section>
|
|
|
|
|
+ </container>
|
|
|
|
|
+
|
|
|
|
|
+ </main>
|
|
|
|
|
+ <main style="background-color: #8091b4; text-align: center; padding: 15px;">
|
|
|
|
|
+ <div style="margin: 8px;">Выберите количество шт</div>
|
|
|
|
|
+ <input id="inp" style="margin: 8px;" type="number"><br>
|
|
|
|
|
+ <div style="margin: 8px;">Внесите сумму за покупку</div>
|
|
|
|
|
+ <div id="priceDiv" style="margin: 8px;"></div>
|
|
|
|
|
+ <input id="inp2" style="margin: 8px;" type="number"><br>
|
|
|
|
|
+ <button onclick="send()" style="margin: 8px;">КУПИТЬ</button>
|
|
|
|
|
+ </main>
|
|
|
|
|
+ <script>
|
|
|
|
|
+ function reducer(state, {type, ШО, number,money}){
|
|
|
|
|
+ if (!state){
|
|
|
|
|
+ return { // Добавление товара в этот обьект, не ломает код
|
|
|
|
|
+ касса: 0,
|
|
|
|
|
+ ПИВО: {amount:100, price: 55},
|
|
|
|
|
+ ЧИПСЫ: {amount:100, price: 30},
|
|
|
|
|
+ СИГИ: {amount:100, price: 80},
|
|
|
|
|
+ ВИСКИ: {amount:100, price: 180},
|
|
|
|
|
+ СУХАРИ: {amount:100, price: 20},
|
|
|
|
|
+ ОРЕШКИ: {amount:100, price: 25},
|
|
|
|
|
+ КОЛА: {amount:100, price: 20},
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ if(number >state[ШО].amount){
|
|
|
|
|
+ alert('В ларьке нет столько товара!')
|
|
|
|
|
+ return state
|
|
|
|
|
+ }
|
|
|
|
|
+ if(money<number*state[ШО].price){
|
|
|
|
|
+ alert(`Мало денег! Нужно минимум ${number*state[ШО].price} грн!`)
|
|
|
|
|
+ return state
|
|
|
|
|
+ }
|
|
|
|
|
+ if (type === 'КУПИТЬ'){
|
|
|
|
|
+ let buy = state[ШО].amount - number
|
|
|
|
|
+ return {
|
|
|
|
|
+ ...state,
|
|
|
|
|
+ [ШО]: {amount:buy, price:state[ШО].price},
|
|
|
|
|
+ касса: state.касса+money
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ 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
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ const store = createStore(reducer)
|
|
|
|
|
+ const unsubscribe = store.subscribe(() => console.log(store.getState()))
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ let arrKeys = Object.keys(store.getState()).slice(1) // Массив ключей, без ключа 'касса'
|
|
|
|
|
+
|
|
|
|
|
+ for(let i = 0; i<=arrKeys.length-1 ;i++){ // Цикл для создания тегов option
|
|
|
|
|
+ let optionTeg = document.createElement('option')
|
|
|
|
|
+ optionTeg.innerHTML=`${arrKeys[i]} ${store.getState()[arrKeys[i]].price} грн`
|
|
|
|
|
+ optionTeg.value=arrKeys[i]
|
|
|
|
|
+ document.getElementById("myselect").append(optionTeg)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function update(){//Функция обновления колличества товара в дивах
|
|
|
|
|
+ document.getElementById("section").remove()
|
|
|
|
|
+ let section = document.createElement('section')
|
|
|
|
|
+ section.id= 'section'
|
|
|
|
|
+ document.getElementById("container").append(section)
|
|
|
|
|
+
|
|
|
|
|
+ for(let i = 0; i<=arrKeys.length-1 ;i++){
|
|
|
|
|
+ let balanceDiv = document.createElement('div')
|
|
|
|
|
+ balanceDiv.innerHTML=`<br>${arrKeys[i]} ${store.getState()[arrKeys[i]].amount} шт`
|
|
|
|
|
+ document.getElementById("section").append(balanceDiv)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ update()
|
|
|
|
|
+
|
|
|
|
|
+ let buy
|
|
|
|
|
+ document.getElementById("myselect").addEventListener("change", function(){ //Функция с циклом для создания action
|
|
|
|
|
+ let price=0 // И для динамического изминения цены в div
|
|
|
|
|
+ for(let i = 0; i<=arrKeys.length ;i++){
|
|
|
|
|
+ if(this.value==arrKeys[i]){
|
|
|
|
|
+ price= store.getState()[arrKeys[i]].price
|
|
|
|
|
+ buy= (number,money) => ({type: 'КУПИТЬ', ШО: arrKeys[i], number, money})
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ document.getElementById('priceDiv').innerHTML = "Цена: "+price+" грн";
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ function send(){//Функция которая в онклике, передаём значения с инпутов, обновляем кассу, и обновляем товары в дивах.
|
|
|
|
|
+ let result = store.dispatch(buy(+document.getElementById('inp').value,+document.getElementById('inp2').value))
|
|
|
|
|
+ document.getElementById('money').innerHTML = "Касса: "+store.getState().касса+" грн";
|
|
|
|
|
+ update()
|
|
|
|
|
+ return result
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|
