Spaces:

asach
/

Catalog-Digitization

Sleeping

App Files Files Community

gamingflexer commited on Feb 10, 2024

Commit

2ed4a17

1 Parent(s): 4fbc5a4

html filesadded

Browse files

Files changed (6) hide show

src/app/api/templates/_base.html +0 -0
src/app/api/templates/catalouge.html +36 -26
src/app/api/templates/edit_voice_product.html +90 -0
src/app/api/templates/record.html +89 -0
src/app/api/templates/record_detail.html +31 -0
src/app/api/templates/upload_image.html +158 -0

src/app/api/templates/_base.html ADDED Viewed

File without changes

src/app/api/templates/catalouge.html CHANGED Viewed

@@ -20,42 +20,52 @@
         .card {
             margin-bottom: 20px;
         }
     </style>
 </head>
 <header>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
-      <div class="container">
-          <a class="navbar-brand" href="{% url 'index' %}">HomePage</a>
-      </div>
-  </nav>
-</header>
 <body>
 <div class="container catalogue-container">
-    <div class="search-bar-container">
-        <form class="form-inline my-2 my-lg-0">
-            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
-            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-        </form>
-        <span id="product-count">Number of Products: {{ products|length }}</span>
-    </div>
-    <div class="row" id="product-row">
-        <!-- Product cards will be inserted here -->
-        {% for product in products %}
-        <div class="col-md-4">
-            <div class="card">
-                <img class="card-img-top" src="{{ product.first_image_url }}" alt="Product Image">
-                <div class="card-body">
-                    <h5 class="card-title">{{ product.product_name }}</h5>
-                    <p class="card-text">Barcode: {{ product.barcode }}</p>
-                    <p class="card-text">Brand: {{ product.brand }}</p>
-                    <!-- Add more product attributes here -->
-                    <a href="{% url 'product_detail' product.id %}" class="btn btn-primary">View Details</a>
                 </div>
             </div>
         </div>
-        {% endfor %}
     </div>
 </div>
 <!-- Include Bootstrap JS and its dependencies -->

         .card {
             margin-bottom: 20px;
         }
+        .voice-edit-btn:hover {
+            text-decoration: none; /* Remove underline on hover */
+            color: #007bff; /* Change text color on hover */
+          }
     </style>
 </head>
 <header>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container">
+            <a class="navbar-brand" href="{% url 'index' %}" style="font-weight: bold;">HomePage</a>
+            <a href="{% url 'add_product_by_image' %}" class="btn btn-primary ml-1" style="padding: 0.5rem 1rem; font-size: 1rem;">Add a Product by Image</a>
+        </div>
+    </nav>
+  </header>
 <body>
 <div class="container catalogue-container">
+  <div class="search-bar-container">
+    <form class="form-inline my-2 my-lg-0" method="GET" action="{% url 'index' %}">
+        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="q" value="{{ request.GET.q }}">
+        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+    </form>
+    <span id="product-count">Number of Products: {{ products|length }}</span>
+  </div>
+  <div class="row" id="product-row">
+    <!-- Product cards will be inserted here -->
+    {% for product in products %}
+    <div class="col-md-4">
+        <div class="card">
+            {% if product.first_image_url %}
+            <img class="card-img-top" src="{{ product.first_image_url }}" alt="Product Image">
+            {% endif %}
+            <div class="card-body">
+                <h5 class="card-title">{{ product.product_name }}</h5>
+                <p class="card-text">Description: {{ product.description }}</p>
+                <p class="card-text">Brand: {{ product.brand }}</p>
+                <div class="d-flex justify-content-between align-items-center">
+                    <a href="{% url 'product_detail' product.id %}" class="btn btn-primary btn-sm mb-2">View Details</a>
+                    <a href="{% url 'voice_product_detail' product.id %}" class="btn btn-secondary btn-sm mb-2">Voice Edit</a>
                 </div>
             </div>
         </div>
     </div>
