ajout du file explorer
reste à fix le get_file_info, ajouter le download/upload/delete
This commit is contained in:
BIN
Server/FileExplorer/images/bg.gif
Normal file
BIN
Server/FileExplorer/images/bg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Server/FileExplorer/images/spike.jpg
Normal file
BIN
Server/FileExplorer/images/spike.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
89
Server/FileExplorer/index.html
Normal file
89
Server/FileExplorer/index.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!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>
|
||||
95
Server/FileExplorer/style.css
Normal file
95
Server/FileExplorer/style.css
Normal file
@@ -0,0 +1,95 @@
|
||||
#spike {
|
||||
float: left;
|
||||
border-style:solid;
|
||||
border-color:#0004ff;
|
||||
border-width: 1px;
|
||||
width: 8%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* unvisited link */
|
||||
a:link {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* visited link */
|
||||
a:visited {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* mouse over link */
|
||||
a:hover {
|
||||
color: #5660f1;
|
||||
}
|
||||
|
||||
/* selected link */
|
||||
a:active {
|
||||
color: #686bff;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow:auto;
|
||||
background-color: rgba(18,24,217,0.5);
|
||||
top: 0;
|
||||
left:0px;
|
||||
right:0px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
margin-top: 5.2%;
|
||||
margin-left: 0.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url(../images/bg.gif) repeat 0 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: large;
|
||||
margin-left: 3px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
#titre {
|
||||
position: relative;
|
||||
left: 75%;
|
||||
top: -20px;
|
||||
margin-top: -7%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td:nth-child(1) { /* targets the first column */
|
||||
cursor: pointer;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
td:nth-child(1):hover {
|
||||
color: #5660f1;
|
||||
}
|
||||
|
||||
td:nth-child(2) { /* targets the second column */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td:nth-child(3) { /* targets the third column */
|
||||
text-align: right;
|
||||
}
|
||||
Reference in New Issue
Block a user