Sindbad~EG File Manager

var ws;
var connected = false;
var b64_icon = "";
var b64_splash = "";
var steps = 0;
var form_data = null;
var json_data_form = null;
var modal = null;


function chunkString(str, len) {
    var _size = Math.ceil(str.length / len),
        _ret = new Array(_size),
        _offset
        ;

    for (var _i = 0; _i < _size; _i++) {
        _offset = _i * len;
        _ret[_i] = str.substring(_offset, _offset + len);
    }

    return _ret;
}

function readFile() {
    if (this.files && this.files[0]) {
        var FR = new FileReader();
        FR.addEventListener("load", function (e) {
            checkImageSize(e.target.result, 1024, 1024, "The icon image must be 1024x1024px. Only png.");
            if (e.target.result.length > 13000000) {
                alert("I'm sorry but your file is too big!");
            }
            document.getElementById("file_icon_preview").src = e.target.result;
            document.getElementById("file_icon_b64").value = e.target.result.replace("data:image/png;base64,", "");
            $("#file_icon_preview").show();

            b64 = e.target.result.replace("data:image/png;base64,", "");
            b64_icon = chunkString(b64, 300000);
        });
        FR.readAsDataURL(this.files[0]);
    }
}

function readFileSplash() {
    if (this.files && this.files[0]) {
        var FR = new FileReader();
        FR.addEventListener("load", function (e) {
            checkImageSize(e.target.result, 2732, 2732, "The splashscreen image must be 2732x2732px. Only png.");
            document.getElementById("file_splashscreen_preview").src = e.target.result;
            document.getElementById("file_splashscreen_b64").value = e.target.result.replace("data:image/png;base64,", "");
            $("#file_splashscreen_preview").show();

            b64 = e.target.result.replace("data:image/png;base64,", "");
            b64_splash = chunkString(b64, 200000);
        });
        FR.readAsDataURL(this.files[0]);
    }
}

function readFileKeystore() {
    if (this.files && this.files[0]) {
        var FR = new FileReader();
        FR.addEventListener("load", function (e) {
            document.getElementById("file_keystore_b64").value = e.target.result.replace("data:application/octet-stream;base64,", "");
        });
        FR.readAsDataURL(this.files[0]);
    }
}

function readFileGoogleJson() {
    if (this.files && this.files[0]) {
        if (this.files[0]['name'] != 'google-services.json') {
            alert('Error: you must upload only google-services.json in this field.');
            return false;
        }
        var FR = new FileReader();
        FR.addEventListener("load", function (e) {
            document.getElementById("file_google_services_b64").value = e.target.result.replace("data:application/json;base64,", "");
        });
        FR.readAsDataURL(this.files[0]);
    }
}

function readFileGooglePlist() {
    if (this.files && this.files[0]) {
        if (this.files[0]['name'] != 'GoogleService-Info.plist') {
            alert('Error: you must to upload only GoogleService-Info.plist in this field.');
            return false;
        }
        var FR = new FileReader();
        FR.addEventListener("load", function (e) {
            document.getElementById("file_google_plist_b64").value = e.target.result.replace("data:application/octet-stream;base64,", "");
        });
        FR.readAsDataURL(this.files[0]);
    }
}

document.getElementById("file_icon").addEventListener("change", readFile);
document.getElementById("file_splashscreen").addEventListener("change", readFileSplash);

document.getElementById("keystore_file").addEventListener("change", readFileKeystore);
document.getElementById("google_services_file").addEventListener("change", readFileGoogleJson);
document.getElementById("google_plist_file").addEventListener("change", readFileGooglePlist);

function checkImageSize(base64, width, height, alert_message) {
    var i = new Image();

    i.src = base64;

    console.log("Load image width: " + i.width + " height: " + i.height);
    i.onload = function () {
        if (i.width == width && i.height == height) {
            return true;
        } else {
            alert(alert_message);
            return false;
        }
    }
}

$('#generate_form').on("submit", function (e) {
    e.preventDefault();

    modal = $('#myModal').modal({ backdrop: 'static', keyboard: false });

    $("#progress_ul", modal).html("Uploading data...");

    form_data = JSON.stringify(objectifyForm($(this).serializeArray()));

    json_data_form = '{ "request" : "create_app", "data" : ' + form_data + ' }';

    //console.log(form_data);
    $.ajax({
        type: 'POST',
        url: 'https://mozable.com/administrator/mozable/new_app',
        crossDomain: true,
        data: objectifyForm($(this).serializeArray()),
        dataType: 'json',
        success: function (responseData, textStatus, jqXHR) {
            console.log("status: " + responseData.status);

            if (responseData.status == 0) {

                server_data = responseData.data;
                app_data = {};
                app_data['server_id'] = server_data['apps_id'];
                app_data['name'] = server_data['apps_name'];
                app_data['packagename'] = server_data['apps_packagename'];
                app_data['platform'] = server_data['apps_platform'];
                app_data['version'] = server_data['apps_version'];
                app_data['status'] = server_data['apps_request_status_value'];
                console.log(app_data);

                // Save on my db
                $.ajax({
                    type: 'POST',
                    url: ajax_url_apps,
                    data: app_data,
                    dataType: 'json',
                    success: function (responseData, textStatus, jqXHR) {
                        // Show message
                        $("#progress_ul", modal).html("");
                        $('#loading_gif', modal).hide();
                        $('#modal_title').html("Good!");
                        $('#progress_ul', modal).append('<li>Your app is submitted to app generator server!</li>');
                        $('#progress_ul', modal).append('<li>Follow the state from the "status" tab. <a href="' + admin_url + '&tab=status">Click here</a></li>');
                    },
                    error: function (responseData, textStatus, errorThrown) {
                        alert('Local POST failed. Check console errors.');
                    }
                });

            } else {
                $("#progress_ul", modal).html("");
                $('#loading_gif', modal).hide();
                $('#modal_title').html("Oh no :(");
                $('#progress_ul', modal).append("Submit error...<br />");
                $('#progress_ul', modal).append(responseData.message);
            }


        },
        error: function (responseData, textStatus, errorThrown) {
            $("#progress_ul", modal).html("");
            $('#loading_gif', modal).hide();
            $('#modal_title').html("Oh no :(");
            $('#progress_ul', modal).append("Submit error...");
            $('#progress_ul', modal).append("Try again in 5 minutes... if persist, contact the support on codecanyon by a comment.");
        }
    });
    return false;

});

