javywithawhy / MGMT-460

Repository for Info Systems Dev
GNU General Public License v3.0
0 stars 0 forks source link

Update User Interface for Management table (delete) #17

Open javywithawhy opened 1 year ago

javywithawhy commented 1 year ago

<html>
<head>
    <style>
        table, th, td {
          border: 1px solid black;
          border-collapse: collapse;
          padding: 5px;
        }
        th {
          background-color: tomato;
          color: black;
        }
      </style>
<script language="javascript">
    window.addEventListener("load", readAll)
    function readAll() {
        fetch("http://localhost:7777/retrieve")
        .then(response => response.json())
        .then(function(data) {
            var table = document.createElement("table");
            var headerRow = table.insertRow();
            var headers = ["PO Number", "Vendor", "Location Block", "Location Shelf", "Description"];
            headers.forEach(function(header) {
                var headerCell = document.createElement("th");
                headerCell.textContent = header;
                headerRow.appendChild(headerCell);
            });
            data.forEach(function(row) {
                var dataRow = table.insertRow();
                var poNumberCell = dataRow.insertCell();
                poNumberCell.innerHTML = `<a href=delete-one.html?po_number=${row.po_number}>${row.po_number}</a>`;
                var vendorCell = dataRow.insertCell();
                vendorCell.textContent = row.vendor;
                var locationBlockCell = dataRow.insertCell();
                locationBlockCell.textContent = row.location_block;
                var locationShelfCell = dataRow.insertCell();
                locationShelfCell.textContent = row.location_shelf;
                var descCell = dataRow.insertCell();
                descCell.textContent = row.desc;
            });
            document.body.appendChild(table);
            // Add back button event listener
            var backButton = document.getElementById("backButton");
            backButton.addEventListener("click", function() {
                window.history.back();
            });
        })
    }
</script>
</head>
<body style="background-color:tomato;">
    <h1 style="font-family:lato;">Minimal CRUD Delete User Interface</h1>
    <button id="backButton">Back</button>
    <div id="updateList"></div>
</script>
</head>
<body style="background-color:tomato;">
</body>
</html>```