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();