Hugging Face's logo

Spaces:
asach
/
Catalog-Digitization
Sleeping

App Files Community
gamingflexer commited on
Commit
bf2641c
·
1 Parent(s): 12e3df8

Add navigation bar to catalogue page and create new templates for editing and viewing product details

Browse files
Files changed (3) hide show
  1. src/app/api/templates/catalouge.html +23 -49
  2. src/app/api/templates/edit_product.html +44 -0
  3. src/app/api/templates/product_page.html +86 -0
src/app/api/templates/catalouge.html CHANGED
@@ -1,3 +1,4 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
@@ -21,6 +22,13 @@
21
  }
22
  </style>
23
  </head>
 
 
 
 
 
 
 
24
  <body>
25
 
26
  <div class="container catalogue-container">
@@ -29,10 +37,24 @@
29
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
30
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
31
  </form>
32
- <span id="product-count">Number of Products: 0</span>
33
  </div>
34
  <div class="row" id="product-row">
35
  <!-- Product cards will be inserted here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </div>
37
  </div>
38
 
@@ -41,53 +63,5 @@
41
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.3/dist/umd/popper.min.js"></script>
42
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
43
 
44
- <script>
45
- // Array of products (replace with your own data)
46
- var products = [
47
- {
48
- title: "Product Title 1",
49
- text: "Description for product 1",
50
- imageUrl: "https://plus.unsplash.com/premium_photo-1684164601738-cf486690c601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHx8"
51
- },
52
- {
53
- title: "Product Title 2",
54
- text: "Description for product 2",
55
- imageUrl: "https://plus.unsplash.com/premium_photo-1684164601738-cf486690c601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHx8"
56
- },
57
- // Add more products as needed
58
- ];
59
-
60
- function displayProducts(products) {
61
- var productRow = document.getElementById('product-row');
62
- var productCount = document.getElementById('product-count');
63
-
64
- // Clear previous products
65
- productRow.innerHTML = '';
66
-
67
- // Add new product cards
68
- products.forEach(function(product) {
69
- var colDiv = document.createElement('div');
70
- colDiv.className = 'col-md-4';
71
- colDiv.innerHTML = `
72
- <div class="card">
73
- <img class="card-img-top" src="${product.imageUrl}" alt="Card image cap">
74
- <div class="card-body">
75
- <h5 class="card-title">${product.title}</h5>
76
- <p class="card-text">${product.text}</p>
77
- <a href="#" class="btn btn-primary">Go somewhere</a>
78
- </div>
79
- </div>
80
- `;
81
- productRow.appendChild(colDiv);
82
- });
83
-
84
- // Update product count
85
- productCount.textContent = 'Number of Products: ' + products.length;
86
- }
87
-
88
- // Initialize display with products
89
- displayProducts(products);
90
- </script>
91
-
92
  </body>
93
  </html>
 
1
+ <!-- Replace the existing HTML code with this -->
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
 
22
  }
23
  </style>
24
  </head>
25
+ <header>
26
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
27
+ <div class="container">
28
+ <a class="navbar-brand" href="{% url 'index' %}">HomePage</a>
29
+ </div>
30
+ </nav>
31
+ </header>
32
  <body>
33
 
34
  <div class="container catalogue-container">
 
37
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
38
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
39
  </form>
40
+ <span id="product-count">Number of Products: {{ products|length }}</span>
41
  </div>
42
  <div class="row" id="product-row">
43
  <!-- Product cards will be inserted here -->
44
+ {% for product in products %}
45
+ <div class="col-md-4">
46
+ <div class="card">
47
+ <img class="card-img-top" src="{{ product.first_image_url }}" alt="Product Image">
48
+ <div class="card-body">
49
+ <h5 class="card-title">{{ product.product_name }}</h5>
50
+ <p class="card-text">Barcode: {{ product.barcode }}</p>
51
+ <p class="card-text">Brand: {{ product.brand }}</p>
52
+ <!-- Add more product attributes here -->
53
+ <a href="{% url 'product_detail' product.id %}" class="btn btn-primary">View Details</a>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ {% endfor %}
58
  </div>
59
  </div>
60
 
 
63
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.3/dist/umd/popper.min.js"></script>
64
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </body>
67
  </html>
