Nice frontend, check it out

projet/front/element-style.js

@@ -9,17 +9,19 @@ function new_file(file_name, file_id) {
             </p>
         </div>
     `
-    document.getElementById("drive").append(content);
+    document.getElementById("content-drive").innerHTML += content;
 }
 
-function new_folder (folder_name) {
+function new_folder (folder_name, path) {
     content = `
         <div class="folder">
             <p>
-                <button><img src="/images/folder_img.png" height="50px"></button>
+                <button onclick="change_path('${path}')">
+                    <img src="/images/folder_img.png" height="50px">
+                </button>
                 <p>${folder_name}</p>
             </p>
         </div>
         `;
-    document.getElementById("drive").append(content);
+    document.getElementById("content-drive").innerHTML += content;
 }
\ No newline at end of file

projet/front/index.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" type="text/css" href="/styles/style.css">
     <script src="jquery-3.4.1.min.js"></script>
     <script src="element-style.js"></script>
+    <script src="show-content.js"></script>
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
@@ -14,13 +15,16 @@
     <div id="hyperdrive">
         <div id="menu">
             <h3>Menu</h3>
-            <button><img src="/images/file_img.png" height="50px"></button>
+            <input type="text" id="username">
+            <input type="password" id="passwd">
+            <button onclick="login()">Login</button>
         </div>
         <div id="drive">
             <h3>Drive</h3>
-            <script type="javascript">
+            <p id="dir_name"></p>
+            <div id="content-drive">
 
-            </script>
+            </div>
         </div>
         <div id="info">
             <h3>Infos</h3>

projet/front/show-content.js

+"use strict";
+
+function change_path(path){
+    document.getElementById("content-drive").innerHTML = "";
+    $.ajax({url: 'change-path'+path, success: function(result){
+        console.log(result);
+        document.getElementById("dir_name").innerHTML = "Directory : " + path;
+        for (let i in result){
+            if (result[i].file_id){
+                new_file(result[i].file_name, result[i].file_id);
+            } else {
+                if (path !== result[i].paths){
+                    let name = result[i].paths.split("/");
+                    new_folder(name[name.length-1], result[i].paths);
+                }
+            }
+        }
+    }});
+}
+
+function login() {
+    let username = document.getElementById("username").value
+    let passwd = document.getElementById("passwd").value
+    console.log("login",
+            username,
+            passwd
+        );
+    let log_ok = true;
+    if (log_ok) {
+        change_path('/' + username)
+    }
+}
\ No newline at end of file

projet/hyperdrive-rest.js

@@ -254,8 +254,11 @@ app.get('/download/:file_id', (req, res) => {
  */
 app.get('/change-path*', (req, res) => {
 
-    sql.changeDirectory('a', req.params['0']);
-    res.send(`Request for a change path (${req.params['0']})`)
+    content = sql.changeDirectory('a', req.params['0'],
+    (content) => {
+        res.send(content);
+    });
+    // res.send(`Request for a change path (${req.params['0']})`)
 })
 
 app.get('/create-path*', (req, res) => {

projet/sql-request.js

@@ -123,31 +123,32 @@ async function changeDirectory(login, path, callback){
         }
 
         console.log(content);
+        return callback(content, "Change dir success");
     });
 
-    return [
-        {
-            path: '/a/coucou',
-            login: 'a',
-            parent: '/a',
-            file_id: 'abnnnnn',
-            file_name: 'deux'
-        },
-        {
-            path: '/a/coucou',
-            login: 'a',
-            parent: '/a',
-            file_id: 'accb',
-            file_name: 'trois'
-        },
-        {
-            path: '/a/coucou/test',
-            login: 'a',
-            parent: '/a/coucou',
-            file_id: 'NULL',
-            file_name: 'NULL'
-        }
-    ];
+    // return [
+    //     {
+    //         path: '/a/coucou',
+    //         login: 'a',
+    //         parent: '/a',
+    //         file_id: 'abnnnnn',
+    //         file_name: 'deux'
+    //     },
+    //     {
+    //         path: '/a/coucou',
+    //         login: 'a',
+    //         parent: '/a',
+    //         file_id: 'accb',
+    //         file_name: 'trois'
+    //     },
+    //     {
+    //         path: '/a/coucou/test',
+    //         login: 'a',
+    //         parent: '/a/coucou',
+    //         file_id: 'NULL',
+    //         file_name: 'NULL'
+    //     }
+    // ];
 }
 
 exports.addUser = addUser;