search bar functionality

nodejs/public/lib/js/app-base.js

@@ -307,6 +307,8 @@ $( document ).ready(function(){
 
 	$('.fa-circle-minus').click(function(){
 		$(this).closest('.card').find('.card-body').slideToggle('fast');
+		// $(this).closest('.card').find('.card-header').slideToggle('fast');
+
 	});
 
 	$('.fa-circle-xmark').click(function(){

nodejs/views/hosts.ejs

@@ -17,7 +17,21 @@
 		div.editWindow {
 			margin-bottom: 1em;
 		}
+		/* my Div class for my search bar */
+		.search-wrapper {
+			display: flex;
+			gap: .5rem;
+			align-items: center;
+			margin-top: 10px;
+		}
+		/* The input bar  */
+		input {
+			font-size: 1rem;
+			border-top-left-radius: 5px !important;
+			border-bottom-left-radius: 5px !important;
+			border-top-right-radius: 5px !important;
 			
+		}
 	</style>
 
 	<script type="text/javascript">
@@ -95,6 +109,24 @@
 				});
 			});
 
+			//search bar html event logic stolen from here
+			// https://github.com/WebDevSimplified/js-search-bar/blob/main/script.js
+			$('[host-search]').on("input", function() {
+				let inputValue = $(this).val().toLowerCase();
+
+				//on each input detected we need to get all host list that was called by the populateHosts function which is store in 
+				// $.scope.hosts and then we need to loop through each host and check if the host name is equal to the input value
+				// if it is we will display the host if not we will hide it
+				for(let hostObj of $.scope.hosts){
+					if (hostObj.host.toLowerCase().includes(inputValue)) {
+						hostObj.__jq_$el.show();
+					} else {
+						hostObj.__jq_$el.hide();
+
+					}
+				}
+			});
+
 			$('form.addHost').on('submit', function () {
 				event.preventDefault();
 
@@ -204,17 +236,20 @@
 
 						<div class="form-group">
 							<label class="control-label">Incoming Host Name</label>
-						<input type="text" name="host" class="form-control" placeholder="ex: proxy.cloud-ops.net" validate=":3" >
+							<input type="text" name="host" class="form-control" placeholder="ex: proxy.cloud-ops.net"
+								validate=":3">
 						</div>
 
 						<div class="form-group">
 							<label class="control-label">Target IP or Host Name</label>
-						<input type="text" name="ip" class="form-control" placeholder="ex: 10.10.10.10" validate=":3" />
+							<input type="text" name="ip" class="form-control" placeholder="ex: 10.10.10.10"
+								validate=":3" />
 						</div>
 
 						<div class="form-group">
 							<label class="control-label">Target TCP Port</label>
-						<input type="number"  name="targetPort" class="form-control" value="80" min="0" max="65535" />
+							<input type="number" name="targetPort" class="form-control" value="80" min="0"
+								max="65535" />
 						</div>
 
 						<div class="form-group">
@@ -261,8 +296,17 @@
 						<i class="fa-solid fa-circle-minus"></i>
 					</span>
 				</div>
+				<!-- <div class="form-group">
+					<label class="control-label">Target TCP Port</label>
+					<input type="number" name="targetPort" class="form-control" value="80" min="0"
+						max="65535" />
+				</div> -->
 				
 				<div class="card-header actionMessage" style="display:none"></div>
+				<div class="card-header search-wrapper">
+					<label class="control-label" for="search" style="margin-left: -5px;">Search Hosts: </label>
+					<input type="search" id="search" host-search>
+				</div>
 
 				<table class="card-body table table-striped" style="margin-bottom:0">
 
@@ -299,10 +343,12 @@
 									<i class="fa-brands fa-expeditedssl"></i>
 									Cert
 								</button> -->
-								<button type="button" onclick="editHost(this, '{{ host }}');" class="btn btn-sm btn-warning">
+									<button type="button" onclick="editHost(this, '{{ host }}');"
+										class="btn btn-sm btn-warning">
 										<i class="fa-solid fa-pencil"></i> Edit
 									</button>
-								<button type="button" onclick="deleteHost('{{ host }}')" class="btn btn-sm btn-danger">
+									<button type="button" onclick="deleteHost('{{ host }}')"
+										class="btn btn-sm btn-danger">
 										<i class="fa-solid fa-trash-can"></i>
 										Delete
 									</button>