Adds multiple file download/delete option. Fixes css-filename.
This commit is contained in:
Michael Beck
@@ -7,7 +7,68 @@
|
||||
<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='styles.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>
|
||||
@@ -25,50 +86,74 @@
|
||||
<main>
|
||||
<section id="scrapingFormContainer" class="container-fluid d-flex justify-content-center">
|
||||
<div class="container-md my-5 mx-2 shadow-lg p-4 ">
|
||||
<h2>Data</h2>
|
||||
<div class="container-sm">
|
||||
<div class="row">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<table id="dataFilesTable" class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th onclick="sortTable(0, 'dataFilesTable')">File Name</th>
|
||||
<th onclick="sortTable(1, 'dataFilesTable')">Last Modified</th>
|
||||
<th onclick="sortTable(2, 'dataFilesTable')">Created</th>
|
||||
<th onclick="sortTable(3, 'dataFilesTable')">Size</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>
|
||||
<th onclick="sortTable(4, 'dataFilesTable')">Size</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for file in files.data %}
|
||||
<tr>
|
||||
<td><a href="{{ url_for('download_data_file', filename=file.name.split('/')[-1]) }}" target="_blank">{{ file.name }}</a></td>
|
||||
<td>{{ file.last_modified | datetimeformat }}</td>
|
||||
<td>{{ file.created | datetimeformat }}</td>
|
||||
<td>{{ file.size }}</td>
|
||||
<td>
|
||||
<button onclick="deleteFile('{{ file.name }}')">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tbody>
|
||||
{% for file in files.data %}
|
||||
<tr>
|
||||
<td class="d-sm-table-cell"><input type="checkbox" name="fileCheckbox" value="{{ url_for('download_data_file', filename=file.name_display) }}"></td>
|
||||
<td><a href="{{ url_for('download_data_file', filename=file.name_display) }}" target="_blank">{{ file.name_display }}</a></td>
|
||||
<td>{{ file.last_modified | datetimeformat }}</td>
|
||||
<td>{{ file.created | datetimeformat }}</td>
|
||||
<td>{{ file.size }}</td>
|
||||
<td>
|
||||
<button onclick="deleteFiles(['{{ file.name }}'])">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Log</h2>
|
||||
<table id="logFilesTable" class="table table-striped table-bordered table-hover">
|
||||
<div class="container-sm">
|
||||
<div class="row">
|
||||
<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>
|
||||
</div>
|
||||
</div> <table id="logFilesTable" class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th onclick="sortTable(0, 'logFilesTable')">File Name</th>
|
||||
<th onclick="sortTable(1, 'logFilesTable')">Last Modified</th>
|
||||
<th onclick="sortTable(2, 'logFilesTable')">Created</th>
|
||||
<th onclick="sortTable(3, 'logFilesTable')">Size</th>
|
||||
<th><input type="checkbox" id="checkAllLog" onclick="checkAllCheckboxes('logFilesTable', 'checkAllLog')"> Select</th>
|
||||
<th onclick="sortTable(1, 'logFilesTable')">File Name</th>
|
||||
<th onclick="sortTable(2, 'logFilesTable')">Last Modified</th>
|
||||
<th onclick="sortTable(3, 'logFilesTable')">Created</th>
|
||||
<th onclick="sortTable(4, 'logFilesTable')">Size</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for file in files.log %}
|
||||
<tr>
|
||||
<td><a href="{{ url_for('download_log_file', filename=file.name.split('/')[-1]) }}" target="_blank">{{ file.name }}</a></td>
|
||||
<td><input type="checkbox" name="fileCheckbox" value="{{ url_for('download_log_file', filename=file.name_display) }}"></td>
|
||||
<td><a href="{{ url_for('download_log_file', filename=file.name_display) }}" target="_blank">{{ file.name }}</a></td>
|
||||
<td>{{ file.last_modified | datetimeformat }}</td>
|
||||
<td>{{ file.created | datetimeformat }}</td>
|
||||
<td>{{ file.size }}</td>
|
||||
<td>
|
||||
<button onclick="deleteFile('{{ file.name }}')">Delete</button>
|
||||
<button onclick="deleteFiles(['{{ file.name }}'])">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
@@ -77,9 +162,5 @@
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{% block scripts %}
|
||||
{{ bootstrap.load_js() }}
|
||||
<script src="{{url_for('.static', filename='app.js')}}"></script>
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user