john/coursera-ibm-java-developer-course
1
Fork 0
Code Issues 17 Pull Requests Actions Activity

Add RetailManagementSystem app

Browse Source
This commit is contained in:
John Ahlroos
2025-11-02 19:25:39 +01:00
parent aae358b2be
commit 8577d69eb1
44 changed files with 6386 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
RetailManagementSystem/front-end/add-parent-product.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMS: Manage Inventory
</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="frontend.css">
<link rel="shortcut icon" href="images/Logo.png" type="image/x-icon">
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div id="navitem">
<a class="navbar-brand" href="#">
<img src="images/Logo.png" alt="Avatar Logo" class="rounded-pill">
</a>
<div id="head">
<h1 style="color: white;">Add Product </h1>
</div>
</div>
</nav>
<div id="form" style="display: flex;">
<form id="myform" onsubmit="addParentProduct(event)">
<label for="parentproductName"> Product Name</label>
<input type="text" name="parentproductName" id="parentproductName" placeholder=" Product Name"
required>
<div id="aStoreSuggestion" style="margin-bottom: 10px;">
</div>
<label for="parentcategory">Select Category</label>
<select name="parentcategory" class="category" id="parentcategory" required>
<option value="" selected>Select category</option>
<option value="Mobile">Mobile </option>
<option value="TV and AV">TV and AV</option>
<option value="Home Appliances">Home Appliances</option>
<option value="Laptops and Monitors">Laptops and Monitors</option>
<option value="Accessories">Accessories</option>
</select>
<label for="pparentroductPrice"> Product's Price</label>
<input type="text" name="parentproductPrice" id="parentproductPrice" placeholder=" price in $"
required>
<label for="SKU"> Product's SKU</label>
<input type="text" name="parentSKU" id="parentSKU" placeholder=" SKU" required>
<input type="submit" value="Add product">
</form>
</div>
<script>
window.onload = () => {
const url = window.location.href;
const params = new URLSearchParams(window.location.search);
let storeId = params.get('storeId');
let storeField = document.getElementById('astoreId');
storeField.value = storeId;
}
</script>
</body>
</html>

97
RetailManagementSystem/front-end/add-product.html Normal file
View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMS: Manage Inventory
</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="frontend.css">
<link rel="shortcut icon" href="images/Logo.png" type="image/x-icon">
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div id="navitem">
<a class="navbar-brand" href="#">
<img src="images/Logo.png" alt="Avatar Logo" class="rounded-pill">
</a>
<div id="head">
<h1 style="color: white;">Add Product </h1>
</div>
</div>
</nav>
<div id="form" style="display: flex;">
<form id="myform" onsubmit="addProductToInventory(event)">
<label for="astoreId"> Store Id</label>
<input type="text" name="astoreId" id="astoreId" required disabled>
<label for="productName"> Product Name</label>
<input type="text" name="productName" id="productName" placeholder=" Product Name" required
onkeyup="fillProductName()">
<div id="aStoreSuggestion" style="margin-bottom: 10px;">
</div>
<label for="productId"> Product Id</label>
<input type="text" name="productId" id="productId" placeholder=" Product Id" required disabled>
<label for="category">Select Category</label>
<select name="category" class="category" id="category" required disabled>
<option value="" selected disabled>Select category</option>
<option value="Mobile">Mobile </option>
<option value="TV and AV">TV and AV</option>
<option value="Home Appliances">Home Appliances</option>
<option value="Laptops and Monitors">Laptops and Monitors</option>
<option value="Accessories">Accessories</option>
</select>
<label for="productPrice"> Product's Price</label disabled>
<input type="text" name="productPrice" id="productPrice" placeholder=" price in $" required disabled>
<label for="SKU"> Product's SKU</label>
<input type="text" name="SKU" id="SKU" placeholder=" SKU" required disabled>
<label for="astockLevel"> Product's Stock Level</label>
<input type="text" name="astockLevel" id="astockLevel" placeholder=" Stock Level">
<input type="submit" value="Add product">
</form>
</div>
<script>
window.onload = () => {
const url = window.location.href;
const params = new URLSearchParams(window.location.search);
let storeId = params.get('storeId');
let storeField = document.getElementById('astoreId');
storeField.value = storeId;
}
</script>
</body>
</html>

1
RetailManagementSystem/front-end/build.gradle Normal file
View File

@@ -0,0 +1 @@
apply plugin: 'base'

113
RetailManagementSystem/front-end/edit-parent-product.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMS: Manage Inventory
</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="frontend.css">
<link rel="shortcut icon" href="images/Logo.png" type="image/x-icon">
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div id="navitem">
<a class="navbar-brand" href="#">
<img src="images/Logo.png" alt="Avatar Logo" class="rounded-pill">
</a>
<div id="head">
<h1 style="color: white;">Edit Product</h1>
</div>
</div>
</nav>
<div id="form" style="display: flex;">
<form id="myform" onsubmit="updateParentProduct(event)">
<div>
<label for="pproductId"> Product Id:</label>
<input type="number" name="pproductId" id="pproductId" placeholder=" Product Id" disabled>
</div>
<div>
<label for="pproductName"> Product Name:</label>
<input type="text" name="pproductName" id="pproductName" placeholder=" Product Name" required>
</div>
<div>
<label for="pcategory">Select Category:</label>
<select name="pcategory" class="category" id="pcategory" required>
<option value="" selected disabled>Select category</option>
<option value="Mobile">Mobile </option>
<option value="TV and AV">TV and AV</option>
<option value="Home Appliances">Home Appliances</option>
<option value="Laptops and Monitors">Laptops and Monitors</option>
<option value="Accessories">Accessories</option>
</select>
</div>
<div>
<label for="pproductPrice"> Price:</label>
<input type="text" name="pproductPrice" id="pproductPrice" placeholder=" price in $" required>
</div>
<div>
<label for="pSKU"> SKU:</label>
<input type="text" name="pSKU" id="pSKU" placeholder=" SKU">
</div>
<div>
<input type="submit" value="Update product">
</div>
</form>
</div>
<script>
window.onload = () => {
const url = window.location.href;
const params = new URLSearchParams(window.location.search);
const productId = params.get('productId');
document.getElementById('pproductId').value = productId;
setTimeout(() => {
getProductByid(productId);
}, 100);
}
</script>
</body>
</html>

