package fileView import ( "github.com/fossyy/filekeeper/view/client/layout" "github.com/fossyy/filekeeper/types" "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 { if !file.Done { } else { } }
File Name File Size Downloads Status Action
@FileIcon(file.Type)
{ file.Name }
Corrupted
@FileIcon(file.Type)
{ file.Name }
{ file.Size }
{ file.Downloaded }
if file.IsPrivate {
Private
} else {
Public
}
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 { if !file.Done { } else { } }
File Name File Size Downloads Status Action
@FileIcon(file.Type)
{ file.Name }
Corrupted
@FileIcon(file.Type)
{ file.Name }
{ file.Size }
{ file.Downloaded }
if file.IsPrivate {
Private
} else {
Public
}
} 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); } templ Main(title string, files []types.FileData, user types.User, allowance *types.Allowance) { @component(title, files, user, allowance) }