mischbeck/TornActivityTracker
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Michael Beck
2025-02-06 14:10:23 +01:00
parent f88bbaa6b3
commit 2dbbbb92fe
1 changed files with 133 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
static/index.js
View File

@@ -1,118 +1,144 @@
document.addEventListener('DOMContentLoaded', () => { class LogScraperApp {
const form = document.getElementById('scrapingForm'); constructor() {
const stopButton = document.getElementById('stopButton'); this.form = document.getElementById('scrapingForm');
const logsElement = document.getElementById('logs'); this.stopButton = document.getElementById('stopButton');
const prevPageButton = document.getElementById('prevPage'); this.logsElement = document.getElementById('logs');
const nextPageButton = document.getElementById('nextPage'); this.prevPageButton = document.getElementById('prevPage');
const pageInfo = document.getElementById('pageInfo'); this.nextPageButton = document.getElementById('nextPage');
let currentPage = 0; this.pageInfo = document.getElementById('pageInfo');
let linesPerPage; this.startButton = document.querySelector('button[type="submit"]');
let autoRefreshInterval;
this.currentPage = 0;
this.linesPerPage = null;
this.autoRefreshInterval = null;
// Fetch the configuration value for linesPerPage this.init();
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
} }
const stopAutoRefresh = () => { async init() {
clearInterval(autoRefreshInterval); await this.fetchConfig();
}; await this.checkScrapingStatus();
this.addEventListeners();
}
// Check scraping status on page load async fetchConfig() {
fetch('/scraping_status') try {
.then(response => response.json()) const response = await fetch('/config/lines_per_page');
.then(data => { const data = await response.json();
if (data.scraping_active) { this.linesPerPage = data.lines_per_page;
startButton.disabled = true; this.fetchLogs(this.currentPage);
stopButton.disabled = false; } catch (error) {
startAutoRefresh(); // Start auto-refresh if scraping is active 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 { } else {
startButton.disabled = false; this.logsElement.innerHTML = data.log.map((line, index) => {
stopButton.disabled = true; 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', () => { this.nextPageButton.addEventListener('click', () => {
if (currentPage > 0) { this.currentPage++;
currentPage--; this.fetchLogs(this.currentPage);
fetchLogs(currentPage); });
}
});
nextPageButton.addEventListener('click', () => { this.form.addEventListener('submit', (event) => this.startScraping(event));
currentPage++;
fetchLogs(currentPage);
});
form.addEventListener('submit', function(e) { this.stopButton.addEventListener('click', () => this.stopScraping());
e.preventDefault(); }
const formData = new FormData(this); }
fetch('/start_scraping', { // Initialize the application when DOM is fully loaded
method: 'POST', document.addEventListener('DOMContentLoaded', () => new LogScraperApp());
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
}
});
});
});