package fileView import ( "github.com/fossyy/filekeeper/types" "github.com/fossyy/filekeeper/view/client/layout" "strconv" ) templ component(title string, files []types.FileData, user types.User, allowance *types.Allowance) { @layout.BaseAuth(title) { @MainContent(title, files, user, allowance) } } templ MainContent(title string, files []types.FileData, user types.User, allowance *types.Allowance) { { title } @layout.Navbar(user)
Back
for _, file := range files { @JustFile(file) }
File Name File Size Downloads Status Action
File Information Total Files: { strconv.Itoa(len(files)) } Total Usage: { allowance.AllowanceUsedByte } Total Allowance: { allowance.AllowanceByte }
} script toggleDropDown() { const dropdowns = document.querySelectorAll('.dropdown'); dropdowns.forEach(dropdown => { const button = dropdown.querySelector('.dropdown-button'); const menu = dropdown.querySelector('.dropdown-menu'); if (button.contains(event.target)) { dropdowns.forEach(otherDropdown => { if (otherDropdown !== dropdown) { otherDropdown.querySelector('.dropdown-menu').classList.add('hidden'); } }); menu.classList.toggle('hidden'); } else if (!menu.contains(event.target)) { menu.classList.add('hidden'); } }); } templ FileTable(files []types.FileData) { for _, file := range files { @JustFile(file) }
File Name File Size Downloads Status Action
} templ JustFile(file types.FileData) { if !file.Done { @FileIcon(file.Type)
{ file.Name }
Corrupted
} else { @FileIcon(file.Type)
{ file.Name }
} { file.Size }
{ file.Downloaded }
if file.IsPrivate {
Private
} else {
Public
}
} templ FileIcon(fileType string) { if fileType == "jpg" || fileType == "jpeg" || fileType == "png" || fileType == "gif" || fileType == "bmp" || fileType == "tiff" { image-picture Created with Sketch Beta. } else if fileType == "pdf" || fileType == "doc" || fileType == "docx" || fileType == "txt" || fileType == "odt" || fileType == "xls" || fileType == "xlsx" || fileType == "ppt" || fileType == "pptx" { } else if fileType == "zip" || fileType == "rar" || fileType == "tar" || fileType == "gz" || fileType == "7z" || fileType == "bz2" { } else if fileType == "exe" || fileType == "bin" || fileType == "sh" || fileType == "bat" || fileType == "cmd" || fileType == "msi" { } else if fileType == "apk" { } else { } } script showDeletionModal(name string, id string) { const modal = document.getElementById('deleteModal'); const modalContent = modal.querySelector('div'); const confirmDelete = document.getElementById('confirmDelete'); const fileNameToDelete = document.getElementById('fileNameToDelete'); confirmDelete.setAttribute("hx-delete", "/file/" + id + "?consent=true"); confirmDelete.setAttribute("hx-target", "#file-" + id); htmx.process(confirmDelete); modal.classList.remove('hidden'); setTimeout(() => { modal.classList.remove('opacity-0'); modalContent.classList.remove('-translate-y-full', 'scale-95', 'opacity-0'); }, 50); fileNameToDelete.textContent = name; } script hideDeletionModal() { const modal = document.getElementById('deleteModal'); const modalContent = modal.querySelector('div'); modal.classList.add('opacity-0'); modalContent.classList.add('-translate-y-full', 'scale-95', 'opacity-0'); setTimeout(() => { modal.classList.add('hidden'); }, 300); } script showRenameModal(name string, id string) { const rename = document.getElementById('renameModal'); const renameModalContent = rename.querySelector('div'); const fileName = document.getElementById("newFileName"); const confirmRenameFile = document.getElementById("confirmRenameFile"); confirmRenameFile.setAttribute("hx-target", "#file-" + id); htmx.process(confirmRenameFile); fileName.addEventListener("change", function (event) { event.preventDefault(); confirmRenameFile.setAttribute("hx-patch", "/file/" + id + "?name=" + event.target.value); htmx.process(confirmRenameFile); }); rename.classList.remove('hidden'); setTimeout(() => { rename.classList.remove('opacity-0'); renameModalContent.classList.remove('-translate-y-full', 'scale-95', 'opacity-0'); }, 50); fileName.value = name } script hideRenameModal() { const rename = document.getElementById('renameModal'); const renameModalContent = rename.querySelector('div'); rename.classList.add('opacity-0'); renameModalContent.classList.add('-translate-y-full', 'scale-95', 'opacity-0'); setTimeout(() => { rename.classList.add('hidden'); }, 300); } script showShareModal(isPrivate bool, fileID string) { const shareModal = document.getElementById('shareModal'); const shareModalContent = shareModal.querySelector('div'); const publicToggle = document.getElementById('public-toggle'); const lockDiv = document.getElementById('lockDiv'); const privateWarning = document.getElementById('privateWarning'); const shareLink = document.getElementById('shareLink'); const copyButton = document.getElementById('copyButton'); if (!isPrivate) { lockDiv.classList.add('hidden'); } else { lockDiv.classList.remove('hidden'); } shareLink.value = window.location + "/" + fileID const twitterLink = document.getElementById('twitterShare'); const facebookLink = document.getElementById('facebookShare'); const linkedinLink = document.getElementById('linkedInShare'); const twitterShareURL = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareLink.value)}`; twitterLink.setAttribute('href', twitterShareURL); const facebookShareURL = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareLink.value)}`; facebookLink.setAttribute('href', facebookShareURL); const linkedinShareURL = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareLink.value)}`; linkedinLink.setAttribute('href', linkedinShareURL); copyButton.addEventListener('click', function() { shareLink.select(); document.execCommand('copy'); this.innerHTML = ''; setTimeout(() => { this.innerHTML = ''; }, 2000); }); shareModal.classList.remove('hidden'); setTimeout(() => { shareModal.classList.remove('opacity-0'); shareModalContent.classList.remove('-translate-y-full', 'scale-95', 'opacity-0'); }, 50); } script hideShareModal() { const shareModal = document.getElementById('shareModal'); const shareModalContent = shareModal.querySelector('div'); shareModal.classList.add('opacity-0'); shareModalContent.classList.add('-translate-y-full', 'scale-95', 'opacity-0'); setTimeout(() => { shareModal.classList.add('hidden'); }, 300); } templ Main(title string, files []types.FileData, user types.User, allowance *types.Allowance) { @component(title, files, user, allowance) }