Yarninator/toddler_shop_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made it possible to remove products

Browse source
This commit is contained in:
Yarne Coppens 2024-09-04 11:23:25 +02:00
parent 30e7d5a164
commit 16a7f2ba79
4 changed files with 77 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
static/scripts/main.js
View file

@ -31,6 +31,7 @@ async function loadCash(price) {
const new_column = document.createElement('div')
new_column.classList.add('col')
const bill_image = document.createElement('img')
bill_image.classList.add('cash_image')
bill_image.src = api_url + '/icons/' + bill_type
new_column.appendChild(bill_image)
@ -71,6 +72,7 @@ async function loadProducts() {
total_price += chosen_product.price
image_product.setAttribute('src', api_url + "/icons/" + chosen_product.image_filename);
image_product.style.visibility = 'visible';
price_product.textContent = "\u20AC " + chosen_product.price
total_price_holder.textContent = "\u20AC " + total_price
@ -82,11 +84,51 @@ async function loadProducts() {
}
async function payCash() {
const total_cost = document.getElementById('totalprice').innerHTML.replace('€ ','')
window.location.replace("/pay_cash/" + total_cost);
function removeProduct(element_to_remove){
const product_row = document.getElementById('product_row')
const products = product_row.children
let found_removed_product = false
for (var i = 0; i < products.length; i++) {
var product = products[i];
if (product.getElementsByClassName('product_image')[0] == element_to_remove){
found_removed_product = true
const total_price_holder = document.getElementById("totalprice")
total_price -= product.getElementsByClassName('product_price')[0].textContent.replace('€ ','')
console.log(product.getElementsByClassName('product_price')[0].textContent.replace('€ ',''))
total_price_holder.textContent = "\u20AC " + total_price
const price_holder = element_to_remove.parentNode.getElementsByClassName('product_price')[0]
price_holder.innerHTML = ''
}
if (found_removed_product){
if (i < to_fill_product_index - 1){
const next_product = products[i+1]
const current_price_holder = product.getElementsByClassName('product_price')[0]
const next_price_holder = next_product.getElementsByClassName('product_price')[0]
product.getElementsByClassName('product_image')[0].src = next_product.getElementsByClassName('product_image')[0].src
current_price_holder.innerHTML = next_price_holder.innerHTML
}else{
product.getElementsByClassName('product_image')[0].style.visibility = 'hidden';
const current_price_holder = product.getElementsByClassName('product_price')[0]
current_price_holder.innerHTML = ''
}
}
}
to_fill_product_index -= 1
}
async function toMain() {
window.location.replace("/");
function payCash() {
const total_cost = document.getElementById('totalprice').innerHTML.replace('€ ','')
window.location.href = "/pay_cash/" + total_cost
}
function toMain() {
window.location.href = "/";
}

10
static/style/main.css
View file

@ -14,3 +14,13 @@ div.card{
margin-right: auto;
border-style: solid;
}
#cash_bills{
background-color: #afda8e;
}
.cash_image{
float: left;
width: 300px;
height: 300px;
}

18
templates/index.jinja
View file

@ -13,17 +13,17 @@
<body onload="loadProducts()">
<form action="" id="barcode_form">
<input id="barcode_input" type="text" autofocus>
<input id="barcode_input" type="text" onblur="this.focus()" autofocus>
<input type="submit" value="Submit">
</form>
<img class="product_image">
<div class="text-center product_placeholder">
<div class="row" style="margin-bottom: 5rem;">
<div class="text-center" id="product_placeholder">
<div class="row" style="margin-bottom: 5rem;" id="product_row">
<div class="col product_col">
<div class="card h-100">
<img src="" class="card-img-top product_image" alt="">
<input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
@ -31,7 +31,7 @@
</div>
<div class="col product_col">
<div class="card h-100">
<img src="" class="card-img-top product_image" alt="">
<input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
@ -39,7 +39,7 @@
</div>
<div class="col product_col">
<div class="card h-100">
<img src="" class="card-img-top product_image" alt="">
<input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
@ -47,7 +47,7 @@
</div>
<div class="col product_col">
<div class="card h-100">
<img src="" class="card-img-top product_image" alt="">
<input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
@ -55,7 +55,7 @@
</div>
<div class="col product_col">
<div class="card h-100">
<img src="" class="card-img-top product_image" alt="">
<input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
@ -65,7 +65,7 @@
<div class="row">
<div class="col-8">
<div class="card">
<div class="container text-center product_placeholder">
<div class="container text-center">
<div class="row" style="width: 70%;margin-left: auto;margin-right: auto;">
<div class="col">
<img src="{{api_url}}/icons/cart" height="100rem" width="100rem" class="card-img-top" alt="">

12
templates/paycash.jinja
View file

@ -12,7 +12,7 @@
</head>
<body onload="loadCash({{price}})">
<div class="row">
<div class="row m-5">
<div class="col-2">
<div class="card">
<img src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
@ -39,7 +39,15 @@
</div>
</div>
<div class="row" id="cash_bills">
<div class="row m-5" id="cash_bills">
</div>
<div class="row justify-content-end m-5">
<div class="col-2">
<div class="card">
<input type="image" onclick="toMain()" src="{{api_url}}/icons/shop" height="100rem" width="100rem" class="card-img-top" alt="" />
</div>
</div>
</div>
</body>