ajout du file explorer

reste à fix le get_file_info, ajouter le download/upload/delete
2023-02-16 20:16:30 +01:00
parent 82315c7c4f
commit cb5ec53bd2
10 changed files with 529 additions and 42 deletions
--- a/Server/FileExplorer/index.html
+++ b/Server/FileExplorer/index.html
@@ -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>