html/src/edit.js - master - SoRusV/src_xendil

html/src/edit.js
613 строк20 KB
ruslan
Initial commit
29 окт 2024, 11:18
29 окт 2024, 11:185c4dcf5
let BtnFileInput = document.getElementById("idBtnFileInput");
let EditPath = document.getElementById("idEditPath");
let Editor = document.getElementById("idEditor");
let Tree = document.getElementById("idTree");
var ListFile;
var vars = {};

// MakeMenuNet(document.getElementById('MenuNet'));
// function FRefresh(b) {
//     RefreshPath("/");
// };

// MakeMenuNet(document.getElementById('MenuNet'), undefined, FRefresh);
MakeMenuNet(document.getElementById('MenuNet'), undefined, function(){setTimeout(FRefresh, 1)}, []);


function FRefresh(J) {
    document.getElementById("idBtnSave").style.display = "none";
    Editor.value="";
    RefreshPath("/");
};

function isTextFile(path){
    var ext = /(?:\.([^.]+))?$/.exec(path)[1];
    if(typeof ext !== undefined){
        switch(ext){
            case "txt":
            case "htm":
            case "html":
            case "js":
            case "json":
            case "c":
            case "h":
            case "hpp":
            case "cpp":
            case "css":
            case "xml":
                return true;
        }
    }
    return false;
};

function isImageFile(path){
    var ext = /(?:\.([^.]+))?$/.exec(path)[1];
    if(typeof ext !== undefined){
        switch(ext){
            case "png":
            case "jpg":
            case "gif":
            case "ico":
                return true;
        }
    }
    return false;
};

function isHideFile(path){
    var ext = /(?:\.([^.]+))?$/.exec(path)[1];
    if(typeof ext !== undefined){
        switch(ext){
            case "htm":
            case "ico":
            case "gz":
                return true;
        }
    }
    return false;
};

function LoadPreview(path){
    document.getElementById("idEditor").style.display = "none";
    document.getElementById("idPreview").style.display = "block";
    if(_ip=="")
        document.getElementById("idPreview").innerHTML = '<img src="'+path+'" style="max-width:100%; max-height:100%; margin:auto; display:block;" />';
    else
        document.getElementById("idPreview").innerHTML = '<img src="'+"http://" + _ip + path+'" style="max-width:100%; max-height:100%; margin:auto; display:block;" />';
};

function LoadEditor(path) {
    document.getElementById("idPreview").style.display = "none";
    document.getElementById("idEditor").style.display = "block";
    WaitShow();
    HttpFileGet(path);
}

/// ------------------------- uploader -----------------------
var xmlHttp;

function FileNameCorrect(filename){
    console.log("filename="+filename);
    let ext = /(?:\.([^.]+))?$/.exec(filename)[1];
    let name = /(.*)\.[^.]+$/.exec(filename)[1];
    console.log("ext="+ext);
    console.log("name="+name);
    if (typeof name != undefined) {
      //  if (name.length > 8)
        //    name = name.substring(0, 8);
        filename = name;
    }
    if (typeof ext != undefined) {
        if (ext == "html")
            ext = "htm";
        else if (ext == "jpeg")
            ext = "jpg";
        filename = filename + "." + ext;
    }
    return filename;
};

function FindBinFile(E)
{
    if (E.files.length === 0)
        return -1;
    let BinCount=0;
    let iBin=-1;
    for(let i=0; i<E.files.length; i++) { /// test: only 1 *.bin
        let ext = /(?:\.([^.]+))?$/.exec(E.files[i].name)[1];
        if(ext=="bin" || ext=="BIN") {
            BinCount++;
            iBin=i;
        }
    }
    if(BinCount>1){
        alert("Error: only one flash-file in one upload");
        return -1;
    }
    return iBin;
}

function onChangeBtnFileInput(E) {
    if(FindBinFile(E)<0)
        return;
    let filename="";
    if(E.files.length==1)
        filename= FileNameCorrect(E.files[0].name);
    if (EditPath.value == "/" || EditPath.value.lastIndexOf("/") == 0)
        EditPath.value = "/" + filename;
    else
        EditPath.value = EditPath.value.substring(0, EditPath.value.lastIndexOf("/") + 1) + filename;
};