+    {% endfor %}
+</div>
 </div>
 <!-- Include Bootstrap JS and its dependencies -->

src/app/api/templates/edit_voice_product.html ADDED Viewed

	@@ -0,0 +1,90 @@

+<!-- edit_voice_product.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Edit Voice Product</title>
+    <!-- Include necessary CSS or stylesheets -->
+</head>
+<body>
+    <h1>Edit Voice Product</h1>
+    <div id="recording-status"></div>
+    <button id="record-button">Start Recording</button>
+    <form id="voice-form" method="post" enctype="multipart/form-data">
+        {% csrf_token %}
+        <input type="file" id="voice-file" name="voice_file" style="display: none;">
+        <button type="submit" id="submit-button" style="display: none;">Submit</button>
+    </form>
+    <!-- Include necessary JavaScript -->
+    <script>
+        const recordButton = document.getElementById('record-button');
+        const recordingStatus = document.getElementById('recording-status');
+        const voiceForm = document.getElementById('voice-form');
+        const voiceFileInput = document.getElementById('voice-file');
+        const submitButton = document.getElementById('submit-button');
+        let mediaRecorder;
+        let chunks = [];
+        recordButton.addEventListener('click', async () => {
+            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    startRecording(stream);
+                } catch (error) {
+                    console.error('Error accessing microphone:', error);
+                }
+            } else {
+                console.error('getUserMedia not supported on your browser');
+            }
+        });
+        function startRecording(stream) {
+            mediaRecorder = new MediaRecorder(stream);
+            mediaRecorder.ondataavailable = handleDataAvailable;
+            mediaRecorder.start();
+            recordingStatus.innerText = 'Recording...';
+            recordingStatus.style.color = 'red';
+            recordButton.disabled = true;
+        }
+        function handleDataAvailable(event) {
+            chunks.push(event.data);
+        }
+        mediaRecorder.onstop = async () => {
+            const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+            chunks = [];
+            const formData = new FormData();
+            formData.append('voice_file', blob);
+            try {
+                const response = await fetch('/edit-voice-product/', {
+                    method: 'POST',
+                    body: formData,
+                });
+                if (response.ok) {
+                    console.log('Voice file submitted successfully');
+                    // Optionally, you can redirect or show a success message
+                } else {
+                    console.error('Failed to submit voice file');
+                }
+            } catch (error) {
+                console.error('Error submitting voice file:', error);
+            }
+        };
+        mediaRecorder.onpause = () => {
+            recordingStatus.innerText = 'Recording paused';
+            recordingStatus.style.color = 'grey';
+        };
+        voiceForm.addEventListener('submit', () => {
+            mediaRecorder.stop();
+        });
+    </script>
+</body>
+</html>

src/app/api/templates/record.html ADDED Viewed

	@@ -0,0 +1,89 @@

