TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
							<!DOCTYPE html>
<html>
<head>
    <title>File Properties</title>
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
	<meta charset="UTF-8">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script src="../../script/jquery.min.js"></script>
	<script src="../../script/semantic/semantic.min.js"></script>
    <script type="text/javascript" src="../../script/ao_module.js"></script>
    <style>
        .hidden{
            display:none;
        }

        .disabled{
            opacity: 0.5;
            pointer-events: none;
        }

        .colorblock{
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: bottom;
            margin-right: 12px;
        }

        .blue.colorblock{
            background-color: #52bdf2;
        }

        .grey.colorblock{
            background-color: #b9b9b9;
        }

        .yellow.colorblock{
            background-color: #e5e75c;
        }

        .ui.table tr td{
           border-top: 0px solid transparent !important; 
        }
        
        .overlap.bar{
            position: absolute !important; 
            top:0px; 
            left: 0px;
        }

        .nointeract{
            pointer-events: none;
            user-select: none; 
        }

        #restorableList{
            max-height: 300px;
            overflow-y: scroll;
            padding-right: 4px;
        }
        
        .timeleft{
            width: 30px;
            height: 30px;
            display: inline-block;
            user-select: none; 
            vertical-align: baseline;
            margin-bottom: -10px;
            margin-right: 4px;
        }

        .closebtn{
            position: absolute;
            right: 4px;
            top: 4px;
        }
    </style>
