Stepping up the Game: Setup procedure spiced up with Ajax.

The second evaluations are fast approaching and i cant wait to show my mentors what will make them wow!. As usual, it has been a week full of challenges not only do i have to worry about my GSoC work i have school stuffs and also some community jobs to do.

Scheduling time is one of the key factors when participating in the Google Summer of Codes. Mismanagement of time could be fatal and could earn you a fail mark during evaluations. Being able to handle this due to my competence i worked on a bash script which will be coming up in the next post soonest.

I also worked on what i call stepping up the game. I call it so cause it has actually made me think out of the box and has been the coolest part so far in my project implementation. The current setup procedure for LibreHealth has somany drawbacks reason for my project title Setup Improvements for LibreEHR. One of the task i acomplished was to show a loading page while the setup script communicates with the server. AJAX being the perfect match for this was just the tool i need.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. In a nutshell this superb technology helped me in efficiently communicating with the sever and receiving status update at each phase of the setup.This helps a lot cause it gives the end user the impression that some stuff is being done and also returns error messages in case any. A demo on how i accomplished this is so.

I created 2 files (database.php and ajaxprocess.php). The database.php is the script that communicates with the sever(backend-code). This script writes to a text file (ajaxprosess.txt) the output at each stage of the program. That is each function it executes e.g connecting to database, creation of database, or cloning etc. Then the ajaxproccess.php is responsible for reading file within an interval of 1000ms(1sec) . Obviously you would have noticed that databse.php writes to this file often casue it keeps running and updating the data found there. A code fragment of this can be found here. The complete code can be found in my PR here its free. Feel free to leave your comments.

setup.js

getting variables to be parsed in post

ajax call to database.php

database.php

getting all variables from Post ajax

writing output to ajaxprocess.txt

ajaxprocess.php

reading out put and sending results to user

A call to check this file at an interval of 1s is seen below

// The function to refresh the progress bar.
function refreshAjaxProgress() {
    // We use Ajax again to check the progress by calling the ajaxprocess script.
    // Also pass the session id to read the file because the file which storing the progress is placed in a file per session.
    // If the call was success, display the progress bar.
    $.ajax({
        url: "ajaxprocess.php",
        success:function(data){
            console.log(data);
            if(data.status === 400){
                $("#libreehrProgress").attr({
                    "style" : "width:"+data.percentage+"%",
                    "aria-valuenow" : ""+data.percentage+""
                }).html(data.message).removeClass("progress-bar-success progress-bar-striped active").addClass("progress-bar-danger");
                $("#ajaxAlert").removeClass("hidden alert-success").addClass("alert-danger");
                $("#ajaxResponse").html(data.message);
                $(".ajaxLoader").addClass("hidden");
                window.clearInterval(timer);
                timer = window.setInterval(errorComplete(data.message), 1000);
            }
            else {
                $("#libreehrProgress").attr("style","width:"+data.percentage+"%").html(data.message).removeClass("progress-bar-danger").addClass("progress-bar-success progress-bar-striped active");
                $("#ajaxAlert").removeClass("hidden alert-danger").addClass("alert-success");
                $("#ajaxResponse").html(data.message);
                $(".ajaxLoader").addClass("hidden");
            }

            // // If the process is had errors, we should stop the checking process.


            // // If the process is completed, we should stop the checking process.
             if (data.percentage === 100 ) {
                window.clearInterval(timer);
                 timer = window.setInterval(completed, 1000);
             }
        }
    });
}

It is called thus

timer = window.setInterval(refreshAjaxProgress, 1000);

And when completed it calls the following function

// function to clear the timer if process has completed to a hundred percent
function completed() {
    $("#ajaxAlert").removeClass("hidden alert-danger").addClass("alert-success");
    $("#ajaxResponse").html("Completed");
    $("#submitStep4").removeAttr("disabled").css("cursor","pointer");
    $("#backStep4").removeAttr("disabled").removeClass("btnDisabled").css("cursor","pointer");

    window.clearInterval(timer);
}

In nutshell i have accomplished what i wanted to and now on a good pace fro finishing my script. I would not stop thanking Google, LibreHealth for giving me such an opportunity to showcase my skill. Also to my wonderful team mates Naveen, Abhinav Singh, Apoorv Choubey , Tigpezeghe Rodrige and awesome mentors Priyanshu, Tony McCormick, Terry Hill whom i have always remained in contact to solve bugs common to the librehealth system or prior to our GSoC task.

Here is a demo of what i achieved.

Now i am about writing a bash script that will automate the installation of the various dependencies stay tuned ;)