122
RetailManagementSystem/front-end/edit-product.html Normal file
View File

@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMS: Manage Inventory
</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="frontend.css">
<link rel="shortcut icon" href="images/Logo.png" type="image/x-icon">
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div id="navitem">
<a class="navbar-brand" href="#">
<img src="images/Logo.png" alt="Avatar Logo" class="rounded-pill">
</a>
<div id="head">
<h1 style="color: white;">Edit Product</h1>
</div>
</div>
</nav>
<div id="form" style="display: flex;">
<form id="myform" onsubmit="updateProduct(event)">
<div>
<label for="ustoreId"> Store Id:</label>
<input type="text" name="ustoreId" id="ustoreId" placeholder=" Store ID" required readonly
disabled>
</div>
<div>
<label for="uproductId"> Product Id:</label>
<input type="number" name="productId" id="uproductId" placeholder=" Product Id" readonly disabled>
</div>
<div>
<label for="uproductName"> Product Name:</label>
<input type="text" name="productName" id="uproductName" placeholder=" Product Name" required
disabled>
</div>
<div>
<label for="ucategory">Select Category:</label>
<select name="category" class="category" id="ucategory" required disabled>
<option value="" selected disabled>Select category</option>
<option value="Mobile">Mobile </option>
<option value="TV and AV">TV and AV</option>
<option value="Home Appliances">Home Appliances</option>
<option value="Laptops and Monitors">Laptops and Monitors</option>
<option value="Accessories">Accessories</option>
</select>
</div>
<div>
<label for="uproductPrice"> Price:</label>
<input type="text" name="productPrice" id="uproductPrice" placeholder=" price in $" required
disabled>
</div>
<div>
<label for="uSKU"> SKU:</label>
<input type="text" name="SKU" id="uSKU" placeholder=" SKU" disabled>
</div>
<div>
<label for="ustockLevel"> Stock Level:</label>
<input type="text" name="stockLevel" id="ustockLevel" placeholder=" Stock Level">
</div>
<div>
<input type="submit" value="Update product">
</div>
</form>
</div>
<script>
window.onload = () => {
const url = window.location.href;
const params = new URLSearchParams(window.location.search);
const productId = params.get('productId');
let storeId = params.get('storeId');
let stockLevel = params.get('stockLevel');
let stockField = document.getElementById('ustockLevel')
let storeField = document.getElementById('ustoreId');
stockField.value = stockLevel;
storeField.value = storeId;
setInterval(viewProductByid(productId), 1000);
}
</script>
</body>
</html>

471
RetailManagementSystem/front-end/frontend.css Normal file
View File

