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

generate items list with image and checkboxes in create list pop up

Browse Source
This commit is contained in:
Sam Hadow 2024-02-13 19:42:26 +01:00
parent c768da2417
commit c540e2f497
4 changed files with 109 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app.html
View File

@ -29,6 +29,8 @@
<input id="listName" type="text" placeholder="name">
<input id="listDescription" type="text" placeholder="description">
<button id="create_list_cancel" type="button">cancel</button>
<p>Include items</p>
<div id="checkbox-container"></div>
</div>
</div>
@ -46,6 +48,7 @@
<!-- Load scripts-->
<script src="{{ url_for('static', filename='fetch.js') }}"></script>
<script src="{{ url_for('static', filename='popups.js') }}"></script>
<script src="{{ url_for('static', filename='rendergraphs.js') }}"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script>

79
web/app.js
View File

@ -106,8 +106,8 @@ const apiUrl = `${currentUrl}app/show`;
if (response.ok) {
console.log(response);
// refresh graphs to stop displaying hidden item
// or display shown item
// refresh graphs to stop displaying hidden items
// or display shown items
refresh_graphs();
} else {
throw new Error('Error in server response');
@ -115,60 +115,29 @@ const apiUrl = `${currentUrl}app/show`;
}
async function delItem(uuid) {
const apiUrl = `${currentUrl}app/delete`;
const postData = {
uuid: uuid
};
const apiUrl = `${currentUrl}app/delete`;
const postData = {
uuid: uuid
};
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData)
};
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);
});
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');
}
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';
});
});

65
web/popups.js Normal file
View File

@ -0,0 +1,65 @@
// 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 () {
// remove div content
const node = document.getElementById("checkbox-container");
while (node.firstChild) {
node.removeChild(node.lastChild);
}
// generate new checkboxes
const checkboxContainer = d3.select("#checkbox-container");
fetch_item().then(function(data){
Object.keys(data).forEach(uuid => {
const item = data[uuid];
const div = checkboxContainer.append("div");
const checkbox = div.append("input")
.attr("type", "checkbox")
.attr("id", `checkbox-${uuid}`)
.on("change", function() {
console.log(this.checked ? uuid : null);
});
const link = `https://fr.aliexpress.com/item/${item.itemid}.html`;
const image = div.append("img")
.attr("src", item.image)
.attr("width", height*0.4)
.attr("height", height*0.4)
.on("click", function() {
window.open(link, '_blank', 'noopener,noreferrer');
})
.attr("alt", `Image ${uuid}`);
});
})
createListPopup.style.display = 'flex';
});
// cancel list creation
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';
});
});

19
web/style.css
View File

@ -33,8 +33,8 @@ body {
}
.banner {
background-color: #177013; /* background color */
color: #fff; /* text color */
background-color: #177013;
color: #fff;
padding: 10px;
position: fixed;
z-index: 300;
@ -46,3 +46,18 @@ body {
margin-top: 100px;
padding: 0px;
}
#checkbox-container {
max-height: 200px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
}
#checkbox-container div {
margin-bottom: 10px;
width: calc(50% - 10px);
display: flex;
align-items: center;
}