jcloud_frontend/assets/scripts/files/main.js

import { getCookie, getFileExtension, getFileName, countOccurrences, showDialog, closeDialog, startLoading, stopLoading, strip, jCloudUIElements, addQueryParam, getDirName, removeQueryParam } from '../tools/main.js';
import { loadPageTexts, getPageText } from '../i18n/main.js';
import { more_options_menu_hide } from '../nav/menus/moreoptions/main.js';
import { getUiLabels } from '../i18n/main.js';
import { selectOption, getOptionElement, getOptionMarker } from '../elements/dropdown/main.js';

const hideFiles = function () {
    document.querySelector('#files').setAttribute('class', 'hidden');
};

const renameFile = async function (id, name) {
    const container = document.querySelector('#files-items-container');
    container.removeAttribute('data-is-in-foreground');
    name = strip(name, '/');
    const getNewName = async function (error = '', ofn = '', select = false) { // ofn = old file name
        const newName = await jCloudUIElements.prompt(await getPageText('/files', '700f0327efe647b3a9854157505426f1', 0), true, undefined, ofn, 'text', select, false, [], error, false, [
            function () {
                document.querySelector('#jcloud-ui-elements-prompt-error').innerHTML = '';
            }
        ], false);
        if (newName === null) { }
        else if (countOccurrences(newName, '\\') === 0 && countOccurrences(newName, '/') === 0 && countOccurrences(newName, '\'') === 0 && countOccurrences(newName, '"') === 0 && countOccurrences(newName, '/') === 0 && newName.length > 0) { }
        else {
            return await getNewName(await getPageText('/files', '0d54c47887494230a70dc5c01c7391c7', 0), newName, false);
        };
        return newName;
    };
    const submit = async function (newName, oldName, parentId) {
        if (!(newName === null || newName === oldName)) {
            const params = new URLSearchParams();
            params.append('n', newName);
            params.append('id', id);
            await fetch(`https://jcloud-services.ddns.net:1024/file-name/${getCookie('User')}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: params.toString(),
                credentials: 'include'
            })
                .then(async response => {
                    if (response.status === 200) {
                        await showFilesPage('', parentId, true);
                    } else if (response.status === 409) {
                        await submit(await getNewName(await getPageText('/files', '15f10296bae64d18a14d9fd5bd04469c', 0), newName), oldName, parentId);
                    } else {
                        await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0));
                    };
                })
                .catch(async err => {
                    await jCloudUIElements.alert(err);
                });
        };
    };
    await fetch(`https://jcloud-services.ddns.net:1024/file/${getCookie('User')}?type=attributes&id=${id}`, { credentials: 'include' })
        .then(async response => {
            if (response.status === 200) {
                await submit(await getNewName('', name, true), name, JSON.parse(await response.text()).parent_id);
            } else {
                await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0));
            };
        })
        .catch(async err => {
            await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0) + ': ' + err);
        });
    closeDialog(document.querySelector('#jcloud-ui-elements-prompt'));
    container.dataset.isInForeground = '';
};

const renameServerFile = async function (path) {
    const container = document.querySelector('#files-items-container');
    container.removeAttribute('data-is-in-foreground');
    const getNewName = async function (error = '', ofn = '', select = false) { // ofn = old file name
        const newName = await jCloudUIElements.prompt(await getPageText('/files', '700f0327efe647b3a9854157505426f1', 0), true, undefined, ofn, 'text', select, false, [], error, false, [
            function () {
                document.querySelector('#jcloud-ui-elements-prompt-error').innerHTML = '';
            }
        ], false);
        if (newName === null) { }
        else if (countOccurrences(newName, '\\') === 0 && countOccurrences(newName, '/') === 0 && countOccurrences(newName, '\'') === 0 && countOccurrences(newName, '"') === 0 && countOccurrences(newName, '/') === 0 && newName.length > 0) { }
        else {
            return await getNewName(await getPageText('/files', '0d54c47887494230a70dc5c01c7391c7', 0), newName, false);
        };
        return newName;
    };
    const submit = async function (newName, oldName, parentId) {
        if (!(newName === null || newName === oldName)) {
            const params = new URLSearchParams();
            params.append('n', newName);
            await fetch(`https://jcloud-services.ddns.net:1024/server-file-name/${getCookie('User')}/${path}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: params.toString(),
                credentials: 'include'
            })
                .then(async response => {
                    if (response.status === 200) {
                        alert(getDirName(path));
                        await showServerFilesPage(getDirName(path), '', true);
                    } else if (response.status === 409) {
                        await submit(await getNewName(await getPageText('/files', '15f10296bae64d18a14d9fd5bd04469c', 0), newName), oldName, parentId);
                    } else {
                        await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0));
                    };
                })
                .catch(async err => {
                    await jCloudUIElements.alert(err);
                });
        };
    };
    await submit(await getNewName('', getFileName(path), true), getFileName(path));
    closeDialog(document.querySelector('#jcloud-ui-elements-prompt'));
    container.dataset.isInForeground = '';
};

const deleteFile = async function (id, name, parentId) {
    const container = document.querySelector('#files-items-container');
    container.removeAttribute('data-is-in-foreground');
    name = strip(name, '/');
    if (await jCloudUIElements.confirm(await getPageText('/files', 'f51e3b4a08b7403884ec5d76f0eff3ae', 0) + '<div style="margin: 14px 0">' + name + '</div>', false, true, await getPageText('/files', '0a6eb285a2494ac3abe03d39fa765f01', 0))) {
        const params = new URLSearchParams();
        params.append('id', id);
        await fetch(`https://jcloud-services.ddns.net:1024/file/${getCookie('User')}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: params.toString(),
            credentials: 'include'
        })
            .then(async response => {
                if (response.status === 204) {
                    await showFilesPage('', parentId, true)
                }
            })
            .catch(async err => {
                await jCloudUIElements.alert(err);
            });
    };
    container.dataset.isInForeground = '';
};

