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

Made it possible to switch payment type

Browse source
This commit is contained in:
Yarne Coppens 2024-09-04 11:34:22 +02:00
parent 16a7f2ba79
commit dab46b862d
5 changed files with 72 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app.py
View file

@ -12,3 +12,7 @@ def start():
@app.route("/pay_cash/<price>")
def pay_cash(price: int):
return render_template('paycash.jinja', price=escape(price), api_url=api_url)
@app.route("/pay_card/<price>")
def pay_card(price: int):
return render_template('paycard.jinja', price=escape(price), api_url=api_url)

5
static/scripts/main.js
View file

@ -129,6 +129,11 @@ function payCash() {
window.location.href = "/pay_cash/" + total_cost
}
function payCard() {
const total_cost = document.getElementById('totalprice').innerHTML.replace('€ ','')
window.location.href = "/pay_card/" + total_cost
}
function toMain() {
window.location.href = "/";
}

2
templates/index.jinja
View file

@ -84,7 +84,7 @@
</div>
<div class="col-2">
<div class="card">
<input type="image" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="" />
<input type="image" onclick="payCard()" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="" />
</div>
</div>
</div>

60
templates/paycard.jinja Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html data-theme="light">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Toddler Shop
</title>
<script src="{{url_for('static', filename='scripts/main.js')}}"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="{{url_for('static', filename='style/main.css')}}">
</head>
<body>
<div class="row m-5">
<div class="col-2">
<div class="card">
<input type="image" onclick="payCash()" src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
</div>
</div>
<div class="col-8">
<div class="card">
<div class="container text-center product_placeholder">
<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="">
</div>
<div class="col" id="price_container">
<h2 class="card-title" id="totalprice">&euro; {{price}}</h2>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="card">
<input type="image" onclick="payCard()" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
</div>
</div>
</div>
<div class="row justify-content-center m-5">
<div class="col-1">
<img src="{{api_url}}/icons/paycard" />
</div>
</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>
</html>

4
templates/paycash.jinja
View file

@ -15,7 +15,7 @@
<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="">
<input type="image" onclick="payCash()" src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
</div>
</div>
<div class="col-8">
@ -34,7 +34,7 @@
</div>
<div class="col-2">
<div class="card">
<img src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
<input type="image" onclick="payCard()" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
</div>
</div>
</div>