personal-website/resources/sys/finder/finder.js

class Finder{
    static appId = "Finder"
    appId = "Finder"
    fileView = undefined
    path = "/"
    homePath = "/home/user"
    windowElement
    // previousPath = "/"
    pathHistory = [] //FIXME Fixed length
    constructor(){
        // this.appElem = appElem
        // WebDesktopEnvironment.RegisterApp(this)
    }
    /**
    * @param {string[]} args
    */
    async NewWindow(args){
        let newFinder = new FinderWindow()
        await newFinder.Init(args)
        return
        this.path = args[0]
        if (args[1] == "desktop"){
            this.NewDesktop(args)
            return
        }
        // const params = new URLSearchParams({isMobile: WebDesktopEnvironment.isMobile})
        fetch(`/app/${Finder.appId}/render?` + params) 
        .then((response) => response.text())
        .then((html) => {
            let newWindow = WebDesktopEnvironment.CreateNewWindow(Finder.appId, 500, 350 )    
            newWindow.innerHTML = html
            
            this.fileView = new FileView(newWindow.querySelector(".FileTileView"),
                (event) =>{ this.Click(event) },
                (event) =>{ this.RightClick(event) },
                (event, draggedElem) =>{ this.DropEvent(event, draggedElem) },
            )
            this.OpenDir(this.path)
            
            newWindow.querySelector("#RootButton").addEventListener('click', () =>{
                this.OpenDir('/')
            })

            newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
                this.OpenDir('/home/user')
            })

            this.windowElement = newWindow

            if (!WebDesktopEnvironment.isMobile){
                let scrollBar = new WdeScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
                // console.log(newWindow.querySelector("#closeWindowButton"))

                newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
                    
                    WebDesktopEnvironment.CloseWindow(newWindow)
                    
                })
            }
        })
        .catch((error) => {
            WebDesktopEnvironment.Alert(error);
        })
    }

   
    /**
    * @param {string[]} args
    */
    NewDesktop(args){
        fetch(`${window.location.origin}/application/${Finder.appId}/renderDesktop?` + new URLSearchParams({
            isMobile: WebDesktopEnvironment.isMobile,
            path: args[0]
        }))
        .then((response) => response.text())
        .then((html) => {
            // console.log(args)
            args[2].innerHTML = html
            
            this.fileView = new FileView(args[2].querySelector(".FileTileView"), (event) =>{
                this.Click(event, true)
            })
            this.OpenDir(this.path)
        })
        .catch((error) => {
            WebDesktopEnvironment.Alert(error);
        })
    }

    // OpenPreviousDir(){
    //     if (this.pathHistory.length > 0){
    //         // console.log(this.pathHistory)
    //         let path = this.pathHistory[this.pathHistory.length - 1]
    //         // console.log(typeof( this.pathHistory))
    //         this.pathHistory.pop()
    //         this.OpenDir(this.path)
    //     }
    // }

    /**
    * @param {string} path
    */
    OpenDir(path){
        this.path = path
        this.fileView.OpenFolder(path)
    }


    // /**
    // */
    // OpenNewDir(){
    //     WebDesktopEnvironment.Open("finder", [this.path])
    // }
    /**
    * @param {string} path
    * @returns {boolean}
    */
    static async RenderProperites(path){
        const params = new URLSearchParams({
            path: path
        })
        const response = await fetch(`/application/${Finder.appId}/renderProps?` + params)
        if (response.status != 200){
            WebDesktopEnvironment.Alert("Error in properties render") //TODO
            return false
        }
        const html = response.text()
        let newWindow = WebDesktopEnvironment.CreateNewWindow(Finder.appId, 350, 500 )    
        newWindow.innerHTML = html
        newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
            WebDesktopEnvironment.CloseWindow(newWindow)
        })
    }
}


class FinderWindow{
    CurPath = ""
    fileView = undefined
    windowElem = undefined