// function onHttpUploadProcess() {
//     console.log("+");
//     if (xmlHttp.readyState == 4) {
//         if (xmlHttp.status != 200)
//             alert("ERROR http [" + xmlHttp.status + "]: " + xmlHttp.responseText);
//         else
//             RefreshPath(EditPath.value);
//     }
// };
//
function onClickBtnUpload() {
    Upload(JNetUdpDShow);
//     let Wrap=document.getElementById('idDivWait');
//
//     // function updateProgress(){
//     //     Div.innerHTML+="+";
//     // }
//     //
//     // let iBin=FindBin(BtnFileInput);
//     // if(iBin<0)
//     //     return;
//     // xmlHttp = new XMLHttpRequest();
//     // xmlHttp.onreadystatechange = onHttpUploadProcess;
//     // var formData = new FormData();
//     // if(BtnFileInput.files.length==1)
//     //     formData.append("data", BtnFileInput.files[0], EditPath.value);
//     // else {
//     //     for (let i = 0; i < BtnFileInput.files.length; i++) {
//     //         if (i != iBin)
//     //             formData.append("data", BtnFileInput.files[i], EditPath.value + FileNameCorrect(BtnFileInput.files[i].name));
//     //     }
//     //     if(iBin<BtnFileInput.files.length)  /// *.bin file send last
//     //         formData.append("data", BtnFileInput.files[iBin], EditPath.value + FileNameCorrect(BtnFileInput.files[iBin].name));
//     // }
//     // xmlHttp.upload.addEventListener("progress", updateProgress);
//     // xmlHttp.addEventListener("loadend", LoadEnd);
//     // xmlHttp.open("POST", "http://" + _ip + "/edit");
//     // WaitShow();
//     // xmlHttp.send(formData);
//     let iSend;
//     let iBin=FindBinFile(BtnFileInput);
//     let Div;
//
//     // xmlHttp.onreadystatechange = onHttpUploadProcess;
//     function FileSend(Index, File, Path){
//         console.log("+++++ FileSend "+Path);
//         iSend=Index;
//         var formData = new FormData();
//         formData.append("data", File, Path);
//         xmlHttp = new XMLHttpRequest();
//          xmlHttp.addEventListener("loadend", LoadEnd);
//         xmlHttp.open("POST", "http://" + _ip + "/edit");
//       // xmlHttp.onreadystatechange = onHttpUploadProcess;
//         xmlHttp.send(formData);
//
//         Div = document.createElement('div');
//         Div.innerHTML="Sending ["+iSend+"]"+Path;
//         Div.id="idDivWaitLog";
//         Wrap.appendChild(Div);
//    //     console.log("----- FileSend "+Path);
//     };
//
//     function LoadEnd(){
//         Div.innerHTML=Div.innerHTML+" ... Ok";
//         RefreshPath(EditPath.value);
//         // if(iSend==iBin || (iBin<0 && iSend==BtnFileInput.files.length-1)){ /// end
//         //     while(true){
//         //         let wl = document.getElementById('idDivWaitLog');
//         //         if(wl)
//         //             wl.remove();
//         //         else
//         //             break;
//         //     };
//         //     WaitHide();
//         //     return;
//         // }
//         // //else{
//         //     let i=iSend+1;
//         //     if(i==BtnFileInput.files.length)    /// it's not end, end was up
//         //         i=iBin;
//         //     FileSend(i, BtnFileInput.files[i], EditPath.value + FileNameCorrect(BtnFileInput.files[i].name));
//         // // }
//         // // if(BtnFileInput.files.length && iSend!=iBin)
//         // //     FileSend(iSend+1, BtnFileInput.files[iSend+1], EditPath.value + FileNameCorrect(BtnFileInput.files[iSend+1].name));
//     };
//
//     WaitShow();
//     xmlHttp.open("POST", "http://" + _ip + "/edit");
//     let i=0;
//     if( BtnFileInput.files.length>1 && iBin==0) /// *.bin file send last
//         i=1;
//     FileSend(i, BtnFileInput.files[i], EditPath.value + FileNameCorrect(BtnFileInput.files[i].name));
//  //   if(iBin>0)
//   //      FileSend(iBtn, BtnFileInput.files[iBin], EditPath.value + FileNameCorrect(BtnFileInput.files[iBin].name));
//
//
//   //  WaitHide();
};

