sam.hadow/aliexpress-price-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hide/delete buttons + confirm popup, TODO: interactivity

Browse Source
This commit is contained in:
Sam Hadow 2024-02-01 22:55:42 +01:00
parent 9ccf112daf
commit 8761a6c5ad
3 changed files with 81 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/app.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href='https://overpass-30e2.kxcdn.com/overpass.css' rel='stylesheet'> -->
<link rel="stylesheet" href="style.css">
<title>Aliexpress price tracker</title>
</head>
@ -19,6 +20,15 @@
<button id="addbutton" type="button">Add</button>
</div>
<!--popup confirmation window-->
<div id="confirmationPopup" class="popup">
<div class="popup-content">
<p>Are you sure?</p>
<button id="yesBtn">Yes</button>
<button id="noBtn">No</button>
</div>
</div>
<!-- div where graphs will take place -->
<div class="content" id="graphs"></div>

51
web/app.js
View File

@ -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';
});
});

21
web/style.css
View File

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