Untitled
unknown
plain_text
a year ago
6.2 kB
4
Indexable
<!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>