From 8761a6c5ad4359e15e36ef09dd9e11dc1d7b007f Mon Sep 17 00:00:00 2001 From: Sam Hadow Date: Thu, 1 Feb 2024 22:55:42 +0100 Subject: [PATCH] hide/delete buttons + confirm popup, TODO: interactivity --- web/app.html | 10 ++++++++++ web/app.js | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++- web/style.css | 21 +++++++++++++++++++++ 3 files changed, 81 insertions(+), 1 deletion(-) diff --git a/web/app.html b/web/app.html index 49dd6a6..9d9685a 100644 --- a/web/app.html +++ b/web/app.html @@ -3,6 +3,7 @@ + Aliexpress price tracker @@ -19,6 +20,15 @@ + + +
diff --git a/web/app.js b/web/app.js index 4ffacaa..02341c6 100644 --- a/web/app.js +++ b/web/app.js @@ -14,6 +14,9 @@ const width = window.innerWidth - margin.right - margin.left -10; // url const currentUrl = window.location.href; +// global delete key +var del_key = null; + // reload page when window is resized // (resizes every elements) @@ -57,7 +60,8 @@ async function fetch_item() { skuid: skuid, choice: choice, attributes: attributes, - image: image + image: image, + show: true }; item[uuid] = values; @@ -76,6 +80,9 @@ async function fetch_item() { fetch_history().then(async function(data) { items = await fetch_item(); + // by default, do not show hidden items + var show_hidden = false; + // Date domain (width) const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) @@ -103,6 +110,7 @@ fetch_history().then(async function(data) { // plot for each graph svgs.each(function(key) { + if (show_hidden || items[key].show) { const dataSubset = nestedData.get(key); const svg = d3.select(this); @@ -119,6 +127,28 @@ fetch_history().then(async function(data) { window.open(link, '_blank', 'noopener,noreferrer'); }); + // BUTTONS FOR EACH GRAPH + // buttons to hide or show item + g_div = this.parentNode.parentNode; + const hide_button = document.createElement("button"); + hide_button.innerHTML = "hide"; + hide_button.style.position = "relative"; + hide_button.style.top = `-${height+margin.bottom}px`; + hide_button.style.left = `${margin.left+20}px`; + g_div.append(hide_button); + // button to delete item + const del_button = document.createElement("button"); + del_button.innerHTML = "delete"; + del_button.style.position = "relative"; + del_button.style.top = `-${height+margin.bottom}px`; + del_button.style.left = `${margin.left+30}px`; + del_button.addEventListener("click", function () { + confirmationPopup.style.display = 'flex'; + del_key = key; + }); + g_div.append(del_button); + + // Price domain (height) const y = d3.scaleLinear() .domain([d3.min(dataSubset, d => d.value) - 1, d3.max(dataSubset, d => d.value) + 1]) @@ -279,6 +309,7 @@ fetch_history().then(async function(data) { .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave); + } }); }) @@ -324,3 +355,21 @@ async function addItem() { } } + + +// delete item, pop-up confirm +document.addEventListener('DOMContentLoaded', function () { + const yesBtn = document.getElementById('yesBtn'); + const noBtn = document.getElementById('noBtn'); + yesBtn.addEventListener('click', function () { + // Add your function to execute on 'Yes' click + console.log('Yes clicked'); + console.log(del_key); + confirmationPopup.style.display = 'none'; + }); + noBtn.addEventListener('click', function () { + // Add your function to execute on 'No' click + console.log('No clicked'); + confirmationPopup.style.display = 'none'; + }); +}); diff --git a/web/style.css b/web/style.css index 3d26938..1e9aaf6 100644 --- a/web/style.css +++ b/web/style.css @@ -1,6 +1,26 @@ body { margin: 0; padding: 0; +/* font-family: 'overpass'; */ +} + +.popup { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + justify-content: center; + align-items: center; +} + +.popup-content { + background: #3d3d3d; + padding: 20px; + border-radius: 8px; + text-align: center; } .banner { @@ -8,6 +28,7 @@ body { color: #fff; /* text color */ padding: 10px; position: fixed; + z-index: 300; top: 0; width: 100%; }