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] 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') %>