Merge pull request #31 from bhavanvir/main

Minor changes + additions to the Results page.

scraper/static/InfoButtonAlert.js

@@ -0,0 +1,10 @@
+document.getElementById('infoBtn').addEventListener('click', function () {
+    // Show the Bootstrap alert
+    var alertElement = document.getElementById('infoAlert');
+    // Set the display property to 'block' to make the alert visible
+    alertElement.style.display = 'block';
+
+    document.getElementById('closeAlertBtn').addEventListener('click', function() {
+        alertElement.style.display = 'none';
+    });
+});

scraper/static/clearLocalStorage.js

@@ -4,7 +4,7 @@ document.getElementById('clearResultsBtn').addEventListener('click', function()
     }
 
     // Show the Bootstrap alert
-    var alertElement = document.getElementById('myAlert');
+    var alertElement = document.getElementById('clearAlert');
     // Set the display property to 'block' to make the alert visible
     alertElement.style.display = 'block';
 

scraper/static/rowResult.js

@@ -6,10 +6,10 @@ for (var i = localStorage.length - 1; i >= 0; i--) {
     // Create a row for the item and add it to the table
     var row = document.createElement("tr");
     row.innerHTML = `
-        <td style="vertical-align: middle; horizontal-align: middle;"><img src="${data.image}" style="width:50%;" class="figure-img img-fluid rounded clickable-row" style="object-fit: fill;" data-url="${ shortened_url }" onClick="rowReport(this)"></td>
-        <td style="vertical-align: middle;" class="clickable-row" data-url="${ shortened_url }" onClick="rowReport(this)">${ data.title }</td>
-        <td style="vertical-align: middle;" class="clickable-row" data-url="${ shortened_url }" onClick="rowReport(this)">$${ data.price }</td>
-        <td style="vertical-align: middle;" class="clickable-row" data-url="${ shortened_url }" onClick="rowReport(this)">
+        <td style="vertical-align: middle; horizontal-align: middle;"><img src="${data.image}" style="width:50%;" class="figure-img img-fluid rounded clickable" style="object-fit: fill;" data-url="${ shortened_url }" onClick="rowReport(this)"></td>
+        <td style="vertical-align: middle;" class="clickable" data-url="${ shortened_url }" onClick="rowReport(this)">${ data.title }</td>
+        <td style="vertical-align: middle;" class="clickable" data-url="${ shortened_url }" onClick="rowReport(this)">$${ data.price }</td>
+        <td style="vertical-align: middle;" class="clickable" data-url="${ shortened_url }" onClick="rowReport(this)">
             <div class="Stars" style="--rating: ${ data.rating }" aria-label="Rating of this product is ${ data.rating } out of 5."></div>
         </td>
     `;

scraper/static/styles.css

@@ -21,7 +21,7 @@
     color: #dc3545;
 }
 
-.clickable-row {
+.clickable {
     cursor: pointer;
 }
 

scraper/templates/scraper/index-result-table.html

@@ -16,7 +16,7 @@
         <br>
         <table class="table table-hover mx-auto">
             <thead>
-                <tr class="clickable-row">
+                <tr class="clickable">
                     <th></th>
                     <th>Item</th>
                     <th>Price</th>

scraper/templates/scraper/index.html

@@ -3,7 +3,7 @@
 {% load static %}
 
 {% block content %}
-    <div class="alert alert-success alert-dismissible" id="myAlert" style="display:none;">
+    <div class="alert alert-success alert-dismissible" id="clearAlert" style="display:none;">
         <span aria-hidden="true"><i class="fas fa-solid fa-times" id="closeAlertBtn" style="cursor: pointer;"></i></span> Cleared your search results! Please refresh the page to apply changes.
     </div>
 

scraper/templates/scraper/missing.html

@@ -7,7 +7,7 @@
     <div class="row">
         <div class="col-12 col-md-6 mx-auto">
             <div class="mt-5">
-                <h3 class="text-center" style="margin-top: 5rem;">Oops! It looks like the item you linked has vanished into thin air!  🧙‍♂️✨</h3>
+                <h3 class="text-center" style="margin-top: 5rem;">Oops! It looks like the item you linked has vanished into thin air!  ✨🧙‍♂️</h3>
             </div>
         </div>
     </div>

scraper/templates/scraper/result.html

@@ -14,6 +14,10 @@
         localStorage.setItem(shortened_url, JSON.stringify(item));
     </script>
 
+    <div class="alert alert-info alert-dismissible" id="infoAlert" style="display:none;">
+        <span aria-hidden="true"><i class="fas fa-solid fa-times" id="closeAlertBtn" style="cursor: pointer;"></i></span> A larger-sized bubble corresponds to a higher price and, subsequently, a redder colour! The opposite is also true; in summary, remember this little visual: 🔴❌ and 🟢✔️! 
+    </div>
+
     <a href="{% url 'index' %}" class="btn btn-outline-secondary mt-3 mx-3"><i class="fas fa-chevron-left"></i> Go Back</a>
     <div class="container md mt-5">
         <h1 class="text-center mb-4">Analysis Report</h1>
@@ -24,12 +28,22 @@
         </p>
         <div class="card" style="margin-top: 5rem;">
             <div class="card-body">
-                <h5 class="card-title">{{ title }} <span><i class="fas fa-info-circle" id="infoBtn"></i></span></h5>
+                <h5 class="card-title">{{ title }} <span class="clickable"><i class="fas fa-info-circle" id="infoBtn"></i></span></h5>
                 <h6 class="card-subtitle mb-2 text-muted">Listed {{ days }} days and {{ hours }} hours ago, for ${{ list_price }}</h6>
                 <div id="chart" data-chart="{{ chart }}"></div>
+                <p>
+                    Given the sheer variety of product names we encountered, we've taken the liberty of grouping our findings into {{ categories|length }} funky and fun categories based on the lengths of the names. 
+                    This nifty approach allowed us to whip up some visually engaging graphics that are sure to tickle your fancy while providing valuable insights.
+                </p>
+
+                <p>
+                    We found that the best deal occured in the <span style="color:#28a745">{{ best_similar_category }}</span> category 
+                    with a price of <span style="color:#28a745">${{ best_similar_price }}</span> for the <span style="color:#28a745">{{ best_similar_description }}</span>!
+                </p>
             </div>
         </div>
     </div>
 
+    <script src="{% static 'infoButtonAlert.js' %}"></script>
     <script src="{% static 'plotSimilarResults.js' %}"></script>
 {% endblock content %}

scraper/views.py

@@ -51,6 +51,11 @@ class Index(View):
             cmin = min(similar_prices)
             cmax = max(similar_prices)
 
+            idx = similar_prices.index(cmin)
+            best_similar_price = f"{similar_prices[idx]:,}"
+            best_similar_description = similar_descriptions[idx]
+            best_similar_category = shortened_item_names[idx]
+
             # Ratio 
             desired_diameter = 150
             sizeref = cmax / desired_diameter
@@ -61,8 +66,9 @@ class Index(View):
             chart = fig.to_json()           
 
             # Needs to be redone
-            median = np.median(similar_prices)
-            price_rating = price_difference_rating(initial_price, median)
+            price_rating = price_difference_rating(initial_price, cmin)
+
+            categories = list(set(shortened_item_names))
 
             context = {
                 'shortened_url': shortened_url,
@@ -77,6 +83,10 @@ class Index(View):
                 'days': listing_days,
                 'hours': listing_hours,
                 'image': listing_image[0],
+                'categories': categories,
+                'best_similar_price': best_similar_price,
+                'best_similar_description': best_similar_description,
+                'best_similar_category': best_similar_category,
                 'id': market_id
             }