90 lines
2.6 KiB
HTML
90 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Laika - File Explorer</title>
|
|
<meta charset="UTF-8">
|
|
</head>
|
|
<body>
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<div class="header">
|
|
<a href="/">
|
|
<a href="./index.html"><img alt="Spike" src="images/spike.jpg" id="spike"></a>
|
|
</a>
|
|
<div class="menu">
|
|
<h1 id="titre">Là où finit l'État, commence l'arc-en-ciel</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<br><br><br>
|
|
<table id="explorer"
|
|
class="table table-striped table-bordered"
|
|
style="width:100%"
|
|
data-pagination="false"
|
|
data-show-pagination-switch="false">
|
|
<thead>
|
|
<tr>
|
|
<th data-sortable="true">Nom</th>
|
|
<th data-sortable="false" data-width="150">Modifié le</th>
|
|
<th data-sortable="true" data-width="25">Taille</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var table = $('#explorer').DataTable({
|
|
"bPaginate": false,
|
|
"bLengthChange": false,
|
|
"bFilter": false,
|
|
"bInfo": false,
|
|
"bAutoWidth": false,
|
|
"ajax": {
|
|
"url": "/get_data",
|
|
"type": "POST",
|
|
"contentType": "application/json",
|
|
"data": function(d) {
|
|
return JSON.stringify(d);
|
|
},
|
|
"dataSrc": function(json) {
|
|
return json.data;
|
|
}
|
|
},
|
|
"columns": [
|
|
{ "data": "url" },
|
|
{ "data": "modified" },
|
|
{ "data": "size" }
|
|
]
|
|
});
|
|
// add click event listener to table rows
|
|
$('#explorer tbody').on('click', 'tr', function() {
|
|
// fetch data from the server and update the table
|
|
// Get the clicked element's text
|
|
var clickedText = $('#explorer').DataTable().cell(this, 0).data();
|
|
|
|
// Send an AJAX request to the Flask app to retrieve the updated data
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '/get_data',
|
|
contentType : "text/plain",
|
|
data: {folder_path: clickedText},
|
|
success: function(data) {
|
|
// Update the data table with the new data
|
|
$('#explorer').DataTable().clear();
|
|
$('#explorer').DataTable().rows.add(data.data);
|
|
$('#explorer').DataTable().draw();
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('Error retrieving data: ' + error);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|