Lite mode additional info

[pctechkid]

trafficstars

Someone please add this feature for LITE mode as I prefer lite mode than the original theme. It is very useful for file/folder details.

[maple3142]

Lite mode is specifically designed to be similar to nginx's default directory listing. Otherwise, I am not sure that can be recursively downloaded by wget.

[catthehacker]

Seems to be working fine for me. example

[pctechkid]

Seems to be working fine for me. example

@CatTheHacker Yes, I want my lite mode to have info such as date modified and file size just like yours. Can you please help me?

[catthehacker]

I only modified my worker.js to do that stuff as I'm not really good at JS but basically you want to modify line 648 only. Original:

        fileht += `<li><a href="${p + (isf ? '/' : '')}">${f.name}</a></li>`;

to something like this:

        fileht += `<li><a href="${p + (isf ? '/' : '')}">${f.name}</a> &nbsp; ${f.modifiedTime} &nbsp; ${f.size}</li>`;

for date and size I have small helper functions converting them:

function formatBytes(bytes, decimals = 2) {
    if (bytes === 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(bytes) / Math.log(k));

    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
  }

  function formatDate(date) {
    date = date.split('T');
    date[1] = ((date[1].split('Z')[0]).split('.'))[0];
    return '' + date[0] + ' ' + date[1];
  }

with that it would be something like:

        fileht += `<li><a href="${p + (isf ? '/' : '')}">${f.name}</a> &nbsp; ${formatDate(f.modifiedTime)} &nbsp; ${formatBytes(f.size)}</li>`;

🐱‍💻

[pctechkid]

I only modified my worker.js to do that stuff as I'm not really good at JS but basically you want to modify line 648 only. Original:

        fileht += `<li><a href="${p + (isf ? '/' : '')}">${f.name}</a></li>`;

to something like this:

        fileht += `<li><a href="${p + (isf ? '/' : '')}">${f.name}</a> &nbsp; ${f.modifiedTime} &nbsp; ${f.size}</li>`;

for date and size I have small helper functions converting them:

function formatBytes(bytes, decimals = 2) {
    if (bytes === 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(bytes) / Math.log(k));

    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
  }

  function formatDate(date) {
    date = date.split('T');
    date[1] = ((date[1].split('Z')[0]).split('.'))[0];
    return '' + date[0] + ' ' + date[1];
  }

with that it would be something like:

        fileht += `<li><a href="${p + (isf ? '/' : '')}">${f.name}</a> &nbsp; ${formatDate(f.modifiedTime)} &nbsp; ${formatBytes(f.size)}</li>`;

🐱‍💻

@CatTheHacker Thanks a lot. It worked but one more issue I encountered, the files itself are displaying fine, but the folders are not. They display NaN undefined, how to fix this?

[catthehacker]

use ternary to check if the item is directory or file and display appriopriate output

${(isf ? '-' : formatBytes(f.size))}

[pctechkid]

${(isf ? '-' : formatBytes(f.size))}

Thank youuuu. It's now working and looked as I wanted it to be. I owe you one.

[pctechkid]

@CatTheHacker oh, one thing I didn't notice before. The modified time shown is a bit off, it's behind at least 8hrs. I tried modifying it but it didn't turn out right :(

[catthehacker]

Most likely because the time is in UTC format and my date helper does not convert the date to the local timezone. And it's something I'm not going to touch/fix.

[pctechkid]

Most likely because the time is in UTC format and my date helper does not convert the date to the local timezone.

Is it not possible to just literally add 8hrs in the function or something like that? it doesnt have to be a timezone conversion as it sounds more complicated.

[catthehacker]

Something like this I guess? idk if it works

function formatDate(date) {
    date = date.split('T');
    date[1] = ((date[1].split('Z')[0]).split('.'))[0];
    date[1] = date[1].split(':');
    date[1][0] = date[1][0] + 8;
    date[1] = date[1].join(':');
	return '' + date[0] + ' ' + date[1];
}

[pctechkid]

Something like this I guess? idk if it works

function formatDate(date) {
    date = date.split('T');
    date[1] = ((date[1].split('Z')[0]).split('.'))[0];
    date[1] = date[1].split(':');
    date[1][0] = date[1][0] + 8;
    date[1] = date[1].join(':');
	return '' + date[0] + ' ' + date[1];
}

unfortunately, it does not add 8hrs , it only adds '8' character on the hours place making it 008:00

[catthehacker]

JavaScript do be like that ¯\_(ツ)_/¯

[pctechkid]

JavaScript do be like that ¯_(ツ)_/¯

Well yeah. One last question sir, how do I change the list style type of

whenever it is a folder, folder should be the icon, and when it's a file, a file icon. Just like your example

[cronopsxploit]

@maple3142 I have these 2 recurring errors then I need to keep updating the page to look like the content again how am i new can someone tell me how to solve?

I followed all the steps, described in git, I used your automatic token generator. it works however if I enter and leave a folder sometimes it needs to be reloading the page until the folders appear again. I went to your test drive and try to reproduce the error by updating the page frequently, but in the case of yours it didn't work out as I can be more specific so that I help resolve