Untitled
unknown
plain_text
a year ago
6.2 kB
4
Indexable
Never
<!DOCTYPE html> <html> <head> <title>Product Management</title> </head> <body> <h1>Product Management</h1> <button id="import">Import JSON</button> <button id="addProduct">Add Product</button> <button id="replace">Replace JSON</button> <button id="create">Create JSON</button> <button id=importDefault>Import Default</button> <table id="productTable" border="1"> <thead> <tr class="headers"> <th>Product</th> <th>Price</th> <th>Min Quantity</th> <th>Sale Price</th> <th>Sale Min Quantity</th> <th>Sale</th> <th>Actions</th> </tr> </thead> <tbody class="tableContent"> </tbody> </table> <input type="file" id="fileInput" style="display: none;"> <input type="text" id="fileName" placeholder="Enter filename.json"> <script> const importButton = document.querySelector("#import"); const addProductButton = document.querySelector("#addProduct"); const replaceButton = document.querySelector("#replace"); const createButton = document.querySelector("#create"); const defaultImportButton = document.querySelector("#importDefault"); const fileInput = document.querySelector("#fileInput"); const fileNameInput = document.querySelector("#fileName"); const tableHeaders = document.querySelector(".headers"); const tableContent = document.querySelector(".tableContent"); function createTable(jsonData) { let table = document.getElementById("productTable"); let tbody = table.getElementsByTagName("tbody")[0]; tbody.innerHTML = ""; jsonData.forEach((product, index) => { let newRow = tbody.insertRow(); newRow.dataset.index = index; newRow.innerHTML = ` <td contenteditable>${product.Product || ""}</td> <td contenteditable>${product.Price || 0}</td> <td contenteditable>${product["Min Quantity"] || 0}</td> <td contenteditable>${product["Sale Price"] || 0}</td> <td contenteditable>${product["Sale Min Quantity"] || 0}</td> <td contenteditable>${product.Sale || ""}</td> <td><button onclick=deleteRow(${index}) class="deleteRow">Delete</button></td> `; }); } const jsonifyTable = () => { let data = []; let headers = []; for (let i=0; i<tableHeaders.children.length - 1; i++) { headers[i] = tableHeaders.children[i].innerHTML; } for(let i=0; i<tableContent.children.length; i++){ let tableRow = tableContent.children[i]; let rowData = {}; for(let j=0; j<tableRow.children.length - 1; j++){ rowData[headers[j]] = tableRow.children[j].innerHTML; } data.push(rowData); } return data; } const downloadJson = (name) => { const jsonData = jsonifyTable(); const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsonData)); const downloadAnchorNode = document.createElement('a'); downloadAnchorNode.setAttribute("href", dataStr); downloadAnchorNode.setAttribute("download", name + ".txt"); document.body.appendChild(downloadAnchorNode); downloadAnchorNode.click(); downloadAnchorNode.remove(); } const deleteRow = (index) => { const row = document.querySelector(`[data-index="${index}"]`); row.remove(); } addProductButton.addEventListener("click", function() { let newRow = document.createElement('tr'); const index = document.querySelectorAll("tr").length; newRow.innerHTML = ` <td contenteditable></td> <td contenteditable></td> <td contenteditable></td> <td contenteditable></td> <td contenteditable></td> <td contenteditable></td> <td><button onclick=deleteRow(${index})>Delete</button></td> ` newRow.dataset.index = index; tableContent.appendChild(newRow); }); replaceButton.addEventListener("click", () => { const newData = jsonifyTable(); const jsonData = JSON.stringify(newData, null, 2); const xhr = new XMLHttpRequest(); xhr.open("POST", "replace_json.php"); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText); } else { console.error("Error:", xhr.statusText); } }; xhr.send(jsonData); }); createButton.addEventListener('click', () => { if(fileNameInput.value.length >= 1) { downloadJson(fileNameInput.value); } else { alert("Please enter a filename"); } }); importButton.addEventListener("click", () => { fileInput.click(); }); fileInput.addEventListener("change", e => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = function(event) { return (t) => { try{ const jsonData = JSON.parse(t.target.result); createTable(jsonData); } catch(e) { alert("Invalid JSON file"); } } }(file); reader.readAsText(file); }); defaultImportButton.addEventListener("click", () => { const xhr = new XMLHttpRequest(); xhr.open("GET", "default.txt"); xhr.onload = function() { if (xhr.status === 200) { const jsonData = JSON.parse(xhr.responseText); createTable(jsonData); } else { console.error("Error:", xhr.statusText); } }; xhr.send(); }); const xhr = new XMLHttpRequest(); xhr.open("GET", "products.txt"); xhr.onload = function() { if (xhr.status === 200) { const jsonData = JSON.parse(xhr.responseText); createTable(jsonData); } else { console.error("Error:", xhr.statusText); } }; xhr.send(); </script> </body> </html>