diff --git a/public/css/Room.css b/public/css/Room.css index 1ec0ac5..f2cc1e6 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -589,10 +589,24 @@ button:hover { padding: 8px; } +#roomParticipants tr { + border-bottom: 1px solid #444444; +} /* #roomParticipants tr:nth-child(even) { background-color: #0c0b0b; } */ +#searchParticipants { + margin-top: 15px; + width: 100%; + padding: 15px; + font-size: 1rem; + background-color: transparent; + color: #ffffff; + border: grey 1px solid; + border-radius: 10px; +} + /*-------------------------------------------------------------- # Send File --------------------------------------------------------------*/ diff --git a/public/js/Room.js b/public/js/Room.js index dc9b8e1..253fcfd 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -1352,7 +1352,16 @@ async function getRoomParticipants(refresh = false) { async function getParticipantsTable(peers) { let table = ` - +
+ +
+
@@ -1384,7 +1393,7 @@ async function getParticipantsTable(peers) { let peer_id = peer_info.peer_id; if (rc.peer_id === peer_id) { table += ` - + diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index a15dee2..82fc210 100644 --- a/public/js/RoomClient.js +++ b/public/js/RoomClient.js @@ -2362,6 +2362,29 @@ class RoomClient { } } + // #################################################### + // SEARCH PEER FILTER + // #################################################### + + searchPeer() { + let input, filter, table, tr, td, i, txtValue; + input = this.getId('searchParticipants'); + filter = input.value.toUpperCase(); + table = this.getId('myTable'); + tr = table.getElementsByTagName('tr'); + for (i = 0; i < tr.length; i++) { + td = tr[i].getElementsByTagName('td')[0]; + if (td) { + txtValue = td.textContent || td.innerText; + if (txtValue.toUpperCase().indexOf(filter) > -1) { + tr[i].style.display = ''; + } else { + tr[i].style.display = 'none'; + } + } + } + } + // #################################################### // UPDATE PEER INFO // ####################################################
${peer_name} (me)