aliexpress-price-tracker/web/app.js

// fixed height
const height = 350;
// set the margins of the graph
const margin = {
        top: 10,
        right: height,
        bottom: 30,
        left: 30
    };
// 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 item
        // or display shown item
        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');
    }
}

// close popups with escape key
document.addEventListener("keydown", (event) => {
  if (event.isComposing || event.key === 'Escape') {
    Array.from(document.getElementsByClassName("popup")).forEach(function(x) {
        x.style.display = 'none';
    });
  }
});

// create new list
document.getElementById("create_list").addEventListener("click", function () {
            createListPopup.style.display = 'flex';
        });
document.getElementById("create_list_cancel").addEventListener("click", function () {
            createListPopup.style.display = 'none';
        });


// delete item, pop-up confirm
document.addEventListener('DOMContentLoaded', function () {
  const yesBtn = document.getElementById('yesBtn');
  const noBtn = document.getElementById('noBtn');
  yesBtn.addEventListener('click', function () {
    delItem(confirmationPopup.style.name);
    confirmationPopup.style.display = 'none';
  });
  noBtn.addEventListener('click', function () {
    confirmationPopup.style.display = 'none';
  });
});