<!DOCTYPE html>
<html>
<head>
    <title>SeaweedFS Filer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/seaweedfsstatic/bootstrap/3.3.1/css/bootstrap.min.css">
    <style>
        body {
            padding-bottom: 128px;
        }

        #drop-area {
            border: 1px transparent;
        }

        #drop-area.highlight {
            border-color: purple;
            border: 2px dashed #ccc;
        }

        .button {
            display: inline-block;
            padding: 2px;
            background: #ccc;
            cursor: pointer;
            border-radius: 2px;
            border: 1px solid #ccc;
            float: right;
            margin-left: 2px;
            margin-bottom: 0;
        }

        label {
            font-weight: normal;
        }

        .button:hover {
            background: #ddd;
        }

        #fileElem {
            display: none;
        }

        td, th {
            vertical-align: bottom;
        }

        .danger {
            color: red;
            background: #fff;
            border: 1px solid #fff;
            border-radius: 2px;
        }

        .info {
            background: #fff;
            border: 1px solid #fff;
            border-radius: 2px;
        }

        .footer {
            position: absolute;
            bottom: 10px;
            right: 10%;
            min-width: 30%;
        }

        .progress-table {
            width: 100%;
        }

        .progress-table-file-name {
            text-align: right;
        }

        .progress-table-percent {
            width: 60px;
            text-align: right;
        }

        .add-files {
            font-size: 46px;
            text-align: center;
            border: 1px dashed #999;
            padding-bottom: 9px;
            margin: 0 2px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            <a href="https://github.com/chrislusf/seaweedfs"><img src="/seaweedfsstatic/seaweed50x50.png"></img></a>
            SeaweedFS Filer
        </h1>
    </div>
    <div class="row">
        <div>
            {{ range $entry := .Breadcrumbs }}
            <a href="{{ printpath $entry.Link }}">
                {{ $entry.Name }}
            </a>
            {{ end }}
            <label class="button" for="fileElem">Upload</label>
            <label class="button" onclick="handleCreateDir()">New Folder</label>
        </div>
    </div>

    <div class="row" id="drop-area">
        <form class="upload-form">
            <input type="file" id="fileElem" multiple onchange="handleFiles(this.files)">

            <table width="100%">
                {{$path := .Path }}
                {{ range $entry_index, $entry := .Entries }}
                <tr>
                    <td>
                        {{if $entry.IsDirectory}}
                        <img src="/seaweedfsstatic/images/folder.gif" width="20" height="16">
                        <a href="{{ printpath $path  "/" $entry.Name "/"}}" >
                        {{ $entry.Name }}
                        </a>
                        {{else}}
                        <a href="{{ printpath $path  "/" $entry.Name }}" >
                        {{ $entry.Name }}
                        </a>
                        {{end}}
                    </td>
                    <td align="right" nowrap>
                        {{if $entry.IsDirectory}}
                        {{else}}
                        {{ $entry.Mime }}&nbsp;
                        {{end}}
                    </td>
                    <td align="right" nowrap>
                        {{if $entry.IsDirectory}}
                        {{else}}
                        {{ $entry.Size | humanizeBytes }}&nbsp;
                        {{end}}
                    </td>
                    <td align="right" nowrap>
                        {{ $entry.Timestamp.Format "2006-01-02 15:04" }}
                    </td>
                    <td>
                        {{if $entry.IsDirectory}}
                        <label class="button danger" onclick="handleDelete('{{ printpath $path  "/" $entry.Name "/"  }}')">Delete</label>
                        {{else}}
                        <label class="button danger" onclick="handleDelete('{{ printpath $path  "/" $entry.Name }}')">Delete</label>
                        {{end}}
                        <label class="button info" onclick="handleRename('{{ $entry.Name }}', '{{ printpath $path "/" }}')">Rename</label>
                    </td>
                </tr>
                {{ end }}
            </table>
            {{if .EmptyFolder}}
            <div class="row add-files">
                +
            </div>
            {{end}}
        </form>
    </div>

    {{if .ShouldDisplayLoadMore}}
    <div class="row">
        <a href={{ print .Path "?limit=" .Limit "&lastFileName=" .LastFileName}} >
        Load more
        </a>
    </div>
    {{end}}

    <br/>
    <br/>
    <div id="progress-area" class="footer" style="display: none;">
    </div>
</div>
</body>
<script type="text/javascript">
    // ************************ Drag and drop ***************** //
    let dropArea = document.getElementById("drop-area");
    let progressArea = document.getElementById("progress-area");

// Prevent default drag behaviors
    ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
        document.body.addEventListener(eventName, preventDefaults, false);
    });

