initial commit file manager project

Frontend/static/css/components.css

@@ -0,0 +1,72 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    min-height: 100%;
+    overflow: hidden;
+    background: #212121;
+    font-family: "Ubuntu", sans-serif;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1 1 auto;
+    overflow-y: scroll;
+}
+
+footer {
+    /*flex: 0 0 auto;*/
+    text-align: right;
+}
+
+header {
+    flex: 0 0 auto;
+}
+
+.app-header {
+    box-shadow: 1px 1px 10px rgb(33, 33, 33);
+    overflow: hidden;
+    -webkit-user-select: none;
+    background-color: #404040;
+    color: #ffffff;
+    display: grid;
+    grid-gap: 5%;
+    grid-template-columns: 25% 40% 25%;
+    height: auto;
+    max-height: 100px;
+    padding: 10px;
+}
+
+.title {
+    margin: 5px;
+    font-size: 2em;
+}
+
+.box {
+    padding: 5px;
+    height: 100%;
+}
+
+button {
+    cursor: pointer;
+}
+
+.material-icon {
+    font-family: Material Icons, sans-serif !important;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: "liga";
+    -webkit-font-smoothing: antialiased;
+}

Frontend/static/css/index.css

@@ -0,0 +1,88 @@
+#wrapper {
+    color: white;
+    padding: 5px;
+}
+
+#wrapper1 {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 30% 70%;
+}
+
+#tree {
+    grid-column: 1;
+    margin: 5px;
+}
+
+#path {
+    padding-bottom: 10px;
+}
+
+.arrow-pointer {
+    display: inline-block;
+    height: 2em;
+    background: #404040;
+    position: relative;
+    color: #ffffff;
+    margin-left: 1em;
+}
+
+.arrow-pointer:first-child {
+    margin-left: 0;
+}
+
+.arrow-pointer span {
+    padding-left: 1.5em;
+    padding-right: 0.5em;
+    padding-top: 0.5em;
+
+}
+
+.arrow-pointer:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border-left: 1em solid #212121;
+    border-top: 1em solid #404040;
+    border-bottom: 1em solid #404040;
+}
+
+.arrow-pointer:before {
+    content: '';
+    position: absolute;
+    right: -1em;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border-left: 1em solid #404040;
+    border-top: 1em solid #212121;
+    border-bottom: 1em solid #212121;
+}
+
+
+#files {
+    grid-column: 2;
+    margin: 5px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+tr {
+    height: 3em;
+}
+
+th, td {
+    border-bottom: 1px solid #ccc;
+}
+
+thead tr {
+    text-align: left;
+    background: #0062ff;
+}

Frontend/static/css/login.css

@@ -0,0 +1,38 @@
+#wrapper {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#login {
+    margin-right: auto;
+    margin-left: auto;
+    color: #ffffff;
+}
+
+#login h1 {
+    text-align: center;
+}
+
+#login input, #login button {
+    font-size: 2em;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    height: 2.5em;
+    width: 100%;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    margin: 5px;
+}
+
+#login input {
+    background-color: #404040;
+    color: #ffffff;
+}
+
+#login button {
+    background-color: #003100;
+    color: #ffffff;
+}

Frontend/static/js/index.js

