2022-07-27 06:59:59 -04:00
|
|
|
const productsList = document.getElementById('products');
|
|
|
|
|
|
|
|
const loadItems = () => {
|
|
|
|
const xhttp = new XMLHttpRequest();
|
|
|
|
|
|
|
|
xhttp.onload = function() {
|
|
|
|
const products = JSON.parse(this.responseText);
|
|
|
|
|
|
|
|
const boxes = products.map(product =>
|
|
|
|
`<div class="product">
|
|
|
|
<input type="checkbox" class="delete-checkbox" value="${product.id}">
|
|
|
|
<p>
|
|
|
|
${product.sku}<br>
|
|
|
|
${product.name}<br>
|
|
|
|
${product.price} $<br>
|
|
|
|
${product.attribute}
|
|
|
|
</p>
|
2022-07-27 11:44:08 -04:00
|
|
|
</div>`
|
|
|
|
)
|
2022-07-27 06:59:59 -04:00
|
|
|
|
|
|
|
productsList.innerHTML = boxes.join('\n');
|
|
|
|
}
|
|
|
|
|
2022-07-27 14:26:50 -04:00
|
|
|
xhttp.open('GET', 'products', true);
|
2022-07-27 06:59:59 -04:00
|
|
|
xhttp.send();
|
|
|
|
}
|
|
|
|
loadItems();
|
2022-07-27 11:44:08 -04:00
|
|
|
|
|
|
|
const deleteSelected = () => {
|
|
|
|
const checkboxes = document.querySelectorAll('input[class="delete-checkbox"]:checked');
|
|
|
|
let values = [];
|
|
|
|
checkboxes.forEach(checkbox => values.push(checkbox.value));
|
|
|
|
|
|
|
|
const xhttp = new XMLHttpRequest();
|
|
|
|
|
|
|
|
xhttp.onload = function() {
|
|
|
|
loadItems();
|
|
|
|
}
|
|
|
|
|
2022-07-27 14:26:50 -04:00
|
|
|
xhttp.open('DELETE', 'products', true);
|
2022-07-27 11:44:08 -04:00
|
|
|
xhttp.send();
|
|
|
|
}
|
|
|
|
|
|
|
|
const deleteButton = document.getElementById('delete-product-btn');
|
|
|
|
deleteButton.addEventListener('click', deleteSelected);
|