fix de tout l'ui du file explorer

reste à faire download/upload/delete + ajout des boutons

Server/FileExplorer/index.html

@@ -28,6 +28,7 @@
         data-show-pagination-switch="false">
         <thead>
           <tr>
+            <th data-sortable="false" data-width="20" data-checkbox="true"></th>
             <th data-sortable="true">Nom</th>
             <th data-sortable="false" data-width="150">Modifié le</th>
             <th data-sortable="true" data-width="50">Taille</th>
@@ -38,62 +39,107 @@
     <script>
         $(document).ready(function() {
 			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) {
+				  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 '';
+					}
 				  },
-				  "dataSrc": function(json) {
+				  "createdCell": function(cell, cellData, rowData, rowIndex, colIndex) {
-					return json.data;
+					if (colIndex === 0) { // Only add the click event listener to the checkbox cell
+					  $(cell).find('input[type="checkbox"]').on('click', function(event) {
+						event.stopPropagation();
+					  });
+					}
 				  }
 				},
-				"columns": [
+				{
-                {
+				  "data": "url",
-                    "data": null,
+				  "render": function(data, type, full, meta) {
-                    "render": function(data, type, row) {
+					return '<i class="fas fa-folder mr-3"></i>' + data;
-                        if (data.url == "<a>..</a>") {
-                            //data.url = "<a>a</a>";
-                        }
-                        return data.url;
-                    }
-                },
-				  { "data": "modified" },
-				  { "data": "size" }
-				],
-                "createdRow": function(row, data, dataIndex) {
-                    $(row).addClass('d-flex align-items-center');
-                }
-			  });
-			// 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);
 				  }
+				},
+				{ "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'));
+
+			  // Show/hide the buttons based on the number of checked checkboxes
+			  if ($('input[type="checkbox"]:checked').length > 0) {
+				$('#delete-button, #download-button, #upload-button').show();
+			  } 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
+			  $.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 event listener to checkbox inputs
+          $('#explorer tbody').on('change', 'input[type="checkbox"]', function() {
+            // Get the number of checked checkboxes
+            var numChecked = $('input[type="checkbox"]:checked').length;
+
+            // Show/hide the buttons based on the number of checked checkboxes
+            if (numChecked > 0) {
+              $('#delete-button, #download-button, #upload-button').show();
+            } else {
+              $('#delete-button, #download-button, #upload-button').hide();
+            }
+          });
         });
     </script>
 </body>

Server/FileExplorer/style.css

@@ -77,20 +77,20 @@ th {
   text-align: center;
 }
 
-td:nth-child(1) { /* targets the first column */
+td:nth-child(2) { /* targets the first column */
-    cursor: pointer;
     margin-left: 20%;
+    cursor: default;
 }
 
-td:nth-child(1):hover {
+td:nth-child(2):hover {
     color: #5660f1;
 }
 
-td:nth-child(2) { /* targets the second column */
+td:nth-child(3) { /* targets the second column */
   text-align: center;
 }
 
-td:nth-child(3) { /* targets the third column */
+td:nth-child(4) { /* targets the third column */
   text-align: right;
 }
 
@@ -103,3 +103,7 @@ td:nth-child(3) { /* targets the third column */
     position: relative;
     top: -7px;
 }
+
+.checkbox_style {
+   transform: scale(1.5); 
+}

Server/Server.py

@@ -43,18 +43,21 @@ def CAESAR_DECRYPT(in_s: str) -> str :
     return r
 
 def convert_size(size_bytes):
-   if size_bytes == 0:
+    if size_bytes == 0:
-       return "0 O"
+        return "0 O"
-   size_name = ("O", "Ko", "Mo", "Go", "To", "Po", "Eo", "Zo", "Yo")
+    size_name = ("O", "Ko", "Mo", "Go", "To", "Po", "Eo", "Zo", "Yo")
-   i = int(math.floor(math.log(size_bytes, 1024)))
+    try :
-   p = math.pow(1024, i)
+        i = int(math.floor(math.log(size_bytes, 1024)))
-   s = round(size_bytes / p, 2)
+    except : 
-   return "%s %s" % (s, size_name[i])
+        return "N"
+    p = math.pow(1024, i)
+    s = round(size_bytes / p, 2)
+    return "%s %s" % (s, size_name[i])
 
 app = Flask(__name__) 
 # Disable Flask's default logging
-#log = logging.getLogger('werkzeug')
+log = logging.getLogger('werkzeug')
-#log.disabled = True
+log.disabled = True
 
 @app.route('/<path:filename>')
 def serve_file(filename):
@@ -66,10 +69,12 @@ def index() :
     index_path = os.path.join(os.getcwd(), 'FileExplorer/index.html')
     return send_file(index_path)
 
+FILES_=[]
 path_file_ex = ""
 @app.route('/get_data', methods=['POST'])
 def get_data() :
     global path_file_ex
+    global FILES_
     data = []
     
     got_path = request.get_data().decode("latin-1")
@@ -93,8 +98,6 @@ def get_data() :
         path_file_ex = ""
 
     i = -1
-    print(path_file_ex.split("/"))
-
     if CONNECT_CLIENTS != [] :
         data.append({"url" : f"<a>..</a>", "modified":"", "size" : ""})
 
@@ -122,10 +125,17 @@ def get_data() :
             if client_num != i : continue
             path_parts[0] = path_parts[0] + ":"
             
+            if path_parts[len(path_parts)-2] in FILES_ :
+                path_parts.pop(len(path_parts)-2)
+                path_file_ex_parts = path_file_ex.split("/")
+                path_file_ex_parts.pop(len(path_file_ex_parts)-2)
+                path_file_ex = '/'.join(path_file_ex_parts)
+
             path_file_ex_2 = '/'.join(path_parts)
             client.send(CAESAR(path_file_ex_2 + "\0").encode())
            
             files = recv_message_ret(client).decode("latin-1")
+            FILES_ = []
             for f in files.split("/") :
                 f = CAESAR_DECRYPT(f)
                 #print(path_file_ex + f)
@@ -142,6 +152,8 @@ def get_data() :
                     taille = convert_size(int(taille))
                     if taille == "0 O" :
                         is_dir = True
+                    else :
+                        FILES_.append(f)
                 
                 if is_dir :
                     data.append({"url": f"<img src=\"images/folder.png\" alt=\"Folder Icon\" class=\"mr-3\" id=\"folder\" /><a class=\"centered\">{f}</a>",