Add RetailManagementSystem app
This commit is contained in:
413
RetailManagementSystem/front-end/index.html
Normal file
413
RetailManagementSystem/front-end/index.html
Normal 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>
|
||||
Reference in New Issue
Block a user