TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
							<html>
    <head>
        <title>File Properties</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../script/semantic/semantic.css">
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
        <script type="text/javascript" src="../../script/ao_module.js"></script>
        <style>
            body{
                overflow:hidden;
            }

        </style>
    </head>
    <body id="filePropertiesWindow">
        <br>
        <div class="ui container">
            <h3 class="ui header">
                File Properties
                <div class="sub header">Basic File Information</div>
            </h3>
            <div class="ui divider"></div>
            <div id="properties">

            </div>
            <br>
            <button style="display:none;" class="ui small blue fluid button singleFileOnly" onclick="changeDefaultWebApp();">Change Default WebApp</button>
            <button style="margin-top: 4px;" class="ui small fluid button linuxonly" onclick="openFilePermissionPanel();">Change File Permissions</button>
            <br>
        </div>
        <div id="filesizeLoader" class="ui active dimmer">
            <div class="ui indeterminate text loader">Calculating File Size</div>
        </div>
        <script>
            //Initiate the view model
            var files = ao_module_loadInputFiles();
            var fileProperties = [];
            var fileInfo = {};
            function initFileProperties(){
                $("#properties").html("");
                if (files.length == 1){
                    //There are only 1 file to be shown
                    getFileProp(files[0], renderSingleObject);
                }else if (files.length > 1){
                    for (var i =0; i < files.length; i++){
                        getFileProp(files[i], function(data){
                            fileProperties.push(data);
                            if (fileProperties.length == files.length){
                                renderMultipleObjects();
                            }
                        });
                    }
                }
            }

            initFileProperties();
          

            //Hide windows / linux only operations
            $.get("/system/info/getArOZInfo", function(data){
                if (data.HostOS == "windows"){
                    $(".linuxonly").hide();
                }else{
                    $(".windowsonly").hide();
                }
            });

            function getFileProp(vpath, callback){
                $.ajax({
                    url: "../../system/file_system/getProperties",
                    data: {path: vpath},
                    method: "POST",
                    success: function(data){
                        callback(data);
                        fileInfo = data;
                        //Initialize system theme
                        fpw_loadPreference("file_explorer/theme",function(data){
                            if (data.error === undefined){
                                if (data == "darkTheme"){
                                    fpw_toggleDarkTheme();
                                }else{
                                    //White theme. Do nothing
                                }
                            }
                        });

                    }
                })
            }

            function openFilePermissionPanel(){
                var hashPassthrough = encodeURIComponent(JSON.stringify(files));
                ao_module_newfw({
                    url: "SystemAO/file_system/file_permission.html#" + hashPassthrough,
                    width: 340,
                    height: 480,
                    appicon: "SystemAO/file_system/img/properties.png",
                    title: "File Permissions",
                });
            }

            function renderMultipleObjects(){
                hideLoader();
                var filesizeSum = sumProperties(fileProperties, "Filesize");
                $("#properties").append(ui_getInput(fileProperties[0].VirtualDirname + "/", "Root Name"));
                var filecount = 0;
                var foldercount = 0;
                for (var i =0; i < fileProperties.length; i++){
                    if (fileProperties[i].IsDirectory){
                        foldercount++;
                    }else{
                        filecount++;
                    }
                }
                $("#properties").append(ui_getText("Multiple selections"));
                $("#properties").append(ui_getText(filecount + " Files"));
                $("#properties").append(ui_getText(foldercount + " Folders"));

                //Append other properties as table
                $("#properties").append(ui_getTable(
                        [],
                        [
                            ["Virtual Directory", fileProperties[0].VirtualDirname + "/"],
                            ["Storage Directory", fileProperties[0].StorageDirname + "/"],
                            ["Total Size", bytesToSize(filesizeSum) + ` (${filesizeSum} bytes)`],
                        ]
                    ));

                
            }

            function sumProperties(data, propName){
                var sum = 0;
                for (var i = 0; i < data.length; i++){
                    sum += data[i][propName];
                }
                return sum;
            }
            
            //Render one object property to the ui element
            function renderSingleObject(data){
                hideLoader();
                if (data.error !== undefined){
                    //Something went wrong
                    $("#properties").append(`<h4 class="ui header">
                        <i class="question icon"></i>
                        <div class="content">
                            File Properties Unknown
                            <div class="sub header">The system were unable to read the selected file properties.</div>
                        </div>
                    </h4>
                    <div class="ui divider"></div>
                    <small>${data.error}</small>
                    `);
                }else{
                    //Append Filename
                    var filesizeText = "File Size";
                    if (data.IsDirectory){
                        $("#properties").append(ui_getInput(data.Basename, "Folder Name"));
                        filesizeText = "Folder Size";
                    }else{
                        $("#properties").append(ui_getInput(data.Basename, "File Name"));
                    }
                    
                    //Append MIME Type
                    $("#properties").append(ui_getText(data.MimeType));
                    
                    //Get the default opener
                    if (!data.IsDirectory){
                      

                        //Check if this file is shortcut
                        if ( data.Basename.split(".").pop() == "shortcut"){
                            //This is shortcut file
                            $("#properties").append(ui_getTable(
                                        [],
                                        [
                                            ["Virtual Path", data.VirtualPath],
                                            ["Storage Path", data.StoragePath],
                                            ["Permission", data.Permission],
                                            ["Last Modified", generateDisplayLastModTime(data.LastModTime)],
                                            ["File Type", "System Shortcut"],
                                            ["Owner",data.Owner],

                                        ]
                                    ));
                        }else{
                            //Normal Files
                            $(".singleFileOnly").show();
                            $.ajax({
                                url: "../../system/modules/getDefault",
                                method: "GET",
                                data: {
                                    opr: "launch",
                                    ext: "." + data.Basename.split(".").pop(),
                                    mode: "launch"
                                },
                                success: function(openerinfo) {
                                    //Check if the module is set.
                                    var defaultWebAppField = ["Default WebApp",`<img class="ui mini spaced image" style="margin-left: 0px; padding-right: 8px;" src="../../${openerinfo.IconPath}">` + openerinfo.Name];
                                    if ( openerinfo.Name == undefined){
                                        //Not set. 
                                        defaultWebAppField = ["Default WebApp", `<a href="#" onclick="changeDefaultWebApp();">Set Default WebApp</a>`];
                                    }
                                    //Append other properties as table
                                    $("#properties").append(ui_getTable(
                                        [],
                                        [
                                            defaultWebAppField,
                                            ["Virtual Path", data.VirtualPath],
                                            ["Storage Path", data.StoragePath],
                                            [filesizeText, bytesToSize(data.Filesize) + ` (${data.Filesize} bytes)`],
                                            ["Permission", data.Permission],
                                            ["Last Modified", generateDisplayLastModTime(data.LastModTime)],
                                            ["File Type", "File"],
                                            ["Owner",data.Owner],

                                        ]
                                    ));
                                }
                            });
                        }
                        
                    }else{
                        $("#properties").append(ui_getTable(
                            [],
                            [
                                ["Virtual Path", data.VirtualPath],
                                ["Storage Path", data.StoragePath],
                                [filesizeText, bytesToSize(data.Filesize) + ` (${data.Filesize} bytes)`],
                                ["Permission", data.Permission],
                                ["Last Modified", generateDisplayLastModTime(data.LastModTime)],
                                ["File Type", "Folder"],
                                ["Owner",data.Owner],

                            ]
                        ));
                    }
                   

                }
                
            }

            function hideLoader(){
                $("#filesizeLoader").hide();
                $("body").css('overflow-y',"auto");
            }

            //Model rendering scripts
            function ui_getInput(value, placeholder="", type="text"){
                return `<div class="ui fluid small input">
                            <input type="${type}" placeholder="${placeholder}" value="${value}" readonly="true">
                        </div>`
            }

            function ui_getText(value, color="black"){
                return `<p style="color:${color}; margin-bottom:0px;">${value}</p>`;
            }

            function ui_getDivider(){
                return `<div class="ui divider"></div>`;
            }

            //head is a 1D array and table is 2D array
            function ui_getTable(heads, table){
                html =  `<table class="ui very basic fluid table">`;
                if (heads.length > 0){
                    html += `<thead><tr>`;
                    for (var i =0; i < heads.length; i++){
                        html += `<th>${heads[i]}</th>`;
                    }
                    html += `</tr></thead>`;
                }
                html += `<tbody>`;
                for (var i =0; i < table.length; i++){
                    html += `<tr>`;
                    for (var j =0; j < table[i].length; j++){
                        html += `<td style="word-break: break-all;">${table[i][j]}</td>`
                    }
                    html += `</tr>`;
                }
                
                html += `</tbody>
                        </table>`;
                return html
            }

            function bytesToSize(bytes) {
                var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                if (bytes == 0) return '0 Byte';
                var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
                return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
            }

            /*

            Updates Oct 2020 - Matching File Explorer Theme on other file system tabs

            */
           
            function fpw_toggleDarkTheme(){
                $("#filePropertiesWindow").css({
                    "background-color":"#242330",
                    "color":"white",
                });

                $("#filePropertiesWindow td,.header,p,div").css({
                    "color":"white",
                });

                $("#filePropertiesWindow .input").addClass("inverted transparent big")
            }


            function fpw_loadPreference(key, callback){
                $.get("../../system/file_system/preference?key=" + key,function(data){
                    callback(data);
                });
            }


            /*
                Updates 30 Jan 2021: Added change of file opener
            */

             //Open Opener Selector for the given file
            function changeDefaultWebApp(){
                var ext = fileInfo.Ext;
                var openFileList = [];
                var openFileObject = {
                    filepath: fileInfo.VirtualPath,
                    filename: fileInfo.Basename,
                }
                openFileList.push(openFileObject);
                var openParamter = encodeURIComponent(JSON.stringify(openFileObject));
                ao_module_newfw({
                    url: "SystemAO/file_system/defaultOpener.html#" + openParamter,
                    width: 320,
                    height: 510,
                    appicon: "SystemAO/file_system/img/opener.png",
                    title: "Default WebApp for " + ext,
                    parent: ao_module_windowID,
                    callback: "handleRefresh"
                });
            }

            function handleRefresh(){
                //Default opener changed. Update the display
                initFileProperties();
            }

            /*
                Updates 9 April 2021: Added day compare for last modification days
            */

            function generateDisplayLastModTime(lastModTime){
                console.log(lastModTime);

                //Try to split the date into js date format
                var dateInfo = (lastModTime.split(" ")[0]).split("-");
                var modTime = new Date(dateInfo[0],dateInfo[1],dateInfo[2]);
                var diff = calcDate(new Date(), modTime);
                var displayText = "Unknown";
                if (diff[2] > 0){
                    //years
                    displayText = diff[2] + " year";
                    if (diff[2] > 1){
                        displayText += "s"
                    }

                    displayText += " ago";
                    
                }else if (diff[1] > 0){
                    //months
                    displayText = diff[1] + "  month";
                    if (diff[1] > 1){
                        displayText += "s"
                    }

                    displayText += " ago";
                }else if (diff [0] > 0){
                    //days
                    displayText = diff[0] + "  day";
                    if (diff[0] > 1){
                        displayText += "s"
                    }

                    displayText += " ago";
                }else{
                    //just now
                    displayText = "Today"
                }

                return displayText + " (" + lastModTime + ")";
            }

            function calcDate(date1 = new Date(),date2) {
                var diff = Math.floor(date1.getTime() - date2.getTime());
                var day = 1000 * 60 * 60 * 24;

                var days = Math.floor(diff/day);
                var months = Math.floor(days/31);
                var years = Math.floor(months/12);


                return [days, months, years];
            }
        </script>
    </body>
</html>