From d10dff63607c3840e9e6044e305ea3ebe1c41125 Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Thu, 27 May 2021 07:38:08 +0200 Subject: [PATCH] Added and updated webengineering files --- Frontend/favicon.ico | Bin 0 -> 1150 bytes Frontend/index.html | 9 +++++++ Frontend/static/css/components.css | 39 +++++++++++++++++++++++++++++ Frontend/static/css/index.css | 3 ++- Frontend/static/js/index.js | 12 +++++---- Frontend/static/js/views.js | 36 ++++++++++++++++++++------ 6 files changed, 86 insertions(+), 13 deletions(-) create mode 100644 Frontend/favicon.ico diff --git a/Frontend/favicon.ico b/Frontend/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..bf82c7edd39dd912edc708e25674fbefbf3c3ef6 GIT binary patch literal 1150 zcmchWJ#NB45QPU32@#5z6ci)`N=`uTfE1-f{2YKTJrr<+90RC103G5OM1nFA4Jpm{ zz*v@rjS&c2pFKPK-g-T|YnI}69OGHB?t@vu%&I_&%puRqjK1gGfqnZ%57%`K9O%RN z3_VZlf1S4cAMgiL7)7AIUywHJ?~wa}66E2{i`7=FoMLIDjq`ugzxK4!D^@P4zlOF6 z4G+c2-OGRN{KNHoW$s$vr1Rg`7QNQ>5niAO@34Y4#MM9O|3s@bSc2AJ19eF1Z=pS2 z{{%zG!lnK#oK(Bk=}q`_0`!pb$-6ctB(GhZxv|BSvsCM O{XQAAPf*r>o9zHLC53eW literal 0 HcmV?d00001 diff --git a/Frontend/index.html b/Frontend/index.html index 9055375..5c6929b 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -11,6 +11,9 @@ + + + @@ -24,6 +27,11 @@
+
+ + +
+ +
diff --git a/Frontend/static/css/components.css b/Frontend/static/css/components.css index 9efc636..e0f61f4 100644 --- a/Frontend/static/css/components.css +++ b/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; diff --git a/Frontend/static/css/index.css b/Frontend/static/css/index.css index 2ed31df..96b04e9 100644 --- a/Frontend/static/css/index.css +++ b/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; } diff --git a/Frontend/static/js/index.js b/Frontend/static/js/index.js index 513695c..203bde3 100644 --- a/Frontend/static/js/index.js +++ b/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); } diff --git a/Frontend/static/js/views.js b/Frontend/static/js/views.js index e6cd93a..28860ea 100644 --- a/Frontend/static/js/views.js +++ b/Frontend/static/js/views.js @@ -16,7 +16,8 @@ function create_login_view() {
`; - 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 = `
+
`; + + 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 = `${icon} ${data[i]['Name']} ${data[i]['Type']}`; + + 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('')[1].split('')[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) {