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%;
}