Add files via upload
This commit is contained in:
GitHub
185
Kleinanzeigen-Preisabfrage-main/static/script.js
Normal file
185
Kleinanzeigen-Preisabfrage-main/static/script.js
Normal file
@@ -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();
|
||||
}
|
||||
172
Kleinanzeigen-Preisabfrage-main/static/style.css
Normal file
172
Kleinanzeigen-Preisabfrage-main/static/style.css
Normal file
@@ -0,0 +1,172 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
textarea {
|
||||
width: calc(100% - 22px);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: calc(50% - 11px);
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
#download-button {
|
||||
background-color: #28a745;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#download-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
#results {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.item h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.item p {
|
||||
margin: 5px 0 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
flex-direction: column;
|
||||
}
|
||||
#throbber {
|
||||
border: 16px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 16px solid #007BFF;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#current-item {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#progress-container {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#progress-bar {
|
||||
width: 100%;
|
||||
background: #ccc;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#progress-fill {
|
||||
width: 0;
|
||||
height: 20px;
|
||||
background: #007BFF;
|
||||
}
|
||||
|
||||
#pagination-top,
|
||||
#pagination-bottom {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-button {
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.page-button.active {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
Reference in New Issue
Block a user