Project-Name-Here/hydrationhub
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend product + user select

Browse Source
This commit is contained in:
Leon Meier 2025-02-24 23:34:49 +01:00
parent 5a68622b7a
commit 3706ed07d2
3 changed files with 62 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
static/pages/product_select.js
View File

@ -8,10 +8,28 @@ const baseStruct = document.getElementById("baseStruct");
let globalData; let globalData;
// On load // On load
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', async function() {
let data = await returnTableDataByTableName('product'); let data = await returnTableDataByTableName('products');
console.info(`Found ${data.count} products`); console.info(`Found ${data.count} products`);
const result = data.result; const result = data.result;
globalData = result; globalData = result;
for(let i = 0; i < result.length; i++) {
let product = result[i];
if(product.visible) {
let newDiv = baseStruct.cloneNode(true);
newDiv.id = `product_${product.id}`;
newDiv.style.display = 'block';
newDiv.querySelector('.product_name').innerText = product.name;
newDiv.querySelector('.product_description').innerText = product.description || "";
let price = parseFloat(product.price).toFixed(2);
newDiv.querySelector('.product_price').innerText = price + " €";
newDiv.querySelector('.product_ean').innerText = product.gtin;
newDiv.querySelector('.product_image').src = product.image || "https://bulma.io/assets/images/placeholders/1280x960.png";
mainSelectionDiv.appendChild(newDiv);
}
}
}); });

4
static/pages/user_select.js
View File

@ -81,10 +81,14 @@ function handleUserClick(e) {
console.log(`Clicked on user with id ${userId}`); console.log(`Clicked on user with id ${userId}`);
let user = globalData.find(u => u.id == userId); let user = globalData.find(u => u.id == userId);
currentUser = user; currentUser = user;
console.log(user);
if(user.code) { if(user.code) {
pinPadModal.classList.add('is-active'); pinPadModal.classList.add('is-active');
// Automatically focus on the first input field // Automatically focus on the first input field
pinInput1.focus(); pinInput1.focus();
} else {
pinValue = "0000";
validatePin();
} }
} }

64
views/product_select.eta
View File

@ -1,36 +1,46 @@
<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %> <%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
<%~ include("partials/nav.eta") %> <%~ include("partials/nav.eta") %>
<section class="section"> <section class="section main-content">
<div class="container columns" id="mainSelect"> <div class="container">
<div class="columns">
</div> <!-- Main content in the middle -->
<div class="column is-three-quarters columns is-multiline" id="mainSelect">
<!-- This will be populated by JS with the templated content from the hidden section -->
</div>
<!-- Empty sidebar on the right -->
<div class="column is-one-quarter">
<h2 class="title is-4" >Ausgewählte Produkte</h2>
</div>
</div>
</div>
</section> </section>
<hidden> <hidden>
<!-- Base Button --> <!-- Base Button -->
<div class="column" id="baseStruct"> <div class="column is-one-quarter" id="baseStruct">
<div class="card" > <div class="card">
<div class="card-image"> <div class="card-image">
<figure class="image is-4by3"> <figure class="image is-4by3">
<img <img
src="https://bulma.io/assets/images/placeholders/1280x960.png" src="https://bulma.io/assets/images/placeholders/1280x960.png"
alt="Placeholder image" alt="Placeholder image"
/> class="product_image"
</figure> />
</div> </figure>
<div class="card-content"> </div>
<p class="title is-4">CocaCola lol</p> <div class="card-content">
<p class="subtitle is-6">0123456789</p> <p class="title is-4 product_name">CocaCola</p>
<p class="subtitle is-6 product_ean">0123456789</p>
</div> <p class="product_description">Explainer</p>
<footer class="card-footer"> </div>
<p class="card-footer-item"> <footer class="card-footer">
<span> 9.99€ </span> <p class="card-footer-item">
</p> <span class="product_price"> 9.99€ </span>
</footer> </p>
</div> </footer>
</div> </div>
</div>
</hidden> </hidden>
<%~ include("partials/footer.eta") %> <%~ include("partials/footer.eta") %>