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

seperates index and log viewer

Browse Source
This commit is contained in:
Michael Beck
2025-02-10 16:52:29 +01:00
parent 33621bdec4
commit a44c2bfc04
6 changed files with 136 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
app/static/index.js
View File

@@ -1,71 +1,18 @@
class LogScraperApp { class ScraperApp {
constructor() { constructor() {
this.form = document.getElementById('scrapingForm'); this.form = document.getElementById('scrapingForm');
this.stopButton = document.getElementById('stopButton'); 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.getElementById('startButton'); this.startButton = document.getElementById('startButton');
this.activityIndicator = document.getElementById('activity_indicator');
this.currentPage = 0;
this.linesPerPage = null;
this.autoRefreshInterval = null;
this.init(); this.init();
} }
async init() { init() {
await this.fetchConfig(); this.checkScrapingStatus();
await this.checkScrapingStatus();
this.addEventListeners(); 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();
if (data.error) {
this.logsElement.textContent = data.error;
} else {
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() { async checkScrapingStatus() {
try { try {
const response = await fetch('/scraping_status'); const response = await fetch('/scraping_status');
@@ -73,19 +20,23 @@ class LogScraperApp {
if (data.scraping_active) { if (data.scraping_active) {
this.startButton.disabled = true; this.startButton.disabled = true;
this.stopButton.disabled = false; this.stopButton.disabled = false;
this.startAutoRefresh(); this.activityIndicator.classList.remove('text-bg-danger');
this.activityIndicator.classList.add('text-bg-success');
this.activityIndicator.textContent = 'Active';
} else { } else {
this.startButton.disabled = false; this.startButton.disabled = false;
this.stopButton.disabled = true; this.stopButton.disabled = true;
this.activityIndicator.classList.remove('text-bg-success');
this.activityIndicator.classList.add('text-bg-danger');
this.activityIndicator.textContent = 'Inactive';
} }
this.fetchLogs(this.currentPage);
} catch (error) { } catch (error) {
console.error('Error checking scraping status:', error); console.error('Error checking scraping status:', error);
} }
} }
async startScraping(event) { async startScraping(event) {
event.preventDefault(); event.preventDefault(); // Prevent the default form submission
const formData = new FormData(this.form); const formData = new FormData(this.form);
try { try {
const response = await fetch('/start_scraping', { const response = await fetch('/start_scraping', {
@@ -93,12 +44,8 @@ class LogScraperApp {
body: formData body: formData
}); });
const data = await response.json(); const data = await response.json();
console.log(data);
if (data.status === "Scraping started") { if (data.status === "Scraping started") {
this.startButton.disabled = true; this.checkScrapingStatus();
this.stopButton.disabled = false;
this.startAutoRefresh();
} }
} catch (error) { } catch (error) {
console.error('Error starting scraping:', error); console.error('Error starting scraping:', error);
@@ -107,14 +54,12 @@ class LogScraperApp {
async stopScraping() { async stopScraping() {
try { try {
const response = await fetch('/stop_scraping', { method: 'POST' }); const response = await fetch('/stop_scraping', {
method: 'POST'
});
const data = await response.json(); const data = await response.json();
console.log(data);
if (data.status === "Scraping stopped") { if (data.status === "Scraping stopped") {
this.startButton.disabled = false; this.checkScrapingStatus();
this.stopButton.disabled = true;
this.stopAutoRefresh();
} }
} catch (error) { } catch (error) {
console.error('Error stopping scraping:', error); console.error('Error stopping scraping:', error);
@@ -122,23 +67,10 @@ class LogScraperApp {
} }
addEventListeners() { addEventListeners() {
this.prevPageButton.addEventListener('click', () => {
if (this.currentPage > 0) {
this.currentPage--;
this.fetchLogs(this.currentPage);
}
});
this.nextPageButton.addEventListener('click', () => {
this.currentPage++;
this.fetchLogs(this.currentPage);
});
this.form.addEventListener('submit', (event) => this.startScraping(event)); this.form.addEventListener('submit', (event) => this.startScraping(event));
this.stopButton.addEventListener('click', () => this.stopScraping()); this.stopButton.addEventListener('click', () => this.stopScraping());
} }
} }
// Initialize the application when DOM is fully loaded // Initialize the application when DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => new LogScraperApp()); document.addEventListener('DOMContentLoaded', () => new ScraperApp());

97
app/static/log_viewer.js Normal file
View File

@@ -0,0 +1,97 @@
class LogViewerApp {
constructor() {
this.logsElement = document.getElementById('logs');
this.prevPageButton = document.getElementById('prevPage');
this.nextPageButton = document.getElementById('nextPage');
this.pageInfo = document.getElementById('pageInfo');
this.currentPage = 0;
this.linesPerPage = null;
this.autoRefreshInterval = null;
this.init();
}
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();
if (data.error) {
this.logsElement.textContent = data.error;
} else {
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.startAutoRefresh();
} else {
this.stopAutoRefresh();
}
this.fetchLogs(this.currentPage);
} catch (error) {
console.error('Error checking scraping status:', error);
}
}
addEventListeners() {
this.prevPageButton.addEventListener('click', () => {
if (this.currentPage > 0) {
this.currentPage--;
this.fetchLogs(this.currentPage);
}
});
this.nextPageButton.addEventListener('click', () => {
this.currentPage++;
this.fetchLogs(this.currentPage);
});
}
}
// Initialize the application when DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => new LogViewerApp());

3
app/templates/base.html
View File

@@ -22,6 +22,9 @@
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</main> </main>
<footer>
{% include 'includes/footer.html' %}
</footer>
{% block scripts %} {% block scripts %}
{% include 'includes/scripts.html' %} {% include 'includes/scripts.html' %}
{% endblock %} {% endblock %}

0
app/templates/includes/footer.html Normal file
View File

18
app/templates/index.html
View File

@@ -24,23 +24,5 @@
</div> </div>
</div> </div>
</section> </section>
<section id="resultsContainer" class="container-fluid d-flex justify-content-center">
<div class="container-md my-5 mx-2 shadow-lg p-4" style="height: 500px;">
<div class="row">
<div class="col-8">
<h2>Logs</h2>
<pre id="logs" class="pre-scrollable" style="height: 350px; overflow:scroll; "><code></code></pre>
<div class="btn-group btn-group-sm">
<button class="btn btn-primary" id="prevPage">Previous</button>
<button class="btn btn-primary" id="pageInfo" disabled>Page 1 of 1</button>
<button class="btn btn-primary" id="nextPage">Next</button>
</div>
</div>
<div class="col">
<h2>Stats</h2>
</div>
</div>
</div>
</section>
<script src="{{url_for('static', filename='index.js')}}"></script> <script src="{{url_for('static', filename='index.js')}}"></script>
{% endblock content %} {% endblock content %}

19
app/templates/log_viewer.html
View File

@@ -1,3 +1,22 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block content %} {% block content %}
<section id="resultsContainer" class="container-fluid d-flex justify-content-center">
<div class="container-md my-5 mx-2 shadow-lg p-4" style="height: 500px;">
<div class="row">
<div class="col-8">
<h2>Logs</h2>
<pre id="logs" class="pre-scrollable" style="height: 350px; overflow:scroll;"><code></code></pre>
<div class="btn-group btn-group-sm">
<button class="btn btn-primary" id="prevPage">Previous</button>
<button class="btn btn-primary" id="pageInfo" disabled>Page 1 of 1</button>
<button class="btn btn-primary" id="nextPage">Next</button>
</div>
</div>
<div class="col">
<h2>Stats</h2>
</div>
</div>
</div>
</section>
<script src="{{url_for('static', filename='log_viewer.js')}}"></script>
{% endblock content %} {% endblock content %}