ethics-canvas/canvas/js/dashboard.js

// Contains all the logic of the user dashboard, such as create canvas, remove one or logout

$(function() {    
    /* ================================================
    Miscellaneous
    ================================================= */
    
    // Prevent AJAX requests from being cached
    $.ajaxSetup({ cache: false });
    
    /* ================================
    REGISTERED USER HAS LOGGED IN:
    Load their canvases
    ================================= */
    
    // "loggedin_user_email" is the email of the user who's logged in. It is retrieved from the php script on top of the in the dashbord.php file and stored as a js variable in the js script the in the header of the dashboard.php file
    
    /* ---------------------------------------------------------
    An AJAX request to post the user's email to the server to
    load their saved canvases
    ---------------------------------------------------------- */
    
    /*
    If the user has no canvases it returns []. This is an example of what two canvases returned:
    [
        { "canvas_id": "6RnpIt9d9W", "user_id": "hello@arturocalvo.com", "canvas_name": "Test ARTURO 2", "canvas_date": "2016-07-16"},
        { "canvas_id": "E4YoiRJgSB", "user_id": "hello@arturocalvo.com", "canvas_name": "Test ARTURO 1", "canvas_date": "2016-07-16"}
    ]
    */
    
    var url = "load_user_canvases.php";
    
    $.post(url, {
        loggedin_user_email: loggedin_user_email
    }, function(data, status) {
        // The data is a string holding array of json
        // Concert the string to array of json to be able to loop it
        var canvasArray = jQuery.parseJSON(data);
        var canvas_color_index; // The color of the canvas in the gallery (is designed in dashbord.css, and assiged here with jQuery)
        
        $.each(canvasArray, function(index, canvasItem) {
            // Canvas gallery elements will be dynamically created by jQuery
            
            if (index < 5) {
                canvas_color_index = index;
            }
            else {
                canvas_color_index = index % 5;
            }
            
            var canvasGalleryHTML = '<div class="canvas-gallery-item col-md-4 col-sm-6 text-center" id="' + canvasItem.canvas_id + '"><div class="col-md-12 color' + canvas_color_index;
            
            if(canvasItem.canvas_version === "1.7") {
                canvasGalleryHTML += ' old-version';
            }
            
            canvasGalleryHTML += '"><h4>Canvas Title:</h4><h3>' + canvasItem.canvas_name + '</h3><p>Date Modified:<br />' + canvasItem.canvas_date + '</p>';
            
            if(canvasItem.canvas_version === "1.7") {
                canvasGalleryHTML += '<p><span class="glyphicon glyphicon-exclamation-sign"></span> Old version (1.7)</p>';
            }
            
            canvasGalleryHTML += '</div><button type="button" class="remove-canvas"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>Remove</button></div>';
            
            // The added divs are appended to the outer gallery div .user-canvas-gallery
            $('.user-dashboard').find('.user-canvas-gallery').append(canvasGalleryHTML);
        });
    // If the AJAX request fails
    }).fail(function(jqXHR) {
        console.log("Error " + jqXHR.status + ' ' + jqXHR.statustext);
    });
    
    /* ---------------------------------------------------------
    An AJAX request to load shared canvases with the user
    ---------------------------------------------------------- */
    
    /*
    If the user has no canvases it returns []. This is an example of what two canvases returned:
    [
        { "canvas_id": "6RnpIt9d9W", "user_id": "hello@arturocalvo.com", "canvas_name": "Test ARTURO 2", "canvas_date": "2016-07-16"},
        { "canvas_id": "E4YoiRJgSB", "user_id": "hello@arturocalvo.com", "canvas_name": "Test ARTURO 1", "canvas_date": "2016-07-16"}
    ]
     */
        
    var url = "load_shared_canvases.php";
    
    $.post(url, {
        loggedin_user_email: loggedin_user_email
    }, function(data, status) {
        // The data is a string holding array of json
        // Concert the string to array of json to be able to loop it
        var canvasArray = jQuery.parseJSON(data);
        var canvas_color_index; // The color of the canvas in the gallery (is designed in dashbord.css, and assiged here with jQuery)
        
        $.each(canvasArray, function(index, canvasItem) {
            // Canvas gallery elements will be dynamically created by jQuery
            
            if (index < 5) {
                canvas_color_index = index;
            }
            else {
                canvas_color_index = index % 5;
            }
            
            var canvasGalleryHTML = '<div class="canvas-gallery-item col-md-4 col-sm-6 text-center" id="' + canvasItem.canvas_id + '"><div class="col-md-12 color' + canvas_color_index;
            
            if(canvasItem.canvas_version === "1.7") {
                canvasGalleryHTML += ' old-version';
            }
            
            canvasGalleryHTML += '"><h4>Canvas Title:</h4><h3>' + canvasItem.canvas_name + '</h3><p>Owner:<br />' + canvasItem.user_id + '</p>';
            
            if(canvasItem.canvas_version === "1.7") {
                canvasGalleryHTML += '<p><span class="glyphicon glyphicon-exclamation-sign"></span> Old version (1.7)</p>';
            }
            
            canvasGalleryHTML += '</div></div>';
            
            // The added divs are appended to the outer gallery div .user-canvas-gallery
            $('.user-dashboard').find('.shared-canvases-gallery').append(canvasGalleryHTML);
        });
    // If the AJAX request fails
    }).fail(function(jqXHR) {
        console.log("Error " + jqXHR.status + ' ' + jqXHR.statustext);
    });
    
    /* ---------------------------------------------------------
    An AJAX request to load public canvases with the user
    ---------------------------------------------------------- */
    
    /*
    If the user has no canvases it returns []. This is an example of what two canvases returned:
    [
        { "canvas_id": "6RnpIt9d9W", "user_id": "hello@arturocalvo.com", "canvas_name": "Test ARTURO 2", "canvas_date": "2016-07-16"},
        { "canvas_id": "E4YoiRJgSB", "user_id": "hello@arturocalvo.com", "canvas_name": "Test ARTURO 1", "canvas_date": "2016-07-16"}
    ]
     */
        
    var url = "load_public_canvases.php";
    
    $.post(url, {
        loggedin_user_email: loggedin_user_email
    }, function(data, status) {
        // The data is a string holding array of json
        // Concert the string to array of json to be able to loop it
        var canvasArray = jQuery.parseJSON(data);
        var canvas_color_index; // The color of the canvas in the gallery (is designed in dashbord.css, and assiged here with jQuery)
        
        $.each(canvasArray, function(index, canvasItem) {
            // Canvas gallery elements will be dynamically created by jQuery
            
            if (index < 5) {
                canvas_color_index = index;
            }
            else {
                canvas_color_index = index % 5;
            }
            
            var canvasGalleryHTML = '<div class="canvas-gallery-item col-md-4 col-sm-6 text-center" id="' + canvasItem.canvas_id + '"><div class="col-md-12 color' + canvas_color_index;
            
            if(canvasItem.canvas_version === "1.7") {
                canvasGalleryHTML += ' old-version';
            }
            
            canvasGalleryHTML += '"><h4>Canvas Title:</h4><h3>' + canvasItem.canvas_name + '</h3><p>Owner:<br />' + canvasItem.user_id + '</p>';
            
            if(canvasItem.canvas_version === "1.7") {
                canvasGalleryHTML += '<p><span class="glyphicon glyphicon-exclamation-sign"></span> Old version (1.7)</p>';
            }
            
            canvasGalleryHTML += '</div></div>';
            
            // The added divs are appended to the outer gallery div .user-canvas-gallery
            $('.user-dashboard').find('.public-canvases-gallery').append(canvasGalleryHTML);
        });
        // If the AJAX request fails
    }).fail(function(jqXHR) {
        console.log("Error " + jqXHR.status + ' ' + jqXHR.statustext);
    });
    
    /*=============================================
    Handling click on the log out button
    ============================================= */
    
    $('.user-dashboard').on('click', '.dashbord-logout-btn', function(event) {
        var url = "logout.php";
        
        $.post(url, function(data, status) {
            if (data == 200) {
                // Go to the landing page
                window.location.href = "../../index.html";
            }
        });
    });
    
    /*=============================================
    Handling click on each canvas in the gallery
    ============================================= */
    
    $(".user-dashboard").on("click", ".canvas-gallery-item", function(event) {
        event.stopPropagation();
        
        // The ID of the canvas that the user clicked on to load
        var canvas_ID = $(this).attr("id");
        
        // AJAX
        $.post("utils.php", {
            canvas_ID: canvas_ID
        }, function(data, status) {
            if(data == 200) {
                $.ajax({
                    timeout: 5000,
                    dataType: "text",
                    type: "post",
                    data: {
                        "canvas_id": canvas_ID
                    },
                    url: "../php/check-version.php",
                    success: function(returnData) {
                        // Declarations
                        var canvasVersion = returnData;
                        
                        // If the chosen canvas is version 1.8
                        if(canvasVersion === "1.8") {
                            window.location.href = "../index.php";
                        }
                        // If the chosen canvas is version 1.7
                        else if(canvasVersion === "1.7") {
                            window.location.href = "../1.7/index.php";
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr.statusText);
                    }
                });
            }
        });
    });
    
    /* ================================================
    If the user closes a dialog
    ================================================= */
    
    $("div.dialog button.close").on("click", function() {
        $("div#shadow").css("display", "none");
        $("div.dialog").css("display", "none");
    });
    
    /*==============================================
    Handling the click on "remove" btn for each canvas in the gallery
    ============================================== */
    
    function removeCanvas(canvas, remove_canvas_ID) {
        canvas.remove();
        
        // Also tell the back-end to remove this from the database
        var url = "remove-canvas.php";
        
        $.post(url, {
            remove_canvas_ID: remove_canvas_ID
        }, function(data, status) {
            console.log("response from remove-canvas.php: --DATA: " + data + " --STATUS:" + status);
        });
    }
    
    $(".user-dashboard").on("click", ".remove-canvas", function(event) {
        event.stopPropagation();
        
        // Declarations
        var canvas = $(this).closest(".canvas-gallery-item");
        var remove_canvas_ID = $(this).closest(".canvas-gallery-item").attr("id");
        
        // Show the Remove Canvas dialog
        $("div#shadow").css("display", "block");
        $("div#dialog-remove-canvas").css("display", "block");
        
        // If the user clicks on "Yes"
        $("#dialog-remove-canvas #button-yes").on("click", function() {
            $("div#shadow").css("display", "none");
            $("div#dialog-remove-canvas").css("display", "none");
            removeCanvas(canvas, remove_canvas_ID);
        });
        
        // If the user clicks on "Cancel"
        $("#dialog-remove-canvas #button-no").on("click", function() {
            $("div#shadow").css("display", "none");
            $("div#dialog-remove-canvas").css("display", "none");
        });
    });
});