From 276dc5b5b0d412ff6538007d989f810335fab069 Mon Sep 17 00:00:00 2001 From: Nikola-Mircic Date: Wed, 27 Apr 2022 19:59:23 +0200 Subject: [PATCH 1/2] Send to server btn --- client/assets/css/main.css | 21 ++++++--------------- client/assets/css/sent.css | 19 ++++++++++++++++++- client/assets/js/sent.js | 4 ++++ client/sent.html | 8 +++++++- 4 files changed, 35 insertions(+), 17 deletions(-) diff --git a/client/assets/css/main.css b/client/assets/css/main.css index 2651bbe..52e56b8 100644 --- a/client/assets/css/main.css +++ b/client/assets/css/main.css @@ -12,9 +12,6 @@ body{ box-sizing: border-box; } -/*input[type="button"]:hover { - background-color: rgb(150,170,205); -}*/ #header { -webkit-appearance: none; @@ -156,9 +153,12 @@ button:hover { font-size: 1.5rem; } -.nav li button:hover{ - margin-top: -10px; - height: 50px; +button:hover{ + /*margin-top: -10px; + height: 50px;*/ + transform: scale(1.05, 1.1); + transition-duration: 0.2s; + border-width: 2px 1px 2px 1px; border-style: solid; border-color: rgba(16, 14, 54, 0.9); @@ -233,15 +233,6 @@ button:hover { text-align: center; } -.profileField button.button, input[type="button"], input[type="submit"].formFileInput { - transition-duration: 1s; - cursor: pointer; -} - -.profileField button.button:hover, input[type="button"]:hover, input[type="submit"]:hover { - background-color: rgb(150,170,205); -} - i{ transform: scale(0.8, 0.8); } \ No newline at end of file diff --git a/client/assets/css/sent.css b/client/assets/css/sent.css index 7834dfd..40f11da 100644 --- a/client/assets/css/sent.css +++ b/client/assets/css/sent.css @@ -4,7 +4,7 @@ width: 90%; min-height: 30px; padding: 2px; - margin: 20px auto; + margin: 10px auto; background-color: rgba(255, 255, 255, 0.438); } @@ -22,4 +22,21 @@ background-color: rgb(15, 53, 124); padding-top: 0.5em; padding-left: 1em; +} + +.option{ + display: block; + width: 90%; + margin: 20px auto auto auto; + font-size: 1.5rem; + text-align: left; +} + +#srvr-btn{ + display: block; + width: 50%; + height: 1.5em; + font-size: 2em; + margin-top: 10px; + margin-left: 5%; } \ No newline at end of file diff --git a/client/assets/js/sent.js b/client/assets/js/sent.js index 87c5452..98cb213 100644 --- a/client/assets/js/sent.js +++ b/client/assets/js/sent.js @@ -30,6 +30,10 @@ var onUsersUpdate=()=>{ var head = $("head"); var link = $(""); head.append(link); + + //Update server address on SEND page + $("#srvr-btn").html(`${window.location.host}`); + onUsersUpdate(); updateUser(window.sessionStorage.getItem("username")); })(); \ No newline at end of file diff --git a/client/sent.html b/client/sent.html index 22e6793..758e9f1 100644 --- a/client/sent.html +++ b/client/sent.html @@ -40,9 +40,15 @@

    • + +

    Send to the server:

    + + + +

    or
    Send to an user:

    - +
    From 08673ed7fcd708224ecc9bb2791e8df6618eac83 Mon Sep 17 00:00:00 2001 From: Nikola-Mircic Date: Sat, 30 Apr 2022 23:44:47 +0200 Subject: [PATCH 2/2] Progress bar, page loading update --- client/assets/css/main.css | 55 +++++++++++++++++- client/assets/css/sent.css | 46 +++++++++++++-- client/assets/js/main.js | 105 ++++++++++++++++------------------ client/assets/js/sent.js | 12 +++- client/assets/js/workspace.js | 12 +++- client/history.html | 12 +++- client/index.html | 9 +++ client/sent.html | 27 ++++++--- 8 files changed, 201 insertions(+), 77 deletions(-) diff --git a/client/assets/css/main.css b/client/assets/css/main.css index 52e56b8..216eb24 100644 --- a/client/assets/css/main.css +++ b/client/assets/css/main.css @@ -235,4 +235,57 @@ button:hover{ i{ transform: scale(0.8, 0.8); -} \ No newline at end of file +} + +.progress-container { + display: block; + position: relative; + width: 80%; + min-width: 400px; + height: 4rem; + + margin: 15px auto; + padding: 0.5rem; + + border-radius: 5px; + + box-sizing: border-box; + background-color: rgba(255, 255, 255, 0.438); +} + +.progress-container .txt { + position: absolute; +} + +.progress { + width: 100%; + height: 10px; + + border-radius: 10px; + background-color: #eee; + border: 1px solid #0000bb; + box-sizing: border-box; + + margin-top: 2rem; +} + +.progress-line { + width: 50%; + height: 100%; + border-radius: 10px; + background-color: #0000bb; + border: 1px solid #0000bb; + box-sizing: border-box; +} + +.status { + position: relative; + margin-top: 0; + float: right; + color: #0000bb; +} + +.no-transfer { + margin-top: 1.5rem; + color: #0000bb; +} diff --git a/client/assets/css/sent.css b/client/assets/css/sent.css index 40f11da..4228daa 100644 --- a/client/assets/css/sent.css +++ b/client/assets/css/sent.css @@ -26,17 +26,53 @@ .option{ display: block; + position: relative; width: 90%; margin: 20px auto auto auto; font-size: 1.5rem; text-align: left; } -#srvr-btn{ - display: block; - width: 50%; - height: 1.5em; +#srvr-btn { + display: inline-block; + width: 43%; + min-width: 400px; + height: 4rem; font-size: 2em; margin-top: 10px; margin-left: 5%; -} \ No newline at end of file +} + +.progress-container { + float: right; + width: 43%; + min-width: 400px; + height: 4rem; + + margin-top: 10px; + margin-right: 5%; + padding: 0.5rem; + + border-radius: 5px; + + box-sizing: border-box; + background-color: rgba(255, 255, 255, 0.438); +} + +@media screen and (max-width: 1000px) { + #srvr-btn { + display: block; + position: relative; + width: 90%; + height: 1.5em; + font-size: 2em; + margin: 10px auto; + } + + .progress-container { + display: block; + position: relative; + width: 90%; + box-sizing: border-box; + } +} diff --git a/client/assets/js/main.js b/client/assets/js/main.js index 8208b97..f290713 100644 --- a/client/assets/js/main.js +++ b/client/assets/js/main.js @@ -71,23 +71,13 @@ var receivedFiles = Object.assign({}, DirectoryStruct); // Directory where rece const chunkSize = 40000; function redirect(path){ - console.log(window.location); fetch(window.location.origin+path).then((data)=>{ data.text().then((page)=>{ - console.log(path); - $("#pageScript").remove(); - $("head").append(getPageSpecificScripts(page)); $("body").html(getBody(page)); }); }); } -function getPageSpecificScripts(page){ - const commnet = ""; - const commentIndex = page.indexOf(commnet)+commnet.length; - return page.substring(commentIndex, page.indexOf("")); -} - function getBody(page){ return page.substring(page.indexOf(""),page.indexOf("")); } @@ -177,23 +167,26 @@ socket.on('removeUser', function(data){ socket.on("start-transfer",function(data){ receivedSize = 0; - console.log(data); packageSize = data.info.size; data.info.files.forEach((file)=>{ - if(receivedFiles[""+file.name]) - console.log("Rewriting file"); receivedFiles[""+file.name] = { data: new Uint8Array(), type: "", fileSize: file.fileSize } - }) + }); + + showProgressBar(); }) socket.on('data',function(data){ - console.log(data); var fileName = data.file.name; + + receivedSize += data.file.data.byteLength; + + updateReceivingBar(); + if(receivedFiles[fileName]){ var concat = new Uint8Array(receivedFiles[fileName].data.byteLength + data.file.data.byteLength); concat.set(new Uint8Array(receivedFiles[fileName].data)); @@ -202,15 +195,12 @@ socket.on('data',function(data){ receivedFiles[fileName].data = concat; if(receivedFiles[fileName].data.byteLength == receivedFiles[fileName].fileSize){ - console.log(`Making new ${fileName} file...`); var newOriginal = new File([receivedFiles[fileName].data], fileName, {type:data.file.type}); var newFile = Object.assign({}, FileStruct); newFile.original = newOriginal newFile.path = data.file.path; insertFile(newFile); - - console.log(newFile); } writeLoadedFiles(workspaceFiles, filesListDiv); @@ -228,7 +218,6 @@ socket.on('data',function(data){ function insertFile(file){ var pathSteps = file.path.split("/"); - console.log(pathSteps); var pathPassed = "/"; var dir = workspaceFiles; @@ -251,10 +240,6 @@ function insertFile(file){ } socket.on('request data',async function(data){ - console.log("=================================="); - console.log('Requested Data'); - console.log('data'); - console.log("=================================="); var fileToSent = null; for(let i=0; i 0){ - $("#users").show(); - }else{ - $("#users").hide(); - } - - $("#users").empty(); - - if(activeUsers.length > 2){ - $("users").css("height", `${(150+(activeUsers.length-2)*60)}px`); - } - - var data = "

    Send to:

    \n"; - activeUsers.forEach(function(val, idx){ - let newButton = `\n`; - data += newButton; - }); - - $("#users").html(data); -}*/ - function extractFileName(fullPath){ if (fullPath) { var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/')); @@ -451,10 +416,38 @@ function extractFileName(fullPath){ } } +function showProgressBar(){ + $("#no-transfer").hide(); + $("#progress").show(); + $("#status").show(); +} + +function updateSendingBar(){ + if($("#progress").css('display') != 'block') return; + + $("#progress-line").width( $("#progress").width() * (sentSize/packageSize) ); + $("#status").html(`${sentSize}/${packageSize}`); +} + +async function updateReceivingBar(){ + if($("#progress").css('display') != 'block') return; + + $("#progress-line").width( $("#progress").width() * (receivedSize/packageSize) ); + $("#status").html(`${receivedSize}/${packageSize}`); +} + +function removeProgressBar(){ + $("#no-transfer").css("display", "block"); + + $("#progress-line").width(0); + $("#progress").css("display", "none"); + + $("#status").html(""); + $("#status").css("display", "none"); +} + function addFileToList(file){ var htmlData = $("#data ol").html(); - console.log(`Adding ${file.name} to the page...`); - console.log(file); let blob = new Blob([file.data], {type: file.type}); let url = window.URL.createObjectURL(blob); diff --git a/client/assets/js/sent.js b/client/assets/js/sent.js index 2bfacb3..e1c0557 100644 --- a/client/assets/js/sent.js +++ b/client/assets/js/sent.js @@ -40,8 +40,16 @@ function sendToServer(){ } (function(){ - var head = $("head"); - var link = $(""); + var head = document.getElementsByTagName("head")[0]; + + document.getElementsByName("css").forEach((node)=>node.remove()); + + var link = document.createElement("link"); + link.setAttribute("rel", "stylesheet"); + link.setAttribute("type", "text/css"); + link.setAttribute("href", "./assets/css/sent.css"); + link.setAttribute("name", "css"); + head.append(link); //Update server address on SEND page diff --git a/client/assets/js/workspace.js b/client/assets/js/workspace.js index 4b0e4ac..a1bb33c 100644 --- a/client/assets/js/workspace.js +++ b/client/assets/js/workspace.js @@ -24,9 +24,17 @@ $(".headerContainer").on('click', ()=>{ }); (function(){ - var head = $("head"); - var link = $(""); + var head = document.getElementsByTagName("head")[0]; + var link = document.createElement("link"); + link.setAttribute("rel", "stylesheet"); + link.setAttribute("type", "text/css"); + link.setAttribute("href", "./assets/css/index.css"); + link.setAttribute("name", "css"); + + document.getElementsByName("css").forEach((node)=>node.remove()); + head.append(link); + updateUser(window.sessionStorage.getItem("username")); })(); diff --git a/client/history.html b/client/history.html index 45b1f32..1f1b9b1 100644 --- a/client/history.html +++ b/client/history.html @@ -60,9 +60,17 @@

    }); (function(){ - var head = $("head"); - var link = $(""); + var head = document.getElementsByTagName("head")[0]; + var link = document.createElement("link"); + link.setAttribute("rel", "stylesheet"); + link.setAttribute("type", "text/css"); + link.setAttribute("href", "./assets/css/history.css"); + link.setAttribute("name", "css"); + + document.getElementsByName("css").forEach((node)=>node.remove()); + head.append(link); + updateUser(window.sessionStorage.getItem("username")); })(); diff --git a/client/index.html b/client/index.html index 4743fdd..4310a4a 100644 --- a/client/index.html +++ b/client/index.html @@ -42,6 +42,15 @@

    • +
    +

    Current data transfer:

    + +

    There is no current transfer

    + +
    +
    diff --git a/client/sent.html b/client/sent.html index 758e9f1..006fc15 100644 --- a/client/sent.html +++ b/client/sent.html @@ -5,16 +5,15 @@ - - - - + + + + - - - +