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

Added paycash template

Browse source
This commit is contained in:
Yarne Coppens 2024-08-24 13:21:02 +02:00
parent f6cf4e5695
commit 9287bb9a2b
5 changed files with 77 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app.py
View file

@ -1,4 +1,5 @@
from flask import Flask, render_template from flask import Flask, render_template
from markupsafe import escape
app = Flask(__name__) app = Flask(__name__)
@ -6,3 +7,6 @@ app = Flask(__name__)
def start(): def start():
return render_template('index.jinja') return render_template('index.jinja')
@app.route("/pay_cash/<price>")
def pay_cash(price: int):
return render_template('paycash.jinja', price=escape(price))

19
static/scripts/main.js
View file

@ -18,6 +18,25 @@ async function makeAPIRequest(request) {
} }
} }
async function loadCash(price) {
const cashAmountRequest = new Request(api_url + '/price_to_cash/' + price)
const cashAmount = await makeAPIRequest(cashAmountRequest)
const cash_bills_row = document.getElementById('cash_bills')
for (var bill_type in cashAmount){
bill_amount = cashAmount[bill_type]
console.log(bill_type, bill_amount)
for (var x = 0; x < bill_amount; x++){
const new_column = document.createElement('div')
new_column.classList.add('col')
new_column.innerHTML = bill_type
cash_bills_row.appendChild(new_column)
}
}
}
async function loadProducts() { async function loadProducts() {
const loadProductRequest = new Request(api_url + "/products") const loadProductRequest = new Request(api_url + "/products")
all_products = await makeAPIRequest(loadProductRequest) all_products = await makeAPIRequest(loadProductRequest)

4
static/style/main.css
View file

@ -1,3 +1,7 @@
body{
background-color: #D9F2D0;
}
div.card{ div.card{
background-color: #afda8e; background-color: #afda8e;
} }

4
templates/index.jinja
View file

@ -7,11 +7,11 @@
Toddler Shop Toddler Shop
</title> </title>
<script src="{{url_for('static', filename='scripts/main.js')}}"></script> <script src="{{url_for('static', filename='scripts/main.js')}}"></script>
<link rel="stylesheet" href="{{url_for('static', filename='style/main.css')}}">
<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 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> </head>
<body onload="loadProducts()" style="background-color: #D9F2D0;"> <body onload="loadProducts()">
<form action="" id="barcode_form"> <form action="" id="barcode_form">
<input id="barcode_input" type="text" autofocus> <input id="barcode_input" type="text" autofocus>
<input type="submit" value="Submit"> <input type="submit" value="Submit">

48
templates/paycash.jinja Normal file
View file

@ -0,0 +1,48 @@
<!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 onload="loadCash({{price}})">
<div class="row">
<div class="col-2">
<div class="card">
<img src="http://127.0.0.1:8000/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="http://127.0.0.1:8000/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">
<img src="http://127.0.0.1:8000/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
</div>
</div>
</div>
<div class="row" id="cash_bills">
</div>
</body>
</html>