theta42/proxy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "search bar functionality"

Browse Source 
This reverts commit 7780376f5f.
This commit is contained in:
noot
2024-08-01 02:38:09 +08:00
parent 7780376f5f
commit f2f5abbf7e
2 changed files with 280 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nodejs/public/lib/js/app-base.js
-2
View File
@@ -307,8 +307,6 @@ $( document ).ready(function(){
$('.fa-circle-minus').click(function(){ $('.fa-circle-minus').click(function(){
$(this).closest('.card').find('.card-body').slideToggle('fast'); $(this).closest('.card').find('.card-body').slideToggle('fast');
// $(this).closest('.card').find('.card-header').slideToggle('fast');
}); });
$('.fa-circle-xmark').click(function(){ $('.fa-circle-xmark').click(function(){
nodejs/views/hosts.ejs
+49 -95
View File
@@ -1,40 +1,26 @@
<%- include('top') %> <%- include('top') %>
<script type="text/javascript"> <script type="text/javascript">
// Require login to see this page. // Require login to see this page.
app.auth.forceLogin() app.auth.forceLogin()
</script> </script>
<style type="text/css"> <style type="text/css">
label.control-label { label.control-label{
font-weight: bold; font-weight: bold;
margin-bottom: 1px; margin-bottom: 1px;
} }
.card-title { .card-title{
font-weight: bold; font-weight: bold;
} }
div.editWindow { div.editWindow{
margin-bottom: 1em; 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) { function parseHostRow(host) {
host['updated_on_text'] = moment(host['updated_on'], "x").fromNow(); host['updated_on_text'] = moment(host['updated_on'], "x").fromNow();
@@ -44,35 +30,35 @@
return host; return host;
} }
function populateHosts() { function populateHosts(){
app.host.list(function (error, res) { app.host.list(function(error, res){
if (error) return app.util.actionMessage(error, $.scope.hosts.$this, 'danger'); if(error) return app.util.actionMessage(error, $.scope.hosts.$this, 'danger');
for (let host of res) { for(let host of res){
$.scope.hosts.push(parseHostRow(host)); $.scope.hosts.push(parseHostRow(host));
} }
$.scope.hosts.__setPut(function ($el, item, list) { $.scope.hosts.__setPut(function($el, item, list){
$el.addClass('bg-success'); $el.addClass('bg-success');
$el.fadeIn(1000, function () { $el.fadeIn(1000, function(){
$el.removeClass('bg-success'); $el.removeClass('bg-success');
}); });
}); });
}); });
} }
function cancleHostEdit() { function cancleHostEdit(){
$('#hostsTable').find('tr').each(function (idx, el) { $('#hostsTable').find('tr').each(function(idx, el){
console.log('here?') console.log('here?')
$(el).removeClass('table-warning'); $(el).removeClass('table-warning');
}); });
$('.editWindow').slideUp('fast'); $('.editWindow').slideUp('fast');
} }
function editHost(btn, host) { function editHost(btn, host){
cancleHostEdit(); cancleHostEdit();
$(btn).closest('tr').addClass('table-warning'); $(btn).closest('tr').addClass('table-warning');
$('.editWindow .card-title').html("Edit " + host); $('.editWindow .card-title').html("Edit "+ host);
$('div.editWindow .card-body span').html($('#addHost').html()); $('div.editWindow .card-body span').html($('#addHost').html());
$('div.editWindow .card-body span button').remove(); $('div.editWindow .card-body span button').remove();
@@ -81,86 +67,68 @@
$('.editWindow').slideDown('fast'); $('.editWindow').slideDown('fast');
app.host.get(host, function (error, data) { app.host.get(host, function(error, data){
$.each(data.results, function (key, value) { $.each( data.results, function( key, value ) {
if (typeof value == "boolean") { if(typeof value == "boolean"){
$(".editWindow #" + key + "-" + value).prop('checked', true) $(".editWindow #"+ key +"-"+ value).prop('checked', true)
} else { }else{
$(".editWindow input[name='" + key + "']").val(value); $(".editWindow input[name='" + key + "']").val(value);
} }
}); });
}); });
}; };
function deleteHost(host) { function deleteHost(host){
app.host.remove({ host: host }, function (err, data) { app.host.remove({host: host}, function(err, data){
// app.util.actionMessage(`Host ${host} deleted!`, $.scope.hosts.$this, 'danger'); // app.util.actionMessage(`Host ${host} deleted!`, $.scope.hosts.$this, 'danger');
$.scope.hosts.remove(host); $.scope.hosts.remove(host);
}); });
} }
$(document).ready(function () { $(document).ready(function(){
populateHosts(); //populate the table populateHosts(); //populate the table
$.scope.hosts.__setTake(function ($el, item, list) { $.scope.hosts.__setTake(function($el, item, list){
$el.addClass('bg-danger'); $el.addClass('bg-danger');
$el.fadeOut(1000, function () { $el.fadeOut(1000, function(){
$el.remove() $el.remove()
}); });
}); });
//search bar html event logic stolen from here $('form.addHost').on('submit', function(){
// 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(); event.preventDefault();
$form = $(this); $form = $(this);
var action = $($form.find('button[type="submit"]')[0]).data('type'); var action = $($form.find('button[type="submit"]')[0]).data('type');
app.util.actionMessage('', $form); app.util.actionMessage('', $form);
if ($form.attr('isValid') === 'true') { if($form.attr('isValid') === 'true'){
var formdata = $form.serializeObject(); var formdata = $form.serializeObject();
if (formdata.targetPort) formdata.targetPort = Number(formdata.targetPort); if(formdata.targetPort) formdata.targetPort = Number(formdata.targetPort);
if (formdata.targetssl) formdata.targetssl = formdata.targetssl == 'true' ? true : false; if(formdata.targetssl) formdata.targetssl = formdata.targetssl == 'true' ? true : false;
if (formdata.forcessl) formdata.forcessl = formdata.forcessl == 'true' ? true : false; if(formdata.forcessl) formdata.forcessl = formdata.forcessl == 'true' ? true : false;
app.host[action](formdata, function (error, data) { app.host[action](formdata, function(error, data){
if (error) { if(error){
app.util.actionMessage(error + data.message, $form, 'danger'); app.util.actionMessage(error + data.message, $form, 'danger');
return; return;
} }
if ($.scope.hosts.indexOf(data.__requestedHost) >= 0) { if($.scope.hosts.indexOf(data.__requestedHost) >= 0){
$.scope.hosts.update(data.__requestedHost, parseHostRow(data)); $.scope.hosts.update(data.__requestedHost, parseHostRow(data));
} else { }else{
$.scope.hosts.splice(0, 0, parseHostRow(data)) $.scope.hosts.splice(0,0, parseHostRow(data))
} }
if (action == 'edit') $('.editWindow').slideUp('fast'); if(action == 'edit') $('.editWindow').slideUp('fast');
$form.trigger('reset'); $form.trigger('reset');
}) })
} }
}); });
}); });
</script> </script>
<div class="row" style="display:none"> <div class="row" style="display:none">
<div class="col col-md-12 col-lg-4 col-xl-3 col-xxl-2"> <div class="col col-md-12 col-lg-4 col-xl-3 col-xxl-2">
<!-- <!--
left column left column
@@ -236,20 +204,17 @@
<div class="form-group"> <div class="form-group">
<label class="control-label">Incoming Host Name</label> <label class="control-label">Incoming Host Name</label>
<input type="text" name="host" class="form-control" placeholder="ex: proxy.cloud-ops.net" <input type="text" name="host" class="form-control" placeholder="ex: proxy.cloud-ops.net" validate=":3" >
validate=":3">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">Target IP or Host Name</label> <label class="control-label">Target IP or Host Name</label>
<input type="text" name="ip" class="form-control" placeholder="ex: 10.10.10.10" <input type="text" name="ip" class="form-control" placeholder="ex: 10.10.10.10" validate=":3" />
validate=":3" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">Target TCP Port</label> <label class="control-label">Target TCP Port</label>
<input type="number" name="targetPort" class="form-control" value="80" min="0" <input type="number" name="targetPort" class="form-control" value="80" min="0" max="65535" />
max="65535" />
</div> </div>
<div class="form-group"> <div class="form-group">
@@ -296,17 +261,8 @@
<i class="fa-solid fa-circle-minus"></i> <i class="fa-solid fa-circle-minus"></i>
</span> </span>
</div> </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 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"> <table class="card-body table table-striped" style="margin-bottom:0">
@@ -339,16 +295,14 @@
</td> </td>
<td> <td>
<div class="btn-group"> <div class="btn-group">
<!-- <button type="button" class="btn btn-info"> <!-- <button type="button" class="btn btn-info">
<i class="fa-brands fa-expeditedssl"></i> <i class="fa-brands fa-expeditedssl"></i>
Cert Cert
</button> --> </button> -->
<button type="button" onclick="editHost(this, '{{ host }}');" <button type="button" onclick="editHost(this, '{{ host }}');" class="btn btn-sm btn-warning">
class="btn btn-sm btn-warning">
<i class="fa-solid fa-pencil"></i> Edit <i class="fa-solid fa-pencil"></i> Edit
</button> </button>
<button type="button" onclick="deleteHost('{{ host }}')" <button type="button" onclick="deleteHost('{{ host }}')" class="btn btn-sm btn-danger">
class="btn btn-sm btn-danger">
<i class="fa-solid fa-trash-can"></i> <i class="fa-solid fa-trash-can"></i>
Delete Delete
</button> </button>
@@ -360,5 +314,5 @@
</div> </div>
</div> </div>
</div> </div>
<%- include('bottom') %> <%- include('bottom') %>