function FuncRet(){
    //WaitHide();
    RefreshPath(EditPath.value);
};
function Upload(JNetUdpD)
{
    let iBin=FindBinFile(BtnFileInput);
    //if(iBin<0)
    //   return;
    //if(!bRLock)
    {
        WaitShow();
        let J=[];
        if(BtnFileInput.files.length==1)
            J[0]={file: BtnFileInput.files[0],  path: EditPath.value+FileNameCorrect(BtnFileInput.files[0].name)};
        else {
            let i0=0;
            for (let i = 0; i < BtnFileInput.files.length; i++)
                if (i != iBin){     /// *.bin file upload last
                    J[i0] = {file: BtnFileInput.files[i], path: EditPath.value + FileNameCorrect(BtnFileInput.files[i].name)};
                    i0++;
                }
            if(iBin>=0)
                J[i0] = {file: BtnFileInput.files[iBin], path: EditPath.value + FileNameCorrect(BtnFileInput.files[iBin].name)};
        }
        let a=0;
        WokerSend(J, JNetUdpD, FuncRet, "POST");
    }
}
function onClickBtnUploadAll() {
    Upload(JNetUdp.NetUdp);
    // let iBin=FindBinFile(BtnFileInput);
    // //if(iBin<0)
    //  //   return;
    // //if(!bRLock)
    // {
    //     WaitShow();
    //     let J=[];
    //     if(BtnFileInput.files.length==1)
    //         J[0]={file: BtnFileInput.files[0],  path: EditPath.value};
    //     else {
    //         let i0=0;
    //         for (let i = 0; i < BtnFileInput.files.length; i++)
    //             if (i != iBin){     /// *.bin file upload last
    //                 J[i0] = {file: BtnFileInput.files[i], path: EditPath.value + FileNameCorrect(BtnFileInput.files[i].name)};
    //                 i0++;
    //             }
    //         if(iBin>=0)
    //             J[i0] = {file: BtnFileInput.files[iBin], path: EditPath.value + FileNameCorrect(BtnFileInput.files[iBin].name)};
    //     }
    //     let a=0;
    //     WokerSend(J, JNetUdp.NetUdp, FuncRet, "POST");
    // }
};

function onClickBtnDel() {
    let E = GetSelect();
    if(E) {
        let result = confirm("Delete "+E.innerHTML+"?");
        if (result) {
            HttpFileDelete(E.id); //EditPath);
        }
    }
    else
        alert("No selected file");
};

function onClickBtnDownload() {
    let E = GetSelect();
    if (E)
        HttpFileDownload(E.id); //EditPath);
    else
        alert("No selected file")
};

function onClickBtnSave() {
    let E = GetSelect();
    if(E)
        HttpFileSave(E.id, Editor.value, "text/html");
};
///------------------- tree ----------------------
function CreateTree(element){//}, editor) {
    HttpGetFileList(Tree, "/");
    return this;
};

function RefreshPath (sPath) {
    if (sPath.lastIndexOf('/') < 1) {
        if(Tree.childNodes.length>0)
            Tree.removeChild(Tree.childNodes[0]);
        HttpGetFileList(Tree, "/");
    }
    else {
        sPath = sPath.substring(0, path.lastIndexOf('/'));
        var leaf = document.getElementById(sPath).parentNode;
        if (leaf.childNodes.length == 3)
            leaf.removeChild(leaf.childNodes[2]);
        HttpGetFileList(leaf, sPath);
    }
};