@@ -0,0 +1,471 @@
* {
margin: 0%;
pad: 0%;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.navbar {
background-color: #343a40 !important;
padding: 10px;
}
.navbar h1 {
color: white;
margin-left: 10px;
}
#form input,
#form select {
display: block;
margin: 10px 30px 0 10px;
padding: 7px;
border-radius: 10px;
width: 220px;
}
input[type="submit"],
input[type="button"] {
background-color: black;
color: white;
}
#all-product-list .col {
display: flex;
align-items: center;
justify-content: center;
}
.navbar {
height: 100px;
}
.rounded-pill {
width: 80px;
height: 80px;
}
#navitem {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
#head {
flex-grow: 1;
display: flex;
justify-content: center;
margin-right: 50px;
}
#navbelow {
margin-top: 10px;
display: flex;
justify-content: center;
}
#form {
margin-top: 20px;
display: block;
justify-content: center;
align-items: center;
}
.nav-pills .nav-link.active {
color: white !important;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
}
#success,
#failed {
margin-top: 10px;
justify-self: center;
}
#alert {
position: relative;
height: 40px;
}
.alert {
margin-bottom: 0px !important;
}
td input,
td label {
margin-right: 5px;
}
#submit {
display: flex;
justify-content: center;
margin-top: 40px;
}
#submit button {
color: white;
background-color: black;
border-radius: 10px;
}
#suggestion,
#StoreSuggestion,
#usuggestion,
#uStoreSuggestion {
margin-top: -15px;
display: grid;
}
#suggestion button,
#StoreSuggestion button,
#usuggestion button,
#uStoreSuggestion button {
justify-content: center;
align-items: center;
border: 2px solid black;
background-color: white;
margin-left: 10px;
width: 250px;
}
.addStoreForm {
align-items: center;
justify-content: center;
display: grid;
}
#CustomerForm,
#OrderForm,
.OrderQuantity {
display: ruby;
width: 100%;
justify-content: center;
}
#submitButton {
align-items: center;
justify-content: center;
}
#productTable {
width: 100%;
border-collapse: collapse;
/* Ensures no space between cells */
margin: 20px 0;
font-family: Arial, sans-serif;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
/* Table shadow */
}
#productTable th,
#productTable td {
padding: 12px 15px;
/* Padding inside cells */
text-align: left;
/* Align text to the left */
}
#productTable th {
background-color: #f2f2f2;
/* Light gray background for headers */
font-weight: bold;
}
#productTable td {
background-color: #fff;
/* White background for table data */
border: 1px solid #ddd;
/* Border around table cells */
}
#productTable .input-cell {
width: 107%;
/* Make input fill the cell */
border: none;
/* Remove default input border */
padding: 8px;
/* Padding inside the input */
font-size: 14px;
/* Font size for input */
background-color: #f9f9f9;
/* Light background for inputs */
border-radius: 10px;
}
#productTable .input-cell:disabled {
background-color: #e0e0e0;
/* Gray background for disabled inputs */
color: #a0a0a0;
/* Light gray text for disabled inputs */
cursor: not-allowed;
/* Change cursor to indicate the input is disabled */
}
#productTable .remove-btn {
padding: 6px 12px;
background-color: #ff4d4d;
/* Red button */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#productTable .remove-btn:hover {
background-color: #e60000;
/* Darker red on hover */
}
#productTable td:last-child {
text-align: center;
/* Center-align the "Remove" button */
}
[id^="OrderSuggestion"] {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.suggestionCard {
background-color: white;
height: auto;
display: flex;
align-items: center;
width: 107%;
justify-content: center;
}
.suggestionCard h6 {
height: 30px;
border-radius: 10px;
width: 107%;
display: flex;
align-items: center;
justify-content: center;
}
.suggestionCard h6:hover {
background-color: #e9e8e8;
}
#AddBtn {
display: flex;
justify-content: right;
border-radius: 10px;
}
#AddBtn button {
border-radius: 2px;
color: black;
border-radius: 10px;
background-color: rgb(125, 231, 125);
}
#submitButton input {
border-radius: 10px;
width: 250px;
font: inherit;
height: 42px;
margin-bottom: 100px;
}
#myform {
margin: 50px;
}
#myform input,
#totalOrderValuediv input {
text-align: center;
}
#totalOrderValuediv {
justify-content: right;
align-items: center;
display: flex;
margin-top: 50px;
margin-bottom: 50px;
}
#CustomerDetails input,
#myform input,
#totalOrderValuediv input {
border-radius: 5px;
font-size: inherit;
height: 42px;
margin: 10px;
width: 250px;
}
#CustomerForm label {
margin: 10px;
}
#CustomerForm {
display: block;
}
#CustomerDetails .row {
margin: 20px;
}
#CustomerDetails .col {
display: grid;
align-items: center;
justify-content: center;
}
table {
table-layout: fixed;
width: 100%;
}
td,
th {
overflow: hidden;
background-color: black;
text-overflow: ellipsis;
max-width: 200px;
}
/* Default state: Truncate text and show ellipsis */
.expandable {
max-width: 300px;
/* Adjust this width as needed */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
/* Indicate that it's clickable */
}
.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
}
.tablediv {
overflow-x: auto;
}
#aStoreSuggestion {
display: grid;
margin-top: -12px;
justify-content: center;
border-bottom: 2px solid black;
width: 250px;
margin-left: 10px
}
#aStoreSuggestion button {
width: 250px;
background-color: white;
border-bottom: none;
}
#product-details {
display: flex;
margin: 100px;
justify-content: center;
}
#product-details input {
margin-right: 100px;
padding: 7px;
border-radius: 10px;
width: 220px;
}
#product-details label {
display: flex;
margin-right: 30px;
align-items: center;
}
#reviews {
margin-top: 50px;
}
.customer-name
{
font-weight: bold;
display: flex;
justify-content: center;
}
.customer-review
{
display: flex;
justify-content: center;
margin-top: 10px;
}
.review-card {
padding: 20px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
width: 100%;
height: auto;
margin-bottom: 24px;
}
.rating
{
display: flex;
justify-content: center;
}
.review{
margin-top: 20px;
}
.golden
{
color: #ffc100
}

BIN
RetailManagementSystem/front-end/images/Logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

413
RetailManagementSystem/front-end/index.html Normal file
View File

