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

UI fixes

Browse Source
This commit is contained in:
William Mantly
2024-07-31 19:43:01 -04:00
parent a173a48e43
commit 75a486251d
3 changed files with 47 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nodejs/views/hosts.ejs
+32 -28
View File
@@ -19,19 +19,19 @@
}
/* 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;
}
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>
@@ -110,22 +110,26 @@
});
});
//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();
app.subscribe(/./g, function(data, topic){
console.log('topic', data);
});
//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();
}
}
});
//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();
nodejs/views/users.ejs
+15 -9
View File
@@ -52,17 +52,19 @@
<div class="row" style="display:none">
<div class="col-md-4">
<div class="card shadow-lg">
<div class="card-header">
<span class="card-header-icon">
<div class="card-header text-center">
<span class="card-icon float-start">
<i class="fa-solid fa-user-plus"></i>
</span>
<span class="card-title mx-auto p-2">
<span class="card-title">
Add New User
</span>
<div class="float-right">
<span class="float-end">
<i class="fa-solid fa-circle-minus"></i>
</div>
</span>
</div>
<div class="card-header actionMessage" style="display:none"></div>
<div class="card-body">
<form action="user/" evalAJAX="
@@ -88,15 +90,19 @@
</div>
<div class="col-md-8">
<div class="card shadow-lg">
<div class="card-header">
<span class="card-title">
<div class="card-header text-center">
<span class="card-icon float-start">
<i class="fa-solid fa-users"></i>
</span>
<span class="card-title">
User List
</span>
<div class="float-right">
<span class="float-end">
<i class="fa-solid fa-circle-minus"></i>
</div>
</span>
</div>
<div class="card-header actionMessage" style="display:none"></div>
<table class="card-body table table-striped" style="margin-bottom:0">
<thead>