function AddFileToTree(path, name, size) {
    var ItemFile = document.createElement("li");
    ItemFile.id = (((path == "/") ? "" : path) + "/" + name); //.toLowerCase();
    ItemFile.textContent = name; //.toLowerCase();
    ItemFile.onclick = function(e) {
        ListOnClick(e);
    }
    ItemFile.ondblclick=function(e) {
        if (isImageFile(ItemFile.id))
            LoadPreview(ItemFile.id);
        // if (isTextFile(ItemFile.id))
        else
            LoadEditor(ItemFile.id);
};
    return ItemFile;
};

function AddDirToTree(path, name, disabled) { /// while not use
    var leaf = document.createElement("li");
    var check = document.createElement("input");
    check.type = "checkbox";
    check.id = (((path == "/") ? "" : path) + "/" + name).toLowerCase();
    if (typeof disabled !== "undefined" && disabled) check.disabled = "disabled";
    leaf.appendChild(check);
    var label = document.createElement("label");
    label.for = check.id;
    label.textContent = name.toLowerCase();
    leaf.appendChild(label);
    check.onchange = function(e) {
        if (check.checked) {
            if (leaf.childNodes.length == 3) leaf.removeChild(leaf.childNodes[2]);
            httpGet(leaf, check.id);
        }
    };
    label.onclick = function(e) {
        if (!check.checked) {
            check.checked = true;
            if (leaf.childNodes.length == 3) leaf.removeChild(leaf.childNodes[2]);
            httpGet(leaf, check.id);
        } else {
            check.checked = false;
        }
    };
    leaf.oncontextmenu = function(e) {
        e.preventDefault();
        e.stopPropagation();
        showContextMenu(e, check.id, false);
    };
    return leaf;
};

function MakeList(parent, path, items) {
    function sortByID(a, b) {
        // Если данные имеют тип string то преобразуем их в одинокавый регистр
        a = a.name.toLowerCase();
        b = b.name.toLowerCase();
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    }
    let b=document.getElementById("idShowAllFiles").checked;
    ListFile = document.createElement("ul");
    ListFile.onselectstart = function() {
        return false;
    };
    parent.appendChild(ListFile);
    items.sort(sortByID);
    var ll = items.length;
    for (var i = 0; i < ll; i++) {
        var item = items[i];
        var itemEl;
        if (item.type === "file") {
            if(b || !isHideFile(item.name)) {
                itemEl = AddFileToTree(path, item.name, item.size);
                ListFile.appendChild(itemEl);
            }
        }
        else {
            itemEl = AddDirToTree(path, item.name);
            ListFile.appendChild(itemEl);
        }
    }
    let H=ListFile.clientHeight;//style.height;
    Editor.style.height="500px";
};

function onHttpFileDeleteReady(path) {
    return function() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status != 200) {
                alert("ERROR[" + xmlHttp.status + "]: " + xmlHttp.responseText);
            } else {
                if (path.lastIndexOf('/') < 1) {
                    path = '/';
                    RefreshPath("/");
                }
                else {
                    path = path.substring(0, path.lastIndexOf('/'));
                    var leaf = document.getElementById(path).parentNode;
                    if (leaf.childNodes.length == 3)
                        leaf.removeChild(leaf.childNodes[2]);
                    RefreshPath(path);
                }
            }
            WaitHide();
        }
    }
};

function HttpFileDelete(filename) {
    xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = onHttpFileDeleteReady(filename);
    WaitShow();
    var formData = new FormData();
    formData.append("path", filename);
    let r;
    if(_ip=="")
        r= "/edit";
    else
        r= "http://" + _ip + "/edit";
    xmlHttp.open("DELETE", r, false);
    xmlHttp.send(formData);
};

function HttpFileDownload(filename) {
    // var link = document.createElement("a");
    // link.download = name;
    // link.href = uri;
    // link.dispatchEvent(evt);

    var link = document.createElement('a');
    if(_ip=="")
        link.setAttribute('href',filename);
    else
        link.setAttribute('href',"http://" + _ip +filename);
    link.setAttribute('download','download');
    onload=link.click();
};