+<!--inherits the layout-->
+{% extends '_base.html' %}
+<!--static-->
+{% load static %}
+<!--title-->
+{% block title %}{{page_title}}{% endblock title %}
+<!--additional css-->
+{% block css %}
+<link href="{% static 'assets/css/video-js.css' %}" rel="stylesheet" />
+<link href="{% static 'assets/css/all.min.css' %}" rel="stylesheet" />
+<link
+  href="{% static 'assets/css/videojs.wavesurfer.min.css' %}"
+  rel="stylesheet"
+/>
+<link href="{% static 'assets/css/videojs.record.css' %}" rel="stylesheet" />
+<style>
+  /* change player background color */
+  #recordAudio {
+    background-color: #3e8ed0;
+  }
+</style>
+{% endblock css %}
+<!--content-->
+{% block content %}
+<section class="section">
+  <div class="container">
+    <div class="columns">
+      <div class="column is-offset-4 is-4">
+        <h1 class="title">Record audio</h1>
+        <article class="message is-success" id="alert">
+          <div class="message-header">
+            <p>Recorded successfully!</p>
+            <button class="delete" aria-label="delete"></button>
+          </div>
+          <div class="message-body">
+            You have successfully recorded your message. You can now click on
+            the Submit button to post it.
+          </div>
+        </article>
+        <form method="POST" enctype="multipart/form-data">
+          {% csrf_token %}
+          <div class="field">
+            <div class="control has-icons-left has-icons-right">
+              <input
+                class="input"
+                type="text"
+                placeholder="Language"
+                name="language"
+                id="language"
+              />
+              <span class="icon is-left">
+                <i class="fas fa-language"></i>
+              </span>
+              <span class="icon is-right">
+                <i class="fas fa-check"></i>
+              </span>
+            </div>
+            <div
+              class="control has-icons-left has-icons-right"
+              style="margin-top: 1rem"
+            >
+              <audio id="recordAudio" class="video-js vjs-default-skin"></audio>
+            </div>
+            <div class="control" style="margin-top: 1rem">
+              <button class="button is-info" id="submit">Submit</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>
+{% endblock content %}
+<!--additional js-->
+{% block js %}
+<script src="{% static 'assets/js/video.min.js' %}"></script>
+<script src="{% static 'assets/js/RecordRTC.js' %}"></script>
+<script src="{% static 'assets/js/adapter-latest.js' %}"></script>
+<script src="{% static 'assets/js/wavesurfer.js' %}"></script>
+<script src="{% static 'assets/js/wavesurfer.microphone.min.js' %}"></script>
+<script src="{% static 'assets/js/videojs.wavesurfer.min.js' %}"></script>
+<script src="{% static 'assets/js/videojs.record.min.js' %}"></script>
+<script src="{% static 'assets/js/browser-workaround.js' %}"></script>
+<script src="{% static 'assets/js/real.recording.js' %}"></script>
+{% endblock js %}

src/app/api/templates/record_detail.html ADDED Viewed

	@@ -0,0 +1,31 @@

