From 7780376f5ff47705b45ac7150ac3c880a90502f0 Mon Sep 17 00:00:00 2001
From: noot <limtiseng@gmail.com>
Date: Thu, 1 Aug 2024 01:44:15 +0800
Subject: [PATCH 1/3] search bar functionality

---
 nodejs/public/lib/js/app-base.js |   2 +
 nodejs/views/hosts.ejs           | 592 +++++++++++++++++--------------
 2 files changed, 321 insertions(+), 273 deletions(-)

diff --git a/nodejs/public/lib/js/app-base.js b/nodejs/public/lib/js/app-base.js
index c4ec287..94766bf 100644
--- a/nodejs/public/lib/js/app-base.js
+++ b/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(){
diff --git a/nodejs/views/hosts.ejs b/nodejs/views/hosts.ejs
index 08824ba..a6e6387 100755
--- a/nodejs/views/hosts.ejs
+++ b/nodejs/views/hosts.ejs
@@ -1,318 +1,364 @@
 <%- include('top') %>
-<script type="text/javascript">
-	// Require login to see this page.
-	app.auth.forceLogin()
-</script>
+	<script type="text/javascript">
+		// Require login to see this page.
+		app.auth.forceLogin()
+	</script>
 
-<style type="text/css">
-	label.control-label{
-		font-weight: bold;
-		margin-bottom: 1px;
-	}
+	<style type="text/css">
+		label.control-label {
+			font-weight: bold;
+			margin-bottom: 1px;
+		}
 
-	.card-title{
-		font-weight: bold;
-	}
+		.card-title {
+			font-weight: bold;
+		}
 
-	div.editWindow{
-		margin-bottom: 1em;
-	}
+		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>
 
-</style>
+	<script type="text/javascript">
 
-<script type="text/javascript">
+		function parseHostRow(host) {
+			host['updated_on_text'] = moment(host['updated_on'], "x").fromNow();
+			host['targetssl_text'] = host['targetssl'] ? 'https://' : 'http://';
+			host['forcessl_text'] = host['forcessl'] ? 'https://' : 'http://';
 
-	function parseHostRow(host) {
-		host['updated_on_text'] = moment(host['updated_on'], "x").fromNow();
-		host['targetssl_text'] = host['targetssl'] ? 'https://' : 'http://';
-		host['forcessl_text'] = host['forcessl'] ? 'https://' : 'http://';
+			return host;
+		}
 
-		return host;
-	}
+		function populateHosts() {
+			app.host.list(function (error, res) {
+				if (error) return app.util.actionMessage(error, $.scope.hosts.$this, 'danger');
 
-	function populateHosts(){
-		app.host.list(function(error, res){
-			if(error) return app.util.actionMessage(error, $.scope.hosts.$this, 'danger');
+				for (let host of res) {
+					$.scope.hosts.push(parseHostRow(host));
+				}
 
-			for(let host of res){
-				$.scope.hosts.push(parseHostRow(host));
-			}
-
-			$.scope.hosts.__setPut(function($el, item, list){
-				$el.addClass('bg-success');
-				$el.fadeIn(1000, function(){
-					$el.removeClass('bg-success');
+				$.scope.hosts.__setPut(function ($el, item, list) {
+					$el.addClass('bg-success');
+					$el.fadeIn(1000, function () {
+						$el.removeClass('bg-success');
+					});
 				});
 			});
-		});
-	}
+		}
 
-	function cancleHostEdit(){
-		$('#hostsTable').find('tr').each(function(idx, el){
-			console.log('here?')
-			$(el).removeClass('table-warning');
-		});
-		$('.editWindow').slideUp('fast');
-	}
+		function cancleHostEdit() {
+			$('#hostsTable').find('tr').each(function (idx, el) {
+				console.log('here?')
+				$(el).removeClass('table-warning');
+			});
+			$('.editWindow').slideUp('fast');
+		}
 
-	function editHost(btn, host){
-		cancleHostEdit();
-		$(btn).closest('tr').addClass('table-warning');
-		$('.editWindow .card-title').html("Edit "+ host);
+		function editHost(btn, host) {
+			cancleHostEdit();
+			$(btn).closest('tr').addClass('table-warning');
+			$('.editWindow .card-title').html("Edit " + host);
 
-		$('div.editWindow .card-body span').html($('#addHost').html());
-		$('div.editWindow .card-body span button').remove();
+			$('div.editWindow .card-body span').html($('#addHost').html());
+			$('div.editWindow .card-body span button').remove();
 
-		$(".editWindow input[name='edit_host']").val(host);
+			$(".editWindow input[name='edit_host']").val(host);
 
-		$('.editWindow').slideDown('fast');
+			$('.editWindow').slideDown('fast');
 
-		app.host.get(host, function(error, data){
-			$.each( data.results, function( key, value ) {
-				if(typeof value == "boolean"){
-					$(".editWindow #"+ key +"-"+ value).prop('checked', true)
-				}else{
-					$(".editWindow input[name='" + key + "']").val(value);
+			app.host.get(host, function (error, data) {
+				$.each(data.results, function (key, value) {
+					if (typeof value == "boolean") {
+						$(".editWindow #" + key + "-" + value).prop('checked', true)
+					} else {
+						$(".editWindow input[name='" + key + "']").val(value);
+					}
+				});
+			});
+		};
+
+		function deleteHost(host) {
+			app.host.remove({ host: host }, function (err, data) {
+				// app.util.actionMessage(`Host ${host} deleted!`, $.scope.hosts.$this, 'danger');
+				$.scope.hosts.remove(host);
+			});
+		}
+
+		$(document).ready(function () {
+			populateHosts(); //populate the table
+
+			$.scope.hosts.__setTake(function ($el, item, list) {
+				$el.addClass('bg-danger');
+				$el.fadeOut(1000, function () {
+					$el.remove()
+				});
+			});
+
+			//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();
+
+				$form = $(this);
+				var action = $($form.find('button[type="submit"]')[0]).data('type');
+				app.util.actionMessage('', $form);
+
+				if ($form.attr('isValid') === 'true') {
+					var formdata = $form.serializeObject();
+					if (formdata.targetPort) formdata.targetPort = Number(formdata.targetPort);
+					if (formdata.targetssl) formdata.targetssl = formdata.targetssl == 'true' ? true : false;
+					if (formdata.forcessl) formdata.forcessl = formdata.forcessl == 'true' ? true : false;
+
+					app.host[action](formdata, function (error, data) {
+						if (error) {
+							app.util.actionMessage(error + data.message, $form, 'danger');
+							return;
+						}
+
+						if ($.scope.hosts.indexOf(data.__requestedHost) >= 0) {
+							$.scope.hosts.update(data.__requestedHost, parseHostRow(data));
+						} else {
+							$.scope.hosts.splice(0, 0, parseHostRow(data))
+						}
+
+						if (action == 'edit') $('.editWindow').slideUp('fast');
+
+						$form.trigger('reset');
+					})
 				}
 			});
 		});
-	};
-
-	function deleteHost(host){
-		app.host.remove({host: host}, function(err, data){
-			// app.util.actionMessage(`Host ${host} deleted!`, $.scope.hosts.$this, 'danger');
-			$.scope.hosts.remove(host);
-		});
-	}
-
-	$(document).ready(function(){
-		populateHosts(); //populate the table
-
-		$.scope.hosts.__setTake(function($el, item, list){
-			$el.addClass('bg-danger');
-			$el.fadeOut(1000, function(){
-				$el.remove()
-			});
-		});
-
-		$('form.addHost').on('submit', function(){
-			event.preventDefault();
-
-			$form = $(this);
-			var action = $($form.find('button[type="submit"]')[0]).data('type');
-			app.util.actionMessage('', $form);
-
-			if($form.attr('isValid') === 'true'){
-				var formdata = $form.serializeObject();
-				if(formdata.targetPort) formdata.targetPort = Number(formdata.targetPort);
-				if(formdata.targetssl) formdata.targetssl = formdata.targetssl == 'true' ? true : false;
-				if(formdata.forcessl) formdata.forcessl = formdata.forcessl == 'true' ? true : false;
-
-				app.host[action](formdata, function(error, data){
-					if(error){
-						app.util.actionMessage(error + data.message, $form, 'danger');
-						return;
-					}
-					
-					if($.scope.hosts.indexOf(data.__requestedHost) >= 0){
-						$.scope.hosts.update(data.__requestedHost, parseHostRow(data));
-					}else{
-						$.scope.hosts.splice(0,0, parseHostRow(data))
-					}
-
-					if(action == 'edit') $('.editWindow').slideUp('fast');
-
-					$form.trigger('reset');
-				})
-			}
-		});
-	});
-</script>
-<div class="row" style="display:none">
-	<div class="col col-md-12 col-lg-4 col-xl-3 col-xxl-2">
-	<!-- 
+	</script>
+	<div class="row" style="display:none">
+		<div class="col col-md-12 col-lg-4 col-xl-3 col-xxl-2">
+			<!-- 
 		left column 
 	-->
-		<div class="card shadow-lg editWindow" style="display:none">
-			<!--
+			<div class="card shadow-lg editWindow" style="display:none">
+				<!--
 				Edit host card
 			-->
-			<div class="card-header text-center bg-warning">
-				<span class="card-icon float-start">
-					<i class="fa-solid fa-pencil"></i>
-				</span>
-				<span class="card-title">
-				</span>
-				<span class="float-end">
-					<i class="fa-solid fa-circle-minus"></i>
-					<i class="fa-solid fa-circle-xmark" onclick="cancleHostEdit()"></i>
-				</span>
-			</div>
-
-			<div class="card-body">
-				<form class="addHost" onsubmit="$(this).validate()">
-					<span></span>
-					<input type="hidden" name="edit_host" />
-					<button type="submit" data-type="edit" class="btn btn-warning">
+				<div class="card-header text-center bg-warning">
+					<span class="card-icon float-start">
 						<i class="fa-solid fa-pencil"></i>
-						Update
-					</button>
-					<button class="btn btn-secondary" type="reset" onclick="cancleHostEdit()">
-						<i class="fa-solid fa-ban"></i>
-						Cancel
-					</button>
-				</form>
-			</div>
-		</div>
+					</span>
+					<span class="card-title">
+					</span>
+					<span class="float-end">
+						<i class="fa-solid fa-circle-minus"></i>
+						<i class="fa-solid fa-circle-xmark" onclick="cancleHostEdit()"></i>
+					</span>
+				</div>
 
-		<div class="card shadow-lg">
-			<!--
+				<div class="card-body">
+					<form class="addHost" onsubmit="$(this).validate()">
+						<span></span>
+						<input type="hidden" name="edit_host" />
+						<button type="submit" data-type="edit" class="btn btn-warning">
+							<i class="fa-solid fa-pencil"></i>
+							Update
+						</button>
+						<button class="btn btn-secondary" type="reset" onclick="cancleHostEdit()">
+							<i class="fa-solid fa-ban"></i>
+							Cancel
+						</button>
+					</form>
+				</div>
+			</div>
+
+			<div class="card shadow-lg">
+				<!--
 				Add new host card
 			-->
-			<div class="card-header text-center">
-				<span class="card-icon float-start">
-					<i class="fa-solid fa-plus"></i>
-				</span>
-				<span class="card-title">
-					New Entry
-				</span>
-				<span class="float-end">
-					<i class="fa-solid fa-circle-minus"></i>
-				</span>
-			</div>
-
-			<div class="card-header actionMessage" style="display:none"></div>
-
-			<div class="card-body">
-				<form class="addHost" id="addHost" onsubmit="$(this).validate()">
-					
-					<div class="form-group">
-						<label class="control-label">Incoming SSL</label>
-						<div class="radio">
-							<label>
-								<input type="radio" name="forcessl" id="forcessl-true" value="true" checked>
-								Force incoming connections over HTTPS <b>Recommended</b>
-							</label>
-						</div>
-						<div class="radio">
-							<label>
-								<input type="radio" name="forcessl" id="forcessl-false" value="false">
-								Allow use of both HTTP and HTTPS
-							</label>
-						</div>
-					</div>
-
-					<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" >
-					</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" />
-					</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="form-group">
-						<label class="control-label">Target SSL</label>
-						<div class="radio">
-							<label>
-								<input type="radio" name="targetssl" id="targetssl-true" value="true">
-								Proxy to HTTPS 
-							</label>
-						</div>
-						<div class="radio">
-							<label>
-								<input type="radio" name="targetssl" id="targetssl-false" value="false" checked>
-								Proxy to HTTP <b>Recommended</b>
-							</label>
-						</div>
-					</div>
-					<hr />
-					<button type="submit" data-type="add" class="btn btn-success">
+				<div class="card-header text-center">
+					<span class="card-icon float-start">
 						<i class="fa-solid fa-plus"></i>
-						Add
-					</button>
-				</form>
+					</span>
+					<span class="card-title">
+						New Entry
+					</span>
+					<span class="float-end">
+						<i class="fa-solid fa-circle-minus"></i>
+					</span>
+				</div>
+
+				<div class="card-header actionMessage" style="display:none"></div>
+
+				<div class="card-body">
+					<form class="addHost" id="addHost" onsubmit="$(this).validate()">
+
+						<div class="form-group">
+							<label class="control-label">Incoming SSL</label>
+							<div class="radio">
+								<label>
+									<input type="radio" name="forcessl" id="forcessl-true" value="true" checked>
+									Force incoming connections over HTTPS <b>Recommended</b>
+								</label>
+							</div>
+							<div class="radio">
+								<label>
+									<input type="radio" name="forcessl" id="forcessl-false" value="false">
+									Allow use of both HTTP and HTTPS
+								</label>
+							</div>
+						</div>
+
+						<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">
+						</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" />
+						</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="form-group">
+							<label class="control-label">Target SSL</label>
+							<div class="radio">
+								<label>
+									<input type="radio" name="targetssl" id="targetssl-true" value="true">
+									Proxy to HTTPS
+								</label>
+							</div>
+							<div class="radio">
+								<label>
+									<input type="radio" name="targetssl" id="targetssl-false" value="false" checked>
+									Proxy to HTTP <b>Recommended</b>
+								</label>
+							</div>
+						</div>
+						<hr />
+						<button type="submit" data-type="add" class="btn btn-success">
+							<i class="fa-solid fa-plus"></i>
+							Add
+						</button>
+					</form>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<div class="col col-md-12 col-lg-8 col-xl-9 col-xxl-10">
-		<!--
+		<div class="col col-md-12 col-lg-8 col-xl-9 col-xxl-10">
+			<!--
 			Right column
 		-->
-		<div class="card shadow-lg">
-			<!--
+			<div class="card shadow-lg">
+				<!--
 				List current hosts
 			-->
-			<div class="card-header text-center">
-				<span class="card-icon float-start">
-					<i class="fa-solid fa-network-wired"></i>
-				</span>
-				<span class="card-title">
-					Proxy List
-				</span>
-				<span class="float-end">
-					<i class="fa-solid fa-circle-minus"></i>
-				</span>
-			</div>
+				<div class="card-header text-center">
+					<span class="card-icon float-start">
+						<i class="fa-solid fa-network-wired"></i>
+					</span>
+					<span class="card-title">
+						Proxy List
+					</span>
+					<span class="float-end">
+						<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>
 
-			<div class="card-header actionMessage" style="display:none"></div>
+				<table class="card-body table table-striped" style="margin-bottom:0">
 
-			<table class="card-body table table-striped" style="margin-bottom:0">
-	
-				<thead>
-					<th>
-						Host Name
-					</th>
-					<th>
-						target
-					</th>
-					<th class="hidden-xs">
-						Updated
-					</th>
-					<th>
-						Actions
-					</th>
-				</thead>
-				<tbody id="hostsTable">
-					<tr action="api" jq-repeat="hosts" jq-repeat-index='host' style="display:none">
-						<td>
-							<a target="_blank" href="{{ forcessl_text }}{{ host }}">
-								{{{ forcessl_text }}}{{ host }}
-							</a>
-						</td>
-						<td>
-							{{{ targetssl_text }}}{{ ip }}:{{ targetPort }}
-						</td>
-						<td class="hidden-xs momentFromNow" data-date="{{ updated_on }}">
-							{{ updated_on_text }}
-						</td>
-						<td>
-							<div class="btn-group">
-<!-- 								<button type="button" class="btn btn-info">
+					<thead>
+						<th>
+							Host Name
+						</th>
+						<th>
+							target
+						</th>
+						<th class="hidden-xs">
+							Updated
+						</th>
+						<th>
+							Actions
+						</th>
+					</thead>
+					<tbody id="hostsTable">
+						<tr action="api" jq-repeat="hosts" jq-repeat-index='host' style="display:none">
+							<td>
+								<a target="_blank" href="{{ forcessl_text }}{{ host }}">
+									{{{ forcessl_text }}}{{ host }}
+								</a>
+							</td>
+							<td>
+								{{{ targetssl_text }}}{{ ip }}:{{ targetPort }}
+							</td>
+							<td class="hidden-xs momentFromNow" data-date="{{ updated_on }}">
+								{{ updated_on_text }}
+							</td>
+							<td>
+								<div class="btn-group">
+									<!-- 								<button type="button" class="btn btn-info">
 									<i class="fa-brands fa-expeditedssl"></i>
 									Cert
 								</button> -->
-								<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">
-									<i class="fa-solid fa-trash-can"></i>
-									Delete
-								</button>
-							</div>
-						</td>
-					</tr>
-				</tbody>
-			</table>
+									<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">
+										<i class="fa-solid fa-trash-can"></i>
+										Delete
+									</button>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
 
+			</div>
 		</div>
 	</div>
-</div>
-<%- include('bottom') %>
+	<%- include('bottom') %>
\ No newline at end of file

From f2f5abbf7e10f50042a6d806a8495bb92940fb9e Mon Sep 17 00:00:00 2001
From: noot <limtiseng@gmail.com>
Date: Thu, 1 Aug 2024 02:38:09 +0800
Subject: [PATCH 2/3] Revert "search bar functionality"

This reverts commit 7780376f5ff47705b45ac7150ac3c880a90502f0.
---
 nodejs/public/lib/js/app-base.js |   2 -
 nodejs/views/hosts.ejs           | 606 ++++++++++++++-----------------
 2 files changed, 280 insertions(+), 328 deletions(-)

diff --git a/nodejs/public/lib/js/app-base.js b/nodejs/public/lib/js/app-base.js
index 94766bf..c4ec287 100644
--- a/nodejs/public/lib/js/app-base.js
+++ b/nodejs/public/lib/js/app-base.js
@@ -307,8 +307,6 @@ $( 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(){
diff --git a/nodejs/views/hosts.ejs b/nodejs/views/hosts.ejs
index a6e6387..08824ba 100755
--- a/nodejs/views/hosts.ejs
+++ b/nodejs/views/hosts.ejs
@@ -1,364 +1,318 @@
 <%- include('top') %>
-	<script type="text/javascript">
-		// Require login to see this page.
-		app.auth.forceLogin()
-	</script>
+<script type="text/javascript">
+	// Require login to see this page.
+	app.auth.forceLogin()
+</script>
 
-	<style type="text/css">
-		label.control-label {
-			font-weight: bold;
-			margin-bottom: 1px;
-		}
+<style type="text/css">
+	label.control-label{
+		font-weight: bold;
+		margin-bottom: 1px;
+	}
 
-		.card-title {
-			font-weight: bold;
-		}
+	.card-title{
+		font-weight: bold;
+	}
 
-		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>
+	div.editWindow{
+		margin-bottom: 1em;
+	}
 
-	<script type="text/javascript">
+</style>
 
-		function parseHostRow(host) {
-			host['updated_on_text'] = moment(host['updated_on'], "x").fromNow();
-			host['targetssl_text'] = host['targetssl'] ? 'https://' : 'http://';
-			host['forcessl_text'] = host['forcessl'] ? 'https://' : 'http://';
+<script type="text/javascript">
 
-			return host;
-		}
+	function parseHostRow(host) {
+		host['updated_on_text'] = moment(host['updated_on'], "x").fromNow();
+		host['targetssl_text'] = host['targetssl'] ? 'https://' : 'http://';
+		host['forcessl_text'] = host['forcessl'] ? 'https://' : 'http://';
 
-		function populateHosts() {
-			app.host.list(function (error, res) {
-				if (error) return app.util.actionMessage(error, $.scope.hosts.$this, 'danger');
+		return host;
+	}
 
-				for (let host of res) {
-					$.scope.hosts.push(parseHostRow(host));
-				}
+	function populateHosts(){
+		app.host.list(function(error, res){
+			if(error) return app.util.actionMessage(error, $.scope.hosts.$this, 'danger');
 
-				$.scope.hosts.__setPut(function ($el, item, list) {
-					$el.addClass('bg-success');
-					$el.fadeIn(1000, function () {
-						$el.removeClass('bg-success');
-					});
+			for(let host of res){
+				$.scope.hosts.push(parseHostRow(host));
+			}
+
+			$.scope.hosts.__setPut(function($el, item, list){
+				$el.addClass('bg-success');
+				$el.fadeIn(1000, function(){
+					$el.removeClass('bg-success');
 				});
 			});
-		}
+		});
+	}
 
-		function cancleHostEdit() {
-			$('#hostsTable').find('tr').each(function (idx, el) {
-				console.log('here?')
-				$(el).removeClass('table-warning');
-			});
-			$('.editWindow').slideUp('fast');
-		}
+	function cancleHostEdit(){
+		$('#hostsTable').find('tr').each(function(idx, el){
+			console.log('here?')
+			$(el).removeClass('table-warning');
+		});
+		$('.editWindow').slideUp('fast');
+	}
 
-		function editHost(btn, host) {
-			cancleHostEdit();
-			$(btn).closest('tr').addClass('table-warning');
-			$('.editWindow .card-title').html("Edit " + host);
+	function editHost(btn, host){
+		cancleHostEdit();
+		$(btn).closest('tr').addClass('table-warning');
+		$('.editWindow .card-title').html("Edit "+ host);
 
-			$('div.editWindow .card-body span').html($('#addHost').html());
-			$('div.editWindow .card-body span button').remove();
+		$('div.editWindow .card-body span').html($('#addHost').html());
+		$('div.editWindow .card-body span button').remove();
 
-			$(".editWindow input[name='edit_host']").val(host);
+		$(".editWindow input[name='edit_host']").val(host);
 
-			$('.editWindow').slideDown('fast');
+		$('.editWindow').slideDown('fast');
 
-			app.host.get(host, function (error, data) {
-				$.each(data.results, function (key, value) {
-					if (typeof value == "boolean") {
-						$(".editWindow #" + key + "-" + value).prop('checked', true)
-					} else {
-						$(".editWindow input[name='" + key + "']").val(value);
-					}
-				});
-			});
-		};
-
-		function deleteHost(host) {
-			app.host.remove({ host: host }, function (err, data) {
-				// app.util.actionMessage(`Host ${host} deleted!`, $.scope.hosts.$this, 'danger');
-				$.scope.hosts.remove(host);
-			});
-		}
-
-		$(document).ready(function () {
-			populateHosts(); //populate the table
-
-			$.scope.hosts.__setTake(function ($el, item, list) {
-				$el.addClass('bg-danger');
-				$el.fadeOut(1000, function () {
-					$el.remove()
-				});
-			});
-
-			//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();
-
-				$form = $(this);
-				var action = $($form.find('button[type="submit"]')[0]).data('type');
-				app.util.actionMessage('', $form);
-
-				if ($form.attr('isValid') === 'true') {
-					var formdata = $form.serializeObject();
-					if (formdata.targetPort) formdata.targetPort = Number(formdata.targetPort);
-					if (formdata.targetssl) formdata.targetssl = formdata.targetssl == 'true' ? true : false;
-					if (formdata.forcessl) formdata.forcessl = formdata.forcessl == 'true' ? true : false;
-
-					app.host[action](formdata, function (error, data) {
-						if (error) {
-							app.util.actionMessage(error + data.message, $form, 'danger');
-							return;
-						}
-
-						if ($.scope.hosts.indexOf(data.__requestedHost) >= 0) {
-							$.scope.hosts.update(data.__requestedHost, parseHostRow(data));
-						} else {
-							$.scope.hosts.splice(0, 0, parseHostRow(data))
-						}
-
-						if (action == 'edit') $('.editWindow').slideUp('fast');
-
-						$form.trigger('reset');
-					})
+		app.host.get(host, function(error, data){
+			$.each( data.results, function( key, value ) {
+				if(typeof value == "boolean"){
+					$(".editWindow #"+ key +"-"+ value).prop('checked', true)
+				}else{
+					$(".editWindow input[name='" + key + "']").val(value);
 				}
 			});
 		});
-	</script>
-	<div class="row" style="display:none">
-		<div class="col col-md-12 col-lg-4 col-xl-3 col-xxl-2">
-			<!-- 
+	};
+
+	function deleteHost(host){
+		app.host.remove({host: host}, function(err, data){
+			// app.util.actionMessage(`Host ${host} deleted!`, $.scope.hosts.$this, 'danger');
+			$.scope.hosts.remove(host);
+		});
+	}
+
+	$(document).ready(function(){
+		populateHosts(); //populate the table
+
+		$.scope.hosts.__setTake(function($el, item, list){
+			$el.addClass('bg-danger');
+			$el.fadeOut(1000, function(){
+				$el.remove()
+			});
+		});
+
+		$('form.addHost').on('submit', function(){
+			event.preventDefault();
+
+			$form = $(this);
+			var action = $($form.find('button[type="submit"]')[0]).data('type');
+			app.util.actionMessage('', $form);
+
+			if($form.attr('isValid') === 'true'){
+				var formdata = $form.serializeObject();
+				if(formdata.targetPort) formdata.targetPort = Number(formdata.targetPort);
+				if(formdata.targetssl) formdata.targetssl = formdata.targetssl == 'true' ? true : false;
+				if(formdata.forcessl) formdata.forcessl = formdata.forcessl == 'true' ? true : false;
+
+				app.host[action](formdata, function(error, data){
+					if(error){
+						app.util.actionMessage(error + data.message, $form, 'danger');
+						return;
+					}
+					
+					if($.scope.hosts.indexOf(data.__requestedHost) >= 0){
+						$.scope.hosts.update(data.__requestedHost, parseHostRow(data));
+					}else{
+						$.scope.hosts.splice(0,0, parseHostRow(data))
+					}
+
+					if(action == 'edit') $('.editWindow').slideUp('fast');
+
+					$form.trigger('reset');
+				})
+			}
+		});
+	});
+</script>
+<div class="row" style="display:none">
+	<div class="col col-md-12 col-lg-4 col-xl-3 col-xxl-2">
+	<!-- 
 		left column 
 	-->
-			<div class="card shadow-lg editWindow" style="display:none">
-				<!--
+		<div class="card shadow-lg editWindow" style="display:none">
+			<!--
 				Edit host card
 			-->
-				<div class="card-header text-center bg-warning">
-					<span class="card-icon float-start">
-						<i class="fa-solid fa-pencil"></i>
-					</span>
-					<span class="card-title">
-					</span>
-					<span class="float-end">
-						<i class="fa-solid fa-circle-minus"></i>
-						<i class="fa-solid fa-circle-xmark" onclick="cancleHostEdit()"></i>
-					</span>
-				</div>
-
-				<div class="card-body">
-					<form class="addHost" onsubmit="$(this).validate()">
-						<span></span>
-						<input type="hidden" name="edit_host" />
-						<button type="submit" data-type="edit" class="btn btn-warning">
-							<i class="fa-solid fa-pencil"></i>
-							Update
-						</button>
-						<button class="btn btn-secondary" type="reset" onclick="cancleHostEdit()">
-							<i class="fa-solid fa-ban"></i>
-							Cancel
-						</button>
-					</form>
-				</div>
+			<div class="card-header text-center bg-warning">
+				<span class="card-icon float-start">
+					<i class="fa-solid fa-pencil"></i>
+				</span>
+				<span class="card-title">
+				</span>
+				<span class="float-end">
+					<i class="fa-solid fa-circle-minus"></i>
+					<i class="fa-solid fa-circle-xmark" onclick="cancleHostEdit()"></i>
+				</span>
 			</div>
 
-			<div class="card shadow-lg">
-				<!--
-				Add new host card
-			-->
-				<div class="card-header text-center">
-					<span class="card-icon float-start">
-						<i class="fa-solid fa-plus"></i>
-					</span>
-					<span class="card-title">
-						New Entry
-					</span>
-					<span class="float-end">
-						<i class="fa-solid fa-circle-minus"></i>
-					</span>
-				</div>
-
-				<div class="card-header actionMessage" style="display:none"></div>
-
-				<div class="card-body">
-					<form class="addHost" id="addHost" onsubmit="$(this).validate()">
-
-						<div class="form-group">
-							<label class="control-label">Incoming SSL</label>
-							<div class="radio">
-								<label>
-									<input type="radio" name="forcessl" id="forcessl-true" value="true" checked>
-									Force incoming connections over HTTPS <b>Recommended</b>
-								</label>
-							</div>
-							<div class="radio">
-								<label>
-									<input type="radio" name="forcessl" id="forcessl-false" value="false">
-									Allow use of both HTTP and HTTPS
-								</label>
-							</div>
-						</div>
-
-						<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">
-						</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" />
-						</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="form-group">
-							<label class="control-label">Target SSL</label>
-							<div class="radio">
-								<label>
-									<input type="radio" name="targetssl" id="targetssl-true" value="true">
-									Proxy to HTTPS
-								</label>
-							</div>
-							<div class="radio">
-								<label>
-									<input type="radio" name="targetssl" id="targetssl-false" value="false" checked>
-									Proxy to HTTP <b>Recommended</b>
-								</label>
-							</div>
-						</div>
-						<hr />
-						<button type="submit" data-type="add" class="btn btn-success">
-							<i class="fa-solid fa-plus"></i>
-							Add
-						</button>
-					</form>
-				</div>
+			<div class="card-body">
+				<form class="addHost" onsubmit="$(this).validate()">
+					<span></span>
+					<input type="hidden" name="edit_host" />
+					<button type="submit" data-type="edit" class="btn btn-warning">
+						<i class="fa-solid fa-pencil"></i>
+						Update
+					</button>
+					<button class="btn btn-secondary" type="reset" onclick="cancleHostEdit()">
+						<i class="fa-solid fa-ban"></i>
+						Cancel
+					</button>
+				</form>
 			</div>
 		</div>
 
-		<div class="col col-md-12 col-lg-8 col-xl-9 col-xxl-10">
+		<div class="card shadow-lg">
 			<!--
-			Right column
-		-->
-			<div class="card shadow-lg">
-				<!--
-				List current hosts
+				Add new host card
 			-->
-				<div class="card-header text-center">
-					<span class="card-icon float-start">
-						<i class="fa-solid fa-network-wired"></i>
-					</span>
-					<span class="card-title">
-						Proxy List
-					</span>
-					<span class="float-end">
-						<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>
+			<div class="card-header text-center">
+				<span class="card-icon float-start">
+					<i class="fa-solid fa-plus"></i>
+				</span>
+				<span class="card-title">
+					New Entry
+				</span>
+				<span class="float-end">
+					<i class="fa-solid fa-circle-minus"></i>
+				</span>
+			</div>
 
-				<table class="card-body table table-striped" style="margin-bottom:0">
+			<div class="card-header actionMessage" style="display:none"></div>
 
-					<thead>
-						<th>
-							Host Name
-						</th>
-						<th>
-							target
-						</th>
-						<th class="hidden-xs">
-							Updated
-						</th>
-						<th>
-							Actions
-						</th>
-					</thead>
-					<tbody id="hostsTable">
-						<tr action="api" jq-repeat="hosts" jq-repeat-index='host' style="display:none">
-							<td>
-								<a target="_blank" href="{{ forcessl_text }}{{ host }}">
-									{{{ forcessl_text }}}{{ host }}
-								</a>
-							</td>
-							<td>
-								{{{ targetssl_text }}}{{ ip }}:{{ targetPort }}
-							</td>
-							<td class="hidden-xs momentFromNow" data-date="{{ updated_on }}">
-								{{ updated_on_text }}
-							</td>
-							<td>
-								<div class="btn-group">
-									<!-- 								<button type="button" class="btn btn-info">
-									<i class="fa-brands fa-expeditedssl"></i>
-									Cert
-								</button> -->
-									<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">
-										<i class="fa-solid fa-trash-can"></i>
-										Delete
-									</button>
-								</div>
-							</td>
-						</tr>
-					</tbody>
-				</table>
+			<div class="card-body">
+				<form class="addHost" id="addHost" onsubmit="$(this).validate()">
+					
+					<div class="form-group">
+						<label class="control-label">Incoming SSL</label>
+						<div class="radio">
+							<label>
+								<input type="radio" name="forcessl" id="forcessl-true" value="true" checked>
+								Force incoming connections over HTTPS <b>Recommended</b>
+							</label>
+						</div>
+						<div class="radio">
+							<label>
+								<input type="radio" name="forcessl" id="forcessl-false" value="false">
+								Allow use of both HTTP and HTTPS
+							</label>
+						</div>
+					</div>
 
+					<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" >
+					</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" />
+					</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="form-group">
+						<label class="control-label">Target SSL</label>
+						<div class="radio">
+							<label>
+								<input type="radio" name="targetssl" id="targetssl-true" value="true">
+								Proxy to HTTPS 
+							</label>
+						</div>
+						<div class="radio">
+							<label>
+								<input type="radio" name="targetssl" id="targetssl-false" value="false" checked>
+								Proxy to HTTP <b>Recommended</b>
+							</label>
+						</div>
+					</div>
+					<hr />
+					<button type="submit" data-type="add" class="btn btn-success">
+						<i class="fa-solid fa-plus"></i>
+						Add
+					</button>
+				</form>
 			</div>
 		</div>
 	</div>
-	<%- include('bottom') %>
\ No newline at end of file
+
+	<div class="col col-md-12 col-lg-8 col-xl-9 col-xxl-10">
+		<!--
+			Right column
+		-->
+		<div class="card shadow-lg">
+			<!--
+				List current hosts
+			-->
+			<div class="card-header text-center">
+				<span class="card-icon float-start">
+					<i class="fa-solid fa-network-wired"></i>
+				</span>
+				<span class="card-title">
+					Proxy List
+				</span>
+				<span class="float-end">
+					<i class="fa-solid fa-circle-minus"></i>
+				</span>
+			</div>
+
+			<div class="card-header actionMessage" style="display:none"></div>
+
+			<table class="card-body table table-striped" style="margin-bottom:0">
+	
+				<thead>
+					<th>
+						Host Name
+					</th>
+					<th>
+						target
+					</th>
+					<th class="hidden-xs">
+						Updated
+					</th>
+					<th>
+						Actions
+					</th>
+				</thead>
+				<tbody id="hostsTable">
+					<tr action="api" jq-repeat="hosts" jq-repeat-index='host' style="display:none">
+						<td>
+							<a target="_blank" href="{{ forcessl_text }}{{ host }}">
+								{{{ forcessl_text }}}{{ host }}
+							</a>
+						</td>
+						<td>
+							{{{ targetssl_text }}}{{ ip }}:{{ targetPort }}
+						</td>
+						<td class="hidden-xs momentFromNow" data-date="{{ updated_on }}">
+							{{ updated_on_text }}
+						</td>
+						<td>
+							<div class="btn-group">
+<!-- 								<button type="button" class="btn btn-info">
+									<i class="fa-brands fa-expeditedssl"></i>
+									Cert
+								</button> -->
+								<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">
+									<i class="fa-solid fa-trash-can"></i>
+									Delete
+								</button>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+
+		</div>
+	</div>
+</div>
+<%- include('bottom') %>

From 5cfc55c37a2516d7a224a6c087d0cfa0e234c222 Mon Sep 17 00:00:00 2001
From: noot <limtiseng@gmail.com>
Date: Thu, 1 Aug 2024 03:09:09 +0800
Subject: [PATCH 3/3] search bar functionality

---
 nodejs/views/hosts.ejs | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/nodejs/views/hosts.ejs b/nodejs/views/hosts.ejs
index 08824ba..98860cd 100755
--- a/nodejs/views/hosts.ejs
+++ b/nodejs/views/hosts.ejs
@@ -17,6 +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;
+        border-bottom-right-radius: 5px !important;    
+    }
 
 </style>
 
@@ -95,6 +110,23 @@
 			});
 		});
 
+		//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();
 
@@ -263,7 +295,10 @@
 			</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">
 	
 				<thead>