refactoring
This commit is contained in:
Michael Beck
240
static/index.js
240
static/index.js
@@ -1,118 +1,144 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const form = document.getElementById('scrapingForm');
|
||||
const stopButton = document.getElementById('stopButton');
|
||||
const logsElement = document.getElementById('logs');
|
||||
const prevPageButton = document.getElementById('prevPage');
|
||||
const nextPageButton = document.getElementById('nextPage');
|
||||
const pageInfo = document.getElementById('pageInfo');
|
||||
let currentPage = 0;
|
||||
let linesPerPage;
|
||||
let autoRefreshInterval;
|
||||
class LogScraperApp {
|
||||
constructor() {
|
||||
this.form = document.getElementById('scrapingForm');
|
||||
this.stopButton = document.getElementById('stopButton');
|
||||
this.logsElement = document.getElementById('logs');
|
||||
this.prevPageButton = document.getElementById('prevPage');
|
||||
this.nextPageButton = document.getElementById('nextPage');
|
||||
this.pageInfo = document.getElementById('pageInfo');
|
||||
this.startButton = document.querySelector('button[type="submit"]');
|
||||
|
||||
this.currentPage = 0;
|
||||
this.linesPerPage = null;
|
||||
this.autoRefreshInterval = null;
|
||||
|
||||
// Fetch the configuration value for linesPerPage
|
||||
fetch('/config/lines_per_page')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
linesPerPage = data.lines_per_page;
|
||||
// Initial fetch of logs after getting the config value
|
||||
fetchLogs(currentPage);
|
||||
});
|
||||
|
||||
const fetchLogs = (page) => {
|
||||
fetch(`/logfile?page=${page}&lines_per_page=${linesPerPage}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
logsElement.textContent = data.error;
|
||||
} else {
|
||||
logsElement.innerHTML = data.log.map((line, index) => {
|
||||
const lineNumber = data.start_line - index;
|
||||
return `<span class="line-number">${lineNumber}</span> ${line}`;
|
||||
}).join('');
|
||||
// Disable/enable pagination buttons based on the page number and total lines
|
||||
prevPageButton.disabled = page === 0;
|
||||
nextPageButton.disabled = (page + 1) * linesPerPage >= data.total_lines;
|
||||
pageInfo.textContent = `Page ${page + 1} of ${Math.ceil(data.total_lines / linesPerPage)}`;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function startAutoRefresh() {
|
||||
autoRefreshInterval = setInterval(() => {
|
||||
fetchLogs(currentPage);
|
||||
}, 5000); // Refresh every 5 seconds
|
||||
this.init();
|
||||
}
|
||||
|
||||
const stopAutoRefresh = () => {
|
||||
clearInterval(autoRefreshInterval);
|
||||
};
|
||||
async init() {
|
||||
await this.fetchConfig();
|
||||
await this.checkScrapingStatus();
|
||||
this.addEventListeners();
|
||||
}
|
||||
|
||||
// Check scraping status on page load
|
||||
fetch('/scraping_status')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.scraping_active) {
|
||||
startButton.disabled = true;
|
||||
stopButton.disabled = false;
|
||||
startAutoRefresh(); // Start auto-refresh if scraping is active
|
||||
async fetchConfig() {
|
||||
try {
|
||||
const response = await fetch('/config/lines_per_page');
|
||||
const data = await response.json();
|
||||
this.linesPerPage = data.lines_per_page;
|
||||
this.fetchLogs(this.currentPage);
|
||||
} catch (error) {
|
||||
console.error('Error fetching config:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async fetchLogs(page) {
|
||||
try {
|
||||
const response = await fetch(`/logfile?page=${page}&lines_per_page=${this.linesPerPage}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
this.logsElement.textContent = data.error;
|
||||
} else {
|
||||
startButton.disabled = false;
|
||||
stopButton.disabled = true;
|
||||
this.logsElement.innerHTML = data.log.map((line, index) => {
|
||||
const lineNumber = data.start_line - index;
|
||||
return `<span class="line-number">${lineNumber}</span> ${line}`;
|
||||
}).join('');
|
||||
|
||||
this.updatePagination(data.total_lines);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching logs:', error);
|
||||
}
|
||||
}
|
||||
|
||||
updatePagination(totalLines) {
|
||||
this.prevPageButton.disabled = this.currentPage === 0;
|
||||
this.nextPageButton.disabled = (this.currentPage + 1) * this.linesPerPage >= totalLines;
|
||||
this.pageInfo.textContent = `Page ${this.currentPage + 1} of ${Math.ceil(totalLines / this.linesPerPage)}`;
|
||||
}
|
||||
|
||||
startAutoRefresh() {
|
||||
this.autoRefreshInterval = setInterval(() => this.fetchLogs(this.currentPage), 5000);
|
||||
}
|
||||
|
||||
stopAutoRefresh() {
|
||||
clearInterval(this.autoRefreshInterval);
|
||||
}
|
||||
|
||||
async checkScrapingStatus() {
|
||||
try {
|
||||
const response = await fetch('/scraping_status');
|
||||
const data = await response.json();
|
||||
if (data.scraping_active) {
|
||||
this.startButton.disabled = true;
|
||||
this.stopButton.disabled = false;
|
||||
this.startAutoRefresh();
|
||||
} else {
|
||||
this.startButton.disabled = false;
|
||||
this.stopButton.disabled = true;
|
||||
}
|
||||
this.fetchLogs(this.currentPage);
|
||||
} catch (error) {
|
||||
console.error('Error checking scraping status:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async startScraping(event) {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(this.form);
|
||||
try {
|
||||
const response = await fetch('/start_scraping', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
console.log(data);
|
||||
if (data.status === "Scraping started") {
|
||||
this.startButton.disabled = true;
|
||||
this.stopButton.disabled = false;
|
||||
this.startAutoRefresh();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error starting scraping:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async stopScraping() {
|
||||
try {
|
||||
const response = await fetch('/stop_scraping', { method: 'POST' });
|
||||
const data = await response.json();
|
||||
|
||||
console.log(data);
|
||||
if (data.status === "Scraping stopped") {
|
||||
this.startButton.disabled = false;
|
||||
this.stopButton.disabled = true;
|
||||
this.stopAutoRefresh();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error stopping scraping:', error);
|
||||
}
|
||||
}
|
||||
|
||||
addEventListeners() {
|
||||
this.prevPageButton.addEventListener('click', () => {
|
||||
if (this.currentPage > 0) {
|
||||
this.currentPage--;
|
||||
this.fetchLogs(this.currentPage);
|
||||
}
|
||||
fetchLogs(currentPage);
|
||||
});
|
||||
|
||||
prevPageButton.addEventListener('click', () => {
|
||||
if (currentPage > 0) {
|
||||
currentPage--;
|
||||
fetchLogs(currentPage);
|
||||
}
|
||||
});
|
||||
this.nextPageButton.addEventListener('click', () => {
|
||||
this.currentPage++;
|
||||
this.fetchLogs(this.currentPage);
|
||||
});
|
||||
|
||||
nextPageButton.addEventListener('click', () => {
|
||||
currentPage++;
|
||||
fetchLogs(currentPage);
|
||||
});
|
||||
this.form.addEventListener('submit', (event) => this.startScraping(event));
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(this);
|
||||
this.stopButton.addEventListener('click', () => this.stopScraping());
|
||||
}
|
||||
}
|
||||
|
||||
fetch('/start_scraping', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
if (data.status === "Scraping started") {
|
||||
if (submitButton) {
|
||||
submitButton.disabled = true;
|
||||
}
|
||||
stopButton.disabled = false;
|
||||
startAutoRefresh(); // Start auto-refresh when scraping starts
|
||||
} else {
|
||||
// Handle errors or other statuses
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
stopButton.addEventListener('click', function() {
|
||||
fetch('/stop_scraping', {
|
||||
method: 'POST'
|
||||
}).then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
if (data.status === "Scraping stopped") {
|
||||
if (submitButton) {
|
||||
submitButton.disabled = false;
|
||||
}
|
||||
stopButton.disabled = true;
|
||||
stopAutoRefresh(); // Stop auto-refresh when scraping stops
|
||||
} else {
|
||||
// Handle errors or other statuses
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
// Initialize the application when DOM is fully loaded
|
||||
document.addEventListener('DOMContentLoaded', () => new LogScraperApp());
|
||||
|
||||
Reference in New Issue
Block a user