charts/public/scripts/edit_chart.js

let canvas, parent, legend, dataDiv, table;
const urlParams = new URLSearchParams(window.location.search);
const graph_code = urlParams.get('code');
validateUser(graph_code);
let rcTarget = {};

$(document).ready( function () {
    canvas = document.getElementById("graphCanvas");
    parent = document.getElementById("graphDiv");
    legend = document.getElementById("graphLegend");
    dataDiv = document.getElementById("dataDiv");
    table = new Table(document.getElementById("dataTable"));

    document.getElementById('upload').addEventListener('change', handleFileSelect, false);

    load_data();
    table.reloadEvLi();
    reloadShares();

    //Click
    document.addEventListener('mousemove', (e) => {
        const pos = {
            x: e.clientX - canvas.offsetLeft,
            y: e.clientY - canvas.offsetTop
        };
        let obj = checkHit(pos);

        //show point value
        if (obj !== null) {
            dataDiv.style.left = pos.x + canvas.offsetLeft + "px";
            dataDiv.style.top = pos.y + canvas.offsetTop + "px";
            dataDiv.style.display = "block";
            dataDiv.innerHTML = "<b>" + obj.name + "</b><br><p>" + obj.value + "</p>";
        } else {
            dataDiv.style.display = "none";
        }
    });

    $("#exportBtn").on('click', function (e) {
        table.reloadData();
        exportData('tableData');
    });

    $("#saveBtn").on('click', function (e) {
        table.reloadData();
        save_data();
    });

    $("#drawBtn").on('click', function (e) {
        table.reloadData();
        submitData();
    });

    //RIGHT CLICK menu
    $(document).bind("click", function(event) {
        document.getElementById("rcMenu").style.display = "none";
    });

    //odebere řádek
    $("#rcDelRow").on('click', function (e) {
        e.preventDefault();
        if (rcTarget.parentElement.parentElement.tagName === "THEAD")
            return;
        table.removeRow(rcTarget.parentElement);
    });

    //přidá řádek
    $("#rcAddRow").on('click', function (e) {
        e.preventDefault();
        table.addRow(table, rcTarget);
    });

    //odebere sloupec
    $('#rcDelCol').on('click', function (e) {
        e.preventDefault();

        table.removeCol(getCellIndex(rcTarget));
    });

    //přidá sloupec
    $('#rcAddCol').on('click', function (e) {
        e.preventDefault();

        table.addCol(getCellIndex(rcTarget));
    });

    //Sharing
    $('#shareBtn').on('click', function (e) {
        e.preventDefault();

        let username = document.getElementById("shareUsername").value;
        addShare(username);
    });
});

//Resize
$(window).on('resize', function () {
    resizeCanvas(canvas, parent);
    table.reloadData();
    drawChart(getSettings(), table.data);
});

function handleFileSelect(evt) {
    let files = evt.target.files;
    table.importData(files[0], table);
}

function submitData() {
    table.reloadData();
    drawChart(getSettings(), table.data);
}

function save_data() {
    table.reloadData();
    let settings = getSettings();
    $.ajax({
        url: "php/save_data.php",
        type: "post",
        dataType: "text",
        data: {code: graph_code, data: JSON.stringify(table.data), settings: JSON.stringify(settings), name:settings.title},
        success: function (result) {
            //alert("Saved successfully " + result);
        }
    });
}

function load_data() {
    $.ajax({
        url: "php/load_data.php",
        type: "post",
        dataType: "json",
        data: {code: graph_code},
        success: function (result) {
            if (result.data == null) {
                alert("Error: no data found");
                return;
            }
            table.data = JSON.parse(result.data);
            table.updateTable();
            if (result.settings == null) {
                alert("Error: no graph settings found");
            } else {
                loadSettings(JSON.parse(result.settings));
            }
            drawChart(getSettings(), table.data);
        }
    })
}

function getCellIndex(cell) {
    let parent = cell.parentElement;

    let children = Array.from(parent.children);
    for (let i = 0; i < children.length; i++){
        if (children[i] === cell) {
            return i;
        }
    }
}

//Nastavení grafu
function getSettings() {
    return {
        type: document.getElementById('graph_types').value,
        y_step: parseFloat(document.getElementById('y_step').value),
        b_color: ((document.getElementById('enableBgColor').checked) ? document.getElementById('graphBgColor').value : null),
        display_legend: document.getElementById("displayLegend").checked,
        display_points: document.getElementById("displayPoints").checked,
        display_support_lines: document.getElementById("displaySupportLines").checked,
        title: document.getElementById("graphTitle").value,
        display_title: document.getElementById("displayTitle").checked,
        margin: parseFloat(document.getElementById("graphMargin").value),
        custom_x_values: document.getElementById('customXValues').value,
        x_label: document.getElementById('xLabel').value,
        y_label: document.getElementById('yLabel').value,
    };
}

function loadSettings(new_settings) {
    document.getElementById('graph_types').value = new_settings.type;
    document.getElementById('y_step').value = new_settings.y_step;
    if (new_settings.b_color !== null) {
        document.getElementById('graphBgColor').value = new_settings.b_color;
        document.getElementById('enableBgColor').checked = true;
    }
    document.getElementById("displayLegend").checked = new_settings.display_legend;
    document.getElementById("displayPoints").checked = new_settings.display_points;
    document.getElementById("displaySupportLines").checked = new_settings.display_support_lines;
    document.getElementById("graphTitle").value = new_settings.title;
    document.getElementById("displayTitle").checked = new_settings.display_title;
    document.getElementById("graphMargin").value = new_settings.margin;
    document.getElementById('customXValues').value = new_settings.custom_x_values;
    document.getElementById('xLabel').value = new_settings.x_label;
    document.getElementById('yLabel').value = new_settings.y_label;
}

//Sdílení grafu
function reloadShares() {
    $.ajax({
        url: "php/load_shares.php",
        type: "post",
        dataType: "text",
        data: {code: graph_code},
        success: function(result) {
            document.getElementById("shareList").innerHTML = result;
        }
    });
}

function removeShare(username) {
    $.ajax({
        url: "php/remove_share.php",
        type: "post",
        dataType: "text",
        data: {username: username, code: graph_code},
        success: function(result) {
            reloadShares();
        }
    });
}

function addShare(username) {
    $.ajax({
        url: "php/add_share.php",
        type: "post",
        dataType: "text",
        data: {username: username, code: graph_code},
        success: function(result) {
            //alert(result);
            validateUser(graph_code);
            reloadShares();
        }
    });
}