@@ -0,0 +1,104 @@
+tree = [];
+
+window.addEventListener('load', function () {
+    console.log('All assets are loaded');
+
+    if (sessionStorage.getItem("authorization") !== null) {
+        console.log('Logged in');
+        url_listener();
+    } else {
+        console.log('Not logged in');
+        create_login_view();
+    }
+});
+
+window.addEventListener('popstate', function () {
+    url_listener();
+});
+
+function url_listener() {
+    let curr_dir = findGetParameter('path');
+
+    if (curr_dir !== null) {
+        httpGetAsync('http://localhost:8080' + curr_dir, null, show_files);
+    } else {
+        httpGetAsync('http://localhost:8080', null, show_files);
+    }
+}
+
+function login() {
+    let username = document.getElementById("username").value;
+    let password = document.getElementById("password").value;
+
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+        if (this.readyState === 4) {
+            if (xmlHttp.status === 200) {
+                console.log(username + ':' + JSON.parse(xmlHttp.responseText)['token'])
+                sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(xmlHttp.responseText)['token']));
+
+                httpGetAsync('http://localhost:8080', null, show_files);
+            }
+        }
+    }
+
+    xmlHttp.open("POST", 'http://localhost:8080/login', true);
+    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+    xmlHttp.send('username=' + username + '&password=' + password);
+}
+
+function show_files(response, code) {
+    document.getElementById("wrapper").innerHTML = '';
+    if (code === 200) {
+        // OK
+        console.log(code);
+        console.log(JSON.parse(response));
+        create_file_view(JSON.parse(response));
+    } else if (code === 401) {
+        // Not logged in
+        sessionStorage.removeItem('authorization');
+        // location.reload();
+    } else {
+        // Error
+        console.error(code);
+        console.error(JSON.parse(response));
+        sessionStorage.removeItem('authorization');
+        // location.reload();
+    }
+}
+
+function one_dir_back() {
+    let curr_dir = findGetParameter('path');
+
+    let dir = curr_dir.split('/');
+    dir = dir.slice(0, dir.length - 1);
+    curr_dir = dir.join('/');
+
+    return curr_dir;
+}
+
+// function change_dir(name) {
+//     let curr_dir = findGetParameter('path');
+//
+//     if(curr_dir === null) {
+//         curr_dir = '';
+//     }
+//
+//     if (name === '..') {
+//         let dir = curr_dir.split('/');
+//         dir = dir.slice(0, dir.length - 1);
+//         curr_dir = dir.join('/');
+//
+//         httpGetAsync('http://localhost:8080' + curr_dir, null, show_files);
+//         window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir);
+//     } else {
+//         httpGetAsync('http://localhost:8080' + curr_dir + '/' + name, null, show_files);
+//         window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir + '/' + name);
+//     }
+// }
+
+function load_file(name) {
+    let curr_dir = findGetParameter('path');
+
+    console.log(curr_dir + '/' + name);
+}

Frontend/static/js/tools.js

@@ -0,0 +1,67 @@
+function httpGetAsync(url, data, callback) { // data includes auth
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+        if (this.readyState === 4) {
+            callback(xmlHttp.responseText, xmlHttp.status);
+        }
+    }
+
+    console.log(url)
+    xmlHttp.open("GET", url, true);
+    xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
+    xmlHttp.send(null);
+}
+
+function httpPostAsync(url, data, callback) {
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+        if (this.readyState === 4) {
+            callback(xmlHttp.responseText, xmlHttp.status);
+        }
+    }
+
+    xmlHttp.open("POST", url, true);
+    xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
+    xmlHttp.setRequestHeader('Content-Type', 'application/json');
+    xmlHttp.send(JSON.stringify(data));
+}
+
+function httpDeleteAsync(url, data, callback) {
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+        if (this.readyState === 4) {
+            callback(xmlHttp.responseText, xmlHttp.status);
+        }
+    }
+
+    xmlHttp.open("DELETE", url, true);
+    xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
+    xmlHttp.send();
+}
+
+function httpPutAsync(url, data, callback) {
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+        if (this.readyState === 4) {
+            callback(xmlHttp.responseText, xmlHttp.status);
+        }
+    }
+
+    xmlHttp.open("PUT", url, true);
+    xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
+    xmlHttp.setRequestHeader('Content-Type', 'application/json');
+    xmlHttp.send(JSON.stringify(data));
+}
+
+function findGetParameter(parameterName) {
+    let result = null,
+        tmp = [];
+    location.search
+        .substr(1)
+        .split("&")
+        .forEach(function (item) {
+            tmp = item.split("=");
+            if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
+        });
+    return result;
+}

Frontend/static/js/views.js

