Untitled
unknown
javascript
10 months ago
8.7 kB
5
Indexable
<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>
Editor is loading...
Leave a Comment