Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search filters for addresses #24

Merged
merged 4 commits into from
Jan 25, 2024
Merged

Search filters for addresses #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
84dde14
Search filters for addresses
iAmmar7 Jan 17, 2024
4143619
Merge branch 'main' into aa/filters
ryanwi Jan 23, 2024
16b4a9a
Add call
ryanwi Jan 23, 2024
dfc213b
Merge branch 'main' into aa/filters
ryanwi Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion public/full.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ const {
createMicrophoneAnalyzer,
} = SignalWire

const searchInput = document.getElementById('searchInput')
const searchType = document.getElementById('searchType')

window.getMicrophoneDevices = getMicrophoneDevices
window.getCameraDevices = getCameraDevices
window.getSpeakerDevices = getSpeakerDevices
Expand Down Expand Up @@ -953,7 +956,13 @@ function updateAddressUI() {
async function fetchAddresses() {
if (!client) return
try {
const addressData = await client.getAddresses()
const searchText = searchInput.value
const selectedType = searchType.value

const addressData = await client.getAddresses({
type: selectedType === 'all' ? undefined : selectedType,
displayName: !searchText.length ? undefined : searchText,
})
window.__addressData = addressData
updateAddressUI()
} catch (error) {
Expand Down Expand Up @@ -988,3 +997,12 @@ window.fetchPrevAddresses = async () => {
console.error('Unable to fetch prev addresses', error)
}
}

let debounceTimeout
searchInput.addEventListener('input', () => {
clearTimeout(debounceTimeout)
// Search after 1 seconds when user stops typing
debounceTimeout = setTimeout(fetchAddresses, 1000)
})

searchType.addEventListener('change', fetchAddresses)
23 changes: 23 additions & 0 deletions views/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,29 @@
<div class="col-12 col-md-8 mt-4 mt-md-1">
<!-- Addresses -->
<div class="card" id="addressesCard">
<!-- Filters -->
<div class="input-group mt-1 px-2">
<input
type="text"
class="form-control"
placeholder="Search..."
aria-label="Search"
aria-describedby="searchButton"
id="searchInput"
/>
<select class="form-select" id="searchType">
<option value="all" selected>All</option>
<option value="subscriber">Subscriber</option>
<option value="room">Room</option>
<option value="call">Call</option>
<option value="app">App</option>
</select>
</div>
<!-- Filters end -->

<div class="card-body" id="addresses"></div>

<!-- Pagination -->
<div class="d-flex justify-content-center pb-2 gap-2">
<button
name="fetch-next-address"
Expand All @@ -192,6 +214,7 @@
Next
</button>
</div>
<!-- Pagination end -->
</div>
<!-- Addresses end -->

Expand Down