src/app/api/templates/edit_product.html ADDED
@@ -0,0 +1,44 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Edit Product</title>
7
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8
+ </head>
9
+ <body>
10
+ <header>
11
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
12
+ <div class="container">
13
+ <a class="navbar-brand" href="{% url 'index' %}">Catalogue</a>
14
+ </div>
15
+ </nav>
16
+ </header>
17
+ <div class="container mt-5">
18
+ <h1 class="text-center">Edit Product</h1>
19
+ <form method="post">
20
+ {% csrf_token %}
21
+ <div class="form-group">
22
+ <label for="barcode">Barcode:</label>
23
+ <input type="text" class="form-control" id="barcode" name="barcode" value="{{ product.barcode }}">
24
+ </div>
25
+ <div class="form-group">
26
+ <label for="brand">Brand:</label>
27
+ <input type="text" class="form-control" id="brand" name="brand" value="{{ product.brand }}">
28
+ </div>
29
+ <div class="form-group">
30
+ <label for="sub_brand">Sub Brand:</label>
31
+ <input type="text" class="form-control" id="sub_brand" name="sub_brand" value="{{ product.sub_brand }}">
32
+ </div>
33
+ <div class="form-group">
34
+ <label for="manufacturer">Manufacturer:</label>
35
+ <input type="text" class="form-control" id="manufacturer" name="manufacturer" value="{{ product.manufacturer }}">
36
+ </div>
37
+ <!-- Add similar form fields for other attributes -->
38
+ <div class="text-center">
39
+ <button type="submit" class="btn btn-primary">Save</button>
40
+ </div>
41
+ </form>
42
+ </div>
43
+ </body>
44
+ </html>
src/app/api/templates/product_page.html ADDED
@@ -0,0 +1,86 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>{{ product.product_name }}</title>
7
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8
+ <style>
9
+ /* Custom styles */
10
+ .product-title {
11
+ font-size: 24px;
12
+ font-weight: bold;
13
+ margin-bottom: 20px;
14
+ }
15
+ .carousel-item img {
16
+ border: 2px solid #ccc;
17
+ border-radius: 5px;
18
+ }
19
+ .product-details p {
20
+ margin-bottom: 5px;
21
+ }
22
+ .edit-btn {
23
+ margin-top: 20px;
24
+ }
25
+ </style>
26
+ </head>
27
+ <header>
28
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
29
+ <div class="container">
30
+ <a class="navbar-brand" href="{% url 'index' %}">Catalogue</a>
31
+ </div>
32
+ </nav>
33
+ </header>
34
+ <body>
35
+
36
+ <div class="container mt-5">
37
+ <h1 class="text-center product-title">{{ product.product_name }}</h1>
38
+ <div class="row">
39
+ <div class="col-md-6">
40
+ {% if product.images_paths %}
41
+ <div id="productCarousel" class="carousel slide" data-ride="carousel">
42
+ <div class="carousel-inner">
43
+ {% for image_path in product.images_paths %}
44
+ <div class="carousel-item {% if forloop.first %}active{% endif %}">
45
+ <img src="{{ image_path }}" class="d-block w-100" alt="Product Image">
46
+ </div>
47
+ {% endfor %}
48
+ </div>
49
+ <a class="carousel-control-prev" href="#productCarousel" role="button" data-slide="prev">
50
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
51
+ <span class="sr-only">Previous</span>
52
+ </a>
53
+ <a class="carousel-control-next" href="#productCarousel" role="button" data-slide="next">
54
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
55
+ <span class="sr-only">Next</span>
56
+ </a>
57
+ </div>
58
+ {% else %}
59
+ <p>No images available</p>
60
+ {% endif %}
61
+ </div>
62
+ <div class="col-md-6 product-details">
63
+ <p><strong>Barcode:</strong> {{ product.barcode }}</p>
64
+ <p><strong>Brand:</strong> {{ product.brand }}</p>
65
+ <p><strong>Sub Brand:</strong> {{ product.sub_brand }}</p>
66
+ <p><strong>Manufacturer:</strong> {{ product.manufacturer }}</p>
67
+ <p><strong>Weight:</strong> {{ product.weight }}</p>
68
+ <p><strong>Variant:</strong> {{ product.variant }}</p>
69
+ <p><strong>Net Content:</strong> {{ product.net_content }}</p>
70
+ <p><strong>Price:</strong> {{ product.price }}</p>
71
+ <p><strong>Parent Category:</strong> {{ product.parent_category }}</p>
72
+ <p><strong>Child Category:</strong> {{ product.child_category }}</p>
73
+ <p><strong>Sub Child Category:</strong> {{ product.sub_child_category }}</p>
74
+ </div>
75
+ </div>
76
+ <div class="row justify-content-center">
77
+ <div class="col-md-6 text-center edit-btn">
78
+ <a href="{% url 'edit_product' product.id %}" class="btn btn-primary">Edit</a>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
83
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
84
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
85
+ </body>
86
+ </html>