Introduces proper header-footer templating. Fixes Buttons in download_results.html.

This commit is contained in:
Michael Beck
2025-02-05 19:00:47 +01:00
parent 0faacef2e9
commit 8852142535
5 changed files with 105 additions and 121 deletions

View File

@@ -0,0 +1,59 @@
function deleteFiles(filePaths) {
fetch('/delete_files', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
'file_paths': filePaths
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Files deleted successfully');
location.reload();
} else {
alert('Error deleting files: ' + JSON.stringify(data.errors));
}
});
}
function deleteSelectedFiles() {
const selectedFiles = Array.from(document.querySelectorAll('input[name="fileCheckbox"]:checked'))
.map(checkbox => checkbox.value);
if (selectedFiles.length > 0) {
deleteFiles(selectedFiles);
} else {
alert('No files selected');
}
}
function downloadSelectedFiles() {
const selectedFiles = Array.from(document.querySelectorAll('input[name="fileCheckbox"]:checked'))
.map(checkbox => checkbox.value);
if (selectedFiles.length > 0) {
selectedFiles.forEach(file => {
const link = document.createElement('a');
link.href = file;
link.download = file.split('/').pop();
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
} else {
alert('No files selected');
}
}
// Function to check or uncheck all checkboxes in a table by checking or unchecking the "CheckAll" checkbox
function checkAllCheckboxes(tableId, checkAllCheckboxId) {
const table = document.getElementById(tableId);
const checkboxes = table.querySelectorAll('input[type="checkbox"][name="fileCheckbox"]');
const checkAllCheckbox = document.getElementById(checkAllCheckboxId);
const isChecked = checkAllCheckbox.checked;
checkboxes.forEach(checkbox => {
checkbox.checked = isChecked;
});
}

View File

@@ -1,88 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your page title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{ bootstrap.load_css() }}
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
<script>
function deleteFiles(filePaths) {
fetch('/delete_files', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
'file_paths': filePaths
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Files deleted successfully');
location.reload();
} else {
alert('Error deleting files: ' + JSON.stringify(data.errors));
}
});
}
function deleteSelectedFiles() {
const selectedFiles = Array.from(document.querySelectorAll('input[name="fileCheckbox"]:checked'))
.map(checkbox => checkbox.value);
if (selectedFiles.length > 0) {
deleteFiles(selectedFiles);
} else {
alert('No files selected');
}
}
function downloadSelectedFiles() {
const selectedFiles = Array.from(document.querySelectorAll('input[name="fileCheckbox"]:checked'))
.map(checkbox => checkbox.value);
if (selectedFiles.length > 0) {
selectedFiles.forEach(file => {
const link = document.createElement('a');
link.href = file;
link.download = file.split('/').pop();
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
} else {
alert('No files selected');
}
}
// Function to check or uncheck all checkboxes in a table by checking or unchecking the "CheckAll" checkbox
function checkAllCheckboxes(tableId, checkAllCheckboxId) {
const table = document.getElementById(tableId);
const checkboxes = table.querySelectorAll('input[type="checkbox"][name="fileCheckbox"]');
const checkAllCheckbox = document.getElementById(checkAllCheckboxId);
const isChecked = checkAllCheckbox.checked;
checkboxes.forEach(checkbox => {
checkbox.checked = isChecked;
});
}
</script>
</head>
<body>
<header>
<h1>Torn User Activity Scraper</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mr-auto">
{% from 'bootstrap4/nav.html' import render_nav_item %}
{{ render_nav_item('index', 'Home') }}
{{ render_nav_item('results', 'Results') }}
{{ render_nav_item('download_results', 'Download Results') }}
</div>
</nav>
</header>
{% include "header.html" %}
<main>
<section id="scrapingFormContainer" class="container-fluid d-flex justify-content-center">
<div class="container-md my-5 mx-2 shadow-lg p-4 ">
@@ -91,16 +8,18 @@
<div class="col">
<h2>Data Files</h2>
</div>
<div class="col btn-group" >
<button class="btn-danger" onclick="deleteSelectedFiles()">Delete Selected Files</button>
<button class="btn-success" onclick="downloadSelectedFiles()">Download Selected Files</button>
<div class="col">
<div class="btn-group btn-group-sm">
<button class="btn btn-warning" onclick="deleteSelectedFiles()">Delete Selected Files</button>
<button class="btn btn-success" onclick="downloadSelectedFiles()">Download Selected Files</button>
</div>
</div>
</div>
</div>
<table id="dataFilesTable" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th><input type="checkbox" id="checkAllData" onclick="checkAllCheckboxes('dataFilesTable', 'checkAllData')">Select</th>
<th><input type="checkbox" id="checkAllData" onclick="checkAllCheckboxes('dataFilesTable', 'checkAllData')"> Select</th>
<th onclick="sortTable(1, 'dataFilesTable')">File Name</th>
<th onclick="sortTable(2, 'dataFilesTable')">Last Modified</th>
<th onclick="sortTable(3, 'dataFilesTable')">Created</th>
@@ -117,7 +36,7 @@
<td>{{ file.created | datetimeformat }}</td>
<td>{{ file.size }}</td>
<td>
<button onclick="deleteFiles(['{{ file.name }}'])">Delete</button>
<button class="btn btn-warning" onclick="deleteFiles(['{{ file.name }}'])">Delete</button>
</td>
</tr>
{% endfor %}
@@ -128,11 +47,12 @@
<div class="col">
<h2>Log Files</h2>
</div>
<div class="col btn-group" >
<button class="btn-danger" onclick="deleteSelectedFiles()">Delete Selected Files</button>
<button class="btn-success" onclick="downloadSelectedFiles()">Download Selected Files</button>
<div class="col">
<div class="btn-group btn-group-sm">
<button class="btn btn-warning" onclick="deleteSelectedFiles()">Delete Selected Files</button>
<button class="btn btn-success" onclick="downloadSelectedFiles()">Download Selected Files</button>
</div>
</div>
</div>
</div> <table id="logFilesTable" class="table table-striped table-bordered table-hover">
<thead>
<tr>
@@ -153,7 +73,7 @@
<td>{{ file.created | datetimeformat }}</td>
<td>{{ file.size }}</td>
<td>
<button onclick="deleteFiles(['{{ file.name }}'])">Delete</button>
<button class="btn btn-warning" onclick="deleteFiles(['{{ file.name }}'])">Delete</button>
</td>
</tr>
{% endfor %}
@@ -162,5 +82,8 @@
</div>
</section>
</main>
</body>
</html>
{% block scripts %}
{{ bootstrap.load_js() }}
<script src="{{url_for('.static', filename='download_results.js')}}"></script>
{% endblock %}
{% include "footer.html" %}

2
templates/footer.html Normal file
View File

@@ -0,0 +1,2 @@
</body>
</html>

23
templates/header.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your page title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{ bootstrap.load_css() }}
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
</head>
<body>
<header>
<h1>Torn User Activity Scraper</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mr-auto">
{% from 'bootstrap4/nav.html' import render_nav_item %}
{{ render_nav_item('index', 'Home') }}
{{ render_nav_item('results', 'Results') }}
{{ render_nav_item('download_results', 'Download Results') }}
</div>
</nav>
</header>

View File

@@ -1,26 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your page title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{ bootstrap.load_css() }}
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
</head>
<body>
<header>
<h1>Torn User Activity Scraper</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mr-auto">
{% from 'bootstrap4/nav.html' import render_nav_item %}
{{ render_nav_item('index', 'Home') }}
{{ render_nav_item('results', 'Results') }}
{{ render_nav_item('download_results', 'Download Results') }}
</div>
</nav>
</header>
{% include "header.html" %}
<main>
<section id="scrapingFormContainer" class="container-fluid d-flex justify-content-center">
<div class="container-md my-5 mx-2 shadow-lg p-4 ">
@@ -67,5 +45,4 @@
{{ bootstrap.load_js() }}
<script src="{{url_for('.static', filename='app.js')}}"></script>
{% endblock %}
</body>
</html>
{% include "footer.html" %}