bagas/filekeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add modal component

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-09-12 20:13:03 +07:00
parent 2f56cd193d
commit db8cd82de9
3 changed files with 79 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
public/main.js
View File

@ -145,6 +145,7 @@ async function uploadChunks(name, size, chunks, chunkArray, FileID) {
let progress2 = document.getElementById(`progress-${name}-2`); let progress2 = document.getElementById(`progress-${name}-2`);
let progress3 = document.getElementById(`progress-${name}-3`); let progress3 = document.getElementById(`progress-${name}-3`);
let progress4 = document.getElementById(`progress-${name}-4`); let progress4 = document.getElementById(`progress-${name}-4`);
let isFailed = false
for (let index = 0; index < chunks.length; index++) { for (let index = 0; index < chunks.length; index++) {
const percentComplete = Math.round((index + 1) / chunks.length * 100); const percentComplete = Math.round((index + 1) / chunks.length * 100);
const chunk = chunks[index]; const chunk = chunks[index];
@ -159,10 +160,17 @@ async function uploadChunks(name, size, chunks, chunkArray, FileID) {
progress2.style.width = `${percentComplete}%`; progress2.style.width = `${percentComplete}%`;
const startTime = performance.now(); const startTime = performance.now();
try {
await fetch(`/upload/${FileID}`, { await fetch(`/upload/${FileID}`, {
method: 'POST', method: 'POST',
body: formData 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 endTime = performance.now();
const totalTime = (endTime - startTime) / 1000; const totalTime = (endTime - startTime) / 1000;
@ -178,9 +186,20 @@ async function uploadChunks(name, size, chunks, chunkArray, FileID) {
byteUploaded += chunk.size byteUploaded += chunk.size
} }
} }
console.log(chunks) if (isFailed) {
console.log(chunkArray) progress3.innerText = `Upload Failed`;
progress4.innerText = `There was an issue uploading the file. Please try again.`;
} else {
progress3.innerText = `Done`; progress3.innerText = `Done`;
progress4.innerText = `File Uploaded 100% - ${convertFileSize(byteUploaded)} of ${ convertFileSize(size)}`; 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;
}

48
view/client/layout/base.templ
View File

@ -17,8 +17,12 @@ templ Base(title string){
</head> </head>
<body> <body>
<div id="content"> <div id="content">
@modal()
<div id="main-content">
{ children... } { children... }
</div> </div>
</div>
@modalScript()
</body> </body>
</html> </html>
} }
@ -39,8 +43,11 @@ templ BaseAuth(title string){
</head> </head>
<body> <body>
<div id="content"> <div id="content">
@modal()
<div id="main-content">
{ children... } { children... }
</div> </div>
</div>
<script type="text/javascript"> <script type="text/javascript">
function addScript() { function addScript() {
if (!window.scriptAdded) { if (!window.scriptAdded) {
@ -53,10 +60,47 @@ templ BaseAuth(title string){
} }
addScript() addScript()
</script> </script>
@modalScript()
</body> </body>
</html> </html>
} }
templ modal() {
<div id="modalContainer" class="fixed inset-0 z-50 flex items-center justify-center hidden p-4 sm:p-6 md:p-8">
<div class="fixed inset-0 bg-black opacity-50 transition-opacity duration-300"></div>
<div id="modal" class="bg-white rounded-lg shadow-xl w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl p-4 sm:p-6 md:p-8 relative z-10 overflow-y-auto max-h-[90vh]">
<h2 class="text-xl sm:text-2xl font-bold mb-4">Modal Title</h2>
<div class="prose prose-sm sm:prose lg:prose-lg">
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<button id="closeModal" class="mt-6 bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-200 ease-in-out">
Close
</button>
</div>
</div>
}
templ modalScript(){
<script type="text/javascript">
window.modalContainer = document.getElementById('modalContainer');
window.closeModalBtn = document.getElementById('closeModal');
window.content = document.getElementById('content');
function toggleModal() {
window.modalContainer.classList.contains('hidden')
? modalContainer.classList.remove('hidden')
: modalContainer.classList.add('hidden');
}
window.closeModalBtn.addEventListener('click', toggleModal);
window.modalContainer.addEventListener('click', function(event) {
if (event.target === modalContainer) {
toggleModal();
}
})
</script>
}
templ Navbar(user types.User) { templ Navbar(user types.User) {
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4"> <header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
@ -69,7 +113,7 @@ templ Navbar(user types.User) {
if user.Authenticated { if user.Authenticated {
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div <div
class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full"> class="inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
width="256" height="256" viewBox="0 0 256 256" xml:space="preserve"> width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<defs> <defs>
@ -119,7 +163,7 @@ templ Navbar(user types.User) {
} }
templ Footer() { templ Footer() {
<footer class="bg-white p-6 md:p-8 w-full relative bottom-0 border-t border-gray-200 w-full py-8"> <footer class="bg-white p-6 md:p-8 w-full bottom-0 border-t border-gray-200 w-full py-8">
<div class="container mx-auto flex flex-col items-center justify-between gap-6 md:flex-row"> <div class="container mx-auto flex flex-col items-center justify-between gap-6 md:flex-row">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<img src="/public/brand.svg" width="48" height="48" alt="Filekeeper Logo" /> <img src="/public/brand.svg" width="48" height="48" alt="Filekeeper Logo" />

9
view/client/user/user.templ
View File

@ -43,7 +43,7 @@ templ content(message types.Message, title string, user types.User, allowance *t
</label> </label>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div <div
class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full"> class="inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full">
<span class="font-medium text-gray-600">JL</span> <span class="font-medium text-gray-600">JL</span>
</div> </div>
<button <button
@ -82,7 +82,7 @@ templ content(message types.Message, title string, user types.User, allowance *t
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<div class="bg-white rounded-lg shadow-md overflow-hidden"> <div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative w-full overflow-auto"> <div class="w-full overflow-auto">
<table class="w-full caption-bottom text-sm"> <table class="w-full caption-bottom text-sm">
<thead class="[&amp;_tr]:border-b"> <thead class="[&amp;_tr]:border-b">
<tr <tr
@ -297,10 +297,9 @@ templ content(message types.Message, title string, user types.User, allowance *t
} }
}); });
let allowanceProgress = document.getElementById(`allowanceProgress`); window.allowanceProgress = document.getElementById(`allowanceProgress`);
const AllowanceUsedPercent = JSON.parse(document.getElementById('AllowanceUsedPercent').textContent); window.AllowanceUsedPercent = JSON.parse(document.getElementById('AllowanceUsedPercent').textContent);
allowanceProgress.style.width = `${AllowanceUsedPercent}%`; allowanceProgress.style.width = `${AllowanceUsedPercent}%`;
console.log(AllowanceUsedPercent)
</script> </script>
<script src="/public/validatePassword.js" /> <script src="/public/validatePassword.js" />
@layout.Footer() @layout.Footer()