ajout des boutons upload/download/remove
upload retourne juste le nom du fichier (problème), manque les fonction de l'agent
This commit is contained in:
@@ -39,108 +39,182 @@
|
|||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
var table = $('#explorer').DataTable({
|
var table = $('#explorer').DataTable({
|
||||||
"bPaginate": false,
|
"bPaginate": false,
|
||||||
"bLengthChange": false,
|
"bLengthChange": false,
|
||||||
"bFilter": false,
|
"bFilter": false,
|
||||||
"bInfo": false,
|
"bInfo": false,
|
||||||
"bAutoWidth": false,
|
"bAutoWidth": false,
|
||||||
"ajax": {
|
"ajax": {
|
||||||
"url": "/get_data",
|
"url": "/get_data",
|
||||||
"type": "POST",
|
"type": "POST",
|
||||||
"contentType": "application/json",
|
"contentType": "application/json",
|
||||||
"data": function(d) {
|
"data": function(d) {
|
||||||
return JSON.stringify(d);
|
return JSON.stringify(d);
|
||||||
},
|
},
|
||||||
"dataSrc": function(json) {
|
"dataSrc": function(json) {
|
||||||
return json.data;
|
return json.data;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"columns": [
|
"columns": [{
|
||||||
{
|
"data": null,
|
||||||
"data": null,
|
"render": function(data, type, full, meta) {
|
||||||
"render": function(data, type, full, meta) {
|
if (data.url.includes("img")) {
|
||||||
if (data.url.includes("img")) {
|
return '<input type="checkbox" name="checkbox[]" class="checkbox_style" value="false">';
|
||||||
return '<input type="checkbox" name="checkbox[]" class="checkbox_style" value="false">';
|
} else {
|
||||||
} else {
|
return '';
|
||||||
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();
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"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",
|
"data": "url",
|
||||||
"render": function(data, type, full, meta) {
|
"render": function(data, type, full, meta) {
|
||||||
return '<i class="fas fa-folder mr-3"></i>' + data;
|
return '<i class="fas fa-folder mr-3"></i>' + data;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ "data": "modified" },
|
{
|
||||||
{ "data": "size" }
|
"data": "modified"
|
||||||
],
|
},
|
||||||
"order": [[ 1, "asc" ]], //column indexes is zero based
|
{
|
||||||
"createdRow": function(row, data, dataIndex) {
|
"data": "size"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"order": [
|
||||||
|
[1, "asc"]
|
||||||
|
], //column indexes is zero based
|
||||||
|
"createdRow": function(row, data, dataIndex) {
|
||||||
$(row).addClass('d-flex align-items-center');
|
$(row).addClass('d-flex align-items-center');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add the checkbox in the top left corner of the table
|
// Add the checkbox in the top left corner of the table
|
||||||
var th = $('#explorer').find('thead th').eq(0);
|
var th = $('#explorer').find('thead th').eq(0);
|
||||||
th.html('<input type="checkbox" id="select-all-checkbox" class="sorting_disabled checkbox_style" value="false">');
|
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'));
|
|
||||||
|
|
||||||
// Show/hide the buttons based on the number of checked checkboxes
|
// Add click event listener to select all checkbox
|
||||||
if ($('input[type="checkbox"]:checked').length > 0) {
|
$('#select-all-checkbox').on('click', function() {
|
||||||
$('#delete-button, #download-button, #upload-button').show();
|
$('input[type="checkbox"]').prop('checked', $(this).prop('checked'));
|
||||||
} else {
|
|
||||||
$('#delete-button, #download-button, #upload-button').hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 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
|
// Add click event listener to table rows
|
||||||
$.ajax({
|
$('#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',
|
type: 'POST',
|
||||||
url: '/get_data',
|
url: '/get_data',
|
||||||
contentType : "text/plain",
|
contentType: "text/plain",
|
||||||
data: {folder_path: clickedText},
|
data: {
|
||||||
|
folder_path: clickedText
|
||||||
|
},
|
||||||
success: function(data) {
|
success: function(data) {
|
||||||
// Update the data table with the new data
|
// Update the data table with the new data
|
||||||
$('#explorer').DataTable().clear();
|
$('#explorer').DataTable().clear();
|
||||||
$('#explorer').DataTable().rows.add(data.data);
|
$('#explorer').DataTable().rows.add(data.data);
|
||||||
$('#explorer').DataTable().draw();
|
$('#explorer').DataTable().draw();
|
||||||
},
|
},
|
||||||
error: function(xhr, status, error) {
|
error: function(xhr, status, error) {
|
||||||
console.error('Error retrieving data: ' + error);
|
console.error('Error retrieving data: ' + error);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Add event listener to checkbox inputs
|
// Add buttons to the table
|
||||||
$('#explorer tbody').on('change', 'input[type="checkbox"]', function() {
|
$('#explorer').before('<div class="button-group"><button id="download-button">Download</button><button id="upload-button">Upload</button><button id="remove-button">Remove</button></div>');
|
||||||
// Get the number of checked checkboxes
|
|
||||||
var numChecked = $('input[type="checkbox"]:checked').length;
|
|
||||||
|
|
||||||
// Show/hide the buttons based on the number of checked checkboxes
|
function get_checked_rows() {
|
||||||
if (numChecked > 0) {
|
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
|
||||||
$('#delete-button, #download-button, #upload-button').show();
|
var urlColumn = table.column(1);
|
||||||
} else {
|
const re = [];
|
||||||
$('#delete-button, #download-button, #upload-button').hide();
|
|
||||||
|
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());
|
||||||
|
} else {
|
||||||
|
// Open file explorer and get selected file
|
||||||
|
var promise = new Promise(function(resolve, reject) {
|
||||||
|
var input = document.createElement('input');
|
||||||
|
input.type = 'file';
|
||||||
|
input.onchange = function(event) {
|
||||||
|
var file = event.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
var fullpath = file.webkitRelativePath || file.name; // get full path or name if not supported
|
||||||
|
resolve(fullpath);
|
||||||
|
} else {
|
||||||
|
reject('No file selected');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
input.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
promise.then(function(fullpath) {
|
||||||
|
to_send.push(fullpath);
|
||||||
|
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 })
|
||||||
|
});
|
||||||
|
}).catch(function(error) {
|
||||||
|
console.error(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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");
|
||||||
});
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -69,8 +69,27 @@ def index() :
|
|||||||
index_path = os.path.join(os.getcwd(), 'FileExplorer/index.html')
|
index_path = os.path.join(os.getcwd(), 'FileExplorer/index.html')
|
||||||
return send_file(index_path)
|
return send_file(index_path)
|
||||||
|
|
||||||
FILES_=[]
|
|
||||||
path_file_ex = ""
|
path_file_ex = ""
|
||||||
|
|
||||||
|
@app.route('/interact', methods=['POST'])
|
||||||
|
def interact() :
|
||||||
|
file_list = request.get_json()["to_send"]
|
||||||
|
action = file_list.pop(0)
|
||||||
|
|
||||||
|
print(file_list)
|
||||||
|
match action :
|
||||||
|
case "download" :
|
||||||
|
print("d")
|
||||||
|
|
||||||
|
case "upload" :
|
||||||
|
print("u")
|
||||||
|
|
||||||
|
case "remove" :
|
||||||
|
print("r")
|
||||||
|
|
||||||
|
return 'ok'
|
||||||
|
|
||||||
|
FILES_=[]
|
||||||
@app.route('/get_data', methods=['POST'])
|
@app.route('/get_data', methods=['POST'])
|
||||||
def get_data() :
|
def get_data() :
|
||||||
global path_file_ex
|
global path_file_ex
|
||||||
|
|||||||
Reference in New Issue
Block a user