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() {
    get_data().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();

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

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

    // clear input fields
    document.getElementById("additemid").value='';
    document.getElementById("addattributes").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');
    }
}

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) {
                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;
}