function objectifyForm(formArray) {//serialize data function

    var returnArray = {};
    for (var i = 0; i < formArray.length; i++) {
        returnArray[formArray[i]['name']] = formArray[i]['value'];
    }
    return returnArray;
}

function start_connection(form_data) {
    var completed = false;

    ws = new WebSocket(socket_url + ":" + socket_port + "/ws");

    ws.onclose = function (evt) {
        log('Socket closed');
        if (completed == false) {
            alert("Server connection problem... Try again in few minutes, connection port " + socket_port + " is opened by your firewall? If yes and problem persist contact the support.");
            //$('#myModal').modal('hide')
        }
        form_data = null;
        json_data_form = null;
        steps = 0;
        connected = false;
    };

    // Open Websocket callback
    ws.onopen = function (evt) {
        log('Socket connected');
        connected = true;
        $('#progress_ul', modal).append("<li>Let's go!</li>");
        steps = 0;
        nextStep();
    };

    ws.onmessage = function (evt) {

        try {
            json = JSON.parse(evt.data);
        } catch (e) {
            alert("Wrong answer from server... Try later.");
            console.log(e);
        }

        switch (json.type) {

            case 'progress':
                if (json.status != 8) {
                    $('#progress_ul', modal).append('<li>' + json.data + '</li>');
                }
                if (json.status == 8) {
                    $('#loading_gif', modal).hide();
                    $('#progress_ul', modal).append('<li><strong>Congratulations!</strong> Your app is ready and you can download it!</li>');
                    $('#progress_ul', modal).append('<li><a href="' + json.data + '">Download here</a></li>');
                    /*$('#progress_ul').append('<li><img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + json.data + '" width="100"/></li>');*/
                    completed = true;
                }

                break;
            case 'error':
                $('#loading_gif', modal).hide();
                $('#progress_ul', modal).append('<li class="error_li">** Error **</li>');
                $('#progress_ul', modal).append('<li class="error_li">' + json.data + '</li>');
                $('#progress_ul', modal).append('<li class="error_li">Try again. If your problem persist, contact the support.</li>');
                completed = true;
                //alert(json.data);
                //tb_remove();
                break;

            case 'received_image':
                console.log("Uploaded: " + json.file_type);

                if (json.file_type == "icon")
                    uploadB64(b64_icon, "icon", json.i + 1);
                else if (json.file_type == "splash")
                    uploadB64(b64_splash, "splash", json.i + 1);

                break;
        }
    };

}

function uploadB64(b64, file_type, chunk) {
    console.log("uploadB64");
    if (b64[chunk]) {
        console.log("Sending new chunk " + chunk);
        if (file_type == "icon") {
            $('.upload_icon_counts').html((((chunk + 1) / b64_icon.length) * 100).toFixed(0) + "%");
            data = '{ "request" : "upload_image", "file_type" : "' + file_type + '", "i": ' + chunk + ', "data" : "' + b64_icon[chunk] + '" }';
            sendMsg(data);
        } else if (file_type == "splash") {
            $('.upload_splash_counts').html((((chunk + 1) / b64_splash.length) * 100).toFixed(0) + "%");
            data = '{ "request" : "upload_image", "file_type" : "' + file_type + '", "i": ' + chunk + ', "data" : "' + b64_splash[chunk] + '" }';
            sendMsg(data);
        }

    } else {
        console.log("uploadB64 st++");
        steps++;
        nextStep();
    }
}

function nextStep() {
    console.log("Next step: " + steps);

    switch (steps) {
        case 0:
            console.log("Checking icon file...");
            if (b64_icon[0]) {
                console.log("Uploading icon file...");
                $('#progress_ul', modal).append('<li>Uploading icon... <span class="upload_icon_counts"></li>');
                $('.upload_icon_counts', modal).html((((1) / b64_icon.length) * 100).toFixed(0) + "%");
                uploadB64(b64_icon, "icon", 0);
            } else {
                steps++;
                nextStep();
            }
            break;

        case 1:
            console.log("Checking splashscreen file...");
            if (b64_splash[0]) {
                console.log("Uploading splashscreen file...");
                $('#progress_ul', modal).append('<li>Uploading splashscreen... <span class="upload_splash_counts"></li>');
                $('.upload_splash_counts', modal).html((((1) / b64_splash.length) * 100).toFixed(0) + "%");
                uploadB64(b64_splash, "splash", 0);
            } else {
                steps++;
                nextStep();
            }
            break;

        case 2:
            sendMsg(json_data_form);
            break;

    }
}

function sendMsg(msg) {
    json = JSON.parse(msg);
    console.log("send: " + json.request);
    ws.send(msg);
}

function log(data) {
    console.log(data);
}