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
Hide whitespace changes
Inline Side-by-side
client/css/make-purchase.css
+ 22
− 7
View file @ 9e4ac167
......@@ -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;
......
client/js/make-purchase.js
+ 18
− 49
View file @ 9e4ac167
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
client/pages/make-purchase.php
+ 40
− 15
View file @ 9e4ac167
......@@ -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
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