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

Compare commits

base: Yarninator:main
Branches Tags
Yarninator:main
Yarninator:flask
Yarninator:basic_html
Yarninator:htmx
..
compare: Yarninator:basic_html
Branches Tags
Yarninator:flask
Yarninator:basic_html
Yarninator:htmx
Yarninator:main

11 commits
main ... basic_html

Author SHA1 Message Date
Yarne Coppens
aeef56e663 Removed console.log debug statements 2024-08-05 18:05:41 +02:00
Yarne Coppens
db06ec4504 Added stylesheet 2024-08-05 17:59:04 +02:00
Yarne Coppens
c478e40ade Implemented bootstrap grid 2024-08-05 17:51:55 +02:00
Yarne Coppens
3304a162ef Switched to Bootstrap 2024-08-05 17:03:32 +02:00
Yarne Coppens
b51a555392 Added the creditcard and cash icon buttons 2024-08-05 14:16:20 +02:00
Yarninator
aa921cc88d Added total price 2024-08-05 13:14:24 +02:00
Yarne Coppens
a47127b4fb Now uses svg's from API 2024-08-04 17:59:05 +02:00
Yarne Coppens
47dc83fd55 Catch barcode form submit for scanning 2024-08-04 11:01:52 +02:00
Yarne Coppens
d25bd44d15 Started barcode scanning basics 2024-08-04 10:35:58 +02:00
Yarne Coppens
26fb8073ed Load products on page load 2024-08-04 10:29:43 +02:00
Yarne Coppens
a50ba6f68a Enabled ability to make requests to API 2024-08-04 10:19:24 +02:00
3 changed files with 160 additions and 0 deletions
Show stats Expand all files Collapse all files

96
index.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html data-theme="light">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Toddler Shop
</title>
<script src="/scripts/main.js"></script>
<link rel="stylesheet" href="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">
</head>
<body onload="loadProducts()" style="background-color: #D9F2D0;">
<form action="" id="barcode_form">
<input id="barcode_input" type="text" autofocus>
<input type="submit" value="Submit">
</form>
<img class="product_image">
<div class="container text-center product_placeholder">
<div class="row row-cols-5">
<div class="col product_col">
<div class="card" style="width: 10rem; height: 15rem;">
<img src="" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
</div>
</div>
<div class="col product_col">
<div class="card" style="width: 10rem; height: 15rem;">
<img src="" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
</div>
</div>
<div class="col product_col">
<div class="card" style="width: 10rem; height: 15rem;">
<img src="" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
</div>
</div>
<div class="col product_col">
<div class="card" style="width: 10rem; height: 15rem;">
<img src="" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
</div>
</div>
<div class="col product_col">
<div class="card" style="width: 10rem; height: 15rem;">
<img src="" class="card-img-top product_image" alt="">
<div class="card-body">
<h5 class="card-title product_price"></h5>
</div>
</div>
</div>
</div>
<div class="row row-cols-5">
<div class="col">
<div class="card" style="width: 10rem; height: 7rem;">
<div class="container text-center product_placeholder">
<div class="row">
<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">
<h5 class="card-title" id="totalprice">&euro; 0</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 10rem; height: 7rem;">
<img src="http://127.0.0.1:8000/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
</div>
</div>
<div class="col">
<div class="card" style="width: 10rem; height: 7rem;">
<img src="http://127.0.0.1:8000/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
</div>
</div>
</div>
</div>
</body>
</html>

61
scripts/main.js Normal file
View file

@ -0,0 +1,61 @@
var all_products
let barcodeForm
const api_url = "http://127.0.0.1:8000"
var to_fill_product_index = 0
var total_price = 0
async function makeAPIRequest(request) {
try {
const response = await fetch(request);
const result = await response.json();
return result
} catch (error) {
console.error("Error:", error);
}
}
async function loadProducts() {
const loadProductRequest = new Request(api_url + "/products")
all_products = await makeAPIRequest(loadProductRequest)
console.log("Loaded products:", all_products)
barcodeForm = document.getElementById("barcode_form");
barcodeForm.addEventListener("submit", (e) => {
e.preventDefault();
if (to_fill_product_index < 5) {
const barcode = document.getElementById('barcode_input').value
var chosen_product
for (index = 0; index < all_products.length; index++) {
if (all_products[index].barcode == barcode) {
chosen_product = all_products[index]
}
}
barcode_input.value = ""
const product_placeholders = document.getElementsByClassName('product_col')
const chosen_product_placeholder = product_placeholders[to_fill_product_index]
const image_product = chosen_product_placeholder.getElementsByClassName('product_image')[0]
const price_product = chosen_product_placeholder.getElementsByClassName('product_price')[0]
const total_price_holder = document.getElementById("totalprice")
total_price += chosen_product.price
image_product.setAttribute('src', api_url + "/icons/" + chosen_product.image_filename);
price_product.textContent = "\u20AC " + chosen_product.price
total_price_holder.textContent = "\u20AC " + total_price
to_fill_product_index += 1
}else{
barcode_input.value = ""
}
});
}

3
style/main.css Normal file
View file

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