const showProperties = async function (id, properties) {
    const container = document.querySelector('#files-items-container');
    let success = true;
    if (!properties) {
        success = false;
        startLoading();
        await fetch(`https://jcloud-services.ddns.net:1024/file/${getCookie('User')}?id=${id}&type=attributes`, {
            credentials: 'include'
        })
            .then(async response => {
                if (response.status === 200) {
                    properties = await response.json();
                    success = true;
                };
            });
        stopLoading();
    }
    if (success) {
        const friendlyNames = {
            size: await getPageText('/files', 'b2b5e3dbf2554d509bc9ab0947318dee', 0),
            id: await getPageText('/files', '7c6479cb16514bb6b12b79991689bc25', 0),
            lm: await getPageText('/files', '7a3731d7e7bf4581aed853737bff17ed', 0),
        };
        document.querySelector('#files-item-properties-name').textContent = strip(getFileName(properties.path), '/');
        const keys = Object.keys(friendlyNames);
        const propertiesTable = document.querySelector('#files-item-properties-table');
        propertiesTable.innerHTML = '';
        let row = document.createElement('tr');
        let key = document.createElement('td');
        let value = document.createElement('td');
        row.classList.add('files-item-properties-table-row');
        key.textContent = await getPageText('/files', '11b4e9562f4e4c8a91e67f095e7faf50', 0);
        let extension = '.' + getFileExtension(properties.path);
        document.querySelector('#files-item-properties-summary-type').textContent = '';
        if (extension in MIME_TYPES && properties.path[properties.path.length - 1] != '/') {
            value.textContent = (await getUiLabels()).FILE_TYPES[MIME_TYPES[extension]];
        } else if (properties.path[properties.path.length - 1] != '/') {
            value.textContent = await getPageText('/files', 'dd7254231e8642b7bd24dd471d0de186', 0);
        } else {
            value.textContent = await getPageText('/files', '427c3b55a1c7430e9e77c82930b48a19', 0);
        };
        document.querySelector('#files-item-properties-summary-type').textContent = value.textContent;
        row.appendChild(key);
        row.appendChild(value);
        propertiesTable.appendChild(row);
        for (let i = 0; i < keys.length; i++) {
            const row = document.createElement('tr');
            const key = document.createElement('td');
            const value = document.createElement('td');
            row.classList.add('files-item-properties-table-row');
            row.classList.add('files-item-properties-table-row-not-first-child');
            key.textContent = friendlyNames[keys[i]];
            if (keys[i] === 'size') {
                if (properties.path[properties.path.length - 1] != '/') {
                    if (properties.size < 1024) {
                        value.textContent = properties.size + ' B';
                        document.querySelector('#files-item-properties-summary-size').textContent = properties.size + ' B';
                    } else if (properties.size > 1024 && properties.size < 1048576) {
                        value.textContent = Math.floor(properties.size / 1024) + ' KiB';
                        document.querySelector('#files-item-properties-summary-size').textContent = Math.floor(properties.size / 1024) + ' KiB';
                    } else if (properties.size > 1048576 && properties.size < 1073741824) {
                        value.textContent = Math.floor(properties.size / 1048576) + ' MiB';
                        document.querySelector('#files-item-properties-summary-size').textContent = Math.floor(properties.size / 1048576) + ' MiB';
                    } else if (properties.size > 1073741824 && properties.size < 1099511627776) {
                        value.textContent = Math.floor(properties.size / 1073741824) + ' GiB';
                        document.querySelector('#files-item-properties-summary-size').textContent = Math.floor(properties.size / 1073741824) + ' GiB';
                    } else if (properties.size > 1099511627776) {
                        value.textContent = Math.floor(properties.size / 1099511627776) + ' TiB';
                        document.querySelector('#files-item-properties-summary-size').textContent = Math.floor(properties.size / 1099511627776) + ' TiB';
                    };
                    document.querySelector('#files-item-properties-summary-size').dataset.empty = 'false';
                } else {
                    value.textContent = '-';
                    document.querySelector('#files-item-properties-summary-size').textContent = '';
                    document.querySelector('#files-item-properties-summary-size').dataset.empty = 'true';
                }
            } else if (keys[i] === 'lm' || keys[i] === 'lr' || keys[i] === 'created') {
                if (properties[keys[i]]) {
                    value.textContent = new Intl.DateTimeFormat('de-DE', {
                        hour12: false,
                        dateStyle: 'short',
                        timeStyle: 'short'
                    }).format(new Date(properties[keys[i]].replace(' ', 'T'))).replace(',', '');
                };
            } else if (typeof properties[keys[i]] === 'boolean') {
                value.textContent = (await getUiLabels()).FRIENDLY_BOOLEAN_NAMES[properties[keys[i]]];
            } else {
                value.textContent = properties[keys[i]];
            };
            row.appendChild(key);
            row.appendChild(value);
            propertiesTable.appendChild(row);
        };
        jCloudUIElements.overlays.hideBlurryOverlay();
        closeDialog(document.querySelector('#files-item-actions'));
        const id = new URLSearchParams(window.location.search).get('id');
        container.removeAttribute('data-is-in-foreground')
        showDialog(document.querySelector('#files-item-properties'), [
            function () {
                window.history.replaceState(null, '', removeQueryParam(addQueryParam('/files/directory', 'id', id), 'iid'));
                container.dataset.isInForeground = '';
            }
        ]);
    } else {
        await jCloudUIElements.alert('Error!');
    };
};