@@ -0,0 +1,116 @@
+function create_login_view() {
+    let tmp = document.createElement('div');
+    tmp.innerHTML = `<div id="login">
+                <form>
+                    <h1>Login</h1>
+                    <div>
+                        <label for="username"></label>
+                        <input type="text" name="username" id="username" placeholder="Username" value="admin">
+                    </div>
+                    <div>
+                        <label for="password"></label>
+                        <input type="password" name="password" id="password" placeholder="Password" value="admin">
+                    </div>
+                    <div>
+                        <button type="button" value="Login" onclick="login();">Login</button>
+                    </div>
+                </form>
+            </div>`;
+    document.getElementById("wrapper").appendChild(tmp.firstChild);
+}
+
+// function create_tree_view(data) {
+//     let curr_dir = findGetParameter('path');
+//     let path = curr_dir.split('/');
+//
+//     for (let i = 0; i < data.length; i++) {
+//         if (tree[path[0]] === null) {
+//             tree[path[0]] = {};
+//         }
+//
+//         if (data[i]['Type'] === 'dir') {
+//
+//         }
+//     }
+//     console.log(data)
+// }
+
+function create_file_view(data) {
+    let curr_dir = findGetParameter('path');
+
+    let tmp = document.createElement('div');
+    tmp.innerHTML = `<div id="wrapper1">
+        <div id="tree">Div 1</div>
+        <div id="files">
+            <div id="path"></div>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Icon</th>
+                        <th>Name</th>
+                        <th>Größe</th>
+                        <th>Datum</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr id="back" style="cursor: pointer" onclick="window.history.pushState('index', 'Filemanager', 'index.html?path=' + one_dir_back()); url_listener()">
+                        <td data-order="___"></td>
+                        <td>..</td>
+                        <td></td>
+                        <td></td>
+                    </tr>    
+                </tbody>
+            </table>
+        </div>
+        </div>`;
+
+    // Folders
+    for (let i = 0; i < data.length; i++) {
+        if (data[i]['Type'] === 'dir') {
+            let tmp1 = document.createElement('tr');
+            tmp1.style = 'cursor: pointer;';
+            tmp1.onclick = function () {
+                if (curr_dir === null) curr_dir = '';
+                window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir + '/' + data[i]['Name']);
+                url_listener();
+            };
+            tmp1.innerHTML = `<td data-order="__"><span class="material-icon">folder</span></td>
+                    <td>${data[i]['Name']}</td>
+                    <td>--</td>
+                    <td>--</td>`;
+            tmp.getElementsByTagName('tbody')[0].appendChild(tmp1);
+        }
+    }
+
+    // Files
+    for (let i = 0; i < data.length; i++) {
+        if (data[i]['Type'] !== 'dir') {
+            let tmp1 = document.createElement('tr');
+            tmp1.style = 'cursor: pointer;';
+            tmp1.onclick = function () {
+                if (curr_dir === null) curr_dir = '';
+                load_file(curr_dir, data[i]['Name']);
+            };
+            tmp1.innerHTML = `<td data-order="__"><span class="material-icon">description</span></td>
+                    <td>${data[i]['Name']}</td>
+                    <td>--</td>
+                    <td>--</td>`;
+            tmp.getElementsByTagName('tbody')[0].appendChild(tmp1);
+        }
+    }
+
+    // Path
+    let tmp1 = document.createElement('div');
+    let s = `<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path='); url_listener()" class="arrow-pointer" style="cursor: pointer;z-index: 1000"><span>/</span></div>`;
+
+    if (curr_dir !== null) {
+        let folders = curr_dir.split('/');
+        for (let i = 1; i < folders.length; i++) {
+            s = s.concat(`<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path=${folders.slice(0, i + 1).join('/')}'); url_listener()" class="arrow-pointer" style="cursor: pointer;z-index: ${folders.length - i}"><span>${folders[i]}</span></div>`);
+        }
+    }
+    tmp1.innerHTML = s;
+    tmp.getElementsByTagName('div')[3].appendChild(tmp1);
+
+    document.getElementById("wrapper").appendChild(tmp.firstChild);
+}