// Highlight drop area when item is dragged over it
    ;['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });

    ;['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });

    // Handle dropped files
    dropArea.addEventListener('drop', handleDrop, false);

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    function highlight(e) {
        dropArea.classList.add('highlight');
    }

    function unhighlight(e) {
        dropArea.classList.remove('highlight');
    }

    function handleDrop(e) {
        var dt = e.dataTransfer;
        var files = dt.files;

        handleFiles(files);
    }

    var uploadList = {};

    function handleFiles(files) {
        files = [...files];
        files.forEach(startUpload);
        renderProgress();
        files.forEach(uploadFile);
    }

    function startUpload(file, i) {
        uploadList[file.name] = {'name': file.name, 'percent': 0, 'finish': false};
    }

    function renderProgress() {
        var values = Object.values(uploadList);
        var html = '<table class="progress-table">\n';
        for (let i of values) {
            html += '<tr>\n<td class="progress-table-file-name">' + i.name + '<\/td>\n';
            html += '<td class="progress-table-percent">' + i.percent + '% <\/td>\n<\/tr>\n';
        }
        html += '<\/table>\n';
        progressArea.innerHTML = html;
        if (values.length > 0) {
            progressArea.attributes.style.value = '';
        }
        console.log('Render Progress', values);
    }

    function reportProgress(file, percent) {
        var item = uploadList[file]
        item.percent = percent;
        renderProgress();
    }

    function finishUpload(file) {
        uploadList[file]['finish'] = true;
        renderProgress();
        var allFinish = true;
        for (let i of Object.values(uploadList)) {
            if (!i.finish) {
                allFinish = false;
                break;
            }
        }
        if (allFinish) {
            console.log('All Finish');
            window.location.reload();
        }
    }

    function uploadFile(file, i) {
        var url = window.location.href;
        var xhr = new XMLHttpRequest();
        var fileName = file.name;
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                var percent = Math.ceil((e.loaded / e.total) * 100);
                reportProgress(fileName, percent)
            }
        });
        xhr.upload.addEventListener('loadend', function(e) {
            finishUpload(fileName);
        });
        var formData = new FormData();
        xhr.open('POST', url, true);
        formData.append('file', file);
        xhr.send(formData);
    }

    function handleCreateDir() {
        var dirName = prompt('Directory Name:', '');
        dirName = dirName.trim();
        if (dirName == null || dirName == '') {
            return;
        }
        var baseUrl = window.location.href;
        if (!baseUrl.endsWith('/')) {
            baseUrl += '/';
        }
        var url = baseUrl + dirName;
        if (!url.endsWith('/')) {
            url += '/';
        }
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, false);
        xhr.setRequestHeader('Content-Type', '');
        xhr.send();
        window.location.reload();
    }

    function handleRename(originName, basePath) {
        var newName = prompt('New Name:', originName);
        if (newName == null || newName == '') {
            return;
        }
        var url = basePath + newName;
        var originPath = basePath + originName;
        url += '?mv.from=' + originPath;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, false);
        xhr.setRequestHeader('Content-Type', '');
        xhr.send();
        window.location.reload();
    }

    function handleDelete(path) {
        if (!confirm('Are you sure to delete ' + path + '?')) {
            return;
        }
        var url = path;
        if (url.endsWith('/')) {
            url += '?recursive=true';
        }

        var xhr = new XMLHttpRequest();
        xhr.open('DELETE', url, false);
        xhr.send();
        window.location.reload();
    }
</script>
</html>