Frontend product + user select

static/pages/product_select.js

@@ -8,10 +8,28 @@ const baseStruct = document.getElementById("baseStruct");
 let globalData;
 
 // On load
-document.addEventListener('DOMContentLoaded', function() {
-	let data = await returnTableDataByTableName('product');
+document.addEventListener('DOMContentLoaded', async function() {
+	let data = await returnTableDataByTableName('products');
 	console.info(`Found ${data.count} products`);
 	const result = data.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);
+		}
+	}
+
 });

static/pages/user_select.js

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

views/product_select.eta

@@ -1,32 +1,42 @@
 <%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
 <%~ include("partials/nav.eta") %>
 
-<section class="section">
-<div class="container columns" id="mainSelect">
-
-</div>
+<section class="section main-content">
+  <div class="container">
+    <div class="columns">
+      <!-- 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>
 
 <hidden>
   <!-- Base Button -->
-	 <div class="column" id="baseStruct">
-	<div class="card" >
+  <div class="column is-one-quarter" id="baseStruct">
+    <div class="card">
       <div class="card-image">
         <figure class="image is-4by3">
           <img
             src="https://bulma.io/assets/images/placeholders/1280x960.png"
             alt="Placeholder image"
+            class="product_image"
           />
         </figure>
       </div>
       <div class="card-content">
-		<p class="title is-4">CocaCola lol</p>
-				<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>
+        <p class="product_description">Explainer</p>
       </div>
       <footer class="card-footer">
         <p class="card-footer-item">
-      <span> 9.99€ </span>
+          <span class="product_price"> 9.99€ </span>
         </p>
       </footer>
     </div>