413 lines
17 KiB
HTML
413 lines
17 KiB
HTML
<!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> |