const showFileInformationDialog = async function (properties, stayOnPage = false, closeCallbacks = [], serverFile = false) {
    const container = document.querySelector('#files-items-container');
    container.removeAttribute('data-is-in-foreground');
    document.querySelector('#files-show-properties').onclick = function () {
        const id = new URLSearchParams(window.location.search).get('id');
        showProperties(id, properties);
        if (stayOnPage) {
            window.history.replaceState(null, '', addQueryParam(addQueryParam('/files/directory/properties', 'iid', properties.id), 'id', id));
        } else {
            window.history.pushState(null, '', addQueryParam(addQueryParam('/files/directory/properties', 'iid', properties.id), 'id', id));
        };
    };
    document.querySelector('#files-rename').onclick = async function () {
        jCloudUIElements.overlays.hideBlurryOverlay();
        closeDialog(document.querySelector('#files-item-actions'));
        if (serverFile) {
            await renameServerFile(properties.full_path);
        } else {
            await renameFile(properties.id, properties.path);
        };
    };
    document.querySelector('#files-delete').onclick = async function () {
        jCloudUIElements.overlays.hideBlurryOverlay();
        closeDialog(document.querySelector('#files-item-actions'));
        if (serverFile) {
            await deleteFile(properties.id, properties.path, properties.parent_id);
        } else {
            await deleteFile(properties.id, properties.path, properties.parent_id);
        };
    }
    showDialog(document.querySelector('#files-item-actions'), [...closeCallbacks, function () {
        container.dataset.isInForeground = '';
    }]);
};

const uploadFile = async function () {
    const container = document.querySelector('#files-items-container');
    container.removeAttribute('data-is-in-foreground');
    document.querySelector('#files-upload').blur();
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = '*';
    const filesSelected = new Promise((resolve) => {
        fileInput.onchange = () => {
            resolve(fileInput.files);
        };
    });
    fileInput.click();
    const files = await filesSelected;
    const formData = new FormData();
    formData.append('meta', '{}');
    formData.append('ro', 'false');
    formData.append('hidden', 'false');
    formData.append('system_file', 'false');
    formData.append('file', files[0]);
    const getFileName = async function (error = '', ofn = '') { // ofn = old file name
        const filename = await jCloudUIElements.prompt(await getPageText('/files', '877b4a536541442b83b60ebc13415aa8', 0), true, undefined, ofn, 'text', true, false, [], error, false, [
            function () {
                document.querySelector('#jcloud-ui-elements-prompt-error').innerHTML = '';
            }
        ], false);
        if (filename === null) { }
        else if (countOccurrences(filename, '\\') === 0 && countOccurrences(filename, '/') === 0 && countOccurrences(filename, '\'') === 0 && countOccurrences(filename, '"') === 0 && countOccurrences(filename, '/') === 0 && filename.length > 0) { }
        else {
            return await getFileName(await getPageText('/files', '0d54c47887494230a70dc5c01c7391c7', 0), ofn);
        };
        return filename;
    };
    const submit = async function (filename, path) {
        if (!(filename === null)) {
            await fetch(`https://jcloud-services.ddns.net:1024/file/${getCookie('User')}${encodeURIComponent(path + filename)}`, {
                method: 'POST',
                body: formData,
                credentials: 'include'
            })
                .then(async response => {
                    if (response.status === 201) {
                        await showFilesPage(path, '', true);
                    } else if (response.status === 409) {
                        await submit(await getFileName(await getPageText('/files', '15f10296bae64d18a14d9fd5bd04469c', 0), filename), path);
                    } else {
                        await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0) + '\n' + response.status);
                    };
                });
        };
    };
    await fetch(`https://jcloud-services.ddns.net:1024/file/${getCookie('User')}?type=attributes&id=${new URLSearchParams(window.location.search).get('id')}`, { credentials: 'include' })
        .then(async response => {
            if (response.status === 200) {
                await submit(await getFileName('', files[0].name), JSON.parse(await response.text()).path);
            } else {
                await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0) + '\n' + response.status);
            };
        })
        .catch(async err => {
            await jCloudUIElements.alert(err);
        });
    closeDialog(document.querySelector('#jcloud-ui-elements-prompt'));
    container.dataset.isInForeground = '';
};

const uploadFileOnServer = async function () {
    const container = document.querySelector('#files-items-container');
    container.removeAttribute('data-is-in-foreground');
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = '*';
    const filesSelected = new Promise((resolve) => {
        fileInput.onchange = () => {
            resolve(fileInput.files);
        };
    });
    fileInput.click();
    const files = await filesSelected;
    const formData = new FormData();
    formData.append('file', files[0]);
    const getFileName = async function (error = '', ofn = '') {
        const filename = await jCloudUIElements.prompt(await getPageText('/files', '877b4a536541442b83b60ebc13415aa8', 0), true, undefined, ofn, 'text', false, false, [], error, false, [
            function () {
                document.querySelector('#jcloud-ui-elements-prompt-error').innerHTML = '';
            }
        ], false);
        if (filename === null) { }
        else if (countOccurrences(filename, '\\') === 0 && countOccurrences(filename, '/') === 0 && countOccurrences(filename, '\'') === 0 && countOccurrences(filename, '"') === 0 && countOccurrences(filename, '/') === 0 && filename.length > 0) { }
        else {
            return await getFileName(await getPageText('/files', '02afd7cbbe4a4d30afbfaeb16587e918', 0));
        };
        return filename;
    };
    const submit = async function (filename) {
        if (!(filename === null)) {
            const path = (new URL(window.location.href)).pathname.split('/').slice(2).join('/');
            await fetch(`https://jcloud-services.ddns.net:1024/server/file/${getCookie('User')}/${encodeURIComponent(path + filename)}`, {
                method: 'POST',
                body: formData,
                credentials: 'include'
            })
                .then(async response => {
                    if (response.status === 201) {
                        showServerFilesPage(path, '', true);
                    } else if (response.status === 409) {
                        await submit(await getFileName(await getPageText('/files', '15f10296bae64d18a14d9fd5bd04469c', 0), filename));
                    } else {
                        await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0) + '\n' + response.status);
                    };
                });
        };
    };
    await submit(await getFileName('', files[0].name));
    closeDialog(document.querySelector('#jcloud-ui-elements-prompt'));
    container.dataset.isInForeground = '';
};

