From 763bb35a452937694b36f633af46f379511d0e73 Mon Sep 17 00:00:00 2001
From: kalipso <kalipso@c3d2.de>
Date: Mon, 14 Apr 2025 11:29:27 +0200
Subject: [PATCH] set item amount at cart

---
 controllers/cartItemController.go | 21 +++++++++++
 static/output.css                 | 60 +++++++++++--------------------
 views/cart.html                   | 28 ++++-----------
 views/orderpreview.html           |  5 ---
 4 files changed, 48 insertions(+), 66 deletions(-)

diff --git a/controllers/cartItemController.go b/controllers/cartItemController.go
index 2f305ef..f21632a 100644
--- a/controllers/cartItemController.go
+++ b/controllers/cartItemController.go
@@ -337,6 +337,27 @@ func (rc *cartItemController) EditItemHandler(c *gin.Context) {
 
 	action := c.PostForm("action")
 
+	if action == "setAmount" {
+		amountStr := c.PostForm("amount")
+		amount, err := strconv.Atoi(amountStr)
+
+		if err != nil {
+			c.HTML(http.StatusBadRequest, "error.html", gin.H{"error": err})
+			return
+		}
+
+		if amount < 0 {
+			c.HTML(http.StatusBadRequest, "error.html", gin.H{"error": "amount cant be negative"})
+			return
+		}
+		if amount > 500 {
+			c.HTML(http.StatusBadRequest, "error.html", gin.H{"error": "amount cant be over 500"})
+			return
+		}
+
+		cartItem.Quantity = amount
+	}
+
 	if action == "increase" {
 		cartItem.Quantity += 1
 	}
diff --git a/static/output.css b/static/output.css
index 5677efe..ea38322 100644
--- a/static/output.css
+++ b/static/output.css
@@ -738,10 +738,6 @@ video {
   width: 33.333333%;
 }
 
-.w-10 {
-  width: 2.5rem;
-}
-
 .w-12 {
   width: 3rem;
 }
@@ -908,10 +904,6 @@ video {
   border-radius: 1.5rem;
 }
 
-.rounded-\[50px\] {
-  border-radius: 50px;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -933,6 +925,11 @@ video {
   border-bottom-left-radius: 0.375rem;
 }
 
+.rounded-l {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1068,6 +1065,11 @@ video {
   background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
 }
 
+.bg-indigo-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1));
+}
+
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
@@ -1228,12 +1230,18 @@ video {
   background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
 }
 
-.fill-red-50 {
-  fill: #fef2f2;
+.bg-indigo-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
 }
 