</head>
<body>
    <br>
    <div class="ui container">
        <h3 class="ui header">
            Backup & Restore
            <div class="sub header">Show restore points for the selected virtual disk</div>
        </h3>
        <div class="ui divider"></div>
       <div id="error" class="ui red inverted segment hidden">
            <h4 class="ui header">
                <i class="remove icon"></i>
                <div class="content">
                    List Restore Failed
                    <div class="sub reason header" style="color: white;">Unknown Vroot paramter given</div>
                </div>
            </h4>
       </div>
       <div id="fileinfo" class="ui segment" style="display:none;">
        <h4 class="ui header">
            <div class="content">
                <span class="filename">No File Selected</span>
                <div class="sub header relpath">N/A</div>
            </div>
        </h4>
        <div class="ui divider"></div>
        <span class="restorePoint">N/A</span><br>
        <span class="deleteTime">N/A</span><br>
        <span class="deleteRemainingTime">N/A</span><br>
        <button class="circular ui icon basic small button closebtn" onclick='$("#fileinfo").slideUp("fast");'>
            <i class="icon remove"></i>
        </button>
       </div>
        <div id="restorableList" class="ui middle aligned divided list">
            <div class="item">
              <img class="ui mini image nointeract" src="../../img/system/file-notfound.svg">
              <div class="content">
                No Restorable File(s) for this virtual disk.
              </div>
            </div>
          </div>
        <div class="ui checkbox">
            <input type="checkbox" name="showhidden" autocomplete="false" onchange="toggleHiddenFiles(this.checked);">
            <label>Show hidden / cache files</label>
        </div>
        <div class="ui divider" style="margin-top: 8px; margin-bottom: 8px;"></div>
        <br>
           <button class="ui right floated button" onclick="ao_module_close();">Close</button>
        <br>
    </div>
        
    <br><br>
    <script>
        var vrootID = "";

        $(".ui.checkbox").checkbox();
        //Extract vroot id from the window hash
        if (window.location.hash.length > 1){
            vrootID = JSON.parse(decodeURIComponent(window.location.hash.substr(1)));

            if (vrootID.length >= 1){
                //At least 1 vroot is passed in
                listRestorableFiles(vrootID[0]);
            }else{
                $("#error").removeClass("hidden");
            }
            
        }else{
            $("#error").removeClass("hidden");
        }

        function showFileInfo(object){
            var filedata = $(object).attr("filedata");
            filedata = JSON.parse(decodeURIComponent(filedata));
            console.log(filedata);
            //Show information on page
            $("#fileinfo").find(".filename").text(filedata.Filename + ` (${ao_module_utils.formatBytes(filedata.Filesize, 2)})`);
            
            //Hide the filename in relpath
            var shortenRelpath = filedata.RelpathOnDisk.split("/");
            shortenRelpath.pop();
            shortenRelpath = shortenRelpath.join("/") + "/";
            $("#fileinfo").find(".relpath").text(shortenRelpath);
            $("#fileinfo").find(".deleteTime").text("Delete Time: " + timeConverter(filedata.DeleteTime));
            $("#fileinfo").find(".restorePoint").text("Restore Location: " + (filedata.RestorePoint));
            $("#fileinfo").find(".deleteRemainingTime").text("Complete Delete in: " + secondsToHms(filedata.RemainingTime));

            $("#fileinfo").slideDown('fast');
        }


        function secondsToHms(d) {
            d = Number(d);
            var h = Math.floor(d / 3600);
            var m = Math.floor(d % 3600 / 60);
            var s = Math.floor(d % 3600 % 60);

            var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
            var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes") : "";
            return hDisplay + mDisplay; 
        }

        function timeConverter(UNIX_timestamp){
            var a = new Date(UNIX_timestamp * 1000);
            var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
            var year = a.getFullYear();
            var month = months[a.getMonth()];
            var date = a.getDate();
            var hour = a.getHours();
            var min = a.getMinutes();
            var sec = a.getSeconds();
            var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ;
            return time;
        }

        function toggleHiddenFiles(status=undefined){
            if (status == undefined){
                $(".hiddenfile").slideToggle("fast");
            }else if (status == true){
                $(".hiddenfile").slideDown("fast");
            }else if (status == false){
                $(".hiddenfile").slideUp("fast");
            }
            
        }


        function listRestorableFiles(rootID){
            $.ajax({
                url: "/system/backup/listRestorable",
                data: {vroot: rootID},
                success: function(data){
                    if (data.error !== undefined){
                        $("#error").find(".reason").texxt(data.error);
                    }else{
                        //Sort the result by latest first
                        data.RestorableFiles.sort(function(a, b) {
                            return b.DeleteTime - a.DeleteTime;
                        });

                        //Display the result
                        $("#restorableList").html("");
                        data.RestorableFiles.forEach(fileObject => {
                            let thisFileData = encodeURIComponent(JSON.stringify(fileObject));

                            var timerIcon = "100.svg";
                            if (fileObject.RemainingTime < 75600){
                                timerIcon = "87_5.svg"
                            }else if (fileObject.RemainingTime < 64800){
                                timerIcon = "75.svg"
                            }else if (fileObject.RemainingTime < 54000){
                                timerIcon = "62_5.svg"
                            }else if (fileObject.RemainingTime < 43200){
                                timerIcon = "50.svg"
                            }else if (fileObject.RemainingTime < 32400){
                                timerIcon = "37_5.svg"
                            }else if (fileObject.RemainingTime < 21600){
                                timerIcon = "25.svg"
                            }else if (fileObject.RemainingTime < 10800){
                                timerIcon = "12_5.svg"
                            }else if (fileObject.RemainingTime < 7200){
                                timerIcon = "0.svg"
                            }

                            var deleteTimeLeftHumanReadable = secondsToHms(fileObject.RemainingTime);

                            var fileIcon = "../../img/system/file-restore.svg";
                            var isHidden = "";
                            if (fileObject.IsHidden == true){
                                fileIcon = "../../img/system/file-restore-hidden.svg";
                                isHidden = "hiddenfile";
                            }

                            $("#restorableList").append(`<div class="item restorableFile ${isHidden}" filedata="${thisFileData}">
                                <div class="right floated content">
                                    <div class="timeleft" title="Will be deleted in ${deleteTimeLeftHumanReadable}">
                                        <img class="ui fluid image" src="../../img/icons/backup/${timerIcon}"/>
                                    </div>
                                    <div class="ui tiny button" onclick="showFileInfo(this.parentNode.parentNode)">Info</div>
                                    <div class="ui tiny green  button">Restore</div>
                                </div>
                                
                                <div class="content">
                                    <p style="word-break: break-all;"><img class="ui mini spaced image nointeract" src="${fileIcon}">
                                        ${fileObject.Filename}
                                    </p>
                                </div>
                            </div>`);
                        });

                        $(".hiddenfile").hide();
                    }
                }
            })
        }
    </script>
</body>
</html>