let defaultTypes = [ 'Nouveau', 'Alimentaire', 'Boissons', 'Utilitaires' ]; let defaultStock = [ { name: 'Granola', quantity: '2', price: '1.3', code: '7622210601988', image : 'https://cookieandkate.com/images/2015/10/granola-mixed-in-bowl.jpg', type: [ 'Alimentaire', ] } ]; let currentDataset = []; $(document).ready(function () { currentDataset = defaultStock; generateTable(currentDataset); generateTypeCheckboxes(); }); function generateTable(dataset) { for (let i = 0; i < dataset.length; i++) { generateLine(dataset[i]); } } function generateLine(item) { $.selector_cache('#stockTable').append( '' + '' + item.name + '' + '' + item.quantity + '' + '' + item.price + '' + '' + item.code + '' + '' + 'LINK' + '' + '' + '' + '' + '' ); // Fill in the type cell for (let i = 0; i < item.type.length; i++) { $('#typeList_' + item.code).append( '
  • ' + item.type[i] + '
  • ' ); } } function generateTypeCheckboxes() { for (let i = 0; i < defaultTypes.length; i++) { let id = 'typeCheck_' + defaultTypes[i]; $('#typeCheckboxesCell').append( '
    ' + '' + '' + '
    ' ); } } function getItemOfCode(code) { let item = {}; for (let i = 0; i < currentDataset.length; i++) { if (currentDataset[i].code === code) { item = currentDataset[i]; break; } } return item; } function addNewItem() { if (isItemInputFilled()) { let item = { name: $.selector_cache('#nameInput').val(), quantity: $.selector_cache('#quantityInput').val(), price: $.selector_cache('#priceInput').val(), code: $.selector_cache('#codeInput').val(), type: getTypesChecked(), image: $.selector_cache('#imageInput').val(), }; if (isCodeAvailable(item.code)) { setEditFieldValues('', '', '', '', [], ''); currentDataset.push(item); generateLine(item); } } } function editItem(elem) { if (isItemInputEmpty()) { let code = elem.id.replace('edit_', ''); let item = getItemOfCode(code); setEditFieldValues(item.name, item.quantity, item.price, item.code, item.type, item.image); removeItemFromList(item); // Move the item in the edit fields } } function deleteItem(elem) { let code = elem.id.replace('delete_', ''); let item = getItemOfCode(code); removeItemFromList(item); } function removeItemFromList(item) { currentDataset.splice(currentDataset.indexOf(item), 1); $('#row_' + item.code).remove(); } function getTypesChecked() { let types = []; for (let i = 0; i < defaultTypes.length; i++) { let id = 'typeCheck_' + defaultTypes[i]; if ($('#' + id).is(':checked')) { types.push(defaultTypes[i]); } } return types; } function setTypesChecked(types) { for (let i = 0; i < defaultTypes.length; i++) { let id = 'typeCheck_' + defaultTypes[i]; $('#' + id).prop('checked', types.indexOf(defaultTypes[i]) !== -1); } return types; } function setEditFieldValues(name, quantity, price, code, type, image) { $.selector_cache('#nameInput').val(name); $.selector_cache('#quantityInput').val(quantity); $.selector_cache('#priceInput').val(price); $.selector_cache('#codeInput').val(code); $.selector_cache('#codeInput').val(code); setTypesChecked(type); $.selector_cache('#imageInput').val(image); } function isCodeAvailable (code) { let isAvailable = true; for (let i = 0; i < currentDataset.length; i++) { if (currentDataset[i].code === code) { isAvailable = false; break; } } return isAvailable; } function isItemInputEmpty() { return $.selector_cache('#nameInput').val() === '' && $.selector_cache('#quantityInput').val() === '' && $.selector_cache('#priceInput').val() === '' && $.selector_cache('#codeInput').val() === '' && $.selector_cache('#imageInput').val() === '' && getTypesChecked().length === 0; } function isItemInputFilled() { return $.selector_cache('#nameInput').val() !== '' && $.selector_cache('#quantityInput').val() !== '' && $.selector_cache('#priceInput').val() !== '' && $.selector_cache('#codeInput').val() !== '' && $.selector_cache('#imageInput').val() !== '' && getTypesChecked().length > 0; } function saveDataset() { let finalDataset = { types: defaultTypes, articles: currentDataset }; console.log(finalDataset); $.ajax({ type: "POST", url: "write_json.php", data: JSON.stringify(finalDataset), dataType: "json", contentType: "application/json; charset=utf-8", complete: function (data) { alert(data.responseText); console.log(data); }, }); }