localhorst/kleinanzeigen-boosted
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

mobile ui

Browse Source
This commit is contained in:
Hendrik Schutter
2025-11-26 11:17:12 +01:00
parent d5486417e2
commit 8a1f078435
5 changed files with 668 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
web/js/ui.js
View File

@ -18,35 +18,55 @@ function showStatus(message, type = 'loading') {
}
function updateProgress(current, total) {
const progressInfo = document.getElementById('progressInfo');
const progressFill = progressInfo.querySelector('.progress-fill');
const progressText = progressInfo.querySelector('.progress-text');
const etaText = progressInfo.querySelector('.eta-text');
const isMobile = window.innerWidth < 768;
if (total === 0) {
progressInfo.classList.remove('active');
return;
}
if (isMobile) {
// Mobile progress bar
const progressInfo = document.getElementById('progressInfo');
const progressFill = progressInfo.querySelector('.progress-fill-mobile');
const progressText = progressInfo.querySelector('.progress-text-mobile');
progressInfo.classList.add('active');
const percentage = (current / total) * 100;
progressFill.style.width = percentage + '%';
progressText.textContent = `Inserate werden geladen: ${current}/${total}`;
if (total === 0) {
progressInfo.classList.remove('active');
return;
}
// Calculate ETA
if (AppState.scrapeStartTime && current > 0) {
const elapsed = (Date.now() - AppState.scrapeStartTime) / 1000;
const avgTimePerListing = elapsed / current;
const remaining = total - current;
const etaSeconds = Math.round(avgTimePerListing * remaining);
progressInfo.classList.add('active');
const percentage = (current / total) * 100;
progressFill.style.width = percentage + '%';
progressText.textContent = `${current}/${total} Inserate`;
} else {
// Desktop progress bar
const progressInfo = document.getElementById('progressInfoDesktop');
const progressFill = progressInfo.querySelector('.progress-fill');
const progressText = progressInfo.querySelector('.progress-text');
const etaText = progressInfo.querySelector('.eta-text');
const minutes = Math.floor(etaSeconds / 60);
const seconds = etaSeconds % 60;
if (total === 0) {
progressInfo.classList.remove('active');
return;
}
if (minutes > 0) {
etaText.textContent = `Noch ca. ${minutes}m ${seconds}s`;
} else {
etaText.textContent = `Noch ca. ${seconds}s`;
progressInfo.classList.add('active');
const percentage = (current / total) * 100;
progressFill.style.width = percentage + '%';
progressText.textContent = `Inserate werden geladen: ${current}/${total}`;
// Calculate ETA
if (AppState.scrapeStartTime && current > 0) {
const elapsed = (Date.now() - AppState.scrapeStartTime) / 1000;
const avgTimePerListing = elapsed / current;
const remaining = total - current;
const etaSeconds = Math.round(avgTimePerListing * remaining);
const minutes = Math.floor(etaSeconds / 60);
const seconds = etaSeconds % 60;
if (minutes > 0) {
etaText.textContent = `Noch ca. ${minutes}m ${seconds}s`;
} else {
etaText.textContent = `Noch ca. ${seconds}s`;
}
}
}
}
@ -70,6 +90,9 @@ function formatDate(dateString) {
}
function renderResults(listings) {
// Only render on desktop
if (window.innerWidth < 768) return;
const resultsList = document.getElementById('resultsList');
const resultsCount = document.querySelector('.results-count');
@ -165,4 +188,42 @@ function initPrivacyModal() {
modal.classList.remove('show');
}
});
}
// Mobile popup
function initMobilePopup() {
const closeBtn = document.getElementById('mobilePopupClose');
const popup = document.getElementById('mobilePopup');
closeBtn.addEventListener('click', () => {
popup.classList.remove('show');
});
}
// Format price inputs with € suffix
function initPriceInputs() {
const minPrice = document.getElementById('minPrice');
const maxPrice = document.getElementById('maxPrice');
function formatPriceInput(input) {
input.addEventListener('blur', (e) => {
if (e.target.value) {
// Store the numeric value
const value = e.target.value.replace(/[^\d]/g, '');
if (value) {
e.target.dataset.value = value;
}
}
});
input.addEventListener('focus', (e) => {
// Show only numeric value when focused
if (e.target.dataset.value) {
e.target.value = e.target.dataset.value;
}
});
}
formatPriceInput(minPrice);
formatPriceInput(maxPrice);
}