homework/js/13/HW13.js

// create Store
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
    }
}

// create Reduser
function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
    if (!state) {
        return {
            пиво: {
                amount: 110,
                price: 20
            },
            чипсы: {
                amount: 120,
                price: 30
            },
            сиги: {
                amount: 130,
                price: 50
            },
            касса: 200
        }
    }

    if (type === 'КУПИТЬ' && СКОКА <= state[ШО].amount && БАБЛО >= (СКОКА * state[ШО].price)) {
        return {
            ...state,
            [ШО]: {
                amount: state[ШО].amount - СКОКА,
                price: state[ШО].price
            },
            касса: state.касса + БАБЛО
        }
    }

    return state
}
const store = createStore(reducer)

// create divStore
const divStore = document.createElement('div')
divStore.style.cssText = `
        min-width: 500px;
        width: 50%;
        border: 1px solid #A9A9A9;
        border-radius: 8px;
        box-shadow: rgb(0 0 0 / 50%) 5px 5px 5px 0px;
        padding: 20px;`
document.body.append(divStore)

// create Table of Store
let table, col, row

const createTable = () => {
    table = document.createElement('table')
    divStore.append(table)

    // create names of parametrs
    const params = []
    for (const child of Object.values(store.getState())) {
        for (const key of Object.keys(child)) {
            if (!params.includes(key)) {
                params.push(key);
            }
        }
    }

    // create Header of table
    row = document.createElement('tr')
    table.append(row)

    // create first cell in Header
    col = document.createElement('td')
    row.append(col)

    // create header names
    for (const key of params) {
        col = document.createElement('td')
        col.innerText = `${key}`
        col.style.cssText = `
                font-size: 1.5em;
                padding: 5px 10px;
                margin: 0 10px;
                text-align: center;
                background-color: #D9D9D9;`
        row.append(col)
    }

    // create table body

    for (const [key, values] of Object.entries(store.getState())) {

        if (key !== 'касса') {
            // рисуем строку заголовков
            row = document.createElement('tr')
            table.append(row)


            col = document.createElement('td')
            col.innerText = `${key.toUpperCase()}`
            col.style.cssText = `
                min-width: 150px;
                font-size: 2em;
                padding: 5px 10px;
                text-align: left`
            row.append(col)

            // рисуем строки значений для товаров
            for (const name of params) {
                col = document.createElement('td')
                col.innerText = `${(Object.keys(values)).includes(name) ? values[name] : ''}`
                col.style.cssText = `
                    font-size: 1.5em;
                    text-align: center`
                row.append(col)
            }
        } else {
            row = document.createElement('tr')
            table.append(row)

            col = document.createElement('td')
            col.innerText = `${key.toUpperCase()}`
            col.style.cssText = `
                min-width: 150px;
                font-size: 2em;
                padding: 5px 10px;
                text-align: left`
            row.append(col)

            col = document.createElement('td')
            col.innerText = `${values}`
            col.style.cssText = `
                font-size: 2em;
                text-align: center;`
            row.append(col)
        }
    }
}
createTable()

// start test in console.log
store.subscribe(() => console.log(store.getState()))

// create divWindow
const divWindow = document.createElement('div')
divWindow.style.cssText = `
        width: 50%;
        padding: 10px;
        margin-top: 30px;
        text-align: ;
        display: flex;
        align-items: center;
        justify-content: space-between;`
document.body.append(divWindow)

// create inputAmount
const inputAmount = document.createElement('input')
inputAmount.type = 'number'
inputAmount.min = 0
inputAmount.placeholder = 'Количество товара'
divWindow.append(inputAmount)

// create selectProduct
const selectProduct = document.createElement('select')
divWindow.append(selectProduct)

for (let key of Object.keys(store.getState())) {
    if (key !== 'касса') {
        let optionInput = document.createElement('option')
        optionInput.innerText = `${key}`
        selectProduct.append(optionInput)
    }
}

// ceate inputMoney
const inputMoney = document.createElement('input')
inputMoney.type = 'number'
inputMoney.min = 0
inputMoney.placeholder = 'Сумма, которую отдаете'
divWindow.append(inputMoney)

// create buyButton 
const buyButton = document.createElement('button')
buyButton.innerText = 'Купить'
divWindow.append(buyButton)

// mistake alert
buyButton.onclick = () => {
    if (+inputAmount.value > store.getState()[selectProduct.value].amount) {
        alert(`Количество товара, который вы хотите купить, больше, чем наличие на складе! На складе ${store.getState()[selectProduct.value].amount} единиц ${selectProduct.value}`)
    } else if (+inputMoney.value < (+inputAmount.value * store.getState()[selectProduct.value].price)) {
        alert(`Вы даете ${inputMoney.value}. А нужно ${+inputAmount.value * store.getState()[selectProduct.value].price}. Добавьте ${(+inputAmount.value * store.getState()[selectProduct.value].price) - +inputMoney.value}`)
    }
}

// start buyButton
buyButton.addEventListener('click', () => store.dispatch({ type: 'КУПИТЬ', ШО: selectProduct.value, СКОКА: +inputAmount.value, БАБЛО: +inputMoney.value }))

// Relaod table with new datas
store.subscribe(() => {
    table.remove(),
        createTable()

})