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(files, user, allowance) } } templ MainContent(files []types.FileData, user types.User, allowance *types.Allowance) { @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 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 deleteButton = document.getElementById('deleteButton'); const modal = document.getElementById('deleteModal'); const modalContent = modal.querySelector('div'); const confirmDelete = document.getElementById('confirmDelete'); const cancelDelete = document.getElementById('cancelDelete'); 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 deleteButton = document.getElementById('deleteButton'); const modal = document.getElementById('deleteModal'); const modalContent = modal.querySelector('div'); const confirmDelete = document.getElementById('confirmDelete'); const cancelDelete = document.getElementById('cancelDelete'); const fileNameToDelete = document.getElementById('fileNameToDelete'); modal.classList.add('opacity-0'); modalContent.classList.add('-translate-y-full', 'scale-95', 'opacity-0'); setTimeout(() => { modal.classList.add('hidden'); }, 300); } templ Main(title string, files []types.FileData, user types.User, allowance *types.Allowance) { @component(title, files, user, allowance) }