const createDirectory = async function () {
    const container = document.querySelector('#files-items-container');
    container.removeAttribute('data-is-in-foreground');
    document.querySelector('#files-new-directory').blur();
    const formData = new FormData();
    formData.append('meta', '{}');
    formData.append('ro', 'false');
    formData.append('hidden', 'false');
    formData.append('system_file', 'false');
    formData.append('file', new Blob([], { type: "text/plain" }));
    const getDirectoryName = async function (error = '') {
        const dirname = await jCloudUIElements.prompt(await getPageText('/files', '6e4dda603d8e4dac89acfeb75241a52f', 0), true, undefined, null, 'text', false, false, [], error, false, [
            function () {
                document.querySelector('#jcloud-ui-elements-prompt-error').innerHTML = '';
            }
        ], false);
        if (dirname === null) { }
        else if (countOccurrences(dirname, '\\') === 0 && countOccurrences(dirname, '/') === 0 && countOccurrences(dirname, '\'') === 0 && countOccurrences(dirname, '"') === 0 && countOccurrences(dirname, '/') === 0 && dirname.length > 0) { }
        else {
            return await getDirectoryName(await getPageText('/files', '02afd7cbbe4a4d30afbfaeb16587e918', 0));
        };
        return dirname;
    };
    const submit = async function (dirname, path) {
        if (!(dirname === null)) {
            await fetch(`https://jcloud-services.ddns.net:1024/file/${getCookie('User')}${encodeURIComponent(path + dirname + '/')}`, {
                method: 'POST',
                body: formData,
                credentials: 'include'
            })
                .then(async response => {
                    if (response.status === 201) {
                        await showFilesPage(path, '', true);
                    } else if (response.status === 409) {
                        await submit(await getDirectoryName(await getPageText('/files', '8ff9d504a7cf409297144f22ea7dba6e', 0)), path);
                    } else {
                        await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0) + '\n' + response.status);
                    };
                });
        };
    };
    await fetch(`https://jcloud-services.ddns.net:1024/file/${getCookie('User')}?type=attributes&id=${new URLSearchParams(window.location.search).get('id')}`, { credentials: 'include' })
        .then(async response => {
            if (response.status === 200) {
                await submit(await getDirectoryName(), JSON.parse(await response.text()).path);
            };
        })
        .catch(async err => { await jCloudUIElements.alert(err); });
    closeDialog(document.querySelector('#jcloud-ui-elements-prompt'));
    container.dataset.isInForeground = '';
};

const createDirectoryOnServer = async function () {
    const container = document.querySelector('#files-items-container');
    container.removeAttribute('data-is-in-foreground');
    const formData = new FormData();
    formData.append('file', new Blob([], { type: "text/plain" }));
    const getDirectoryName = async function (error = '') {
        const dirname = await jCloudUIElements.prompt(await getPageText('/files', '6e4dda603d8e4dac89acfeb75241a52f', 0), true, undefined, null, 'text', false, false, [], error, false, [
            function () {
                document.querySelector('#jcloud-ui-elements-prompt-error').innerHTML = '';
            }
        ], false);
        if (dirname === null) { }
        else if (countOccurrences(dirname, '\\') === 0 && countOccurrences(dirname, '/') === 0 && countOccurrences(dirname, '\'') === 0 && countOccurrences(dirname, '"') === 0 && countOccurrences(dirname, '/') === 0 && dirname.length > 0) { }
        else {
            return await getDirectoryName(await getPageText('/files', '02afd7cbbe4a4d30afbfaeb16587e918', 0));
        };
        return dirname;
    };
    const submit = async function (dirname, error) {
        if (!(dirname === null)) {
            const path = (new URL(window.location.href)).pathname.split('/').slice(2).join('/');
            await fetch(`https://jcloud-services.ddns.net:1024/server-file/${getCookie('User')}/${encodeURIComponent(path + dirname + '/')}`, {
                method: 'POST',
                body: formData,
                credentials: 'include'
            })
                .then(async response => {
                    if (response.status === 201) {
                        showServerFilesPage(path, '', true);
                    } else if (response.status === 409) {
                        await submit(await getDirectoryName(await getDirectoryName(await getPageText('/files', '8ff9d504a7cf409297144f22ea7dba6e', 0))));
                    } else {
                        await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0) + '\n' + response.status);
                    };
                })
                .catch(async () => {
                    await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0));
                });
        };
    };
    await submit(await getDirectoryName());
    closeDialog(document.querySelector('#jcloud-ui-elements-prompt'));
    container.dataset.isInForeground = '';
};

