mirror/marketscrape-web
1
0
Fork 0
mirror of https://github.com/Marketscrape/marketscrape-web.git synced 2026-05-19 19:24:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added the ability to filter the Search Results table + more.

Browse Source
This commit is contained in:
Bhavanvir Rai
2023-04-16 22:46:56 -07:00
parent 94f7d26d56
commit 3f346c66a5
5 changed files with 60 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scraper/forms.py
View File

@@ -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'
}))

19
scraper/static/filterSearchResults.js Normal file
View File

@@ -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';
}
}
}
});

10
scraper/static/isLocalStorageEmpty.js Normal file
View File

@@ -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';
}

3
scraper/static/styles.css
View File

@@ -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;
}

39
scraper/templates/scraper/index.html
View File

@@ -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 %}