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

Now uses svg's from API

Browse source
This commit is contained in:
Yarne Coppens 2024-08-04 17:59:05 +02:00
parent 47dc83fd55
commit a47127b4fb
2 changed files with 83 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
index.html
View file

@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html data-theme="light">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> <title>
Toddler Shop Toddler Shop
</title> </title>
<script src="/scripts/main.js"></script> <script src="/scripts/main.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
</head> </head>
<body onload="loadProducts()"> <body onload="loadProducts()">
@ -15,10 +17,64 @@
</form> </form>
<img class="product_image"> <img class="product_image">
<img class="product_image">
<img class="product_image"> <div class="columns">
<img class="product_image">
<img class="product_image"> <div class="column is-one-fifth product_placeholder">
<span class="icon-text">
<i><svg width="90" height="90">
<image class="product_image" xlink:href="" width="50" height="50"/>
</svg></i>
</span>
<span class="product_price">Home</span>
</div>
<div class="column is-one-fifth product_placeholder">
<span class="icon-text">
<i><svg width="90" height="90">
<image class="product_image" xlink:href="" width="50" height="50"/>
</svg></i>
</span>
<span class="product_price">Home</span>
</div>
<div class="column is-one-fifth product_placeholder">
<span class="icon-text">
<i><svg width="90" height="90">
<image class="product_image" xlink:href="" width="50" height="50"/>
</svg></i>
</span>
<span class="product_price">Home</span>
</div>
<div class="column is-one-fifth product_placeholder">
<span class="icon-text">
<i><svg width="90" height="90">
<image class="product_image" xlink:href="" width="50" height="50"/>
</svg></i>
</span>
<span class="product_price">Home</span>
</div>
<div class="column is-one-fifth product_placeholder">
<span class="icon-text">
<i><svg width="90" height="90">
<image class="product_image" xlink:href="" width="50" height="50"/>
</svg></i>
</span>
<span class="product_price">Home</span>
</div>
</div>
<button class="button is-success">Cash</button>
<button class="button is-success">Card</button>
</body> </body>

33
scripts/main.js
View file

@ -2,6 +2,10 @@ var all_products
let barcodeForm let barcodeForm
const api_url = "http://127.0.0.1:8000"
var to_fill_product_index = 0
async function makeAPIRequest(request) { async function makeAPIRequest(request) {
try { try {
const response = await fetch(request); const response = await fetch(request);
@ -13,15 +17,15 @@ async function makeAPIRequest(request) {
} }
async function loadProducts() { async function loadProducts() {
const loadProductRequest = new Request("http://127.0.0.1:8000/products") const loadProductRequest = new Request(api_url + "/products")
all_products = await makeAPIRequest(loadProductRequest) all_products = await makeAPIRequest(loadProductRequest)
console.log("Loaded products:", all_products) console.log("Loaded products:", all_products)
barcodeForm = document.getElementById("barcode_form"); barcodeForm = document.getElementById("barcode_form");
barcodeForm.addEventListener("submit", (e) => { barcodeForm.addEventListener("submit", (e) => {
e.preventDefault(); e.preventDefault();
console.log('help')
const barcode = document.getElementById('barcode_input').value const barcode = document.getElementById('barcode_input').value
var chosen_product var chosen_product
for (index = 0; index < all_products.length; index++) { for (index = 0; index < all_products.length; index++) {
@ -31,15 +35,20 @@ async function loadProducts() {
} }
barcode_input.value = "" barcode_input.value = ""
const product_placeholders = document.getElementsByClassName('product_placeholder')
const chosen_product_placeholder = product_placeholders[to_fill_product_index]
var image_product = chosen_product_placeholder.getElementsByClassName('product_image')[0]
var price_product = chosen_product_placeholder.getElementsByClassName('product_price')[0]
console.log(chosen_product_placeholder)
console.log(image_product)
console.log(price_product)
image_product.setAttribute('href', api_url + "/icons/" + chosen_product.image_filename);
price_product.textContent = "\u20AC " + chosen_product.price
const product_image_placeholders = document.getElementsByClassName('product_image') to_fill_product_index += 1
console.log(product_image_placeholders)
for (index = 0; index < product_image_placeholders.length; index++) {
console.log(product_image_placeholders[index].src)
if (product_image_placeholders[index].src == "") {
product_image_placeholders[index].src = chosen_product.image_url
return false
}
}
}); });
} }