const showFilesPage = async function (path = '/', id = '', stayOnPage = false, isMainPage = true, refreshContent = true) {
    const container = document.querySelector('#files-items-container');
    document.querySelector('#files-sort-by').onchange = async () => {
        let newR;
        if (new URLSearchParams(window.location.search).get('r') === 'true') {
            newR = 'false';
        } else {
            newR = 'true';
        };
        if (new URLSearchParams(window.location.search).get('sort') !== document.querySelector('#files-sort-by').dataset.value) {
            newR = 'false';
        };
        window.history.replaceState(null, '', addQueryParam(addQueryParam(window.location.href, 'sort', document.querySelector('#files-sort-by').dataset.value), 'r', newR));
        await showFilesPage(path, id, true, true, false);
    };
    window.keyDownCallbacks['files.arrows'] = async function (event) {
        if (new URL(window.location.href).pathname.startsWith('/files') && container.dataset.isInForeground !== undefined) {
            if (event.key === 'ArrowDown') {
                const container = document.querySelector('#files-items-container');
                const items = container.childNodes;
                if (items.length) {
                    if (container.dataset.selectedItem) {
                        let itemSelected;
                        let itemsChecked = 0;
                        for (let item of items) {
                            itemsChecked++;
                            if (itemSelected) {
                                item.dataset.selected = 'true';
                                item.classList.add('selected');
                                container.dataset.selectedItem = item.dataset.fileId;
                                container.dataset.selectedItemName = item.dataset.fileName;
                                container.dataset.selectedItemParentId = item.dataset.fileParentId;
                                break;
                            };
                            if (itemsChecked < items.length) {
                                if (item.dataset.selected === 'true') {
                                    itemSelected = true;
                                    item.dataset.selected = 'false';
                                    item.classList.remove('selected');
                                };
                            };
                        };
                    } else {
                        items[0].dataset.selected = 'true';
                        items[0].classList.add('selected');
                        container.dataset.selectedItem = items[0].dataset.fileId;
                        container.dataset.selectedItemName = items[0].dataset.fileName;
                        container.dataset.selectedItemParentId = items[0].dataset.fileParentId;
                    };
                };
            };
            if (event.key === 'ArrowUp') {
                const container = document.querySelector('#files-items-container');
                const items = [...container.childNodes].reverse();
                if (items.length) {
                    if (container.dataset.selectedItem) {
                        let itemSelected;
                        let itemsChecked = 0;
                        for (let item of items) {
                            itemsChecked++;
                            if (itemSelected) {
                                item.dataset.selected = 'true';
                                item.classList.add('selected');
                                container.dataset.selectedItem = item.dataset.fileId;
                                container.dataset.selectedItemName = item.dataset.fileName;
                                container.dataset.selectedItemParentId = item.dataset.fileParentId;
                                break;
                            };
                            if (itemsChecked < items.length) {
                                if (item.dataset.selected === 'true') {
                                    itemSelected = true;
                                    item.dataset.selected = 'false';
                                    item.classList.remove('selected');
                                };
                            };
                        };
                    } else {
                        items[0].dataset.selected = 'true';
                        items[0].classList.add('selected');
                        container.dataset.selectedItem = items[0].dataset.fileId;
                        container.dataset.selectedItemName = items[0].dataset.fileName;
                        container.dataset.selectedItemParentId = items[0].dataset.fileParentId;
                    };
                };
            };
        };
    };
    window.keyUpCallbacks['files.delete'] = async function (event) {
        if (new URL(window.location.href).pathname.startsWith('/files') && container.dataset.isInForeground !== undefined) {
            if (event.key === 'Delete') {
                if (container.dataset.selectedItem) {
                    const container = document.querySelector('#files-items-container');
                    deleteFile(container.dataset.selectedItem, container.dataset.selectedItemName, container.dataset.selectedItemParentId);
                };
            };
        };
    };
    window.keyUpCallbacks['files.enter'] = async function (event) {
        if (new URL(window.location.href).pathname.startsWith('/files') && container.dataset.isInForeground !== undefined) {
            if (event.key === 'Enter') {
                if (container.dataset.selectedItem !== undefined) {
                    if (event.altKey) {
                        await showProperties(parseInt(container.dataset.selectedItem), JSON.parse(container.dataset.itemsList).filter(item => item.id == container.dataset.selectedItem)[0], false, []);
                    } else {
                        if (container.dataset.selectedItemName.endsWith('/')) {
                            await showFilesPage('', container.dataset.selectedItem);
                        } else {
                            const link = document.createElement('a');
                            link.href = `https://jcloud-services.ddns.net:1024/file/${getCookie('User')}?type=file&id=${container.dataset.selectedItem}`;
                            link.download = container.dataset.selectedItemName.slice(1);
                            link.click();
                            URL.revokeObjectURL(link.href);
                        };
                    };
                };
            };
        };
    };
    window.keyUpCallbacks['files.contextmenu'] = async function (event) {
        if (new URL(window.location.href).pathname.startsWith('/files') && container.dataset.isInForeground !== undefined) {
            if (event.key === 'ContextMenu') {
                event.preventDefault();
                await showFileInformationDialog(JSON.parse(container.dataset.itemsList).filter(item => item.id == container.dataset.selectedItem)[0], false, []);
            };
        };
    };
    let content;
    document.querySelector('#files-new-directory').onclick = async function () { await createDirectory(); };
    document.querySelector('#files-upload').onclick = async function () { await uploadFile(); };
    if (refreshContent) {
        startLoading();
        let success = false;
        const user = getCookie('User');
        if (!id) {
            await fetch(`https://jcloud-services.ddns.net:1024/dirid/${user}${encodeURIComponent(path)}`, { credentials: 'include' })
                .then(async response => {
                    if (response.status === 200) {
                        id = await response.text()
                    } else if (response.status === 404) {
                        await jCloudUIElements.alert('Das Verzeichnis wurde nicht gefunden.')
                    } else {
                        await jCloudUIElements.alert('Ein Fehler ist aufgetreten.\n' + response.status + '\n' + await response.text())
                    };
                })
                .catch(async err => {
                    await jCloudUIElements.alert(err);
                });
        };
        await fetch(`https://jcloud-services.ddns.net:1024/listdir/${user}?id=${id}`, { credentials: 'include' })
            .then(async response => {
                if (response.status === 200) {
                    success = true;
                    content = await response.json();
                };
            })
            .catch(async err => { await jCloudUIElements.alert(err); });
        if (success) {
            if (isMainPage) {
                const url = new URL(addQueryParam(window.location.href, 'id', id));
                url.pathname = '/files/directory';
                if (stayOnPage) {
                    history.replaceState(null, '', url.href);
                } else {
                    history.pushState(null, '', url.href);
                };
            };
            await loadPageTexts('/files');
            more_options_menu_hide();
            document.querySelector('#files').classList.remove('hidden');
            document.querySelector('#home').classList.add('hidden');
            document.querySelector('#user-details-on-footer').style.display = 'none';
            document.querySelector('#user-details-on-footer').setAttribute('class', 'hidden');
            container.classList.remove('hidden');
        } else {
            return;
        };
        stopLoading();
    } else {
        content = JSON.parse(container.dataset.itemsList);
    };
    container.innerHTML = '';
    container.removeAttribute('data-selected-item');
    container.removeAttribute('data-selected-item-parent-id');
    container.removeAttribute('data-selected-item-name');
    container.dataset.isInForeground = '';
    container.dataset.itemsList = JSON.stringify(content);
    for (let index = 0; index < Object.keys(content).length; index++) {
        let item = content[index]
        let extension = '.' + getFileExtension(item.path);
        if (extension in MIME_TYPES && item.path[item.path.length - 1] != '/') {
            content[index].type = (await getUiLabels()).FILE_TYPES[MIME_TYPES[extension]];
        } else if (item.path[item.path.length - 1] != '/') {
            content[index].type = await getPageText('/files', 'dd7254231e8642b7bd24dd471d0de186', 0);
        } else {
            content[index].type = await getPageText('/files', '427c3b55a1c7430e9e77c82930b48a19', 0);
        };
    };
    let query = new URLSearchParams(window.location.search);
    if (isMainPage) {
        if (!query.get('sort') || !(query.get('sort') === 'name' || query.get('sort') === 'date' || query.get('sort') === 'type' || query.get('sort') === 'size')) {
            history.replaceState(null, '', addQueryParam(window.location.href, 'sort', 'name'));
        };
        if (!query.get('r') || !(query.get('r') === 'true' || query.get('r') === 'false')) {
            history.replaceState(null, '', addQueryParam(window.location.href, 'r', 'false'));
        };
    };
    query = new URLSearchParams(window.location.search);
    if (query.get('r') === 'true') {
        getOptionMarker(document.querySelector('#files-sort-by'), query.get('sort')).src = '/assets/img/jcloud-ui-icons/angle-down.svg';
    } else {
        getOptionMarker(document.querySelector('#files-sort-by'), query.get('sort')).src = '/assets/img/jcloud-ui-icons/angle-up.svg';
    };
    console.log(getOptionMarker(document.querySelector('#files-sort-by'), query.get('sort')));
    if (refreshContent) {
        selectOption(document.querySelector('#files-sort-by'), getOptionElement(document.querySelector('#files-sort-by'), query.get('sort')), false);
    };
    document.querySelector('#files-sort-by-trigger').textContent = (await getPageText('/files', 'ad3423593bcf499abf67f07e8c04ce5f', 0)) + ' ' + (await getPageText('/files', document.querySelector('#files-sort-by').querySelector(`[data-value="${query.get('sort')}"]`).querySelector('span').dataset.i18nId, 0))
    if (query.get('sort') === 'type') {
        content.sort((a, b) => a.type.localeCompare(b.type));
    };
    if (query.get('sort') === 'name') {
        content.sort((a, b) => strip(a.path, '/').localeCompare(strip(b.path, '/')));
    };
    if (query.get('sort') === 'size') {
        content.sort((a, b) => a.size - b.size);
    };
    if (query.get('sort') === 'date') {
        content.sort((a, b) => {
            if (new Date(a.lm).getHours() < new Date(b.lm).getHours()) {
                return 1;
            } else {
                return -1;
            };
        });
    };
    if (query.get('r') === 'true') {
        content.reverse();
    };
    for (const item of content) {
        const itemElement = document.createElement('tr');
        itemElement.dataset.selected = 'false';
        itemElement.classList.add('items-list-item');
        itemElement.classList.add('files-list-file');
        let longPressTimer;
        itemElement.addEventListener('touchstart', function () {
            if (itemElement.dataset.selected === 'true') {
                itemElement.dataset.selected = 'false';
                itemElement.classList.remove('selected');
                container.removeAttribute('data-selected-item');
                container.removeAttribute('data-selected-item-parent-id');
                container.removeAttribute('data-selected-item-name');
            } else {
                const nodes = container.childNodes;
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].classList.remove('selected');
                    nodes[i].dataset.selected = 'false';
                };
                itemElement.dataset.selected = 'true';
                itemElement.classList.add('selected');
                container.selectedItem = item.id;
                container.selectedItemParentId = item.parent_id;
                container.selectedItemName = item.path;
            };
            itemElement.classList.add('long-pressing')
            longPressTimer = setTimeout(async () => {
                itemElement.classList.add('foreground');
                jCloudUIElements.overlays.showBlurryOverlay();
                await showFileInformationDialog(item, false, [function () {
                    jCloudUIElements.overlays.hideBlurryOverlay();
                    itemElement.classList.remove('foreground');
                }]);
            }, 600);
        });
        itemElement.addEventListener('touchend', function () {
            clearTimeout(longPressTimer);
            itemElement.classList.remove('long-pressing')
        });
        itemElement.addEventListener('touchcancel', function () {
            clearTimeout(longPressTimer);
            itemElement.classList.remove('long-pressing')
        });
        const pathElement = document.createElement('td');
        pathElement.classList.add('items-list-cell');
        pathElement.classList.add('files-list-item-path');
        const typeElement = document.createElement('td');
        typeElement.classList.add('items-list-cell');
        const sizeElement = document.createElement('td');
        sizeElement.classList.add('items-list-cell');
        const lmElement = document.createElement('td');
        lmElement.classList.add('items-list-cell');
        lmElement.innerHTML = new Intl.DateTimeFormat('de-DE', {
            hour12: false,
            dateStyle: 'short',
            timeStyle: 'short'
        }).format(new Date(item.lm.replace(' ', 'T'))).replace(',', '');
        itemElement.oncontextmenu = async function (event) {
            event.preventDefault();
            if (itemElement.dataset.selected === 'false') {
                const nodes = container.childNodes;
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].classList.remove('selected');
                    nodes[i].dataset.selected = 'false';
                };
                itemElement.dataset.selected = 'true';
                itemElement.classList.add('selected');
                container.dataset.selectedItem = item.id;
                container.dataset.selectedItemParentId = item.parent_id;
                container.dataset.selectedItemName = item.path;
            };
            await showFileInformationDialog(item, false, []);
        };
        let extension = '.' + getFileExtension(item.path);
        if (extension in MIME_TYPES && item.path[item.path.length - 1] != '/') {
            typeElement.textContent = (await getUiLabels()).FILE_TYPES[MIME_TYPES[extension]];
        } else if (item.path[item.path.length - 1] != '/') {
            typeElement.textContent = await getPageText('/files', 'dd7254231e8642b7bd24dd471d0de186', 0);
        } else {
            typeElement.textContent = await getPageText('/files', '427c3b55a1c7430e9e77c82930b48a19', 0);
        };
        itemElement.dataset.selected = 'false';
        itemElement.onclick = function () {
            if (itemElement.dataset.selected === 'true') {
                itemElement.dataset.selected = 'false';
                itemElement.classList.remove('selected');
                container.removeAttribute('data-selected-item');
                container.removeAttribute('data-selected-item-parent-id');
                container.removeAttribute('data-selected-item-name');
            } else {
                const nodes = container.childNodes;
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].classList.remove('selected');
                    nodes[i].dataset.selected = 'false';
                };
                itemElement.dataset.selected = 'true';
                itemElement.classList.add('selected');
                container.dataset.selectedItem = item.id;
                container.dataset.selectedItemParentId = item.parent_id;
                container.dataset.selectedItemName = item.path;
            };
        };
        if (item.path[item.path.length - 1] === '/') {
            itemElement.dataset.isdir = 'true';
            itemElement.ondblclick = async function () {
                await showFilesPage('', item.id);
            };
            pathElement.innerHTML = item.path.slice(1).slice(0, -1);
            sizeElement.innerHTML = '--';
        } else {
            itemElement.dataset.isdir = 'false';
            itemElement.ondblclick = async function () {
                const link = document.createElement('a');
                link.href = `https://jcloud-services.ddns.net:1024/file/${getCookie('User')}?type=file&id=${item.id}`;
                link.download = item.path.slice(1);
                link.click();
                URL.revokeObjectURL(link.href);
            };
            pathElement.innerHTML = item.path.slice(1);
            if (item.size < 1024) {
                sizeElement.innerHTML = item.size + ' B';
            } else if (item.size > 1024 && item.size < 1048576) {
                sizeElement.innerHTML = Math.floor(item.size / 1024) + ' KiB';
            } else if (item.size > 1048576 && item.size < 1073741824) {
                sizeElement.innerHTML = Math.floor(item.size / 1048576) + ' MiB';
            } else if (item.size > 1073741824 && item.size < 1099511627776) {
                sizeElement.innerHTML = Math.floor(item.size / 1073741824) + ' GiB';
            } else if (item.size > 1099511627776 && item.size < 1125899906842624) {
                sizeElement.innerHTML = Math.floor(item.size / 1099511627776) + ' TiB';
            };
        };
        pathElement.dataset.size = sizeElement.innerHTML;
        pathElement.dataset.lm = lmElement.innerHTML;
        itemElement.dataset.fileId = item.id;
        itemElement.dataset.fileName = item.path;
        itemElement.dataset.fileParentId = item.parent_id;
        itemElement.appendChild(pathElement);
        itemElement.appendChild(typeElement);
        itemElement.appendChild(sizeElement);
        itemElement.appendChild(lmElement);
        container.appendChild(itemElement);
    };
    document.querySelector('#files-number-of-items').innerHTML = content.length;
    if (content.length === 1) {
        document.querySelector('[data-i18n-id="5692853f8212455486dd5e1554ee33fe"]').dataset.i18nNumber = '0';
    } else {
        document.querySelector('[data-i18n-id="5692853f8212455486dd5e1554ee33fe"]').dataset.i18nNumber = '1';
    };
    await loadPageTexts('/files');
};