@@ -0,0 +1,413 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMS: Manage Inventory
</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="frontend.css">
<link rel="shortcut icon" href="images/Logo.png" type="image/x-icon">
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div id="navitem">
<a class="navbar-brand" href="#">
<img src="images/Logo.png" alt="Avatar Logo" class="rounded-pill">
</a>
<div id="head">
<h1 style="color: white;">Manage Inventory </h1>
</div>
</div>
</nav>
<div id="navbelow">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" id="navBar1" data-bs-toggle="pill" href="#AddStore" onclick="location=`frontend.html`">Add Store</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navBar2" data-bs-toggle="pill" href="#ManageProducts">Manage Products</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navBar3" data-bs-toggle="pill" href="#ManageInventory">Manage Inventory </a>
</li>
<li class="nav-item">
<a class="nav-link" id="navBar4" data-bs-toggle="pill" href="#PlaceOrder">Place Order</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane container fade" id="ManageInventory">
<div>
<div id="form">
<div style="display: flex; justify-content: center;">
<form id="myform" onsubmit="viewProduct(event)"
style="display: flex; justify-content: center; align-items: center;">
<label for="storeId">Store Id: </label>
<input type="number" name="storeId" id="vstoreId" placeholder="Store Id" required>
<input type="submit" id="ViewProductButton" value="View products">
</form>
</div>
<div class="row" style="display: flex;">
<div class="col">
<select name="category" class="category" id="category" required onchange="filter()"
disabled>
<option value="Allcategory" selected>All category</option>
<option value="Mobile">Mobile </option>
<option value="TV and AV">TV and AV</option>
<option value="Home Appliances">Home Appliances</option>
<option value="Laptops and Monitors">Laptops and Monitors</option>
<option value="Accessories">Accessories</option>
</select>
</div>
<div class="col" style="display: flex;">
<input type="text" name="searchBar" id="searchBar" placeholder="Type Here" disabled>
<input type="submit" id="SearchButton" value="Search" onclick="filter()" disabled>
</div>
<div class="col">
<input type="submit" id="AddProducts" value="Add Product" onclick="redirectToAddPrdouct()"
style="background-color: rgb(125, 231, 125);color: black;">
</div>
</div>
</div>
</div>
<div class="tablediv container-fluid">
<table class="table table-hover styled-table">
<thead>
<tr>
<th scope="col">ProductId</th>
<th scope="col">Product Name</th>
<th scope="col">Category</th>
<th scope="col">Price</th>
<th scope="col">SKU</th>
<th scope="col">Stock Level</th>
<th scope="col">Reviews</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
<div class="tab-pane container fade" id="ManageProducts">
<div id="form" style="margin-top: 50px; margin-bottom: 50px;">
<div class="row" id="all-product-list" style="display: flex;">
<div class="col">
<input type="submit" id="AddParentProduct" value="Add Product"
onclick="RedirectToAddParentProduct()"
style="background-color: rgb(125, 231, 125);color: black;">
</div>
<div class="col">
<input type="text" name="searchBar" id="ProductsearchBar" placeholder="Type Here">
<input type="submit" id="ProductSearchButton" value="Search" onclick="filterParentProduct()">
</div>
<div class="col">
<select name="category" class="pcategory" id="pcategory" required
onchange="filterParentProduct()">
<option value="Allcategory" selected>All category</option>
<option value="Mobile">Mobile </option>
<option value="TV and AV">TV and AV</option>
<option value="Home Appliances">Home Appliances</option>
<option value="Laptops and Monitors">Laptops and Monitors</option>
<option value="Accessories">Accessories</option>
</select>
</div>
</div>
</div>
<div class="tablediv container-fluid">
<table class="table table-hover styled-table">
<thead>
<tr>
<th scope="col">ProductId</th>
<th scope="col">Product Name</th>
<th scope="col">Category</th>
<th scope="col">Price</th>
<th scope="col">SKU</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody id="allProducts">
</tbody>
</table>
<div id="paginationControls">
</div><br>
</div>
</div>
<div class="tab-pane container active" id="AddStore">
<div>
<div id="form">
<form id="myform" class="addStoreForm" onsubmit="addStore(event)">
<label for="storeName"> Name:</label>
<input type="text" id="storeName" name="storeName" placeholder=" Store Name" required>
<label for="storeAddress1"> Address Line 1:</label>
<input type="text" id="storeAddress1" name="storeAddress1" placeholder=" Address Line1"
maxlength="26" required>
<label for="storeAddress2"> Address Line 2</label>
<input type="text" id="storeAddress2" name="storeAddress2" placeholder=" Address Line2"
maxlength="26">
<label for="storeAddress3"> Address Line 3</label>
<input type="text" id="storeAddress3" name="storeAddress3" placeholder=" Address Line3"
maxlength="26">
<input type="submit" value="Add Store">
</form>
</div>
</div>
</div>
<div class="tab-pane container fade" id="PlaceOrder">
<div id="Orderform" class="container">
<form id="myform" onsubmit="validateStoreId(event)"
style="display:flex;align-items: center; justify-content: center; margin-bottom: 50px;">
<label for="orderStoreId"> Store Id:</label>
<input type="number" name="orderStoreId" id="orderStoreId" placeholder=" Store Id" required>
<input type="submit" id="ViewProductButton" value="Validate">
</form>
<form onsubmit="placeOrder(event)">
<div id="displayForm" style="display: none;">
<div id="CustomerForm">
<h2>Customer Details</h2>
<div id="CustomerDetails">
<div class="row">
<div class="col">
<label for="customerName"> Name:</label>
<input type="text" name="customerName" id="customerName" placeholder=" Name"
required>
</div>
<div class="col">
<label for="customerEmail"> Email:</label>
<input type="email" name="customerEmail" id="customerEmail" placeholder=" Email"
required>
</div>
</div>
<div class="row">
<div class="col">
<label for="customerPhone"> Mobile No:</label>
<input type="tel" name="customerPhone" id="customerPhone"
placeholder=" Mobile No" required>
</div>
<div class="col">
<label for="datetime">Date and Time:</label>
<input type="datetime-local" name="datetime" id="datetime"
placeholder=" Date and time" required disabled>
</div>
</div>
</div>
<div style="display: flex; justify-content: left; margin-top: 20px;">
<h2>Order Details</h2>
</div>
<div id="OrderList">
<table id="productTable">
<thead>
<tr>
<th>Serial No</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
<th>Remove</th>
</tr>
</thead>
<tbody id="OrderListBody">
<tr id="1">
<td><input type="text" value="1" class="input-cell SerialNo" disabled>
</td>
<td><input type="text" class="input-cell" id="orderProductName1"
placeholder=" Product Name" onkeyup="fillProductId(1)" required>
<div id="OrderSuggestion1">
</div>
</td>
<td><input type="text" class="input-cell" id="orderProductId1"
placeholder=" ProductId" disabled required></td>
<td><input type="text" class="input-cell" id="orderProductPrice1"
placeholder=" Product price" disabled required></td>
<td><input type="text" class="input-cell" id="orderProductQuantity1"
placeholder=" Quantity" required
onkeyup="calculatePrice(1),validateQuantity(1)"></td>
<td><input type="text" class="input-cell" id="orderTotal1"
placeholder=" Total Here" disabled required></td>
<td><button type="button" class="remove-btn"
onclick="deleteDiv(1)">Remove</button></td>
</tr>
</tbody>
</table>
<div id="AddBtn">
<button type="button" onclick="createMoreOrderField()">Add Field</button>
</div>
</div>
<div id="totalOrderValuediv">
<label for="OrderValue">Total Price</label>
<input type="number" name="totalOrderValue" id="totalOrderValue"
placeholder="Total Price" required disabled>
</div>
</div>
<div id="submitButton" style="display: none; ">
<input type="submit" value="Place Order">
</div>
</form>
</div>
</div>
</div>
<div id="modal">
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Alert</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<span>Are you sure you want to delete</span>
<span id="deleteProuctName" style="display: inline-block;"></span>
<span> from database permanently</span>
</div>
<!-- Modal footer -->
<div class="modal-footer" id="modal-footer">
</div>
</div>
</div>
</div>
</div>
<script>
window.onload = () => {
const url = window.location.href;
const params = new URLSearchParams(window.location.search);
const navbar = params.get('id');
const storeId = params.get('storeid');
if (storeId)
{
document.getElementById('vstoreId').value=storeId;
document.getElementById('ViewProductButton').click();
}
if (navbar) {
let navbar1 = document.getElementById('navBar1');
let navbarText = document.getElementById('AddStore');
navbar1.classList.remove('active');
navbarText.classList.remove('active');
navbarText.classList.add('fade');
let currentNavbar = document.getElementById(navbar);
currentNavbar.classList.add('active');
let hrefValue = currentNavbar.getAttribute("href");
let activeContent = document.querySelector(hrefValue);
activeContent.classList.remove('fade');
activeContent.classList.add('active');
}
viewProductList();
}
function RedirectToAddParentProduct() {
location.href = `add-parent-product.html`;
}
function redirectToAddPrdouct() {
let storeId = document.getElementById('vstoreId').value;
if (storeId) {
location.href = `add-product.html?storeId=${storeId}`
}
else {
alert("Enter store id first");
}
}
</script>
</body>
</html>

