189 lines
6.2 KiB
HTML
189 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Declares this file as an HTML5 document -->
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Sets the character encoding so text displays correctly -->
|
|
<meta charset="UTF-8">
|
|
|
|
<!-- Makes the page responsive on smaller screens -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- Text shown in the browser tab -->
|
|
<title>Edit Product</title>
|
|
|
|
<style>
|
|
/* Makes width calculations include padding and borders */
|
|
* { box-sizing: border-box; }
|
|
|
|
/* Styles the page background, spacing, and default font */
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: #f4f4f4;
|
|
margin: 0;
|
|
padding: 16px;
|
|
}
|
|
|
|
/* Centers the page content and limits its width */
|
|
.container {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* White card-style box that holds the form */
|
|
.box {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 18px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
/* Centers the main page heading */
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Lays out the form fields with spacing between them */
|
|
form {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Makes labels bold so they are easier to read */
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Shared styling for text and number input fields */
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 1px solid #bbb;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Adds a gray background to read-only fields */
|
|
.readonly {
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
/* Places checkbox and label side by side */
|
|
.checkbox-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Places the action buttons next to each other */
|
|
.actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Shared styling for buttons and button-like links */
|
|
button, a {
|
|
display: inline-block;
|
|
padding: 8px 12px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Green button for saving changes */
|
|
.btn-save { background: #28a745; color: white; }
|
|
|
|
/* Gray button/link for going back */
|
|
.btn-back { background: #6c757d; color: white; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Main centered wrapper for the page -->
|
|
<div class="container">
|
|
|
|
<!-- Page heading -->
|
|
<h1>Edit Product</h1>
|
|
|
|
<!-- Card container holding the edit form -->
|
|
<div class="box">
|
|
|
|
<!-- Form sends updated data to the Flask update route -->
|
|
<!-- product._id is inserted by Jinja so Flask knows which product to update -->
|
|
<form action="/update/{{ product._id }}" method="POST">
|
|
|
|
<!-- Read-only display of the product ID -->
|
|
<div>
|
|
<label>Product ID</label>
|
|
|
|
<!-- The user can see the product ID but cannot edit it -->
|
|
<input type="number" value="{{ product.product_id }}" readonly class="readonly">
|
|
</div>
|
|
|
|
<!-- Editable product name field -->
|
|
<div>
|
|
<label>Name</label>
|
|
<input type="text" name="name" value="{{ product.name }}" required>
|
|
</div>
|
|
|
|
<!-- Editable category field -->
|
|
<div>
|
|
<label>Category</label>
|
|
<input type="text" name="category" value="{{ product.category }}">
|
|
</div>
|
|
|
|
<!-- Editable price field; step allows decimal values like 19.99 -->
|
|
<div>
|
|
<label>Price</label>
|
|
<input type="number" step="0.01" name="price" value="{{ product.price }}">
|
|
</div>
|
|
|
|
<!-- Editable rating field; step allows values like 4.5 -->
|
|
<div>
|
|
<label>Rating</label>
|
|
<input type="number" step="0.1" name="rating" value="{{ product.rating }}">
|
|
</div>
|
|
|
|
<!-- Editable tags field -->
|
|
<!-- tags_text is already prepared in Python as comma-separated text -->
|
|
<div>
|
|
<label>Tags</label>
|
|
<input type="text" name="tags" value="{{ product.tags_text }}">
|
|
</div>
|
|
|
|
<!-- Editable supplier name field -->
|
|
<div>
|
|
<label>Supplier Name</label>
|
|
<input type="text" name="supplier_name" value="{{ product.supplier_name }}">
|
|
</div>
|
|
|
|
<!-- Editable supplier country field -->
|
|
<div>
|
|
<label>Supplier Country</label>
|
|
<input type="text" name="supplier_country" value="{{ product.supplier_country }}">
|
|
</div>
|
|
|
|
<!-- Checkbox for stock availability -->
|
|
<div class="checkbox-row">
|
|
|
|
<!-- Jinja checks the box if product.in_stock is true -->
|
|
<input type="checkbox" name="in_stock" id="in_stock" {% if product.in_stock %}checked{% endif %}>
|
|
|
|
<label for="in_stock">In Stock</label>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="actions">
|
|
|
|
<!-- Submits the form and saves the changes -->
|
|
<button type="submit" class="btn-save">Save Changes</button>
|
|
|
|
<!-- Returns to the main page without saving -->
|
|
<a href="/" class="btn-back">Back</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |