diff --git a/package.json b/package.json
index c0de07c..1f73087 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "dick",
- "version": "1.0.0",
+ "version": "1.0.1",
"description": "A frontend for ASS",
"main": "./dist/dashboard.js",
"repository": {
diff --git a/src/Pager.ts b/src/Pager.ts
index 2e9f1db..8dd9fb0 100644
--- a/src/Pager.ts
+++ b/src/Pager.ts
@@ -2,7 +2,7 @@ import { Response } from "express"
import { parseAuthFile, parseDataFile } from "./utils/assJSONStructure"
import { RenderOptions } from "./typings/Pager"
import { ASS_DOMAIN, ASS_SECURE, STAFF_IDS } from "./constants"
-import { convertTimestamp, formatSize } from "./utils/utils"
+import { convertTimestamp, convertToPaginatedArray, formatSize } from "./utils/utils"
import { ASSUser, ASSItem } from "./typings/ASSTypes"
import { IExtendedRequest } from "./typings/express-ext"
@@ -87,7 +87,8 @@ export class Pager {
// I feel like this could be done better, but I created an object filled with useful variables for the user data to be rendered on the pages
const usersDataObj = {
- data: usersData,
+ data: convertToPaginatedArray(usersData,50),
+ totalFiles: usersData.length,
allImages: usersData.filter(item=> item.type.includes('image')),
allVideos: usersData.filter(item=> item.type.includes('video')),
allAudio: usersData.filter(item=> item.type.includes('audio')),
@@ -105,7 +106,7 @@ export class Pager {
if (options.params.userID) {
const targetData = data.filter((item: ASSItem ) => (item: { owner: string }) => item.owner == options.params.userID)
targetDataObj = {
- data: targetData,
+ data: convertToPaginatedArray(targetData,50),
allImages: targetData.filter(item=> item.type.includes('image')),
allVideos: targetData.filter(item=> item.type.includes('video')),
allAudio: targetData.filter(item=> item.type.includes('audio')),
@@ -118,7 +119,7 @@ export class Pager {
}
}
*/
-
+
const baseData = {
assDomain: ASS_DOMAIN,
assSecure: ASS_SECURE,
diff --git a/src/dashboard.ts b/src/dashboard.ts
index 9b9cf32..cef7c45 100644
--- a/src/dashboard.ts
+++ b/src/dashboard.ts
@@ -18,7 +18,7 @@ import { PORT } from "./constants"
const app = express()
// Setting up express
-app.set("port", process.env.PORT || 3000)
+app.set("port", PORT || 3000)
app.set("trust proxy", true)
app.set("views", path.join(__dirname, "../views"))
app.set("view engine", "ejs")
diff --git a/src/public/css/tailwind.css b/src/public/css/tailwind.css
index a6dbb8b..1a9176d 100644
--- a/src/public/css/tailwind.css
+++ b/src/public/css/tailwind.css
@@ -43,4 +43,10 @@
height: 800px;
width: 800px;
}
+ .name-tooltip {
+ @apply invisible;
+ }
+ .has-name-tooltip:hover .name-tooltip {
+ @apply visible z-50;
+ }
}
diff --git a/src/public/js/components.js b/src/public/js/components.js
index 8a31835..4d86bf9 100644
--- a/src/public/js/components.js
+++ b/src/public/js/components.js
@@ -1,205 +1,196 @@
// DOM Ready Function
function ready(fn) {
- if (document.readyState != 'loading') {
- fn();
- } else {
- document.addEventListener('DOMContentLoaded', fn);
+ if (document.readyState != 'loading') {
+ fn()
+ } else {
+ document.addEventListener('DOMContentLoaded', fn)
+ }
}
-}
-
-// DOM Ready Called
-ready(function () {
-
- const openFile = document.getElementById('openFile');
- const showFile = document.getElementById('showFile');
-
- const traMove = document.getElementsByClassName('traMove');
- const tabsProfile = document.getElementsByClassName('tabsProfile');
- const tabsProfileContent = document.getElementsByClassName('tabsProfileContent');
- const dropdownNavBtn = document.getElementById('dropdownNavBtn');
- const dropdownNav = document.getElementById('dropdownNav');
-
- const dropdownProfileBtn = document.getElementsByClassName('dropdownProfileBtn');
- const dropdownProfile = document.getElementsByClassName('dropdownProfile');
-
- const dropdownSearchBtn = document.getElementsByClassName('dropdownSearchBtn');
- const dropdownSearch = document.getElementsByClassName('dropdownSearch');
- const dropdownFileBtn = document.getElementsByClassName('dropdownFileBtn');
-
- // Open File Manager Event
- /*
- function fireFileManager(){
- openFile.addEventListener('click', () => {
- showFile.click();
- });
- }
- fireFileManager();
-*/
-
- // Dropdown Navbar Event
- function fireDropdownNav(){
- dropdownNavBtn.addEventListener('click', () => {
- if (dropdownNav.classList.contains('-translate-y-full')) {
- dropdownNav.classList.remove('-translate-y-full');
- dropdownNav.classList.add('translate-y-0', 'ease-linear');
-
- // When the event get fired, every 'traMove' id attibute will move down
- Array.prototype.forEach.call(traMove, (e) => {
- e.classList.remove('-translate-y-32');
- e.classList.add('translate-y-0', 'ease-linear');
- });
- } else {
- dropdownNav.classList.add('-translate-y-full',);
- dropdownNav.classList.remove('translate-y-0', 'ease-linear');
-
- // Then if you hide the event, every 'traMove' id attribute will back to normal
- Array.prototype.forEach.call(traMove, (e) => {
- e.classList.add('-translate-y-32');
- e.classList.remove('translate-y-0', 'ease-linear');
- });
- }
- });
- }
- fireDropdownNav();
-
- // Dropdown Profile Event
- function fireDropdownProfile() {
- Array.prototype.forEach.call(dropdownProfileBtn, function (e, index) {
- e.addEventListener('click', () => {
- var timer;
- if (dropdownProfile[index].classList.contains('opacity-0')) {
- window.clearTimeout(timer);
- dropdownProfile[index].classList.remove('opacity-0', 'translate-y-6', 'invisible');
- dropdownProfile[index].classList.add('translate-y-0', 'opacity-100');
- } else {
- dropdownProfile[index].classList.add('opacity-0', 'translate-y-6');
- dropdownProfile[index].classList.remove('translate-y-0', 'opacity-100');
-
- //Set timer to hide the dropdown
- //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownProfile attribute
- timer = window.setTimeout( () => {
- dropdownProfile[index].classList.add('invisible');
- }, 250);
- }
- });
-
- // Click outside event
- window.addEventListener('click', (eve) => {
- if (!dropdownProfileBtn[index].contains(eve.target) && !dropdownProfile[index].contains(eve.target)) {
- dropdownProfile[index].classList.add('opacity-0', 'translate-y-6');
- dropdownProfile[index].classList.remove('translate-y-0', 'opacity-100');
-
- // Same as above
- timer = window.setTimeout( () => {
- dropdownProfile[index].classList.add('invisible');
- }, 250);
- }
- });
- });
- }
- fireDropdownProfile();
-
-
- // Dropdown Search Event
- function fireDropdownSearch() {
- Array.prototype.forEach.call(dropdownSearchBtn, (e, index) => {
- e.addEventListener('click', () => {
- var timer;
- if (dropdownSearch[index].classList.contains('opacity-0')) {
- window.clearTimeout(timer);
- dropdownSearch[index].classList.remove('opacity-0', 'translate-y-6', 'invisible');
- dropdownSearch[index].classList.add('translate-y-0', 'opacity-100');
- } else {
- dropdownSearch[index].classList.add('opacity-0', 'translate-y-6');
- dropdownSearch[index].classList.remove('translate-y-0', 'opacity-100');
-
- //Set timer to hide the dropdown
- //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownSearch attribute
- timer = window.setTimeout( () => {
- dropdownSearch[index].classList.add('invisible');
- }, 250);
- }
-
- });
-
- // Click outside event
- window.addEventListener('click', (eve) => {
- if (!dropdownSearchBtn[index].contains(eve.target) && !dropdownSearch[index].contains(eve.target)) {
- dropdownSearch[index].classList.add('opacity-0', 'translate-y-6');
- dropdownSearch[index].classList.remove('translate-y-0', 'opacity-100');
-
- // Same as above
- timer = window.setTimeout( () => {
- dropdownSearch[index].classList.add('invisible');
- }, 250);
- }
- });
-
- });
- }
- fireDropdownSearch();
-
- // Dropdown File Event
- function fireDropdownFile() {
- Array.prototype.forEach.call(dropdownFileBtn, (e, index) => {
- const findSibling = e.parentElement.children[1];
- e.addEventListener('click', () => {
- var timer;
- if (findSibling.classList.contains('opacity-0')) {
- window.clearTimeout(timer);
- findSibling.classList.remove('opacity-0', 'translate-y-6', 'invisible');
- findSibling.classList.add('translate-y-0', 'opacity-100');
- } else {
- findSibling.classList.add('opacity-0', 'translate-y-6');
- findSibling.classList.remove('translate-y-0', 'opacity-100');
-
- //Set timer to hide the dropdown
- //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownFile attribute
- timer = window.setTimeout( () => {
- findSibling.classList.add('invisible');
- }, 250);
- }
- });
-
- // Click outside event
- window.addEventListener('click', (eve) => {
- if (!dropdownFileBtn[index].contains(eve.target) && !findSibling.contains(eve.target)) {
- findSibling.classList.add('opacity-0', 'translate-y-6');
- findSibling.classList.remove('translate-y-0', 'opacity-100');
-
- // Same as above
- timer = window.setTimeout( () => {
- findSibling.classList.add('invisible');
- }, 250);
- }
-
- });
-
- });
- }
- fireDropdownFile();
-
- // Tabs Profile Event
- function fireTabsProfile(){
- //File Manager Tab = 0
- tabsProfile[0].addEventListener('click', () => {
- if (tabsProfile[1].classList.contains('border-b-2', 'border-purple-400', 'font-semibold')) {
- tabsProfile[1].classList.remove('border-b-2', 'border-purple-400', 'font-semibold');
- tabsProfile[0].classList.add('border-b-2', 'border-purple-400', 'font-semibold');
- tabsProfileContent[1].classList.add('hidden');
- tabsProfileContent[0].classList.remove('hidden');
- }
- });
- //Config Gen Tab = 1
- tabsProfile[1].addEventListener('click', () => {
- if (tabsProfile[0].classList.contains('border-b-2', 'border-purple-400', 'font-semibold')) {
- tabsProfile[0].classList.remove('border-b-2', 'border-purple-400', 'font-semibold');
- tabsProfile[1].classList.add('border-b-2', 'border-purple-400', 'font-semibold');
- tabsProfileContent[0].classList.add('hidden');
- tabsProfileContent[1].classList.remove('hidden');
- }
- });
- }
- fireTabsProfile();
-
-});
\ No newline at end of file
+
+ // DOM Ready Called
+ ready(function () {
+
+ const openFile = document.getElementById('openFile')
+ const showFile = document.getElementById('showFile')
+
+ const traMove = document.getElementsByClassName('traMove')
+ const tabsProfile = document.getElementsByClassName('tabsProfile')
+ const tabsProfileContent = document.getElementsByClassName('tabsProfileContent')
+ const dropdownNavBtn = document.getElementById('dropdownNavBtn')
+ const dropdownNav = document.getElementById('dropdownNav')
+
+ const dropdownProfileBtn = document.getElementsByClassName('dropdownProfileBtn')
+ const dropdownProfile = document.getElementsByClassName('dropdownProfile')
+
+ const dropdownSearchBtn = document.getElementsByClassName('dropdownSearchBtn')
+ const dropdownSearch = document.getElementsByClassName('dropdownSearch')
+ const dropdownFileBtn = document.getElementsByClassName('dropdownFileBtn')
+
+ // Open File Manager Event
+ /*
+ function fireFileManager(){
+ openFile.addEventListener('click', () => {
+ showFile.click();
+ });
+ }
+ fireFileManager();
+ */
+
+ // Dropdown Navbar Event
+ function fireDropdownNav(){
+ dropdownNavBtn.addEventListener('click', () => {
+ if (dropdownNav.classList.contains('-translate-y-full')) {
+ dropdownNav.classList.remove('-translate-y-full')
+ dropdownNav.classList.add('translate-y-0', 'ease-linear')
+ // When the event get fired, every 'traMove' id attibute will move down
+ Array.prototype.forEach.call(traMove, (e) => {
+ e.classList.remove('-translate-y-32')
+ e.classList.add('translate-y-0', 'ease-linear')
+ })
+ } else {
+ dropdownNav.classList.add('-translate-y-full',)
+ dropdownNav.classList.remove('translate-y-0', 'ease-linear')
+ // Then if you hide the event, every 'traMove' id attribute will back to normal
+ Array.prototype.forEach.call(traMove, (e) => {
+ e.classList.add('-translate-y-32')
+ e.classList.remove('translate-y-0', 'ease-linear')
+ })
+ }
+ })
+ }
+ fireDropdownNav()
+
+ // Dropdown Profile Event
+ function fireDropdownProfile() {
+ Array.prototype.forEach.call(dropdownProfileBtn, function (e, index) {
+ e.addEventListener('click', () => {
+ var timer
+ if (dropdownProfile[index].classList.contains('opacity-0')) {
+ window.clearTimeout(timer)
+ dropdownProfile[index].classList.remove('opacity-0', 'translate-y-6', 'invisible')
+ dropdownProfile[index].classList.add('translate-y-0', 'opacity-100')
+ } else {
+ dropdownProfile[index].classList.add('opacity-0', 'translate-y-6')
+ dropdownProfile[index].classList.remove('translate-y-0', 'opacity-100')
+ //Set timer to hide the dropdown
+ //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownProfile attribute
+ timer = window.setTimeout( () => {
+ dropdownProfile[index].classList.add('invisible')
+ }, 250)
+ }
+ })
+ // Click outside event
+ window.addEventListener('click', (eve) => {
+ if (!dropdownProfileBtn[index].contains(eve.target) && !dropdownProfile[index].contains(eve.target)) {
+ dropdownProfile[index].classList.add('opacity-0', 'translate-y-6')
+ dropdownProfile[index].classList.remove('translate-y-0', 'opacity-100')
+ // Same as above
+ timer = window.setTimeout( () => {
+ dropdownProfile[index].classList.add('invisible')
+ }, 250)
+ }
+ })
+ })
+ }
+ fireDropdownProfile()
+
+
+ // Dropdown Search Event
+ function fireDropdownSearch() {
+ Array.prototype.forEach.call(dropdownSearchBtn, (e, index) => {
+ e.addEventListener('click', () => {
+ var timer
+ if (dropdownSearch[index].classList.contains('opacity-0')) {
+ window.clearTimeout(timer)
+ dropdownSearch[index].classList.remove('opacity-0', 'translate-y-6', 'invisible')
+ dropdownSearch[index].classList.add('translate-y-0', 'opacity-100')
+ } else {
+ dropdownSearch[index].classList.add('opacity-0', 'translate-y-6')
+ dropdownSearch[index].classList.remove('translate-y-0', 'opacity-100')
+
+ //Set timer to hide the dropdown
+ //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownSearch attribute
+ timer = window.setTimeout( () => {
+ dropdownSearch[index].classList.add('invisible')
+ }, 250)
+ }
+ })
+
+ // Click outside event
+ window.addEventListener('click', (eve) => {
+ if (!dropdownSearchBtn[index].contains(eve.target) && !dropdownSearch[index].contains(eve.target)) {
+ dropdownSearch[index].classList.add('opacity-0', 'translate-y-6')
+ dropdownSearch[index].classList.remove('translate-y-0', 'opacity-100')
+
+ // Same as above
+ timer = window.setTimeout( () => {
+ dropdownSearch[index].classList.add('invisible')
+ }, 250)
+ }
+ })
+
+ })
+ }
+ fireDropdownSearch()
+
+ // Dropdown File Event
+ function fireDropdownFile() {
+ Array.prototype.forEach.call(dropdownFileBtn, (e, index) => {
+ const findSibling = e.parentElement.children[1]
+ e.addEventListener('click', () => {
+ var timer
+ if (findSibling.classList.contains('opacity-0')) {
+ window.clearTimeout(timer)
+ findSibling.classList.remove('opacity-0', 'translate-y-6', 'invisible')
+ findSibling.classList.add('translate-y-0', 'opacity-100')
+ } else {
+ findSibling.classList.add('opacity-0', 'translate-y-6')
+ findSibling.classList.remove('translate-y-0', 'opacity-100')
+
+ //Set timer to hide the dropdown
+ //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownFile attribute
+ timer = window.setTimeout( () => {
+ findSibling.classList.add('invisible')
+ }, 250)
+ }
+ })
+
+ // Click outside event
+ window.addEventListener('click', (eve) => {
+ if (!dropdownFileBtn[index].contains(eve.target) && !findSibling.contains(eve.target)) {
+ findSibling.classList.add('opacity-0', 'translate-y-6')
+ findSibling.classList.remove('translate-y-0', 'opacity-100')
+
+ // Same as above
+ timer = window.setTimeout( () => {
+ findSibling.classList.add('invisible')
+ }, 250)
+ }
+ })
+ })
+ }
+ fireDropdownFile()
+
+ // Tabs Profile Event
+ function fireTabsProfile(){
+ //File Manager Tab = 0
+ tabsProfile[0].addEventListener('click', () => {
+ if (tabsProfile[1].classList.contains('border-b-2', 'border-purple-400', 'font-semibold')) {
+ tabsProfile[1].classList.remove('border-b-2', 'border-purple-400', 'font-semibold')
+ tabsProfile[0].classList.add('border-b-2', 'border-purple-400', 'font-semibold')
+ tabsProfileContent[1].classList.add('hidden')
+ tabsProfileContent[0].classList.remove('hidden')
+ }
+ });
+ //Config Gen Tab = 1
+ tabsProfile[1].addEventListener('click', () => {
+ if (tabsProfile[0].classList.contains('border-b-2', 'border-purple-400', 'font-semibold')) {
+ tabsProfile[0].classList.remove('border-b-2', 'border-purple-400', 'font-semibold')
+ tabsProfile[1].classList.add('border-b-2', 'border-purple-400', 'font-semibold')
+ tabsProfileContent[0].classList.add('hidden')
+ tabsProfileContent[1].classList.remove('hidden')
+ }
+ })
+ }
+ fireTabsProfile()
+ })
\ No newline at end of file
diff --git a/src/routes/route.user.ts b/src/routes/route.user.ts
index 97b1eaf..8dd1539 100644
--- a/src/routes/route.user.ts
+++ b/src/routes/route.user.ts
@@ -16,6 +16,7 @@ export const userRoutes = (app: Router) => {
)
// External Viewing Of Other User Profiles (Admin Only)
+ /* Currently fucks up the admin route :)
app.get(
"/:userID",
authCheck,
@@ -33,4 +34,5 @@ export const userRoutes = (app: Router) => {
})
}
)
+ */
}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 25e3d87..8da3b73 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -63,15 +63,12 @@ export const isObjectEmpty = (obj: object) => {
* @param decimals The amount of decimals you wish to add to the converted value
*/
export const formatSize = (kb: number, decimals = 2) => {
- if (kb === 0) return '0 Bytes';
-
- const k = 1024;
- const dm = decimals < 0 ? 0 : decimals;
- const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
- const i = Math.floor(Math.log(kb) / Math.log(k));
-
- return parseFloat((kb / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+ if (kb === 0) return '0 Bytes'
+ const k = 1024
+ const dm = decimals < 0 ? 0 : decimals
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+ const i = Math.floor(Math.log(kb) / Math.log(k))
+ return parseFloat((kb / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
}
/**
@@ -80,4 +77,17 @@ export const formatSize = (kb: number, decimals = 2) => {
*/
export const convertTimestamp = (unixTimestamp: number) => {
return new Date(unixTimestamp)
+}
+
+/**
+ *
+ * @param data Original array of many objects
+ * @param itemsPerPage The amount of objects you wish you wish to have in each array in the new array
+ */
+ export const convertToPaginatedArray = (data: Array
Looks like you have no files!
- Upload some to see some action here.
<%= item.originalName %>
- -Looks like you have no files!
+ Upload some to see some action here.