add: GUI Server
This commit is contained in:
193
Server_cli/FileExplorer/index.html
Normal file
193
Server_cli/FileExplorer/index.html
Normal file
@@ -0,0 +1,193 @@
|
||||
<!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="false" data-width="20" data-checkbox="true"></th>
|
||||
<th data-sortable="false">Nom</th>
|
||||
<th data-sortable="false" data-width="150">Modifié le</th>
|
||||
<th data-sortable="true" data-width="50">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": null,
|
||||
"render": function(data, type, full, meta) {
|
||||
if (data.url.includes("img")) {
|
||||
return '<input type="checkbox" name="checkbox[]" class="checkbox_style" value="false">';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
"createdCell": function(cell, cellData, rowData, rowIndex, colIndex) {
|
||||
if (colIndex === 0) { // Only add the click event listener to the checkbox cell
|
||||
$(cell).find('input[type="checkbox"]').on('click', function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": "url",
|
||||
"render": function(data, type, full, meta) {
|
||||
return '<i class="fas fa-folder mr-3"></i>' + data;
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": "modified"
|
||||
},
|
||||
{
|
||||
"data": "size"
|
||||
}
|
||||
],
|
||||
"order": [
|
||||
[1, "asc"]
|
||||
], //column indexes is zero based
|
||||
"createdRow": function(row, data, dataIndex) {
|
||||
$(row).addClass('d-flex align-items-center');
|
||||
}
|
||||
});
|
||||
|
||||
// Add the checkbox in the top left corner of the table
|
||||
var th = $('#explorer').find('thead th').eq(0);
|
||||
th.html('<input type="checkbox" id="select-all-checkbox" class="sorting_disabled checkbox_style" value="false">');
|
||||
|
||||
|
||||
// Add click event listener to select all checkbox
|
||||
$('#select-all-checkbox').on('click', function() {
|
||||
$('input[type="checkbox"]').prop('checked', $(this).prop('checked'));
|
||||
|
||||
});
|
||||
|
||||
// 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().url;
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add buttons to the table
|
||||
$('#explorer').before('<div class="button-group"><button id="download-button">Download</button><button id="upload-button">Upload</button><button id="remove-button">Remove</button><button id="execute-button">Execute</button></div>');
|
||||
|
||||
function get_checked_rows() {
|
||||
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
|
||||
var urlColumn = table.column(1);
|
||||
const re = [];
|
||||
|
||||
for (let i = 1; i < checkboxes.length; i++) {
|
||||
let checked = checkboxes[i].checked;
|
||||
if (checked) {
|
||||
re.push(urlColumn.data()[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return re;
|
||||
}
|
||||
|
||||
// function to send data to the server
|
||||
function send_from_button(action) {
|
||||
var to_send = [];
|
||||
to_send.push(action);
|
||||
|
||||
if (action != "upload") {
|
||||
to_send = to_send.concat(get_checked_rows());
|
||||
}
|
||||
|
||||
if (to_send.length > 1 || action == "upload") {
|
||||
console.log(to_send);
|
||||
|
||||
// Send an AJAX request to the Flask app to retrieve the updated data
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/interact',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify({ to_send })
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener to the download button
|
||||
$('#download-button').on('click', function() {
|
||||
send_from_button("download");
|
||||
});
|
||||
|
||||
$('#upload-button').on('click', function() {
|
||||
send_from_button("upload");
|
||||
});
|
||||
|
||||
// Add event listener to the remove button
|
||||
$('#remove-button').on('click', function() {
|
||||
send_from_button("remove");
|
||||
});
|
||||
|
||||
$('#execute-button').on('click', function() {
|
||||
send_from_button("execute");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user