From 3f346c66a55cd0ea501b084fdbb1b37ad7ec330d Mon Sep 17 00:00:00 2001
From: Bhavanvir Rai <bhavanvir.r@gmail.com>
Date: Sun, 16 Apr 2023 22:46:56 -0700
Subject: [PATCH] Added the ability to filter the Search Results table + more.

---
 scraper/forms.py                      |  2 +-
 scraper/static/filterSearchResults.js | 19 +++++++++++++
 scraper/static/isLocalStorageEmpty.js | 10 +++++++
 scraper/static/styles.css             |  3 +--
 scraper/templates/scraper/index.html  | 39 ++++++++++++++++++++-------
 5 files changed, 60 insertions(+), 13 deletions(-)
 create mode 100644 scraper/static/filterSearchResults.js
 create mode 100644 scraper/static/isLocalStorageEmpty.js

diff --git a/scraper/forms.py b/scraper/forms.py
index d44a5e8..d3c839d 100644
--- a/scraper/forms.py
+++ b/scraper/forms.py
@@ -3,6 +3,6 @@ from django import forms
 class MarketForm(forms.Form):
     url = forms.URLField(label=False, widget=forms.TextInput(attrs={
         'class': 'form-control',
-        'placeholder': 'Enter a Facebook Marketplace URL',
+        'placeholder': 'Enter a Facebook Marketplace URL...',
         'autocomplete': 'off'
     }))
\ No newline at end of file
diff --git a/scraper/static/filterSearchResults.js b/scraper/static/filterSearchResults.js
new file mode 100644
index 0000000..7eaf6a1
--- /dev/null
+++ b/scraper/static/filterSearchResults.js
@@ -0,0 +1,19 @@
+document.getElementById('filterBtn').addEventListener('click', function() {
+    var input = document.getElementById('searchBar').value.toLowerCase();
+    var table  = document.getElementById('result-table');
+    var rows = table.getElementsByTagName('tr');
+
+    for (var i = 0; i < rows.length; i++) {
+        var item = rows[i].getElementsByTagName('td')[1];
+        if (item) {
+            var itemName = item.textContent || item.innerText;
+            itemName = itemName.toLowerCase();
+
+            if (itemName.indexOf(input) > -1) {
+                rows[i].style.display = '';
+            }  else {
+                rows[i].style.display = 'none';
+            }
+        }
+    }
+});
\ No newline at end of file
diff --git a/scraper/static/isLocalStorageEmpty.js b/scraper/static/isLocalStorageEmpty.js
new file mode 100644
index 0000000..5bf6e74
--- /dev/null
+++ b/scraper/static/isLocalStorageEmpty.js
@@ -0,0 +1,10 @@
+// Check if localStorage has items
+if (localStorage.length > 0) {
+    // Show the table if localStorage has items
+    document.getElementById('result-table').style.display = 'table';
+    document.getElementById('noItemsMsg').style.display = 'none';
+} else {
+    // Show the "No items!" message if localStorage is empty
+    document.getElementById('result-table').style.display = 'none';
+    document.getElementById('noItemsMsg').style.display = 'block';
+}
\ No newline at end of file
diff --git a/scraper/static/styles.css b/scraper/static/styles.css
index 247c9d6..40ddf20 100644
--- a/scraper/static/styles.css
+++ b/scraper/static/styles.css
@@ -8,11 +8,10 @@
 #clearResultsBtn:hover {
     /* Use Bootswatch is-invalid color */
     color: #dc3545;
-    transition: color 0.25s ease-in;
+
 }
 
 #closeAlertBtn:hover {
     /* Use Bootswatch is-invalid color */
     color: #dc3545;
-    transition: color 0.25s ease-in;
 }
\ No newline at end of file
diff --git a/scraper/templates/scraper/index.html b/scraper/templates/scraper/index.html
index 035c3f4..39d7dfb 100644
--- a/scraper/templates/scraper/index.html
+++ b/scraper/templates/scraper/index.html
@@ -17,28 +17,44 @@
                     <div class="input-group">
                         {{ form }}
                         <div class="btn-group">
-                            <button class="btn btn-secondary" style="border-radius: 0;" type="submit">Calculate</button>
-                            <button class="btn btn-secondary" type="button" value="Reset" id="resetBtn" onClick="this.form.reset()">Clear</button>
+                            <button class="btn btn-secondary" style="border-radius: 0;" type="submit">
+                                <i class="fas fa-search"></i> Analyze
+                            </button>
+                            <button class="btn btn-secondary" type="button" value="Reset" id="closeAlertBtn" onClick="this.form.reset()">
+                                <i class="fas fa-trash-alt"></i> Clear
+                            </button>
                         </div>
                         <div id="urlValidFeedback" class="valid-feedback">Success! You've entered a valid URL.</div>
                         <div id="urlInvalidFeedback" class="invalid-feedback">Sorry, that URL is invalid. Try another?</div>
                     </div>
                 </form>
                 <div class="mt-5">
-                    <h3 class="text-center" style="margin-top: 80px;">
-                        <i class="fas fa-trash-alt" id="clearResultsBtn" style="cursor: pointer;"></i> Search Results
-                    </h3>
-                    <table class="table table-striped mx-auto">
+                    <h3 class="text-center" style="margin-top: 80px;">Search Results</h3>
+                    <div class="input-group mt-3 mx-auto" style="max-width: 50%;">
+                        <input type="text" class="form-control" id="searchBar" placeholder="Filter by keyword...">
+                        <div class="input-group-append">
+                            <div class="btn-group">
+                                <button class="btn btn-secondary" style="border-radius: 0;" id="filterBtn" type="submit">
+                                    <i class="fas fa-filter"></i> Filter
+                                </button>
+                                <button class="btn btn-secondary" type="button" value="Reset" id="clearResultsBtn">
+                                    <i class="fas fa-trash-alt"></i> Clear
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <table class="table table-striped mx-auto" id="result-table" style="display: none;">
                         <thead>
                             <tr>
                                 <th></th>
-                                    <th>Item</th>
-                                    <th>Price</th>
-                                    <th>Rating</th>   
+                                <th>Item</th>
+                                <th>Price</th>
+                                <th>Rating</th>   
                             </tr>
                         </thead>
-                        <tbody id="result-table"></tbody>
+                        <tbody id="result-table-body"></tbody>
                     </table>
+                    <p id="noItemsMsg" class="text-center mt-3" style="display: none;">No items to display! 😭</p>
                 </div>
             </div>
         </div>
@@ -46,4 +62,7 @@
 
     <script src="{% static 'clearLocalStorage.js' %}"></script>
     <script src="{% static 'imageResult.js' %}"></script>
+    <script src="{% static 'isValidUrl.js' %}"></script>
+    <script src="{% static 'filterSearchResults.js' %}"></script>
+    <script src="{% static 'isLocalStorageEmpty.js' %}"></script>
 {% endblock content %}