Added and updated webengineering files

Frontend/index.html

@@ -11,6 +11,9 @@
     <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
 
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+
     <link href="static/css/components.css" rel="stylesheet">
     <link href="static/css/login.css" rel="stylesheet">
 
@@ -24,6 +27,11 @@
     </div>
 </header>
 <main>
+    <div id='custom-menu'>
+        <button id="download">Download</button>
+        <button id="remove">Remove</button>
+    </div>
+
     <div id="file_view" class="modal">
         <div id="content">
             <div class="modal-header">
@@ -36,6 +44,7 @@
             </div>
         </div>
     </div>
+
     <div class="box">
         <div id="error_wrapper">
 

Frontend/static/css/components.css

@@ -195,6 +195,45 @@ button {
     line-height: 3em;
 }
 
+#custom-menu  {
+    display: none;
+    z-index:100000;
+    position: absolute;
+    background-color: rgb(229, 229, 229);
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(114, 114, 114);
+    padding: 0 0.25em 0 1.5em;
+    width: 12em;
+    font-size: 12px;
+    overflow: hidden;
+    white-space:nowrap;
+    list-style: none;
+    margin: 0;
+}
+#custom-menu button {
+    display: block;
+    padding: 5px;
+    background: transparent;
+    border: 0;
+    outline: 0;
+    width: 100%;
+    text-align: left;
+    color: #333;
+}
+#custom-menu button:hover {
+    background-color: #DDD;
+    cursor: pointer;
+    color: #000;
+}
+#custom-menu button > span {
+    display: inline;
+    position: absolute;
+    right: 5px;
+    text-align: right;
+    color: rgb(102, 102, 102);
+}
+
 .material-icon {
     font-family: Material Icons, sans-serif !important;
     font-weight: 400;

Frontend/static/css/index.css

@@ -92,13 +92,14 @@ thead tr {
 }
 
 
-@media (max-width: 700px) {
+@media (max-width: 1000px) {
     #wrapper {
         flex-direction: column-reverse;
     }
 
     #tree {
         width: 100%;
+        max-width: unset;
         border-top: #404040 2px solid;
         border-right: none;
     }

Frontend/static/js/index.js

@@ -1,9 +1,11 @@
+base_url = 'http://192.168.178.98:8080'; // http://localhost:8080';
 file_path = [];
 tree = {};
 
 window.addEventListener('load', function () {
     if (sessionStorage.getItem("authorization") !== null) {
         console.log('Logged in');
+        create_base_view();
         create_logout_view();
         url_listener();
         create_tree_view_data('');
@@ -22,12 +24,12 @@ function url_listener() {
 
     if (curr_dir !== null) {
         if(curr_dir.startsWith('/') || curr_dir === '') {
-            httpGetAsync('http://localhost:8080' + curr_dir, null, show_files);
+            httpGetAsync(base_url + curr_dir, null, show_files);
         } else {
             create_error_view('directory does not exist');
         }
     } else {
-        httpGetAsync('http://localhost:8080', null, show_files);
+        httpGetAsync(base_url, null, show_files);
     }
 }
 
@@ -39,17 +41,17 @@ function login() {
     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']));
 
+                create_base_view();
                 create_logout_view();
-
                 url_listener();
+                create_tree_view_data('');
             }
         }
     }
 
-    xmlHttp.open("POST", 'http://localhost:8080/login', true);
+    xmlHttp.open("POST", base_url + '/login', true);
     xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     xmlHttp.send('username=' + username + '&password=' + password);
 }

Frontend/static/js/views.js

@@ -16,7 +16,8 @@ function create_login_view() {
                     </div>
                 </form>
             </div>`;
-    document.getElementById("login").appendChild(tmp.firstChild);
+    document.getElementById("wrapper").innerHTML = '';
+    document.getElementById("wrapper").appendChild(tmp.firstChild);
 }
 
 function create_logout_view() {
@@ -30,8 +31,16 @@ function create_logout_view() {
     document.getElementsByClassName('app-header')[0].appendChild(logout);
 }
 
+function create_base_view() {
+    let tmp = document.createElement('div');
+    tmp.innerHTML = `<div id="tree"></div>
+        <div id="files"></div>`;
+
+    document.getElementById("wrapper").innerHTML = tmp.innerHTML;
+}
+
 function create_tree_view_data(curr_dir) {
-    let url = 'http://localhost:8080' + curr_dir;
+    let url = base_url + curr_dir;
 
     const xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = function () {
@@ -109,7 +118,6 @@ function create_list_view(dataRoot, elementRoot, url) {
             list.appendChild(listElement);
 
             // Continue recursively down now using the current list element
-            console.log(url + '/' + dataRoot[key].text)
             create_list_view(dataRoot[key]['children'], listElement, url + '/' + dataRoot[key].text);
         });
     }
@@ -185,6 +193,15 @@ function create_file_view(data) {
             file.innerHTML = `<td data-order="__"><span class="material-icon">${icon}</span></td>
                     <td>${data[i]['Name']}</td>
                     <td>${data[i]['Type']}</td>`;
+
+            file.addEventListener("contextmenu", function(e) {
+                document.getElementById('custom-menu').style.display = 'block';
+                document.getElementById('custom-menu').style.left = e.pageX + 'px';
+                document.getElementById('custom-menu').style.top = e.pageY + 'px';
+                console.log(this.innerHTML.split('<td>')[1].split('</td>')[0]);
+                e.preventDefault();
+            });
+
             files.getElementsByTagName('tbody')[0].appendChild(file);
         }
     }
@@ -202,6 +219,11 @@ function create_file_view(data) {
 
     document.getElementById("files").innerHTML = '';
     document.getElementById("files").appendChild(files);
+
+    // Close contextmenu
+    document.getElementsByTagName('body')[0].addEventListener('click', function () {
+        document.getElementById('custom-menu').style.display = 'none';
+    });
 }
 
 function create_error_view(text) {
@@ -223,19 +245,19 @@ function show_file_view(data, type) {
     if (type.indexOf("application") >= 0) {
         modal_content.innerHTML = ``;
     } else if (type.indexOf("audio") >= 0) {
-        httpGetAsync('http://localhost:8080' + data + '?format=base64', null, show_audio_data);
+        httpGetAsync(base_url + data + '?format=base64', null, show_audio_data);
     } else if (type.indexOf("drawing") >= 0) {
         modal_content.innerHTML = ``;
     } else if (type.indexOf("image") >= 0) {
-        httpGetAsync('http://localhost:8080' + data + '?format=base64', null, show_image_data);
+        httpGetAsync(base_url + data + '?format=base64', null, show_image_data);
     } else if (type.indexOf("message") >= 0) {
         modal_content.innerHTML = ``;
     } else if (type.indexOf("multipart") >= 0) {
         modal_content.innerHTML = ``;
     } else if (type.indexOf("text") >= 0) {
-        httpGetAsync('http://localhost:8080' + data, null, show_text_data);
+        httpGetAsync(base_url + data, null, show_text_data);
     } else if (type.indexOf("video") >= 0) {
-        httpGetAsync('http://localhost:8080' + data + '?format=base64', null, show_video_data);
+        httpGetAsync(base_url + data + '?format=base64', null, show_video_data);
     } else if (type.indexOf("workbook") >= 0) {
         modal_content.innerHTML = ``;
     } else if (type.indexOf("x-world") >= 0) {