TC
/
Cute-On-Off-Robot


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>📁 SD Browser</title>
    <script src="./jquery.min.js"></script>
    <link rel="stylesheet" href="./main.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body{
            background-color: rgb(238, 238, 238);
        }
    </style>
  </head>
  <body>
    <!-- Main contents of the webapp -->
    <div id="menu">
        <div id="menu">
            <button onclick="back()" class="back button">
                <img class="btnicon" src="img/left.svg">
            </button>
        </div>
    </div>
    <div class="container">
        <p class="addrbar">📁 /<span id="currentPath"></span></p>
        <div class="sdcontent">
            <ul id="folderContent" style="list-style-type:none;">
                
            </ul>  
        </div>
        <button onclick="parentDir();" class="inverse button" style="margin-top: 0.4em;">↩ Parent Dir</button>
        <button onclick="refreshDir();" class="inverse button" style="margin-top: 0.4em;">⟳ Refresh</button>
        
        <div class="fileopr disabled segment">
            <p>Selected file: <span id="selectedFilename"></span></p>
            <button class="inverse button" onclick="openFile();">Open</button>
            <button class="inverse button" onclick="deleteFile();">Delete</button>
        </div>
        <div class="uploadwrapper segment">
            <div class="upload-container">
                <input type="file" id="fileInput" multiple>
                <button class="inverse button" onclick="uploadFiles()">Upload Files</button>
            </div>
            <div id="uploadProgress">
                <div class="bar"></div>
            </div>
        </div>
        <div class="ui divider"></div>
        <small style="color: #1f1f1f;">Development SD Browser | imuslab</small>
    </div>
    <div id="messagebox">
        <p>Hello World</p>
    </div>
    <script>
        let currentPath = ""; //Do not need prefix or suffix slash
        let selectedFile = undefined;

        function formatBytes(bytes,decimals) {
            if(bytes == 0) return '0 Bytes';
            var k = 1024,
                dm = decimals || 2,
                sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        }

        function listDir(path=""){
            $("#currentPath").text(path);
            currentPath = path;
            selectedFile = undefined;
            $("#selectedFilename").text("");
            $(".fileopr").addClass('disabled');
            $("#folderContent").html("<small>Loading...</small>");
            $.ajax({
                url: "/api/fs/listDir?dir=" + path,
                method: "GET", 
                success: function(data){
                    $("#folderContent").html("");
                    if (path != ""){
                        //Not at root
                        $("#folderContent").append(`<li><a class="fileobject" onclick="parentDir();">↼ Back</a></li>`);
                    }
                    data.forEach(sdfile => {
                        let filename = sdfile.Filename;
                        let filesize = sdfile.Filesize;
                        let IsDir = sdfile.IsDir;

                        $("#folderContent").append(`<li><a class="fileobject" isdir="${IsDir}" filename="${filename}" onclick="openthis(this);">${IsDir?"📁":"📄"} ${filename} (${formatBytes(filesize, 2)})</a></li>`);
                    })
                },
                error: function(){
                    $("#folderContent").html("❌ Path Error");
                }
            });
        }
        listDir();

        function refreshDir(){
            listDir(currentPath);
        }

        function msgbox(message, succ=true){
            if (succ){
                $("#messagebox").removeClass("failed");
            }else{
                $("#messagebox").addClass("failed");
            }

            $("#messagebox p").text(message);
            $("#messagebox").stop().finish().fadeIn("fast").delay(5000).fadeOut("fast");
        }

        function openFile(){
            if (selectedFile == undefined){
                alert("No file selected");
                return;
            }

            window.open("/api/fs/download?path=/" + selectedFile.Filepath);
        }

        function deleteFile(){
            if (selectedFile == undefined){
                alert("No file selected");
                return;
            }

            $.ajax({
                url: "/api/fs/delete?path=/" +selectedFile.Filepath,
                method: "GET",
                success: function(data){
                    msgbox("File removed");
                    refreshDir();
                },
                error: function(){
                    msgbox("File remove failed", false);
                }
            });
        }

        function openthis(target){
            let filename = $(target).attr("filename");
            let isDir = $(target).attr("isdir") == "true";
            if (isDir){
                //Open directory
                if (currentPath == ""){
                    //Do not need prefix slash
                    listDir(filename);
                }else{
                    listDir(currentPath + "/" + filename);
                }
                
            }else{
                //Selected a file
                selectedFile = {
                    Filename: filename,
                    Filepath: currentPath + "/" + filename
                }
                $("#selectedFilename").text(filename);
                $(".fileopr").removeClass('disabled');
            }
        }

        function parentDir(){
            let pathChunks = currentPath.split("/");
            pathChunks.pop();
            pathChunks = pathChunks.join("/");
            listDir(pathChunks);
        }

        function back(){
            window.location.href = "index.html";
        }

        function updateProgressBar(progress){
            $("#uploadProgress .bar").css({
                "width": progress + "%",
            });
            $("#uploadProgress .bar").text(progress + "%");
        }
        
        function uploadFiles() {
            var fileInput = document.getElementById('fileInput');
            var files = fileInput.files;

            if (files.length === 0) {
                alert('No files selected.');
                return;
            }

            // Create a FormData object to send files as multipart/form-data
            var formData = new FormData();

            // Append each file to the FormData object
            for (var i = 0; i < files.length; i++) {
                formData.append('files[]', files[i]);
            }

            // Send the FormData object via XMLHttpRequest
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload?dir=' + currentPath, true); // Replace '/upload' with your ESP32 server endpoint
   
            // Track upload progress
            xhr.upload.addEventListener('progress', function(event) {
                if (event.lengthComputable) {
                    var percentComplete = (event.loaded / event.total) * 100;
                    console.log('Upload progress: ' + percentComplete.toFixed(2) + '%');
                    updateProgressBar(percentComplete.toFixed(2));
                } else {
                    console.log('Upload progress: unknown');
                }
            });

            xhr.onload = function() {
                if (xhr.status === 200) {
                    msgbox('File uploaded successfully.');
                } else {
                    msgbox('Error writing files to disk.', false);
                }
                refreshDir();
            };

            xhr.onerror = function() {
                msgbox('Error uploading files.');
            };
            xhr.send(formData);
        }
                
    </script>
</body>