03. Grocery List - Exam Preparation II

// 03. Grocery List
// Exam Preparation II
// https://judge.softuni.org/Contests/Practice/Index/3879#2

const BASE_URL = `http://localhost:3030/jsonstore/grocery/`;
const productEelemnt = document.getElementById('product');
const countEelemnt = document.getElementById('count');
const priceEelemnt = document.getElementById('price');

const addProductBtn = document.getElementById('add-product');
addProductBtn.addEventListener('click', addProduct);

const formUpdateBtn = document.getElementById('update-product');
const tbodyElement = document.getElementById('tbody');
document.getElementById('load-product').addEventListener('click', loadAllProducts);

loadAllProducts();
function loadAllProducts(e) {
    if (e) {
        e.preventDefault();
    }
    tbodyElement.innerHTML = '';

    fetch(BASE_URL)
        .then(res => res.json())
        .then(dataFromServer => {
            for (let row in dataFromServer) {
                let product = dataFromServer[row]['product'];
                let count = dataFromServer[row]['count'];
                let price = dataFromServer[row]['price'];
                let id = dataFromServer[row]['_id'];

                let trContainer = document.createElement('tr');
                customHTMLelement('td', product, 'name', trContainer, '');
                customHTMLelement('td', count, 'count-product', trContainer, '');
                customHTMLelement('td', price, 'product-price', trContainer, '');

                let btnContainerTd = customHTMLelement('td', '', 'btn', '', '');

                let updateBtn = document.createElement('button');
                updateBtn.textContent = 'Update';
                updateBtn.classList.add('update');
                updateBtn.id = id;
                updateBtn.addEventListener('click', updateProduct);

                let deleteBtn = document.createElement('button');
                deleteBtn.textContent = 'Delete';
                deleteBtn.classList.add('delete');
                deleteBtn.id = id;
                deleteBtn.addEventListener('click', deleteProduct);

                btnContainerTd.appendChild(updateBtn);
                btnContainerTd.appendChild(deleteBtn);

                trContainer.appendChild(btnContainerTd);
                tbodyElement.appendChild(trContainer);
            }
        })
}

function addProduct(e) {
    e.preventDefault();
    let product = productEelemnt.value;
    let count = countEelemnt.value;
    let price = priceEelemnt.value;
    if (product == '' || count == '' || price == '') {
        alert('wrong data');
        return;
    }

    let dataObj = {
        product,
        count,
        price,
    }

    const headers = {
        method: 'POST',
        body: JSON.stringify(dataObj)
    };

    fetch(BASE_URL, headers).then(() => loadAllProducts(e));
    clearInputs();
}

function deleteProduct(e) {
    let id = e.target.id;
    let delUrl = BASE_URL + `${id}`;
    const headers = { method: 'DELETE', };
    fetch(delUrl, headers).then(() => loadAllProducts(e));
}

function updateProduct(e) {
    e.preventDefault();
    let id = e.target.id;
    formUpdateBtn.disabled = false;
    addProductBtn.disabled = true;

    productEelemnt.value = e.target.parentNode.parentNode.children[0].textContent;
    countEelemnt.value = e.target.parentNode.parentNode.children[1].textContent;
    priceEelemnt.value = e.target.parentNode.parentNode.children[2].textContent;

    formUpdateBtn.addEventListener('click', function formupdateProduct() {
        const headers = {
            method: 'PATCH',
            body: JSON.stringify({
                product: productEelemnt.value,
                count: countEelemnt.value,
                price: priceEelemnt.value,
            })
        };

        let patchURL = BASE_URL + `${id}`
        fetch(patchURL, headers).then(() => loadAllProducts(e));
        formUpdateBtn.disabled = true;
        addProductBtn.disabled = false;
        clearInputs();
    });

}

function customHTMLelement(type, content, className, parent, id) {
    let newElement = document.createElement(type);
    if (content) {
        newElement.textContent = content;
    }
    if (className) {
        newElement.classList.add(className);
    }

    if (id) {
        newElement.id = id;
    }

    if (parent) {
        parent.appendChild(newElement);
    }
    return newElement;
}

function clearInputs() {
    productEelemnt.value = '';
    countEelemnt.value = '';
    priceEelemnt.value = '';
}