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

218
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;
// Fetch the configuration value for linesPerPage this.currentPage = 0;
fetch('/config/lines_per_page') this.linesPerPage = null;
.then(response => response.json()) this.autoRefreshInterval = null;
.then(data => {
linesPerPage = data.lines_per_page; this.init();
// Initial fetch of logs after getting the config value }
fetchLogs(currentPage);
}); async init() {
await this.fetchConfig();
await this.checkScrapingStatus();
this.addEventListeners();
}
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();
const fetchLogs = (page) => {
fetch(`/logfile?page=${page}&lines_per_page=${linesPerPage}`)
.then(response => response.json())
.then(data => {
if (data.error) { if (data.error) {
logsElement.textContent = data.error; this.logsElement.textContent = data.error;
} else { } else {
logsElement.innerHTML = data.log.map((line, index) => { this.logsElement.innerHTML = data.log.map((line, index) => {
const lineNumber = data.start_line - index; const lineNumber = data.start_line - index;
return `<span class="line-number">${lineNumber}</span> ${line}`; return `<span class="line-number">${lineNumber}</span> ${line}`;
}).join(''); }).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() { this.updatePagination(data.total_lines);
autoRefreshInterval = setInterval(() => { }
fetchLogs(currentPage); } catch (error) {
}, 5000); // Refresh every 5 seconds console.error('Error fetching logs:', error);
}
} }
const stopAutoRefresh = () => { updatePagination(totalLines) {
clearInterval(autoRefreshInterval); 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)}`;
}
// Check scraping status on page load startAutoRefresh() {
fetch('/scraping_status') this.autoRefreshInterval = setInterval(() => this.fetchLogs(this.currentPage), 5000);
.then(response => response.json()) }
.then(data => {
stopAutoRefresh() {
clearInterval(this.autoRefreshInterval);
}
async checkScrapingStatus() {
try {
const response = await fetch('/scraping_status');
const data = await response.json();
if (data.scraping_active) { if (data.scraping_active) {
startButton.disabled = true; this.startButton.disabled = true;
stopButton.disabled = false; this.stopButton.disabled = false;
startAutoRefresh(); // Start auto-refresh if scraping is active this.startAutoRefresh();
} else { } else {
startButton.disabled = false; this.startButton.disabled = false;
stopButton.disabled = true; this.stopButton.disabled = true;
}
this.fetchLogs(this.currentPage);
} catch (error) {
console.error('Error checking scraping status:', error);
} }
fetchLogs(currentPage);
});
prevPageButton.addEventListener('click', () => {
if (currentPage > 0) {
currentPage--;
fetchLogs(currentPage);
} }
});
nextPageButton.addEventListener('click', () => { async startScraping(event) {
currentPage++; event.preventDefault();
fetchLogs(currentPage); const formData = new FormData(this.form);
}); try {
const response = await fetch('/start_scraping', {
form.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch('/start_scraping', {
method: 'POST', method: 'POST',
body: formData 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
}
}); });
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);
}
}); });
stopButton.addEventListener('click', function() { this.nextPageButton.addEventListener('click', () => {
fetch('/stop_scraping', { this.currentPage++;
method: 'POST' this.fetchLogs(this.currentPage);
}).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
}
}); });
});
}); this.form.addEventListener('submit', (event) => this.startScraping(event));
this.stopButton.addEventListener('click', () => this.stopScraping());
}
}
// Initialize the application when DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => new LogScraperApp());