-.stroke-gray-900 {
-  stroke: #111827;
+.bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
+}
+
+.fill-red-50 {
+  fill: #fef2f2;
 }
 
 .stroke-red-500 {
@@ -1735,11 +1743,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-transparent {
-  --tw-shadow-color: transparent;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .outline {
   outline-style: solid;
 }
@@ -1785,10 +1788,6 @@ video {
   outline-offset: 2px;
 }
 
-.focus-within\:outline-gray-300:focus-within {
-  outline-color: #d1d5db;
-}
-
 .focus-within\:outline-red-500:focus-within {
   outline-color: #ef4444;
 }
@@ -1808,11 +1807,6 @@ video {
   --tw-ring-offset-width: 2px;
 }
 
-.hover\:border-gray-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
-}
-
 .hover\:bg-blue-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
@@ -1828,11 +1822,6 @@ video {
   background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-gray-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
-
 .hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
@@ -1881,11 +1870,6 @@ video {
   text-decoration-line: none;
 }
 
-.hover\:shadow-gray-200:hover {
-  --tw-shadow-color: #e5e7eb;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .focus\:z-10:focus {
   z-index: 10;
 }
@@ -1964,10 +1948,6 @@ video {
   fill: #f87171;
 }
 
-.group:hover .group-hover\:stroke-black {
-  stroke: #000;
-}
-
 .group:hover .group-hover\:stroke-white {
   stroke: #fff;
 }
diff --git a/views/cart.html b/views/cart.html
index 373981d..aeaa5cf 100644
--- a/views/cart.html
+++ b/views/cart.html
@@ -33,28 +33,14 @@
                         </p>
                           <form action="/cart/edit" method="POST">
                         <div class="flex justify-between items-center">
-                            <div class="flex items-center gap-4">
                             <input type="hidden" id="{{ .ID }}" name="id" value="{{ .ID }}">
-                                <button type="submit" name="action" value="decrease"
-                                    class="group rounded-[50px] border border-gray-200 shadow-sm shadow-transparent p-2.5 flex items-center justify-center bg-white transition-all duration-500 hover:shadow-gray-200 hover:bg-gray-50 hover:border-gray-300 focus-within:outline-gray-300">
-                                    <svg class="stroke-gray-900 transition-all duration-500 group-hover:stroke-black"
-                                        width="18" height="19" viewBox="0 0 18 19" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M4.5 9.5H13.5" stroke="" stroke-width="1.6" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg>
+                            <div class="flex items-center gap-4">
+                          <input type="number" name="amount" value="{{ .Quantity }}" step="1" min="0" required class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
+                                <button type="submit" name="action" value="setAmount"
+                                    class="block w-full bg-indigo-500 rounded-md px-3 py-1.5 text-base text-white placeholder:text-gray-400 sm:text-sm/6 duration-500 hover:bg-indigo-700">
+                                  Set Amount
                                 </button>
-                                <p class="border border-gray-200 text-center rounded-full w-10 text-gray-900 font-semibold text-sm py-1.5 px-3 bg-gray-100  text-center">{{ .Quantity }}</p>
-                                <button type="submit" name="action" value="increase"
-                                    class="group rounded-[50px] border border-gray-200 shadow-sm shadow-transparent p-2.5 flex items-center justify-center bg-white transition-all duration-500 hover:shadow-gray-200 hover:bg-gray-50 hover:border-gray-300 focus-within:outline-gray-300">
-                                    <svg class="stroke-gray-900 transition-all duration-500 group-hover:stroke-black"
-                                        width="18" height="19" viewBox="0 0 18 19" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M3.75 9.5H14.25M9 14.75V4.25" stroke="" stroke-width="1.6"
-                                            stroke-linecap="round" stroke-linejoin="round" />
-                                    </svg>
-                                </button>
-                            </div>
+                    </div>
                             <h6 class="text-indigo-600 font-manrope font-bold text-2xl leading-9 text-right">{{ .Quantity}} x {{ .ItemVariant.Price }}€</h6>
                         </div>
                           </form>
@@ -88,7 +74,7 @@
                 <div class="max-lg:max-w-lg max-lg:mx-auto">
                     <p class="font-normal text-base leading-7 text-gray-500 text-center mb-5 mt-6">Shipping calculated at checkout</p>
                     <button type="submit"
-                        class="rounded-full py-4 px-6 bg-indigo-600 text-white font-semibold text-lg w-full text-center transition-all duration-500 hover:bg-indigo-700 ">Checkout</button>
+                        class="rounded py-4 px-6 bg-indigo-500 text-white font-semibold text-lg w-full text-center transition-all duration-500 hover:bg-indigo-700 ">Checkout</button>
     
                 </div>
                 </form>
diff --git a/views/orderpreview.html b/views/orderpreview.html
index 4ea2093..3b920d8 100644
--- a/views/orderpreview.html
+++ b/views/orderpreview.html
@@ -74,11 +74,6 @@
             </dl>
           </div>
 
-          <div class="flex items-start sm:items-center">
-            <input id="terms-checkbox-2" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-primary-600 focus:ring-2 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600" />
-            <label for="terms-checkbox-2" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"> I agree with the <a href="#" title="" class="text-primary-700 underline hover:no-underline dark:text-primary-500">Terms and Conditions</a> of use of the Flowbite marketplace </label>
-          </div>
-
           <div class="gap-4 sm:flex sm:items-center">
             <button type="button" class="w-full rounded-lg  border border-gray-200 bg-white px-5  py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"><a href="/">Return to Shopping</a></button>