+<!--inherits the layout-->
+{% extends '_base.html' %}
+<!--static-->
+{% load static %}
+<!--title-->
+{% block title %}{{page_title}}{% endblock title %}
+<!--additional css-->
+<!--content-->
+{% block content %}
+<section class="section">
+  <div class="container">
+    <div class="columns">
+      <div class="column is-offset-4 is-4">
+        <h1 class="title">Recorded audio</h1>
+        <div class="card">
+          <div class="card-image">
+            <audio src="{{record.voice_record.url}}" controls></audio>
+          </div>
+          <div class="card-content">
+            <div class="content">
+              <p>Language: {{record.language}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+{% endblock content %}

src/app/api/templates/upload_image.html ADDED Viewed

	@@ -0,0 +1,158 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload Image</title>
+    <!-- Include Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+</head>
+<body>
+    <div class="container mt-5">
+        <h1 class="text-center">Upload Image</h1>
+        <form id="upload-form" method="post" enctype="multipart/form-data">
+            {% csrf_token %}
+            <div class="form-group">
+                <label for="images">Choose Images:</label>
+                <input type="file" class="form-control-file" id="images" name="images" multiple>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+        <!-- Display product details for editing -->
+        <div id="edit-product" style="display: none;">
+            <h2 class="mt-4">Edit Product</h2>
+            <form id="edit-product-form">
+                {% csrf_token %}
+                <div class="form-group">
+                    <label for="barcode">Barcode:</label>
+                    <input type="text" class="form-control" id="barcode" name="barcode">
+                </div>
+                <div class="form-group">
+                    <label for="brand">Brand:</label>
+                    <input type="text" class="form-control" id="brand" name="brand">
+                </div>
+                <div class="form-group">
+                    <label for="sub_brand">Sub Brand:</label>
+                    <input type="text" class="form-control" id="sub_brand" name="sub_brand">
+                </div>
+                <div class="form-group">
+                    <label for="manufacturer">Manufacturer:</label>
+                    <input type="text" class="form-control" id="manufacturer" name="manufactured_by">
+                </div>
+                <div class="form-group">
+                    <label for="product_name">Product Name:</label>
+                    <input type="text" class="form-control" id="product_name" name="product_name">
+                </div>
+                <div class="form-group">
+                    <label for="weight">Weight:</label>
+                    <input type="text" class="form-control" id="weight" name="weight">
+                </div>
+                <div class="form-group">
+                    <label for="variant">Variant:</label>
+                    <input type="text" class="form-control" id="variant" name="variant">
+                </div>
+                <div class="form-group">
+                    <label for="net_content">Net Content:</label>
+                    <input type="text" class="form-control" id="net_content" name="net_content">
+                </div>
+                <div class="form-group">
+                    <label for="price">Price:</label>
+                    <input type="text" class="form-control" id="price" name="price">
+                </div>
+                <div class="form-group">
+                    <label for="parent_category">Parent Category:</label>
+                    <input type="text" class="form-control" id="parent_category" name="parent_category">
+                </div>
+                <div class="form-group">
+                    <label for="child_category">Child Category:</label>
+                    <input type="text" class="form-control" id="child_category" name="child_category">
+                </div>
+                <div class="form-group">
+                    <label for="sub_child_category">Sub Child Category:</label>
+                    <input type="text" class="form-control" id="sub_child_category" name="sub_child_category">
+                </div>
+                <div class="form-group">
+                    <label for="description">Description:</label>
+                    <textarea class="form-control" id="description" name="description"></textarea>
+                </div>
+                <div class="form-group">
+                    <label for="quantity">Quantity:</label>
+                    <input type="text" class="form-control" id="quantity" name="quantity">
+                </div>
+                <div class="form-group">
+                    <label for="mrp">MRP:</label>
+                    <input type="text" class="form-control" id="mrp" name="mrp">
+                </div>
+                <!-- Add image input if needed -->
+                <button type="submit" class="btn btn-primary">Save</button>
+            </form>
+        </div>
+        <!-- Display product details here -->
+        <div class="mt-4" id="product-details">
+            <h2>Product Details</h2>
+            <ul id="product-details-list">
+                <!-- Product details will be added dynamically here -->
+            </ul>
+        </div>
+    </div>
+    <!-- Include jQuery for AJAX -->
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script>
+        $(document).ready(function() {
+            // Submit form via AJAX when image is uploaded
+            $('#upload-form').submit(function(event) {
+                event.preventDefault();
+                var formData = new FormData($(this)[0]);
+                $.ajax({
+                    url: $(this).attr('action'),
+                    type: $(this).attr('method'),
+                    data: formData,
+                    processData: false,
+                    contentType: false,
+                    success: function(response) {
+                        // Display product details
+                        displayProductDetails(response);
+                        // Show edit product form
+                        $('#edit-product').show();
+                    },
+                    error: function(xhr, status, error) {
+                        console.log(xhr.responseText);
+                    }
+                });
+            });
+            // Submit edit product form via AJAX
+            $('#edit-product-form').submit(function(event) {
+                event.preventDefault();
+                var formData = $(this).serialize();
+                $.ajax({
+                    url: 'http://34.122.223.224:9002/api/products/',
+                    type: 'POST',
+                    data: formData,
+                    success: function(response) {
+                        // Optionally, handle success response
+                        console.log(response);
+                    },
+                    error: function(xhr, status, error) {
+                        console.log(xhr.responseText);
+                    }
+                });
+            });
+            function displayProductDetails(details) {
+                $('#product-details-list').empty();
+                $.each(details, function(key, value) {
+                    $('#product-details-list').append('<li><strong>' + key + ':</strong> ' + value + '</li>');
+                    // Populate edit product form fields
+                    $('#edit-product-form').find('[name="' + key + '"]').val(value);
+                });
+            }
+        });
+    </script>
+</body>
+</html>