From 3706ed07d206e19cb562583626edae9580ad0158 Mon Sep 17 00:00:00 2001
From: Spacelord <git@spacelord.de>
Date: Mon, 24 Feb 2025 23:34:49 +0100
Subject: [PATCH] Frontend product + user select

---
 static/pages/product_select.js | 22 ++++++++++--
 static/pages/user_select.js    |  4 +++
 views/product_select.eta       | 66 +++++++++++++++++++---------------
 3 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/static/pages/product_select.js b/static/pages/product_select.js
index ba36c2c..1ea9f9a 100644
--- a/static/pages/product_select.js
+++ b/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);
+		}
+	}
+
 });
\ No newline at end of file
diff --git a/static/pages/user_select.js b/static/pages/user_select.js
index 2d2eb1e..eaa2bf7 100644
--- a/static/pages/user_select.js
+++ b/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();
 	}
 }
 
diff --git a/views/product_select.eta b/views/product_select.eta
index d0866f8..aa7c8fb 100644
--- a/views/product_select.eta
+++ b/views/product_select.eta
@@ -1,38 +1,48 @@
 <%~ 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="card-image">
-			<figure class="image is-4by3">
-			<img
-				src="https://bulma.io/assets/images/placeholders/1280x960.png"
-				alt="Placeholder image"
-			/>
-			</figure>
-		</div>
-		<div class="card-content">
-		<p class="title is-4">CocaCola lol</p>
-				<p class="subtitle is-6">0123456789</p>
-
-		</div>
-		<footer class="card-footer">
-			 <p class="card-footer-item">
-      <span> 9.99€ </span>
-    </p>
-		</footer>
-	</div>
-	</div>
+  <!-- Base Button -->
+  <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 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 class="product_price"> 9.99€ </span>
+        </p>
+      </footer>
+    </div>
+  </div>
 </hidden>
 
 <%~ include("partials/footer.eta") %>
 <script src="/static/pages/product_select.js"></script>
-<%~ include("partials/base_foot.eta") %>
+<%~ include("partials/base_foot.eta") %>
\ No newline at end of file