const showServerFilesPage = async function (path = '', stayOnPage = false, initial = false) {
    startLoading();
    let success = false;
    const container = document.querySelector('#files-items-container');
    document.querySelector('#files-new-directory').onclick = async function () { await createDirectoryOnServer(); };
    document.querySelector('#files-upload').onclick = async function () { await uploadFileOnServer(); };
    const user = getCookie('User');
    if ((!path) || path === '') {
        await fetch(`https://jcloud-services.ddns.net:1024/server-files-base-dir/${user}`, { credentials: 'include' })
            .then(async response => {
                if (response.status === 200) {
                    path = await response.text();
                } else if (response.status === 403) {
                    await jCloudUIElements.alert((await getUiLabels()).generalAlerts.accessDenied)
                    history.replaceState(null, '', `/home`);
                    await loadPageTexts('/home');
                    return;
                };
            })
            .catch(async err => {
                await jCloudUIElements.alert(err);
            });
    };
    if ((!path) || path === '') {
        stopLoading();
        history.replaceState(null, '', `/home`);
        return;
    };
    await fetch(`https://jcloud-services.ddns.net:1024/server-listdir/jakob.scheid@icloud.com/${path}`,
        {
            credentials: 'include'
        }
    )
        .then(async response => {
            if (response.status === 200) {
                success = true;
                container.innerHTML = '';
                const content = await response.json();
                for (const item of content) {
                    const itemElement = document.createElement('tr');
                    itemElement.dataset.selected = 'false';
                    itemElement.classList.add('items-list-item');
                    itemElement.classList.add('files-list-file');
                    let longPressTimer;
                    itemElement.addEventListener('touchstart', function () {
                        if (itemElement.dataset.selected === 'true') {
                            itemElement.dataset.selected = 'false';
                            itemElement.classList.remove('selected');
                        } else {
                            const nodes = container.childNodes;
                            for (let i = 0; i < nodes.length; i++) {
                                nodes[i].classList.remove('selected');
                                nodes[i].dataset.selected = 'false';
                            };
                            itemElement.dataset.selected = 'true';
                            itemElement.classList.add('selected');
                        };
                        itemElement.classList.add('long-pressing')
                        longPressTimer = setTimeout(async () => {
                            itemElement.classList.add('foreground');
                            jCloudUIElements.overlays.showBlurryOverlay();
                            await showFileInformationDialog(item, false, [
                                function () {
                                    jCloudUIElements.overlays.hideBlurryOverlay();
                                    itemElement.classList.remove('foreground');
                                }
                            ], true);
                        }, 600);
                    });
                    itemElement.addEventListener('touchend', function () {
                        clearTimeout(longPressTimer);
                        itemElement.classList.remove('long-pressing')
                    });
                    itemElement.addEventListener('touchcancel', function () {
                        clearTimeout(longPressTimer);
                        itemElement.classList.remove('long-pressing')
                    });

                    const pathElement = document.createElement('td');
                    pathElement.classList.add('items-list-cell');
                    pathElement.classList.add('files-list-file-path');
                    pathElement.classList.add('files-list-item-path');
                    const sizeElement = document.createElement('td');
                    sizeElement.classList.add('items-list-cell');
                    const lmElement = document.createElement('td');
                    lmElement.classList.add('items-list-cell');
                    lmElement.innerHTML = '';
                    itemElement.oncontextmenu = async function (event) {
                        event.preventDefault();
                        if (itemElement.dataset.selected === 'false') {
                            const nodes = container.childNodes;
                            for (let i = 0; i < nodes.length; i++) {
                                nodes[i].classList.remove('selected');
                                nodes[i].dataset.selected = 'false';
                            };
                            itemElement.dataset.selected = 'true';
                            itemElement.classList.add('selected');
                        };
                        await showFileInformationDialog(item, false, [], true);
                    };
                    itemElement.dataset.selected = 'false';
                    itemElement.onclick = function () {
                        if (itemElement.dataset.selected === 'true') {
                            itemElement.dataset.selected = 'false';
                            itemElement.classList.remove('selected');
                        } else {
                            const nodes = container.childNodes;
                            for (let i = 0; i < nodes.length; i++) {
                                nodes[i].classList.remove('selected');
                                nodes[i].dataset.selected = 'false';
                            };
                            itemElement.dataset.selected = 'true';
                            itemElement.classList.add('selected');
                        };
                    };
                    if (item.path[item.path.length - 1] === '/') {
                        itemElement.ondblclick = async function () {
                            await showServerFilesPage(item.full_path);
                        };
                        pathElement.innerHTML = item.path.slice(1).slice(0, -1);
                    } else {
                        itemElement.ondblclick = async function () {
                            const link = document.createElement('a');
                            link.href = `https://jcloud-services.ddns.net:1024/server-file/${getCookie('User')}/${item.full_path}?type=file`;
                            link.download = item.path.slice(1);
                            link.click();
                            URL.revokeObjectURL(link.href);
                        };
                        pathElement.innerHTML = item.path.slice(1);
                        if (item.size < 1024) {
                            sizeElement.innerHTML = item.size + ' B';
                        } else if (item.size > 1024 && item.size < 1048576) {
                            sizeElement.innerHTML = Math.floor(item.size / 1024) + ' KiB';
                        } else if (item.size > 1048576 && item.size < 1073741824) {
                            sizeElement.innerHTML = Math.floor(item.size / 1048576) + ' MiB';
                        } else if (item.size > 1073741824 && item.size < 1099511627776) {
                            sizeElement.innerHTML = Math.floor(item.size / 1073741824) + ' GiB';
                        } else if (item.size > 1099511627776 && item.size < 1125899906842624) {
                            sizeElement.innerHTML = Math.floor(item.size / 1099511627776) + ' TiB';
                        };
                    };
                    pathElement.dataset.size = sizeElement.innerHTML;
                    pathElement.dataset.lm = lmElement.innerHTML;
                    itemElement.appendChild(pathElement);
                    itemElement.appendChild(sizeElement);
                    itemElement.appendChild(lmElement);
                    container.appendChild(itemElement);
                };
                document.querySelector('#files-number-of-items').innerHTML = content.length;
                if (content.length === 1) {
                    document.querySelector('[data-i18n-id="5692853f8212455486dd5e1554ee33fe"]').dataset.i18nNumber = '0';
                } else {
                    document.querySelector('[data-i18n-id="5692853f8212455486dd5e1554ee33fe"]').dataset.i18nNumber = '1';
                };
                await loadPageTexts('/files');
            } else if (response.status === 403) {
                await jCloudUIElements.alert((await getUiLabels()).generalAlerts.accessDenied);
                if (initial) {
                    history.replaceState(null, '', '/home');
                    await loadPageTexts('/home');
                };
            } else {
                await jCloudUIElements.alert(await getPageText('/files', '6b87324c55614239a93a3bfc8b6ba526', 0))
            };
        })
        .catch(async err => {
            await jCloudUIElements.alert(err);
        });
    if (success) {
        if (initial) {
            stayOnPage = true;
        };
        if (stayOnPage) {
            history.replaceState(null, '', `/server-files/${path}`);
        } else {
            history.pushState(null, '', `/server-files/${path}`);
        };
        await loadPageTexts('/files')
        more_options_menu_hide();
        document.querySelector('#files').classList.remove('hidden');
        document.querySelector('#home').classList.add('hidden');
        document.querySelector('#user-details-on-footer').style.display = 'none';
        document.querySelector('#user-details-on-footer').setAttribute('class', 'hidden');
        container.classList.remove('hidden');
    };
    stopLoading();
};

export { hideFiles, showFilesPage, showProperties, showServerFilesPage, createDirectory, uploadFile, uploadFileOnServer };