aliexpress-price-tracker/web/app.js

// fixed height
const height = 350;
// set the margins of the graph
const margin = {
        top: 10,
        right: height,
        bottom: 20,
        left: 50
    };
// get window width
const width = window.innerWidth - margin.right - margin.left -10;

// url
const currentUrl = window.location.href;

// by default, do not show hidden items
var show_hidden = false;
document.getElementById("global_toggleshow").addEventListener("click", function() {
   show_hidden = !show_hidden;
   if (document.getElementById("global_toggleshow").innerHTML == "show hidden") {
       document.getElementById("global_toggleshow").innerHTML = "hide";
    } else {
        document.getElementById("global_toggleshow").innerHTML = "show hidden";
    }
   refresh_graphs();
});

// reload page when window is resized
// (resizes every elements)
window.onresize = function(){ location.reload(); }


function render_graphs_wrapper() {
    const checked = getCheckedCheckboxIds('.checkbox-filters');
    const id_array = checked.map(str => str.substring(9));
    get_data_filtered(id_array).then(function(data){
        render_graphs(data[0], data[1], show_hidden);
    })
}

// refresh render
function refresh_graphs() {
    const node = document.getElementById("graphs");
    while (node.firstChild) {
        node.removeChild(node.lastChild);
    }
    render_graphs_wrapper();
}

// render graphs
render_graphs_wrapper();

// filters checkboxes
filters_checkboxes()

// listen to filters changes
var checkedBefore = getCheckedCheckboxIds('.checkbox-filters');
$(document).ready(function(){
    $('#filters').on('hidden.bs.dropdown', function () {
            const checkedAfter = getCheckedCheckboxIds('.checkbox-filters');
            if (!(checkedAfter.every(item => checkedBefore.includes(item)) && checkedBefore.every(item => checkedAfter.includes(item)))) {
                refresh_graphs();
            }
            checkedBefore = checkedAfter;
    });
    // prevent dropdown menu from closing when clicking inside
    $('#filters_checkboxes').on('click', function (e) {
        e.stopPropagation();
    });
});

// add item
document.getElementById("addbutton").addEventListener("click", addItem);

async function addItem() {
    const inputFieldId = document.getElementById("additemid");
    const inputFieldAttributes = document.getElementById("addattributes");
    if (inputFieldId.checkValidity() && inputFieldAttributes.checkValidity()) {
        const apiUrl = `${currentUrl}app/add`;
        const postData = {
            itemid: inputFieldId.value,
            attributes: inputFieldAttributes.value
        };

        // clear input fields
        inputFieldId.value='';
        inputFieldAttributes.value='';

        const requestOptions = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(postData)
        };

        const response = await fetch(apiUrl, requestOptions)
                .catch(error => {
                console.error('Error during POST request:', error);
                });

        if (response.ok) {
            console.log(response);
            // refresh graphs to display new item
            refresh_graphs();
        } else {
            throw new Error('Error in server response');
        }
    } else {
        console.log('invalid content in input fields')
    }
}

async function toggle_hide(uuid) {
const apiUrl = `${currentUrl}app/show`;
    const postData = {
        uuid: uuid
    };

    const requestOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(postData)
    };

    const response = await fetch(apiUrl, requestOptions)
            .catch(error => {
            console.error('Error during POST request:', error);
            });

    if (response.ok) {
        console.log(response);
        // refresh graphs to stop displaying hidden items
        // or display shown items
        refresh_graphs();
    } else {
        throw new Error('Error in server response');
    }
}

async function delItem(uuid) {
    const apiUrl = `${currentUrl}app/delete`;
    const postData = {
        uuid: uuid
    };

    const requestOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(postData)
    };

    const response = await fetch(apiUrl, requestOptions)
            .catch(error => {
            console.error('Error during POST request:', error);
            });

    if (response.ok) {
        console.log(response);
        // refresh graphs to stop displaying deleted item
        refresh_graphs();
    } else {
        throw new Error('Error in server response');
    }
}

// function to create a list
document.getElementById("create_list_add").addEventListener("click", addList);
async function addList() {

        const checked = getCheckedCheckboxIds('.checkbox-itemlist');
        const items_uuid = checked.map(str => str.substring(9)).join('#');

        const listname = document.getElementById("listName").value;

        if (listname.length !== 0) {
            const apiUrl = `${currentUrl}app/create-list`;
            const postData = {
                name: listname,
                description: document.getElementById("listDescription").value,
                items: items_uuid
            };

            // clear input fields
            document.getElementById("listName").value='';
            document.getElementById("listDescription").value='';

            const requestOptions = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(postData)
            };

            const response = await fetch(apiUrl, requestOptions)
                    .catch(error => {
                    console.error('Error during POST request:', error);
                    });

            if (response.ok) {
                // refresh filters checkboxes
                filters_checkboxes();
                createListPopup.style.display = 'none';
                console.log(response);
            } else {
                throw new Error('Error in server response');
            }
        } else {
            console.log("cannot create list without a name")
        }

}

// get an array of id of checked checkboxes of a specific class name
function getCheckedCheckboxIds(classname) {
    const checkboxes = d3.selectAll(classname);
    const checkedIds = checkboxes.filter(function() {
        return this.checked;
    }).nodes().map(function(checkbox) {
        return checkbox.id;
    });
    return checkedIds;
}


// export data
async function downloadCSV() {
    const all_data = await fetch_all();
    var export_data = '';
    for (const [key, value] of Object.entries(all_data)) {
        const csvContent = objectToCsv(value);
        export_data += `#####${key}\n`;
        export_data += csvContent;
        export_data += '\n';
    }
    export_blob =  new Blob([export_data], {type: "text/plain;charset=utf-8"});
    const url = window.URL.createObjectURL(export_blob);
    const a = document.createElement('a');
    a.setAttribute('href', url);
    a.setAttribute('download', 'data.csv');
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

document.getElementById('export_data_button').addEventListener('click', downloadCSV);