Untitled

<script>
 const tableBody = document.querySelector('#dataContainer tbody');
const paginationContainer = document.getElementById('paginationContainer');
const searchFormDesktop = document.querySelector('.search-form.d-none');
const searchInputDesktop = document.querySelector('.search-form.d-none input');
const searchFormMobile = document.querySelector('.search-form.d-lg-none');
const searchInputMobile = document.querySelector('.search-form.d-lg-none input');
let currentPage = 1;
let lastSearchTerm = '';
const ITEMS_PER_PAGE = 20;

function clearFetchInterval() {
    clearInterval(fetchInterval);
}

function renderTable(data) {
    tableBody.innerHTML = '';
    data.forEach(item => {
        const row = document.createElement('tr');
        const timestamp = new Date(item.timestamp * 1000).toLocaleString();
        const cellValues = [
            item.null,  
            item.NAZKL,
            item.Meno,
            item.patientId,
            item.operationName,
            item.minValue,
            item.maxValue,
            item.patientValue,
            item.units,
            timestamp,
            item.comparedValue
        ];
        cellValues.forEach((value, index) => {
            const cell = document.createElement('td');
            if (index === 0) { // First column - Users
                const button = document.createElement('button');
                button.type = 'button';
                button.classList.add('btn', 'btn-outline');
                button.innerHTML = '<i class="mdi mdi-account-card-details mb-1"></i>';
                // Attach click event to fetch detailed data for specific patientID
                button.addEventListener('click', () => {
    const patientID = item.patientId; // Assuming this is how you retrieve patientID
    // Construct the URL for patient-data.html with the patientID as a query parameter
    const detailPageURL = `/patient-data.html?patientID=${patientID}`;
    // Open the detail page URL in a new tab
    window.open(detailPageURL, '_blank');
});
                cell.appendChild(button);
            } else if (index === cellValues.length - 1) {
                const badge = document.createElement('span');
                badge.classList.add('badge');
                if (value.toLowerCase().includes('good')) {
                    badge.classList.add('badge-outline-success');
                    badge.textContent = 'Vyhovuju';
                } else if (value.toLowerCase().includes('not within the range')) {
                    badge.classList.add('badge-outline-danger');
                    badge.textContent = 'Nevyhovuju';
                } else if (value.toLowerCase().includes('invalid')) {
                    badge.classList.add('badge-warning');
                    badge.textContent = 'No Data';
                } else {
                    badge.classList.add('badge-info');
                    badge.textContent = value;
                }
                cell.appendChild(badge);
            } else {
                cell.textContent = value;
            }
            row.appendChild(cell);
        });
        tableBody.insertBefore(row,tableBody.firstChild);
    });
}

function fetchAndRenderData(page = currentPage, searchTerm = lastSearchTerm) {
    const url = searchTerm ? `/grouped-data?page=${page}&limit=${ITEMS_PER_PAGE}&search=${searchTerm}` : `/grouped-data?page=${page}&limit=${ITEMS_PER_PAGE}`;
    fetch(url)
        .then(response => response.json())
        .then(data => {
            renderTable(data.data);
            const totalResults = data.totalResults;
            const totalPages = Math.ceil(totalResults / ITEMS_PER_PAGE);
            renderPagination(totalPages, currentPage);
        })
        .catch(error => console.error('Error fetching data:', error));
}

function renderPagination(totalPages, currentPage) {
    paginationContainer.innerHTML = '';

    // Create the "FirstPage" button
    const firstPageButton = createPaginationButton('FirstPage', currentPage === 1, totalPages);
    paginationContainer.appendChild(firstPageButton);

    // Create the "PageDown" button
    const pageDownButton = createPaginationButton('PageDown', currentPage === 1);
    paginationContainer.appendChild(pageDownButton);

    if (window.innerWidth >= 992) {
        // For larger screens, create individual buttons for each page
        for (let i = 1; i <= totalPages; i++) {
            const pageButton = createPaginationButton(i, i === currentPage);
            paginationContainer.appendChild(pageButton);
        }
    } else {
        // For smaller screens, only display the current page number
        const currentPageButton = createPaginationButton(currentPage, true);
        paginationContainer.appendChild(currentPageButton);
    }

    // Create the "PageUp" button
    const pageUpButton = createPaginationButton('PageUp', currentPage === totalPages, totalPages);
    paginationContainer.appendChild(pageUpButton);

    // Create the "LastPage" button
    const lastPageButton = createPaginationButton('LastPage', currentPage === totalPages, totalPages);
    paginationContainer.appendChild(lastPageButton);
}

function createPaginationButton(label, isActive, totalPages) {
    const button = document.createElement('button');
    button.classList.add('btn', 'btn-outline-primary', 'mr-2');

    if (label === 'FirstPage') {
        button.innerHTML = '<i class="mdi mdi-chevron-double-left"></i>';
        button.disabled = isActive;
        button.addEventListener('click', () => {
            currentPage = 1;
            fetchAndRenderData(currentPage, lastSearchTerm);
        });
    } else if (label === 'PageDown') {
        button.innerHTML = '<i class="mdi mdi-chevron-left"></i>';
        button.addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                fetchAndRenderData(currentPage, lastSearchTerm);
            }
        });
    } else if (label === 'PageUp') {
        button.innerHTML = '<i class="mdi mdi-chevron-right"></i>';
        button.addEventListener('click', () => {
            if (currentPage < totalPages) {
                currentPage++;
                fetchAndRenderData(currentPage, lastSearchTerm);
            }
        });
    } else if (label === 'LastPage') {
        button.innerHTML = '<i class="mdi mdi-chevron-double-right"></i>';
        button.disabled = isActive;
        button.addEventListener('click', () => {
            currentPage = totalPages;
            fetchAndRenderData(currentPage, lastSearchTerm);
        });
    } else {
        button.textContent = label;
        if (isActive) {
            button.classList.add('btn-primary');
            button.disabled = true;
        } else {
            button.addEventListener('click', () => {
                currentPage = label;
                fetchAndRenderData(currentPage, lastSearchTerm);
            });
        }
    }
    return button;
}

function performSearch(searchTerm) {
    lastSearchTerm = searchTerm.trim();
    currentPage = 1;
    fetchAndRenderData(currentPage, lastSearchTerm);
}

// Event listener for desktop search form submission
searchFormDesktop.addEventListener('submit', (event) => {
    event.preventDefault();
    const searchTerm = searchInputDesktop.value;
    performSearch(searchTerm);
});

// Event listener for desktop input changes in the search field
searchInputDesktop.addEventListener('input', () => {
    const searchTerm = searchInputDesktop.value;
    performSearch(searchTerm);
});

// Event listener for mobile search form submission
searchFormMobile.addEventListener('submit', (event) => {
    event.preventDefault();
    const searchTerm = searchInputMobile.value;
    performSearch(searchTerm);
});

// Event listener for mobile input changes in the search field
searchInputMobile.addEventListener('input', () => {
    const searchTerm = searchInputMobile.value;
    performSearch(searchTerm);
});

// Function to handle fetching and displaying detailed data for a specific patientID
function fetchPatientData(patientID) {
  // Construct the URL for the detail page with the specific patientID
  const detailPageURL = `/patient-data.html?patientID=${patientID}`;
  // Open the detail page URL in a new tab
  window.open(detailPageURL, '_blank');
}

fetchAndRenderData();
fetchInterval = setInterval(fetchAndRenderData, 10000);

window.addEventListener('resize', () => {
    fetchAndRenderData();
});
  </script>