    async Init(args){
        // console.log(args)
        if (args[1] === "-desktop"){
            const params = new URLSearchParams({
                isMobile: WebDesktopEnvironment.isMobile,
                path: args[0]
            })
            const response = await fetch(`/app/${Finder.appId}/renderDesktop?` + params)
            if (response.status != 200){
                WebDesktopEnvironment.Alert("Error in render desktop") //TODO
            }
            const html = await response.text()
            args[2].innerHTML = html
            
            this.fileView = new FileView(args[2].querySelector(".FileTileView"), (event) =>{
                this.Click(event, true)
            })
            this.RenderDir(args[0])
            return
        }
        const params = new URLSearchParams({isMobile: WebDesktopEnvironment.isMobile})
        const response = await fetch(`/app/${Finder.appId}/render?` + params)
        if (response.status != 200){
            WebDesktopEnvironment.Alert("Finder ERROR TODO") //TODO
            return
        }
        const html = await response.text()

        let newWindow = WebDesktopEnvironment.CreateNewWindow(Finder.appId, 500, 350 )    
        newWindow.innerHTML = html

        // console.log(this.ReRenderDir)
        this.fileView = new FileView(
                newWindow.querySelector(".FileTileView"),
                (event) => { this.Click(event) },
                (event) => { this.RightClick(event) },
                (event, draggedElem) => { this.DropEvent(event, draggedElem)},
                () => { this.ReRenderDir() }
        )

        newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
            
            WebDesktopEnvironment.CloseWindow(newWindow)
            
        })

        newWindow.querySelector("#RootButton").addEventListener('click', () =>{
            this.RenderDir('/')
        })

        newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
            this.RenderDir('/home/user')
        })

        let scrollBar = new WdeScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))


        this.windowElem = newWindow
        this.RenderDir(args[0])
    }

    RenderDir(path){
        this.CurPath = path
        this.fileView.OpenFolder(path)
    }

    ReRenderDir(){
        this.RenderDir(this.CurPath)
    }

    /**
    * @param {DragEvent} event
    * @param {HTMLElement} draggedElem
    */
    async DropEvent(event){
        // console.log(event.dataTransfer.getData("dropType"))
        if (event.dataTransfer.getData("dropType") == "move"){
            const sourcePath= event.dataTransfer.getData("filePath")
            const targetPath = this.CurPath + "/" + event.dataTransfer.getData("fileName")
            const res = await WebFS.MoveFile(sourcePath, targetPath)
            if (res){
                this.ReRenderDir()
            } else {
                WebDesktopEnvironment.Alert("UWAGA TODO MOVE FILE ERROR") //TODO
            }
        } else {
            WebDesktopEnvironment.Alert("Not fixed yet")
            return 
            let formData = new FormData()
            let files = event.dataTransfer.files
            for (let i = 0; i < files.length; i++) {
                const element = files[i];
                console.log(element)
                formData.append("file", element) //FIXME Conn reset
            }
            const params = new URLSearchParams({
                parentPath: this.CurPath,
            })
            const response = await fetch('/fs/upload/?' + params, 
            {
                method: "POST",  //TODO Change to PUT?
                body: formData
            })
            if (response.status != 200){
                WebDesktopEnvironment.Alert("ERROR IN UPLOADING FILE")//TODO
            } else {
                this.ReRenderDir()
            }
               
        }
    }

    /**
    * @param {MouseEvent} event
    */
    Click(event){
        let fileType = event.target.getAttribute("fileType")
        let fileName = event.target.getAttribute("name")
        const fileExtension = fileName.split(".")[fileName.split(".").length - 1] //FIXME
        switch (fileType) {
            case "directory":
                if (fileExtension == "app"){
                    WebDesktopEnvironment.Open(`${this.CurPath}/${fileName}`, [])
                } else{
                    WebDesktopEnvironment.Open(`/Applications/Finder.app`, [`${this.CurPath}/${fileName}`])
                }
                break
            case "blog":
                WebDesktopEnvironment.Open("/Applications/BlogViewer.app", [`${this.CurPath}/${fileName}`])
                break
            case "jpeg":
            case "png":
                WebDesktopEnvironment.Open("img-viewer", [this.CurPath + "/" +  fileName])
                break;
            default:
                // console.log("Unsupported file type")
                WebDesktopEnvironment.Alert("Unsupported file type")
                break;
        }
    }

    /**
    * @param {MouseEvent} event
    */
    RightClick(event){
        this.CreateContextMenu(event.target, [event.clientY, event.clientX])
    }

    /**
    * @param {HTMLElement} target
    * @param {string[]} pos
    */
    async CreateContextMenu(target, pos){
        let context = ""
        const fileName = target.getAttribute("name")
        const fileType = target.getAttribute("fileType")
        if (target.classList.contains("FileTileView"))
        {
            context = "FileTileView"
        } else {
            context = fileType
        }
        const params = new URLSearchParams({context: context, path: `${this.CurPath}/${fileName}`})
        const response = await fetch(`/app/${Finder.appId}/contextMenu?` + params) 
        if (response.status != 200){
            WebDesktopEnvironment.Alert("ERROR in Context menu TODO"); //TODO
            return
        }
        const html = await response.text()
        let overlay = document.createElement("div") //TODO Move to WDE.CreateOverlay()
        overlay.setAttribute('id', 'finder-context-menu-overlay')
        overlay.style.position = 'absolute'
        overlay.style.width = "100%"
        overlay.style.height = "100%"

        let menu = document.createElement("div")
        menu.setAttribute('class', 'ContextMenu  WindowFrameShadow')
        menu.style.position = 'absolute';
        menu.style.top = pos[0] + "px";
        menu.style.left = pos[1] + "px";
        
        menu.innerHTML = html
        menu.children[0].firstElementChild.remove()
        menu.children[0].lastElementChild.remove() //FIXME Can't ommit rendering of horLine in end of menu on backend
        
        overlay.appendChild(menu)
        document.body.appendChild(overlay)

        overlay.addEventListener('click', async (event) => {
            if (event.target.classList.contains("Row")){ //TODO add uuid id to rows to more accurate checks??
                let res = false
                switch (event.target.children[0].getAttribute("action")) {
                    case "createDir":
                        res = await WebFS.CreateDirectory(`${this.CurPath}`)
                        console.log(res)
                        if (res){
                            this.ReRenderDir()
                        }
                        break
                    case "deleteFile":
                        res = await WebFS.DeleteFile(`${this.CurPath}/${fileName}`)
                        console.log(res)
                        if (res){
                            this.ReRenderDir()
                        }
                        break
                    case "getInfo":
                        res = await Finder.RenderProperites(`${this.CurPath}/${fileName}`)
                        break
                        case "openAsDir":
                            WebDesktopEnvironment.Open(`/Applications/${Finder.appId}.app`,[`${this.CurPath}/${fileName}`])
                            break
                    default:
                        break;
                } 
            }
            overlay.remove()
        })
        overlay.addEventListener('contextmenu', (event) => {
            event.preventDefault();
            overlay.remove()
        })
    }
}