Skip to content
Snippets Groups Projects
Commit 9e4ac167 authored by Christophorus Dharma Winata's avatar Christophorus Dharma Winata
Browse files

feat: make-purchase subtotal price

fix: quantity editor styling
feat: quantity editor script
feat: quantity editor on make-purchase.php
parent 409d2f65
Branches
Tags
No related merge requests found
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
margin-left: auto; margin-left: auto;
} }
#buy-details button { #buy-details button{
background: #3c00a0; background: #3c00a0;
color: #fff; color: #fff;
height: 40px; height: 40px;
...@@ -153,12 +153,14 @@ ...@@ -153,12 +153,14 @@
#buy-quantity { #buy-quantity {
align-self: center; align-self: center;
} }
#buy-quantity-input{
width: 40px;
text-align: center;
}
#quantity-price-field { #quantity-price-field {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between;
} }
#buy-quantity-field { #buy-quantity-field {
...@@ -167,6 +169,18 @@ ...@@ -167,6 +169,18 @@
flex-flow: row nowrap; 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 { #buy-price-field {
align-self: center; align-self: center;
} }
...@@ -176,16 +190,17 @@ ...@@ -176,16 +190,17 @@
background: #3c00a0; background: #3c00a0;
color: #fff; color: #fff;
height: 40px; height: 40px;
/* width: 40px; */
border-radius: 10px; border-radius: 10px;
}
#add2cart-button-field button {
width: auto;
font-size: 20px; font-size: 20px;
border: 0; border: 0;
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;
transition: background 1s; transition: background 1s;
align-items: center; padding: 0px 15px;
padding: 15px;
align-self: center;
} }
#name-field { #name-field {
margin-bottom: 0px; margin-bottom: 0px;
......
function itemDetail(){ incrementQuantity = () => {
var idItem = localStorage.getItem("purchase"); document.getElementById("buy-quantity-input").stepUp(1);
var purchase = document.getElementById("purchaseform"); subTotal();
const formdata = new FormData(); }
formdata.append("signal", "make-purchase"); decrementQuantity = () => {
formdata.append("item_id", idItem); document.getElementById("buy-quantity-input").stepDown(1);
const xhr = new XMLHttpRequest(); subTotal();
xhr.open('POST', '../../server/controllers/itemdetail_query.php', true); }
xhr.send(formdata); keyboardInputQuantity = () => {
xhr.onreadystatechange = function() { if (document.getElementById("buy-quantity-input").value > document.getElementById("buy-quantity-input").getAttribute("max")){
if (xhr.readyState === 4 && xhr.status === 200){ document.getElementById("buy-quantity-input").value = document.getElementById("buy-quantity-input").getAttribute("max");
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);
}
} }
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
...@@ -28,7 +28,9 @@ ...@@ -28,7 +28,9 @@
<body> <body>
<div class="container"> <div class="container">
<div class="tabgroup" id="tabgroup"> <div class="tabgroup" id="tabgroup">
<script>addnavbar();</script> <script>
addnavbar();
</script>
</div> </div>
<div class="purchaseform-group"> <div class="purchaseform-group">
<h1 id="title">Make A Purchase</h1> <h1 id="title">Make A Purchase</h1>
...@@ -41,13 +43,15 @@ ...@@ -41,13 +43,15 @@
</div> </div>
<div id="input-text-fields"> <div id="input-text-fields">
<div class="input-field" id="name-field"> <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>
<div class="input-field" id="product_price-field"> <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>
<div class="input-field" id="product_quantity-field"> <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> </div>
<br> <br>
<div class="input-field" id="product_description-field"> <div class="input-field" id="product_description-field">
...@@ -56,23 +60,41 @@ ...@@ -56,23 +60,41 @@
</div> </div>
<div id= "buy-details"> <div id= "buy-details">
<div id="buy-quantity-field"> <div id="buy-quantity-field">
<button id="min-quantity"> <div>
<i class="fa-solid fa-minus"></i> <button id="min-quantity" onclick="decrementQuantity()">
</button> <i class="fa-solid fa-minus"></i>
</button>
</div>
<div id="buy-quantity"> <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> </div>
<button id="plus-quantity">
<i class="fa-solid fa-plus"></i>
</button>
</div> </div>
<div id="buy-price-field"> <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>
<div id="add2cart-button-field"> <div id="add2cart-button-field">
<i class="fa-solid fa-cart-shopping"> <button>
</i> <i class="fa-solid fa-cart-shopping">
Add To Cart </i>
Add To Cart
</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -84,4 +106,7 @@ ...@@ -84,4 +106,7 @@
</div> </div>
</div> </div>
</body> </body>
<script id="quantity-editor-max-setter">
document.getElementById("buy-quantity-input").setAttribute("max", document.getElementById('product_quantity').textContent);
</script>
</html> </html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment