Untitled

console.log("Script.js is running...");

// Function to create and display a popup with user data
function displayPopup(userData) {
    // Create a div element for the popup
    const popup = document.createElement("div");
    popup.classList.add("popup");

    // Add the user data to the popup
    popup.innerHTML = `
        <h2>User Details</h2>
        <p><strong>Phone Number:</strong> ${userData.phoneNumber}</p>
        <p><strong>User:</strong> ${userData.user}</p>
        <p><strong>Password:</strong> ${userData.password}</p>
        <button class="okButton">Ok</button>
        <button class="cancelButton">Cancel</button>
    `;

    // Append the popup to the document body
    document.body.appendChild(popup);

    // Add event listeners to the Ok and Cancel buttons
    const okButton = popup.querySelector(".okButton");
    okButton.addEventListener("click", () => {
        closePopup();
        // Add your logic for handling Ok button click here
    });

    const cancelButton = popup.querySelector(".cancelButton");
    cancelButton.addEventListener("click", () => {
        closePopup();
        // Add your logic for handling Cancel button click here
    });
}

// Function to close the popup
function closePopup() {
    const popup = document.querySelector(".popup");
    if (popup) {
        popup.remove();
    }
}

// Add event listener to the grid container for handling "Edit" button clicks
document.getElementById("grid-container").addEventListener("click", (event) => {
    if (event.target.classList.contains("editButton")) {
        // Retrieve the user data associated with the clicked button
        const userData = JSON.parse(event.target.dataset.userData);
        // Display the popup with the user data
        displayPopup(userData);
    }
});

// Make a GET request to fetch the data from the server
fetch("/data")
    .then((response) => response.json())
    .then((data) => {
        console.log("Data received from server:", data);

        // Process the received JSON data and generate HTML elements to represent the grid
        const gridContainer = document.getElementById("grid-container");
        data.forEach((item) => {
            const gridItem = document.createElement("div");
            gridItem.classList.add("grid-item");
            gridItem.innerHTML = `
                <div>Phone Number: ${item.phoneNumber}</div>
                <div>User: ${item.user}</div>
                <div>Password: ${item.password}</div>
                <button class="editButton" data-user-data='${JSON.stringify(item)}'>Edit</button>
            `;
            gridContainer.appendChild(gridItem);
        });
    })
    .catch((error) => console.error("Error fetching data:", error));