diff --git a/client/css/make-purchase.css b/client/css/make-purchase.css
index 20c55761faa31c16430a937d50a7b7689a448e18..d91a428cce02a1728f0e2d406f2b4b8ee7f7e5a0 100644
--- a/client/css/make-purchase.css
+++ b/client/css/make-purchase.css
@@ -138,7 +138,7 @@
margin-left: auto;
}
-#buy-details button {
+#buy-details button{
background: #3c00a0;
color: #fff;
height: 40px;
@@ -153,12 +153,14 @@
#buy-quantity {
align-self: center;
}
-
+#buy-quantity-input{
+ width: 40px;
+ text-align: center;
+}
#quantity-price-field {
flex: 1 1 auto;
display: flex;
flex-flow: row nowrap;
- justify-content: space-between;
}
#buy-quantity-field {
@@ -167,6 +169,18 @@
flex-flow: row nowrap;
}
+
+/* style for hiding increment and decrement from html */
+#buy-quantity input[type="number"]::-webkit-inner-spin-button,
+#buy-quantity input[type="number"]::-webkit-outer-spin-button,
+#buy-quantity input[type="number"]::-webkit-clear-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+#buy-quantity input[type="number"] {
+ -moz-appearance: textfield;
+}
#buy-price-field {
align-self: center;
}
@@ -176,16 +190,17 @@
background: #3c00a0;
color: #fff;
height: 40px;
- /* width: 40px; */
border-radius: 10px;
+}
+
+#add2cart-button-field button {
+ width: auto;
font-size: 20px;
border: 0;
outline: 0;
cursor: pointer;
transition: background 1s;
- align-items: center;
- padding: 15px;
- align-self: center;
+ padding: 0px 15px;
}
#name-field {
margin-bottom: 0px;
diff --git a/client/js/make-purchase.js b/client/js/make-purchase.js
index 03eab81046c45513fcb74319afd756650086ebb4..2bd669a7c724634b2e736eeea032e2991994c783 100644
--- a/client/js/make-purchase.js
+++ b/client/js/make-purchase.js
@@ -1,53 +1,22 @@
-function itemDetail(){
- var idItem = localStorage.getItem("purchase");
- var purchase = document.getElementById("purchaseform");
- const formdata = new FormData();
- formdata.append("signal", "make-purchase");
- formdata.append("item_id", idItem);
- const xhr = new XMLHttpRequest();
- xhr.open('POST', '../../server/controllers/itemdetail_query.php', true);
- xhr.send(formdata);
- xhr.onreadystatechange = function() {
- if (xhr.readyState === 4 && xhr.status === 200){
- try{
- var responseData = JSON.parse(xhr.responseText);
- if (responseData.success){
- var itemList = responseData.data;
- purchase.innerHTML = `
- <div class="input-group">
- <div class="input-image-field">
- <img src="../image/no_picture.jpeg" id="image-preview" alt="">
- </div>
- <div class="input-text-fields">
- <div class="input-field">
- <input type="text" id="product_name" placeholder="${itemList[i][1]}" disabled>
- </div>
- <div class="input-field" id="product_description-field">
- <textarea type="text" id="product_description" placeholder="${itemList[i][3]}" disabled></textarea>
- </div>
- <div class="input-field" id="product_price-field">
- <input type="text" id="product_price" placeholder="${itemList[i][4]}" oninput="checkNumericPrice()" disabled>
- </div>
- <p id="price-criteria"> </p>
- <div class="input-field" id="product_quantity-field">
- <input type="text" id="product_quantity" placeholder="${itemList[i][5]}" oninput="checkNumericQuantity()" required>
- </div>
- <p id="quantity-criteria"> </p>
- </div>
-
- </div>
- <div class="button-field">
- <button type="button" id="purchasesubmit" onclick="submitPurchase()">Done</button>
- </div>`;
- } else {
- alert("error: " + responseData.message);
- }
- } catch (err){}
- } else if (xhr.status === 404){
- var response = JSON.parse(xhr.responseText);
- console.log(response.message);
- }
+incrementQuantity = () => {
+ document.getElementById("buy-quantity-input").stepUp(1);
+ subTotal();
+}
+decrementQuantity = () => {
+ document.getElementById("buy-quantity-input").stepDown(1);
+ subTotal();
+}
+keyboardInputQuantity = () => {
+ if (document.getElementById("buy-quantity-input").value > document.getElementById("buy-quantity-input").getAttribute("max")){
+ document.getElementById("buy-quantity-input").value = document.getElementById("buy-quantity-input").getAttribute("max");
}
+ subTotal();
+}
+subTotal = () => {
+ var buyQuantity = document.getElementById("buy-quantity-input").value;
+ var buyPrice = parseInt(document.getElementById("product_price").textContent);
+ var subTotal = buyQuantity * buyPrice;
+ return document.getElementById("subtotal_price").innerHTML = subTotal.toString();
}
\ No newline at end of file
diff --git a/client/pages/make-purchase.php b/client/pages/make-purchase.php
index 68ca5b436130f1d9e8e0b23c4196ca5dc575dfa8..531695bea7e355cc3825a14ea00150e33585af28 100644
--- a/client/pages/make-purchase.php
+++ b/client/pages/make-purchase.php
@@ -28,7 +28,9 @@
<body>
<div class="container">
<div class="tabgroup" id="tabgroup">
- <script>addnavbar();</script>
+ <script>
+ addnavbar();
+ </script>
</div>
<div class="purchaseform-group">
<h1 id="title">Make A Purchase</h1>
@@ -41,13 +43,15 @@
</div>
<div id="input-text-fields">
<div class="input-field" id="name-field">
- <h2 type="text" id="product_name" disabled><?php echo $item_details["name"]?> </h2>
+ <h2 type="text" id="product_name" disabled><?php echo $item_details["name"]?></h2>
</div>
<div class="input-field" id="product_price-field">
- <h1 type="text" id="product_price" disabled>Rp<?php echo $item_details["price"]?> </h1>
+ <h1 style="display: inline;">Rp</h1>
+ <h1 type="text" id="product_price" disabled style="display: inline;"><?php echo $item_details["price"]?></h1>
</div>
<div class="input-field" id="product_quantity-field">
- <p type="text" id="product_quantity" disabled> Stock: <?php echo $item_details["quantity"]?> </p>
+ <p style="display: inline;">Stock: </p>
+ <p type="text" id="product_quantity" disabled style="display: inline;"><?php echo $item_details["quantity"]?></p>
</div>
<br>
<div class="input-field" id="product_description-field">
@@ -56,23 +60,41 @@
</div>
<div id= "buy-details">
<div id="buy-quantity-field">
- <button id="min-quantity">
- <i class="fa-solid fa-minus"></i>
- </button>
+ <div>
+ <button id="min-quantity" onclick="decrementQuantity()">
+ <i class="fa-solid fa-minus"></i>
+ </button>
+ </div>
<div id="buy-quantity">
- <p>1</p>
+ <input
+ id="buy-quantity-input"
+ type="number"
+ value="1"
+ min="1"
+ oninput="keyboardInputQuantity()"/></input>
+ <!-- <input id="buy-quantity-input" type="text"></input> -->
+ </div>
+ <div>
+ <button id="plus-quantity" onclick="incrementQuantity()">
+ <i class="fa-solid fa-plus"></i>
+ </button>
</div>
- <button id="plus-quantity">
- <i class="fa-solid fa-plus"></i>
- </button>
</div>
<div id="buy-price-field">
- <p><?php echo $item_details["quantity"]?> </p>
+ <p style="display: inline;">Rp
+ </p>
+ <p style="display: inline;" id="subtotal_price">
+ <script>
+ subTotal();
+ </script>
+ </p>
</div>
<div id="add2cart-button-field">
- <i class="fa-solid fa-cart-shopping">
- </i>
- Add To Cart
+ <button>
+ <i class="fa-solid fa-cart-shopping">
+ </i>
+ Add To Cart
+ </button>
</div>
</div>
</div>
@@ -84,4 +106,7 @@
</div>
</div>
</body>
+ <script id="quantity-editor-max-setter">
+ document.getElementById("buy-quantity-input").setAttribute("max", document.getElementById('product_quantity').textContent);
+ </script>
</html>
\ No newline at end of file