You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.9 KiB
121 lines
3.9 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
|
<title>add product to inventory</title> |
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> |
|
<style> |
|
body { |
|
padding: 20px; |
|
} |
|
|
|
#imagePreview { |
|
max-width: 100%; |
|
max-height: 200px; |
|
margin-top: 10px; |
|
} |
|
</style> |
|
<link rel="stylesheet" href="style.css"> |
|
</head> |
|
<body> |
|
|
|
<div class="container"> |
|
<h2>ADD ITEM TO INVENTORY</h2> |
|
<form action="{{ url_for("item_add")}}" method="post" enctype="multipart/form-data"> |
|
<!-- Name --> |
|
<div class="form-group"> |
|
<label for="i_name">product name</label> |
|
<input type="text" name="i_name" class="form-control" id="i_name" placeholder="Enter item name"> |
|
</div> |
|
|
|
<!-- Inventory Type --> |
|
<div class="form-group"> |
|
<label for="inventoryType">Item Type</label> |
|
<select class="form-control" id="inventoryType" name="inventoryType" > |
|
{% for i in itemType %} |
|
<option value="{{ i[0]|string }}">{{ i[0]|string }}</option> |
|
{% endfor %} |
|
</select> |
|
</div> |
|
|
|
<!-- Management Type --> |
|
<div class="form-group"> |
|
<label for="managementType">Management Type</label> |
|
<div class="form-check"> |
|
<input class="form-check-input" type="checkbox" name="managementType" id="managementType" onchange="toggleQuantityInput()"> |
|
<label class="form-check-label" for="managementType">Select for quantity only item</label> |
|
</div> |
|
</div> |
|
|
|
<!-- Quantity (Visible only if Management Type is selected) --> |
|
<div class="form-group" id="quantityInput" style="display: none;"> |
|
<label for="quantity">Quantity</label> |
|
<input type="text" class="form-control" name="quantity" id="quantity" placeholder="Enter quantity"> |
|
</div> |
|
|
|
<!-- Description --> |
|
<div class="form-group"> |
|
<label for="description">Description</label> |
|
<textarea class="form-control" name="description" id="description" rows="3" placeholder="Enter a description"></textarea> |
|
</div> |
|
|
|
<!-- Image Upload --> |
|
<div class="form-group"> |
|
<label for="image">Image Upload</label> |
|
<input type="file" class="form-control-file" id="image" name="image" accept="image/*" onchange="previewImage()"> |
|
<img id="imagePreview" src="#" alt="Image Preview"> |
|
</div> |
|
|
|
<!-- Submit Button --> |
|
<button type="submit" class="btn btn-primary">Submit</button> |
|
</form> |
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap JS and Popper.js --> |
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> |
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> |
|
|
|
<script> |
|
function toggleQuantityInput() { |
|
var managementTypeCheckbox = document.getElementById('managementType'); |
|
var quantityInput = document.getElementById('quantityInput'); |
|
|
|
quantityInput.style.display = managementTypeCheckbox.checked ? 'block' : 'none'; |
|
} |
|
|
|
function previewImage() { |
|
var fileInput = document.getElementById('image'); |
|
var imagePreview = document.getElementById('imagePreview'); |
|
|
|
var file = fileInput.files[0]; |
|
|
|
if (file) { |
|
var reader = new FileReader(); |
|
|
|
reader.onload = function (e) { |
|
imagePreview.src = e.target.result; |
|
}; |
|
|
|
reader.readAsDataURL(file); |
|
} |
|
} |
|
</script> |
|
|
|
<script src="index.js"></script> |
|
</body> |
|
</html>
|
|
|