181
RetailManagementSystem/front-end/reviews.html Normal file
View File

@@ -0,0 +1,181 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reviews
</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="frontend.css">
<link rel="shortcut icon" href="images/Logo.png" type="image/x-icon">
</head>
<style>
#backButton {
background-color: rgb(209, 213, 219);
border-radius: 10px;
font-size: large;
}
</style>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div id="navitem">
<a class="navbar-brand" href="#">
<img src="images/Logo.png" alt="Avatar Logo" class="rounded-pill">
</a>
<div id="head">
<h1 style="color: white;">Customer Reviews </h1>
</div>
<div id="back-button">
</div>
</div>
</nav>
<div id="product-details">
<label for="product-id">Product Id: </label>
<input type="text" name="product-id" id="product-id" placeholder="Product Id:" disabled>
<label for="product-name">Product Name: </label>
<input type="text" name="product-name" id="product-name" placeholder="Product Name" disabled>
</div>
<hr class="container">
<div id="reviews" class="container">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
<script>
window.onload = () => {
const url = window.location.href;
const params = new URLSearchParams(window.location.search);
let storeId = params.get('storeId');
let productName = params.get('productName');
let productId = params.get('productId');
let backDiv=document.getElementById('back-button');
backDiv.innerHTML=`<button id="backButton" type="button" value="${storeId}" onclick="goBackToInventory()">Go Back</button>`;
document.getElementById('product-id').value = productId;
document.getElementById('product-name').value = productName;
setTimeout(() => {
getReviews(storeId, productId);
}, 500);
}
function getReviews(storeId, productId) {
url = `URL/reviews/${storeId}/${productId}`;
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" }
})
.then(response => {
return response.json();
})
.then(data => {
createReview(data.reviews)
})
.catch(error => {
alert(error);
})
}
function createReview(reviews) {
try {
let allColumns = document.querySelectorAll('.col');
let count = 0;
for (review of reviews) {
reviewcard = document.createElement('div');
reviewcard.classList.add('review-card');
customerName = document.createElement('div');
customerName.classList.add("customer-name");
customerSpan = document.createElement('span')
customerSpan.textContent = review.customerName;
customerName.appendChild(customerSpan);
reviewDiv = document.createElement('div');
reviewDiv.classList.add('review');
rating = document.createElement('div');
rating.classList.add('rating');
let i = 0
let listStar = "";
for (; i < review.rating; i++) {
listStar = listStar + "" + `<i class="fa-solid fa-star golden"></i>`;
}
for (; i < 5; i++) {
listStar = listStar + "" + `<i class="fa-solid fa-star"></i>`;
}
rating.innerHTML = listStar;
reviewDiv.appendChild(rating);
customerReview = document.createElement('div');
customerReview.classList.add('customer-review')
customerReview.textContent = review.review;
reviewDiv.appendChild(customerReview);
reviewcard.appendChild(customerName);
reviewcard.appendChild(reviewDiv);
allColumns[`${count % 3}`].appendChild(reviewcard);
count++;
}
}
catch (error) {
console.log(error);
}
}
function goBackToInventory() {
button=document.getElementById('backButton');
storeId=button.value;
location.href = `index.html?id=navBar3&storeid=${storeId}`;
}
</script>
</body>
</html>

948
RetailManagementSystem/front-end/script.js Normal file
View File

