Add files via upload

Kleinanzeigen-Preisabfrage-main/static/script.js

@@ -0,0 +1,185 @@
+let allItems = [];
+let currentPage = 1;
+let itemsPerPage = 10;
+
+function searchItems() {
+    const formData = new FormData(searchForm);
+    resultsContainer.innerHTML = '';
+    overlay.style.display = 'flex';
+
+    fetch('/search', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        currentItems = data;
+        sortItems(currentItems);
+        displayItems(currentItems, 1);
+        overlay.style.display = 'none';
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        overlay.style.display = 'none';
+    });
+
+    updateProgress();
+}
+
+function updateProgress() {
+    fetch('/progress')
+    .then(response => response.json())
+    .then(data => {
+        const totalItems = data.total_items;
+        const currentItem = data.current_item;
+        const progressPercentage = data.progress_percentage;
+
+        document.getElementById('progress-text').innerText = `Artikel ${currentItem} von ${totalItems}`;
+        //document.getElementById('progress-fill').style.width = `${progressPercentage}%`;
+        //document.getElementById('progress-percentage').innerText = `${progressPercentage}%`;
+
+        if (currentItem < totalItems) {
+            setTimeout(updateProgress, 500);  // Poll every second
+        } else {
+            document.getElementById('overlay').style.display = 'none';
+        }
+    })
+    .catch(error => console.error('Fehler beim Abrufen des Fortschritts:', error));
+}
+
+document.getElementById('search-form').addEventListener('submit', function(event) {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    document.getElementById('overlay').style.display = 'flex';
+
+    fetch('/search', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        allItems = data;
+        currentPage = 1;
+        displayResults();
+        document.getElementById('overlay').style.display = 'none';
+    })
+    .catch(error => {
+        console.error('Fehler beim Abrufen der Ergebnisse:', error);
+        document.getElementById('overlay').style.display = 'none';
+    });
+
+    // Start updating progress
+    updateProgress();
+});
+
+document.getElementById('items-per-page').addEventListener('change', function(event) {
+    itemsPerPage = parseInt(event.target.value);
+    currentPage = 1;
+    displayResults();
+});
+
+document.getElementById('sort-filter').addEventListener('change', function(event) {
+    const sortBy = event.target.value;
+    if (sortBy === 'alphabet') {
+        allItems.sort((a, b) => a[0].localeCompare(b[0]));
+    } else if (sortBy === 'price') {
+        allItems.sort((a, b) => parseFloat(a[3]) - parseFloat(b[3]));
+    }
+    displayResults();
+});
+
+document.getElementById('manufacturer-filter').addEventListener('input', function(event) {
+    const manufacturer = event.target.value.toLowerCase();
+    const filteredItems = allItems.filter(item => item[0].toLowerCase().includes(manufacturer));
+    displayResults(filteredItems);
+});
+
+function displayResults(items = allItems) {
+    const resultsDiv = document.getElementById('results');
+    resultsDiv.innerHTML = '';
+    const start = (currentPage - 1) * itemsPerPage;
+    const end = start + itemsPerPage;
+    const paginatedItems = items.slice(start, end);
+
+    paginatedItems.forEach(item => {
+        const itemDiv = document.createElement('div');
+        itemDiv.classList.add('item');
+        itemDiv.innerHTML = `<h3><a href="${item[2]}" target="_blank">${item[0]}</a></h3><p><b>Preis:</b> ${item[1]}</p>`;
+        resultsDiv.appendChild(itemDiv);
+    });
+
+    displayPagination(items.length);
+}
+
+function displayPagination(totalItems) {
+    const paginationTopDiv = document.getElementById('pagination-top');
+    const paginationBottomDiv = document.getElementById('pagination-bottom');
+    paginationTopDiv.innerHTML = '';
+    paginationBottomDiv.innerHTML = '';
+    const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+    let paginationHTML = `
+        <span class="page-button" onclick="changePage(1)"><<</span>
+        <span class="page-button" onclick="changePage(currentPage - 1)"><</span>
+    `;
+
+    if (totalPages <= 9) {
+        for (let page = 1; page <= totalPages; page++) {
+            paginationHTML += `
+                <span class="page-button ${page === currentPage ? 'active' : ''}" onclick="changePage(${page})">${page}</span>
+            `;
+        }
+    } else {
+        if (currentPage <= 5) {
+            for (let page = 1; page <= 7; page++) {
+                paginationHTML += `
+                    <span class="page-button ${page === currentPage ? 'active' : ''}" onclick="changePage(${page})">${page}</span>
+                `;
+            }
+            paginationHTML += `<span class="page-button">...</span>`;
+            paginationHTML += `
+                <span class="page-button" onclick="changePage(${totalPages})">${totalPages}</span>
+            `;
+        } else if (currentPage > totalPages - 5) {
+            paginationHTML += `
+                <span class="page-button" onclick="changePage(1)">1</span>
+                <span class="page-button">...</span>
+            `;
+            for (let page = totalPages - 6; page <= totalPages; page++) {
+                paginationHTML += `
+                    <span class="page-button ${page === currentPage ? 'active' : ''}" onclick="changePage(${page})">${page}</span>
+                `;
+            }
+        } else {
+            paginationHTML += `
+                <span class="page-button" onclick="changePage(1)">1</span>
+                <span class="page-button">...</span>
+            `;
+            for (let page = currentPage - 3; page <= currentPage + 3; page++) {
+                paginationHTML += `
+                    <span class="page-button ${page === currentPage ? 'active' : ''}" onclick="changePage(${page})">${page}</span>
+                `;
+            }
+            paginationHTML += `<span class="page-button">...</span>`;
+            paginationHTML += `
+                <span class="page-button" onclick="changePage(${totalPages})">${totalPages}</span>
+            `;
+        }
+    }
+
+    paginationHTML += `
+        <span class="page-button" onclick="changePage(currentPage + 1)">></span>
+        <span class="page-button" onclick="changePage(${totalPages})">>></span>
+    `;
+
+    paginationTopDiv.innerHTML = paginationHTML;
+    paginationBottomDiv.innerHTML = paginationHTML;
+}
+
+function changePage(page) {
+    const totalPages = Math.ceil(allItems.length / itemsPerPage);
+    if (page < 1) page = 1;
+    if (page > totalPages) page = totalPages;
+    currentPage = page;
+    displayResults();
+}