From db8cd82de98034358395495a70bf06b0d076257e Mon Sep 17 00:00:00 2001 From: Bagas Aulia Rezki Date: Thu, 12 Sep 2024 20:13:03 +0700 Subject: [PATCH] Add modal component --- public/main.js | 35 +++++++++++++++++------ view/client/layout/base.templ | 52 ++++++++++++++++++++++++++++++++--- view/client/user/user.templ | 9 +++--- 3 files changed, 79 insertions(+), 17 deletions(-) diff --git a/public/main.js b/public/main.js index aa90084..8495404 100644 --- a/public/main.js +++ b/public/main.js @@ -145,6 +145,7 @@ async function uploadChunks(name, size, chunks, chunkArray, FileID) { let progress2 = document.getElementById(`progress-${name}-2`); let progress3 = document.getElementById(`progress-${name}-3`); let progress4 = document.getElementById(`progress-${name}-4`); + let isFailed = false for (let index = 0; index < chunks.length; index++) { const percentComplete = Math.round((index + 1) / chunks.length * 100); const chunk = chunks[index]; @@ -159,10 +160,17 @@ async function uploadChunks(name, size, chunks, chunkArray, FileID) { progress2.style.width = `${percentComplete}%`; const startTime = performance.now(); - await fetch(`/upload/${FileID}`, { - method: 'POST', - body: formData - }); + try { + await fetch(`/upload/${FileID}`, { + method: 'POST', + body: formData + }); + } catch (error) { + ChangeModal("Error", "There was an issue with your upload. Please try again later or contact support if the problem persists.") + toggleModal(); + isFailed = true + break + } const endTime = performance.now(); const totalTime = (endTime - startTime) / 1000; @@ -178,9 +186,20 @@ async function uploadChunks(name, size, chunks, chunkArray, FileID) { byteUploaded += chunk.size } } - console.log(chunks) - console.log(chunkArray) + if (isFailed) { + progress3.innerText = `Upload Failed`; + progress4.innerText = `There was an issue uploading the file. Please try again.`; + } else { + progress3.innerText = `Done`; + progress4.innerText = `File Uploaded 100% - ${convertFileSize(byteUploaded)} of ${ convertFileSize(size)}`; + } +} - progress3.innerText = `Done`; - progress4.innerText = `File Uploaded 100% - ${convertFileSize(byteUploaded)} of ${ convertFileSize(size)}`; +function ChangeModal(title, content) { + const modalContainer = document.getElementById('modalContainer'); + const modalTitle = modalContainer.querySelector('#modal h2'); + const modalContent = modalContainer.querySelector('.prose'); + + modalTitle.textContent = title; + modalContent.innerHTML = content; } \ No newline at end of file diff --git a/view/client/layout/base.templ b/view/client/layout/base.templ index 871d10a..db9e140 100644 --- a/view/client/layout/base.templ +++ b/view/client/layout/base.templ @@ -17,8 +17,12 @@ templ Base(title string){
- { children... } + @modal() +
+ { children... } +
+ @modalScript() } @@ -39,7 +43,10 @@ templ BaseAuth(title string){
- { children... } + @modal() +
+ { children... } +
+ @modalScript() } +templ modal() { + +} + +templ modalScript(){ + +} + + templ Navbar(user types.User) {
@@ -69,7 +113,7 @@ templ Navbar(user types.User) { if user.Authenticated {
+ class="inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full"> @@ -119,7 +163,7 @@ templ Navbar(user types.User) { } templ Footer() { -
+
Filekeeper Logo diff --git a/view/client/user/user.templ b/view/client/user/user.templ index b5cd113..a5af25d 100644 --- a/view/client/user/user.templ +++ b/view/client/user/user.templ @@ -43,7 +43,7 @@ templ content(message types.Message, title string, user types.User, allowance *t
+ class="inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full"> JL