PHP Classes

File: public/file-list.php

Recommend this page to a friend!
  Classes of Joseluis Laso  >  Asynchronous Long Server Tasks  >  public/file-list.php  >  Download  
File: public/file-list.php
Role: Example script
Content type: text/plain
Description: Example script
Class: Asynchronous Long Server Tasks
Start background tasks and query progress status
Author: By
Last change: new example to document the third part
Date: 6 years ago
Size: 5,228 bytes
 

Contents

Class file image Download
<html>

<head>

    <style>
        body{
            height: 100%;
            width: 100%;
            background: lightcyan repeat;
            margin: 0;
            padding: 0;
        }
        #container{
            position: relative;
            width: 100%;
            height: 70%;
        }
        #content{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #status{
            position: fixed;
            overflow: auto;
            height: 30%;
            bottom: 0;
            width: 100%;
            border: 1px solid black;
            padding: 0;
            margin: 0;
        }
        .loader{
            display: none;
        }
        table#file-list td{
            padding: 3px 12px 3px 12px;
        }
        table#file-list,
        table#file-list td {
            border: 1px solid black;
        }
        td.percent{
            background-image: url("/img/progress.gif");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position-x: -100px;
            width: 79px;
            text-align: right;
        }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>

<div id="container">
    <div id="content">
        <table id="file-list">
            <thead>
                <tr>
                    <td>(i)</td>
                    <td>File</td>
                    <td>Size</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <input id="start-task" type="button" value="Start copy" task="1">
    </div>
</div>

<div id="status">

</div>

</body>

<script>

    var fileList = []; // contains the list of files that user has in our server

    function logMessage(message){
        if ($("#status").html().length > 1000) {
            $("#status").html(message+"<br/>");
        }else{
            $("#status").append(message+"<br/>");
        }

    }

    function updateFileList(){
        // fetch the list from the server, here simulating some random data
        <?php for($i=0;$i<10;$i++) echo "\t".'fileList.push({ name:"'.uniqid('file-').'.ext", size: '.(10*rand(100,200)).'});'."\n"; ?>

        var content = "";
        for(var i=0;i<fileList.length; i++){
            var file = fileList[i];
            content += '<tr id="file-'+i+'">'+
                    '<td><img src="img/loader.gif" class="loader"/></td>'+
                    '<td>'+file.name+'</td>'+
                    '<td class="percent">'+file.size+'</td>'+
                '</tr>';
        }
        $("#file-list tbody").html(content);
    }

    function requestStatusOfFile(id) {
        $.ajax({
            url: '/status-copy.php',
            data: {
                id: id,
                _task: "copy"
            },
            cache: false,
            scope: this,
            type: "POST",
            success: function(data) {
                if (data.result){
                    if (data.status == "done") {
                        $("#file-" + id + " .loader").attr("src", "/img/checkmark.png");
                        $("#file-" + id +" td.percent").css("background-position-x", "-100px");
                        if (id<fileList.length-1) {
                            setTimeout(function() { requestCopyOfFile(id+1); }, 600);
                        }
                    }else{
                        var percent = parseInt(data.percent);
                        $("#file-" + id +" td.percent").css("background-position-x", "-"+(100-percent)+"px");
                        setTimeout(function() { requestStatusOfFile(id); }, 1500);
                    }
                }else{
                    $("#file-" + id + " .loader").attr("src", "/img/alert.png");
                    $("#file-" + id +" td.percent").css("background-position-x", "-100px");
                    logMessages(data.reason);
                }
            }
        })
    }

    function requestCopyOfFile(id){
        logMessage("requesting copy of file "+fileList[id].name);
        $.ajax({
            url: '/copy.php',
            data: {
                id: id,
                file: fileList[id],
                _task: "copy"
            },
            cache: false,
            scope: this,
            type: "POST",
            success: function(data) {
                if (data.result) {
                    $("#file-" + id + " .loader").show();
                    setTimeout(function() { requestStatusOfFile(id); }, 1500);
                }else {
                    logMessage(data.reason);
                }
            },
            error: function(){
                logMessage(data.reason);
            }
        });
    }

    var interval = 0;
    var id = 0;

    $(function(){
        logMessage("Welcome to asynchronous server side task demo");

        updateFileList();

        $("#start-task").click(function(e){
            e.preventDefault();

            $(this).hide();

            console.log("starting copy...");
            requestCopyOfFile(0);

            return false;
        })
    })
</script>

</html>

For more information send a message to info at phpclasses dot org.