Skip to content

Commit 72c4175

Browse files
authored
Merge pull request #134 from UCL-ARC/126/search-s3
126/search-s3
2 parents 431dcb2 + e37fff8 commit 72c4175

File tree

3 files changed

+35
-2
lines changed

3 files changed

+35
-2
lines changed

mod_app/static/css/s3-browser.css

+5
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ main {
2626

2727
.s3-browser__title {
2828
text-align: center;
29+
margin-bottom: 1rem;
2930
p {
3031
font-size: 90%;
3132
font-weight: 600;
@@ -65,6 +66,10 @@ main {
6566
}
6667
}
6768

69+
#searchInput {
70+
height: 1.3rem;
71+
}
72+
6873
.s3-browser__filter__button {
6974
background-color: white;
7075
border-color: inherit;

mod_app/static/js/bucketItemSelectorFunctions.js

+17
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,20 @@ function filterBy(elemType) {
2727
}
2828
});
2929
}
30+
31+
function searchByText(searchTerm) {
32+
const cardWrappers = document.querySelectorAll(".s3-browser__card__wrapper");
33+
cardWrappers.forEach((wrapper) => {
34+
const pTagContent = wrapper.querySelector("p")
35+
? wrapper.querySelector("p").textContent
36+
: "";
37+
if (
38+
searchTerm === "" ||
39+
pTagContent.toLowerCase().includes(searchTerm.toLowerCase())
40+
) {
41+
wrapper.classList.remove("no-display");
42+
} else {
43+
wrapper.classList.add("no-display");
44+
}
45+
});
46+
}

mod_app/templates/bucket_items.html

+13-2
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ <h3 class="center-text"> You are currently viewing items in the S3 bucket</h3>
1010
<span class="btn s3-browser__filter__button" onclick="filterBy" data-type="video" id="key--video">Video</span>/
1111
<span onclick="filterBy" class="btn s3-browser__filter__button" data-type="img" id="key--img">Image</span>/
1212
<span onclick="filterBy" class="btn s3-browser__filter__button" data-type="none" id="view-all">View all</span>
13-
14-
1513
</p>
14+
<div class="search-container">
15+
<input type="text" id="searchInput" placeholder="Start typing to search...">
16+
<button onclick="handleSearch()" class="btn">Search</button>
17+
</div>
1618
</div>
1719
<div class="s3-browser__wrapper">
1820
{% for item_key, item_value in item_data.items.items %}
@@ -98,6 +100,15 @@ <h3 class="center-text"> You are currently viewing items in the S3 bucket</h3>
98100
this.classList.toggle("active");
99101

100102
});
103+
// search stuff
104+
function handleSearch() {
105+
const searchTerm = document.getElementById('searchInput').value;
106+
searchByText(searchTerm);
107+
};
108+
109+
document.getElementById('searchInput').addEventListener('input', () => {
110+
handleSearch();
111+
});
101112
</script>
102113
</body>
103114
{% endblock %}

0 commit comments

Comments
 (0)