@@ -0,0 +1,948 @@
const apiURL = '';
let students = [];
let Ordercount = 1;
let deleteRow = [];
function resetForm() {
const inputs = document.querySelectorAll("#myform input:not([type='submit']), #myform select");
inputs.forEach(input => {
input.value = "";
})
}
document.addEventListener('DOMContentLoaded', function () {
const navLinks = document.querySelectorAll('.nav-item .nav-link');
const activeLink = document.querySelector('.nav-item .nav-link.active');
if (activeLink) {
let html = `<h1 style='color: white;'>${activeLink.textContent}</h1>`
head.innerHTML = html;
}
navLinks.forEach(link => {
link.addEventListener('click', function (event) {
let html = `<h1 style='color: white;'>${event.target.textContent}</h1>`
head.innerHTML = html;
});
});
});
function createMoreOrderField() {
Ordercount++;
OrderList = document.getElementById('OrderListBody');
tr = document.createElement('tr');
tr.setAttribute('id', `${Ordercount}`)
tr.innerHTML =
`
<td><input type="text" class="input-cell SerialNo" disabled>
</td>
<td><input type="text" class="input-cell" id="orderProductName${Ordercount}"
placeholder="Enter Product Name" onkeyup="fillProductId(${Ordercount})"
required>
<div id="OrderSuggestion${Ordercount}">
</div>
</td>
<td><input type="text" class="input-cell" id="orderProductId${Ordercount}"
placeholder="Enter ProductId" disabled required></td>
<td><input type="text" class="input-cell" id="orderProductPrice${Ordercount}"
placeholder=" Enter Product price" disabled required></td>
<td><input type="text" class="input-cell" id="orderProductQuantity${Ordercount}"
placeholder="Enter Quantity" required
onkeyup="calculatePrice(${Ordercount}),validateQuantity(${Ordercount})"></td>
<td><input type="text" class="input-cell" id="orderTotal${Ordercount}"
placeholder="Enter Total Here" disabled required></td>
<td><button type="button" class="remove-btn" onclick="deleteDiv(${Ordercount})">Remove</button></td>
`
OrderList.appendChild(tr);
setSerialNo();
}
function deleteDiv(count) {
let divToDelete = document.getElementById(`${count}`);
// Check if the div exists
if (divToDelete && Ordercount != 1) {
divToDelete.remove();
deleteRow.push(count);
}
else {
alert(`Atleast One row is required`);
}
setSerialNo()
calculateTotal()
}
function calculateTotal() {
let total = 0;
for (let i = 1; i <= Ordercount; i++) {
totalField = document.getElementById(`orderTotal${i}`);
if (totalField) {
if (totalField.value)
total = total + parseInt(totalField.value)
}
}
document.getElementById('totalOrderValue').value = total;
}
function setSerialNo() {
const serialNos = document.querySelectorAll('.SerialNo');
let count = 1;
serialNos.forEach(serialNo => {
serialNo.value = count++;
});
}
function fillProductId(count) {
let storeId = document.getElementById('orderStoreId').value;
suggestion = document.getElementById(`OrderSuggestion${count}`);
productId = document.getElementById(`orderProductName${count}`).value
if (productId.trim() !== '') {
let url = `${apiURL}/inventory/search/${productId}/${storeId}`;
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
showOrderSuggestion(data.product, count);
})
.catch(error => {
alert(error);
})
}
else {
suggestion.innerHTML = "";
}
}
function showOrderSuggestion(products, count) {
suggestion = document.getElementById(`OrderSuggestion${count}`);
productName = document.getElementById(`orderProductName${count}`);
productId = document.getElementById(`orderProductId${count}`);
productPrice = document.getElementById(`orderProductPrice${count}`);
quantity = document.getElementById(`orderProductQuantity${count}`);
suggestion.innerHTML = "";
for (product of products) {
div = document.createElement('div');
div.classList.add('suggestionCard');
h6 = document.createElement('h6');
h6.textContent = product.name
div.appendChild(h6);
div.addEventListener('click', (function (product) {
return function () {
quantity.value = '1';
productName.value = product.name;
productId.value = product.id;
productPrice.value = product.price;
suggestion.innerHTML = "";
calculatePrice(count);
};
})(product));
suggestion.appendChild(div);
}
}
function calculatePrice(count) {
price = document.getElementById(`orderProductPrice${count}`).value;
quantity = document.getElementById(`orderProductQuantity${count}`).value;
total = document.getElementById(`orderTotal${count}`);
total.value = (price * quantity);
calculateTotal();
}
function validateStoreId(event) {
event.preventDefault();
let now = new Date();
let year = now.getFullYear();
let month = String(now.getMonth() + 1).padStart(2, '0');
let day = String(now.getDate()).padStart(2, '0');
let hours = String(now.getHours()).padStart(2, '0');
let minutes = String(now.getMinutes()).padStart(2, '0');
let formattedDateTime = `${year}-${month}-${day}T${hours}:${minutes}`;
let dateTimeInput = document.getElementById("datetime");
dateTimeInput.value = formattedDateTime;
let submitButton = document.getElementById('submitButton');
let storeId = document.getElementById('orderStoreId');
let url = `${apiURL}/store/validate/${storeId.value}`
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
if (data === true) {
storeId.disabled = true;
document.getElementById('displayForm').style = 'display:block';
submitButton.style = 'display:flex';
}
else {
alert("Enter correct Store id")
}
})
}
function addStore(event) {
event.preventDefault();
let storeName = document.getElementById('storeName').value;
let storeAddress1 = document.getElementById('storeAddress1').value;
let storeAddress2 = document.getElementById('storeAddress2').value;
let storeAddress3 = document.getElementById('storeAddress3').value;
let storeAddress = storeAddress1 + " " + storeAddress2 + " " + storeAddress3;
let data = { name: storeName, address: storeAddress };
let url = `${apiURL}/store`
fetch(url, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify(data)
})
.then(response => {
return response.json();
})
.then(data => {
alert(data.message);
resetForm();
})
}
function viewProduct(event) {
if (event) {
event.preventDefault();
}
let inputstoreId = document.getElementById('vstoreId');
document.getElementById('searchBar').disabled = false
document.getElementById('SearchButton').disabled = false;
document.getElementById('vstoreId').disabled = false
document.getElementById('category').disabled = false;
storeId = inputstoreId.value;
inputstoreId.disabled = true;
let url = `${apiURL}/inventory/${storeId}`;
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
createData(data.products, storeId);
})
}
function filter() {
productName = document.getElementById('searchBar').value
category = document.getElementById('category').value;
if (category.trim() == 'Allcategory' && productName.trim().length == 0) {
viewProduct(event);
return;
}
else if (productName.trim().length == 0) {
productName = null;
}
else if (category.trim() == 'Allcategory') {
category = null;
}
let storeId = document.getElementById('vstoreId').value;
let url = `${apiURL}/inventory/filter/${category}/${productName}/${storeId}`;
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
createData(data.product, storeId);
})
.catch(error => {
alert(error);
})
}
async function createData(products, storeId) {
const tableBody = document.getElementById('tableBody');
tableBody.innerHTML = '';
products.forEach(product => {
const row = document.createElement('tr');
const prodId = document.createElement('td');
prodId.classList.add('expandable');
prodId.textContent = product.id;
const name = document.createElement('td');
name.classList.add('expandable');
name.textContent = product.name;
const category = document.createElement('td');
category.classList.add('expandable');
category.textContent = product.category;
const price = document.createElement('td');
price.classList.add('expandable');
price.textContent = product.price;
const sku = document.createElement('td');
sku.classList.add('expandable');
sku.textContent = product.sku;
const stockLevel = document.createElement('td');
stockLevel.classList.add('expandable');
stockLevel.textContent = product.inventory[0].stockLevel;
const reviewCol = document.createElement('td');
const reviewBtn = document.createElement('button');
reviewBtn.classList.add('btn', 'btn-info');
reviewBtn.textContent = 'Reviews';
reviewBtn.addEventListener('click', () => {
window.location = `reviews.html?productId=${product.id}&storeId=${storeId}&productName=${product.name}`;
})
reviewCol.appendChild(reviewBtn);
const buttoncolumn = document.createElement('td');
const button = document.createElement('button')
button.classList.add('btn', 'btn-warning');
button.textContent = 'Edit';
button.addEventListener('click', () => {
window.location = `edit-product.html?productId=${product.id}&storeId=${storeId}&stockLevel=${product.inventory[0].stockLevel}`;
});
buttoncolumn.appendChild(button);
const buttonTable2 = document.createElement('td');
const delbutton = document.createElement('button')
delbutton.classList.add('btn', 'btn-danger');
delbutton.textContent = 'Delete';
delbutton.value = product.id;
delbutton.addEventListener('click', function () {
showModal(this.value, product.name, 2);
});
buttonTable2.appendChild(delbutton);
row.appendChild(prodId);
row.appendChild(name);
row.appendChild(category);
row.appendChild(price);
row.appendChild(sku);
row.appendChild(stockLevel);
row.appendChild(reviewCol);
row.appendChild(buttoncolumn);
row.appendChild(buttonTable2);
tableBody.appendChild(row);
});
}
function viewProductByid(productId) {
let url = `${apiURL}/product/product/${productId}`;
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
if (data.products) {
fillDetails(data.products, productId);
}
else {
alert("No data with product id: " + productId);
resetForm();
return;
}
})
.catch(error => {
alert(error);
})
}
function fillDetails(products, productId) {
let productIdDiv = document.getElementById('uproductId');
let productName = document.getElementById('uproductName');
let category = document.getElementById('ucategory');
let productPrice = document.getElementById('uproductPrice');
let SKU = document.getElementById('uSKU');
productIdDiv.value = productId;
productName.value = products.name;
category.value = products.category;
productPrice.value = products.price;
SKU.value = products.sku;
}
function updateProduct(event) {
event.preventDefault();
let productId = document.getElementById('uproductId').value;
let productName = document.getElementById('uproductName').value;
let category = document.getElementById('ucategory').value;
let productPrice = document.getElementById('uproductPrice').value;
let SKU = document.getElementById('uSKU').value;
let stockLevel = document.getElementById('ustockLevel').value;
let storeId = document.getElementById('ustoreId').value;
let ProductModel = { id: productId, name: productName, category: category, price: productPrice, sku: SKU };
let InventoryModel = { product: { id: productId }, store: { id: storeId }, stockLevel: stockLevel };
let data = { product: ProductModel, inventory: InventoryModel };
console.log(data);
let url = `${apiURL}/inventory`;
fetch(url, {
method: "PUT",
headers: { "content-type": "application/json" },
body: JSON.stringify(data)
})
.then(response => {
return response.json();
})
.then(data => {
alert(data.message);
location.href = `index.html?id=navBar3&storeid=${storeId}`;
})
}
function fillProductName() {
let productName = document.getElementById('productName').value;
if (productName.trim() != "") {
let url = `${apiURL}/product/searchProduct/${productName}`;
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
showproductSuggestion(data.products);
})
.catch(error => {
alert(error);
})
}
else {
suggestion = document.getElementById('aStoreSuggestion');
suggestion.innerHTML = "";
}
}
function showproductSuggestion(products) {
suggestion = document.getElementById('aStoreSuggestion');
productName = document.getElementById('productName')
productId = document.getElementById('productId')
category = document.getElementById('category');
productPrice = document.getElementById('productPrice');
SKU = document.getElementById('SKU');
suggestion.innerHTML = "";
for (product of products) {
button = document.createElement('button');
button.type = 'button'
button.value = product.id;
button.innerHTML = product.name;
button.addEventListener('click', (function (product) {
return function () {
productName.value = product.name;
suggestion.innerHTML = "";
productId.value = product.id;
category.value = product.category;
productPrice.value = product.price;
SKU.value = product.sku;
};
})(product));
suggestion.appendChild(button);
}
}
function addProductToInventory(event) {
event.preventDefault();
productId = document.getElementById('productId').value;
storeId = document.getElementById('astoreId').value;
stockLevel = document.getElementById('astockLevel').value;
let data = { product: { id: productId }, store: { id: storeId }, stockLevel: stockLevel };
let url = `${apiURL}/inventory`
fetch(url, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify(data)
})
.then(response => {
return response.json();
})
.then(data => {
alert(data.message);
location.href = `index.html?id=navBar3&storeid=${storeId}`;
})
}
function viewProductList() {
let url = `${apiURL}/product`;
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
if (data.products) {
showProductsInTable(data.products);
}
else {
alert("No data with product id: " + productId);
resetForm();
return;
}
})
.catch(error => {
alert(error);
})
}
function showProductsInTable(products) {
allProducts = document.getElementById('allProducts')
allProducts.innerHTML = "";
products.forEach(product => {
const row = document.createElement('tr');
const prodId = document.createElement('td');
prodId.classList.add('expandable');
prodId.textContent = product.id;
const name = document.createElement('td');
name.classList.add('expandable');
name.textContent = product.name;
const category = document.createElement('td');
category.classList.add('expandable');
category.textContent = product.category;
const price = document.createElement('td');
price.classList.add('expandable');
price.textContent = product.price;
const sku = document.createElement('td');
sku.classList.add('expandable');
sku.textContent = product.sku;
const buttonTable = document.createElement('td');
const button = document.createElement('button')
button.classList.add('btn', 'btn-warning');
button.value = product.id;
button.textContent = 'Edit';
button.addEventListener('click', function () {
window.location = `edit-parent-product.html?productId=${this.value}`
});
buttonTable.appendChild(button);
const buttonTable2 = document.createElement('td');
const delbutton = document.createElement('button')
delbutton.classList.add('btn', 'btn-danger');
delbutton.textContent = 'Delete';
delbutton.value = product.id;
delbutton.addEventListener('click', function () {
showModal(this.value, product.name, 1);
});
buttonTable2.appendChild(delbutton);
row.appendChild(prodId);
row.appendChild(name);
row.appendChild(category);
row.appendChild(price);
row.appendChild(sku);
row.appendChild(buttonTable);
row.appendChild(buttonTable2);
allProducts.appendChild(row);
});
}
function showModal(id, name, action) {
console.log(action);
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
const modalFooter = document.getElementById('modal-footer');
text = document.getElementById('deleteProuctName');
text.innerHTML = name;
modalFooter.innerHTML = "";
button = document.createElement('button');
button.classList.add('btn', 'btn-danger')
button.textContent = 'Yes';
if (action == 1) {
button.addEventListener('click', function () {
deleteItembyId(id);
myModal.hide();
})
}
else {
button.addEventListener('click', function () {
removeFromInventory(id)
myModal.hide();
})
}
modalFooter.appendChild(button);
myModal.show();
}
function deleteItembyId(id) {
let url = `${apiURL}/product/${id}`;
fetch(url, {
method: "DELETE",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
alert(data.message);
location.href = "index.html?id=navBar2";
})
.catch(error => {
alert(error);
})
}
function removeFromInventory(id) {
let url = `${apiURL}/inventory/${id}`
fetch(url, {
method: "DELETE",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
alert(data.message);
viewProduct(event);
location.href = `index.html?id=navBar3&storeid=${storeId}`;
})
.catch(error => {
alert(error);
})
}
async function filterParentProduct() {
category = document.getElementById('pcategory').value;
productName = document.getElementById('ProductsearchBar').value;
if (category.trim() == 'Allcategory' && productName.trim().length == 0) {
viewProductList();
return;
}
else if(category.trim() == 'Allcategory')
{
category=null;
}
else if(productName.trim().length == 0)
{
productName=null;
}
let url = `${apiURL}/product/category/${productName}/${category}`;
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
showProductsInTable(data.products);
})
.catch(error => {
alert(error);
})
}
function getProductByid(productId) {
let url = `${apiURL}/product/product/${productId}`;
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" },
})
.then(response => {
return response.json();
})
.then(data => {
if (data.products) {
setParentProduct(data.products);
}
else {
alert("No data with product id: " + productId);
resetForm();
return;
}
})
.catch(error => {
alert(error);
})
}
function setParentProduct(product) {
document.getElementById('pproductName').value = product.name;
document.getElementById('pcategory').value = product.category;
document.getElementById('pproductPrice').value = product.price;
document.getElementById('pSKU').value = product.sku;
}
function updateParentProduct(event) {
event.preventDefault();
productId = document.getElementById('pproductId').value;
productName = document.getElementById('pproductName').value;
category = document.getElementById('pcategory').value;
price = document.getElementById('pproductPrice').value;
sku = document.getElementById('pSKU').value;
let url = `${apiURL}/product`
data = { id: productId, name: productName, category: category, price: price, sku: sku };
fetch(url, {
method: "PUT",
headers: { "content-type": "application/json" },
body: JSON.stringify(data)
})
.then(response => {
return response.json();
})
.then(data => {
alert(data.message);
location.href = "index.html?id=navBar2";
})
}
function addParentProduct(event) {
event.preventDefault();
let productName = document.getElementById('parentproductName').value;
let category = document.getElementById('parentcategory').value;
let productPrice = document.getElementById('parentproductPrice').value;
let SKU = document.getElementById('parentSKU').value;
let data = { name: productName, category: category, price: productPrice, sku: SKU };
let url = `${apiURL}/product`
fetch(url, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify(data)
})
.then(response => {
return response.json();
})
.then(data => {
alert(data.message);
location.href = "index.html?id=navBar2";
})
}
function validateQuantity(OrderNo) {
quantity = document.getElementById(`orderProductQuantity${OrderNo}`).value;
storeId = document.getElementById('orderStoreId').value;
productId = document.getElementById(`orderProductId${OrderNo}`).value;
if (!quantity || !productId || !storeId) {
return;
}
let url = `${apiURL}/inventory/validate/${quantity}/${storeId}/${productId}`
fetch(url, {
method: "GET",
headers: { "content-type": "application/json" }
})
.then(response => {
return response.json();
})
.then(data => {
if (!data) {
alert("Limited Quantity Available, Reduce quantity")
}
})
.catch(error => {
alert(error);
})
}
async function placeOrder(event) {
event.preventDefault();
let storeId = document.getElementById("orderStoreId").value;
let customerName = document.getElementById("customerName").value;
let customerEmail = document.getElementById("customerEmail").value;
let customerPhone = document.getElementById("customerPhone").value;
let datetime = document.getElementById("datetime").value;
let totalOrderValue = document.getElementById('totalOrderValue').value;
if (!totalOrderValue) {
alert("Enter atleast one product");
return
}
let purchaseProduct = [];
for (let i = 1; i <= Ordercount; i++) {
if (deleteRow.includes(i)) {
continue;
}
console.log(`orderProductName${i}`);
let orderProductName = document.getElementById(`orderProductName${i}`).value;
let orderProductId = document.getElementById(`orderProductId${i}`).value;
let orderProductPrice = document.getElementById(`orderProductPrice${i}`).value;
let orderProductQuantity = document.getElementById(`orderProductQuantity${i}`).value;
let orderProductTotal = document.getElementById(`orderTotal${i}`).value;
let data = {
name: orderProductName,
id: orderProductId,
price: orderProductPrice,
quantity: orderProductQuantity,
total: orderProductTotal
};
purchaseProduct.push(data);
}
let orderData = {
storeId: storeId,
customerName: customerName,
customerEmail: customerEmail,
customerPhone: customerPhone,
datetime: datetime,
purchaseProduct: purchaseProduct,
totalPrice: totalOrderValue
};
try {
const response = await fetch(`${apiURL}/store/placeOrder`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(orderData)
}).then(response => {
return response.json();
}).then(data => {
if (data.message) {
alert(data.message);
location.href = "index.html?id=navBar4";
}
else {
alert(data.error);
}
})
} catch (error) {
alert('Error placing order:', error);
}
}