function onHttpFileListReady(parent, path) {
    return function() {
        if (xmlHttp.readyState == 4) {
            //clear loading
            if (xmlHttp.status == 200) {
                MakeList(parent, path, JSON.parse(xmlHttp.responseText));
                WaitHide();
            }
        }
    }
};

function HttpGetFileList(parent, path) {
    WaitShow();
    xmlHttp = new XMLHttpRequest(parent, path);
    xmlHttp.onreadystatechange = onHttpFileListReady(parent, path);
    let S;
    // if(esp==8266)
         S="/list?dir=" + path;
    // else if(esp==32)
    //    S="/edit?list=" + path;
    if(_ip=="")
        xmlHttp.open("GET", S, true);
    else
        xmlHttp.open("GET", "http://" + _ip +S, true);
    xmlHttp.send(null);
};

function onHttpFileGet(){
    if (xmlHttp.readyState == 4){
        document.getElementById("idPreview").style.display = "none";
        document.getElementById("idEditor").style.display = "block";
        if(xmlHttp.status == 200)
            Editor.value=xmlHttp.responseText;
        ///   Editor.innerHTML="7777";//xmlHttp.responseText;
        else
        {
            Editor.value = "";
            alert("ERROR[" + xmlHttp.status + "]: " + xmlHttp.responseText);
        }
        document.getElementById("idBtnSave").style.display = "block";
        WaitHide();
    }
};

function HttpFileGet(path){
    WaitShow();
    console.log(path);
    xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = onHttpFileGet;
    //let u="http://"+_ip+path;
    if(_ip=="")
        xmlHttp.open("GET", path, true);
    else
        xmlHttp.open("GET", "http://"+_ip+path, true);
    xmlHttp.send(null);
};

function onHttpFileSavePostProcess(){
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status != 200)
            alert("ERROR[" + xmlHttp.status + "]: " + xmlHttp.responseText);
        else
            WaitHide();
    }
    console.log("+");
};

function HttpFileSave(filename, data, type){
    WaitShow();
    xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = onHttpFileSavePostProcess;
    var formData = new FormData();
    formData.append("data", new Blob([data], { type: type }), filename);
    if(_ip=="")
        xmlHttp.open("POST", "/edit");
    else
        xmlHttp.open("POST", "http://" + _ip + "/edit");
    xmlHttp.send(formData);
};
///-------------------select---------------
ListOnClick = function(event) {
    var target = event.target;

    // возможно, клик был внутри списка UL, но вне элементов LI
    if (target.tagName != "LI")
        return;
    // для Mac проверяем Cmd, т.к. Ctrl + click там контекстное меню
    // ++         if (event.metaKey || event.ctrlKey)
    // ++             ToggleSelect(target);
    // ++         else if (event.shiftKey)
    // ++             SelectFromLast(target);
    // ++         else
    SelectSingle(target);
    lastClickedLi = target;
}
// --- функции для выделения ---
function toggleSelect(li) {
    li.classList.toggle('selected');
}

function SelectFromLast(target) {
    var startElem = lastClickedLi || ul.children[0];
    var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;
    if (isLastClickedBefore) {
        for (var elem = startElem; elem != target; elem = elem.nextElementSibling) //{
            if (elem)
                elem.classList.add('selected');
    }
    else
        for (var elem = startElem; elem != target; elem = elem.previousElementSibling) //{
            if (elem)
                elem.classList.add('selected');
    elem.classList.add('selected');
};

function DeselectAll() {
    for (var i = 0; i < ListFile.children.length; i++)
        ListFile.children[i].classList.remove('selected');
};

function SelectSingle(li) {
    DeselectAll();
    li.classList.add('selected');
};

function GetSelect() {
    for (var i = 0; i < ListFile.children.length; i++) //{
        if (ListFile.children[i].classList.contains('selected'))
            return ListFile.children[i];
    return undefined;
};

ClickItem("FileSystem");