Untitled

unknown
plain_text
a year ago
6.2 kB
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>