mirror of https://github.com/Facinorous-420/dick
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
8.8 KiB
135 lines
8.8 KiB
<!--This is where we will place the type filters when we are ready for that-->
|
|
|
|
<div class="flex-1 basis-full space-y-3 md:basis-2/3 lg:basis-3/4">
|
|
|
|
<!--This is where we will place the upper menu when we are ready for that-->
|
|
|
|
<!-- Files -->
|
|
<div class="flex flex-row flex-wrap justify-center lg:justify-start gap-3 pt-3 lg:gap-4">
|
|
<% if (usersDataObj.data.length == 0) { %>
|
|
<p class="text-orange-700 dark:text-orange-400 pl-5">Looks like you have no files!<br/>
|
|
Upload some to see some action here.</p>
|
|
<% } else { %>
|
|
<% usersDataObj.data.forEach(item => { %>
|
|
|
|
<div class="bg-tertiary h-auto w-36 cursor-pointer rounded-md p-3 transition duration-300 ease-in-out hover:scale-105 hover:shadow-xl sm:w-44 md:w-[139px] lg:w-40">
|
|
<!-- File Header -->
|
|
<div class="flex flex-row flex-nowrap items-center justify-between">
|
|
<!--We will add this and style it when we add multi-delete, for now eggplant
|
|
<input class="accent-blue-700 rounded-md h-3 w-4 md:h-4 md:w-5 lg:h-4 lg:w-4" type="checkbox" />
|
|
-->
|
|
<span>🍆</span>
|
|
|
|
<div class="relative">
|
|
<!-- File Dropdown Button -->
|
|
<button class="dropdownFileBtn relative text-gray-400">
|
|
<svg class="relative h-3 w-3 md:h-4 md:w-4 lg:h-4 lg:w-4" xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<circle class="relative" cx="12" cy="12" r="1"></circle>
|
|
<circle class="relative" cx="12" cy="5" r="1"></circle>
|
|
<circle class="relative" cx="12" cy="19" r="1"></circle>
|
|
</svg>
|
|
</button>
|
|
<!-- End File Dropdown Button -->
|
|
|
|
<!-- File Dropdown -->
|
|
<div class="dropdownFile duration-250 bg-tertiary invisible absolute top-6 right-0 z-10 h-auto w-36 translate-y-6 rounded-lg opacity-0 shadow-lg transition ease-linear">
|
|
<!-- File Dropdown Menu-->
|
|
<div class="grid grid-cols-1 px-3 py-2 space-y-2 shadow-xl">
|
|
<button onClick="copyLink<%= `('${item.id}')` %>" data-tooltip-target=<%= `${item.id}-copy` %> data-tooltip-trigger="click" class="tooltip dropdown-item w-full rounded-md p-2 text-color-primary hover:bg-tertiary-hover">
|
|
<i data-lucide="link" class="w-4 h-4 mr-2 inline"></i>
|
|
Copy Link
|
|
</button>
|
|
<div id=<%= `${item.id}-copy` %> role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
|
|
Link copied to clipboard!
|
|
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
</div>
|
|
|
|
<button onClick="deleteItem<%= `('${item.id}', '${item.deleteId}')` %>" data-tooltip-target=<%= `${item.id}-delete` %> data-tooltip-trigger="click"
|
|
class="tooltip dropdown-item w-full rounded-md p-2 text-color-primary hover:bg-tertiary-hover">
|
|
<i data-lucide="trash" class="w-4 h-4 mr-2 inline"></i>
|
|
Delete
|
|
</button>
|
|
<div id=<%= `${item.id}-delete` %> role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
|
|
Item is being deleted, page will refresh when finished.
|
|
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
</div>
|
|
</div>
|
|
<!-- End File Dropdown Menu-->
|
|
</div>
|
|
<!-- File Dropdown -->
|
|
</div>
|
|
</div>
|
|
<!-- End File Header -->
|
|
|
|
<div class="space-y-3">
|
|
|
|
<% if (item.type == 'image') { %>
|
|
<a target="_blank" href=<%= assSecure ? `https://${assDomain}/${item.id}` : `http://${assDomain}/${item.id}` %>>
|
|
<div class="mt-2 flex flex-wrap items-center justify-center">
|
|
<img class="h-20 w-auto rounded-md object-cover object-center md:h-24 lg:h-24"
|
|
src=<%= assSecure ? `https://${assDomain}/${item.id}/direct` : `http://${assDomain}/${item.id}/direct`%> alt=<%= item.originalName %> />
|
|
</div>
|
|
</a>
|
|
<% } else { %>
|
|
<a target="_blank" href=<%= assSecure ? `https://${assDomain}/${item.id}` : `http://${assDomain}/${item.id}` %>>
|
|
<div class="relatiive mt-2 flex flex-wrap items-center justify-center">
|
|
<svg class="relative h-20 w-auto fill-gray-400 md:h-24 lg:h-24"
|
|
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"> </path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
</svg>
|
|
<div class="absolute text-sm font-medium text-color-primary">
|
|
<%= item.fileExtension %>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<% } %>
|
|
|
|
<div class="text-center">
|
|
<a target="_blank" href=<%= assSecure ? `https://${assDomain}/${item.id}` : `http://${assDomain}/${item.id}` %> class="text-base font-medium text-color-primary md:text-lg lg:text-lg">
|
|
<p class="truncate hover:overflow-visible"><%= item.originalName %></p>
|
|
</a>
|
|
<div class="text-xs text-gray-400 md:text-sm lg:text-sm">
|
|
<%= item.timestamp.toISOString().split('T')[0] %>
|
|
</div>
|
|
<div class="text-xs text-gray-400">
|
|
<% const k = 1024 %>
|
|
<% const dm = 2 %>
|
|
<% const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] %>
|
|
<% const i = Math.floor(Math.log(item.size) / Math.log(k)) %>
|
|
<% const convertedSize = parseFloat((item.size / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; item.size %>
|
|
<%= convertedSize %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<% }) %>
|
|
<% } %>
|
|
</div>
|
|
<!-- End Files -->
|
|
</div>
|
|
|
|
<!--This is where we will place the pagination when we are ready for that-->
|
|
|
|
<iframe src="" id="HiddenFrame" class="hidden w-0 h-0"></iframe>
|
|
<script>
|
|
function copyLink(itemId) {
|
|
const itemLink = <%= assSecure %> ? `https://<%= assDomain %>/${itemId}` : `http://<%= assDomain %>/${itemId}`
|
|
navigator.clipboard.writeText(itemLink)
|
|
}
|
|
|
|
function deleteItem(itemId, deleteId) {
|
|
const itemDeleteLink = <%= assSecure %> ? `https://<%= assDomain %>/${itemId}/delete/${deleteId}` : `http://<%= assDomain %>/${itemId}/delete/${deleteId}`
|
|
document.getElementById("HiddenFrame").src=itemDeleteLink
|
|
// After setting our invisible iframe to the delete url, we make sure to give ass time to deletr the file then reset iframe and reload page
|
|
setTimeout(function() {
|
|
document.getElementById("HiddenFrame").src=''
|
|
document.location.reload()
|
|
}, 250);
|
|
|
|
}
|
|
</script> |