andrea/frn-server-webview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Interface update

Browse Source
This commit is contained in:
Andrea Santaniello 2024-10-31 19:11:26 +01:00
parent 9f0ea0298b
commit 68f11860af
1 changed files with 50 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@ -1,5 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en">
<!-- <!--
# _ # _
# | | # | |
@ -10,6 +9,7 @@
# #
# (c) Andrea Santaniello 31/10/24 - FRN Weblist # (c) Andrea Santaniello 31/10/24 - FRN Weblist
--> -->
<html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -22,6 +22,9 @@
body { body {
background-color: #121212; background-color: #121212;
color: #e0e0e0; color: #e0e0e0;
background-image: url('https://archive.monocul.us/monoculus_sketch_2024_min.png');
background-position: bottom right;
background-repeat: no-repeat;
} }
.container-fluid { .container-fluid {
margin-top: 20px; margin-top: 20px;
@ -72,6 +75,9 @@
.modal-title { .modal-title {
font-weight: bold; font-weight: bold;
} }
.favorite {
color: yellow;
}
</style> </style>
</head> </head>
<body> <body>
@ -113,19 +119,31 @@
<script> <script>
function updateClientStatus() { function updateClientStatus() {
$.get("http://localhost:8181/clients", function (data) { $.get("http://localhost:8181/clients", function (data) {
localStorage.setItem('serversData', JSON.stringify(data.servers));
renderServers(data.servers); renderServers(data.servers);
}); });
} }
function renderServers(servers) { function renderServers(servers) {
let favoriteServers = JSON.parse(localStorage.getItem('favoriteServers')) || [];
servers.sort((a, b) => {
const aFav = favoriteServers.includes(a.server_name) ? 1 : 0;
const bFav = favoriteServers.includes(b.server_name) ? 1 : 0;
return bFav - aFav;
});
let serversHtml = ""; let serversHtml = "";
servers.forEach(server => { servers.forEach(server => {
const isFavorite = favoriteServers.includes(server.server_name);
serversHtml += `<div class="card mb-4 server-card"> serversHtml += `<div class="card mb-4 server-card">
<div class="card-header"> <div class="card-header">
<h5>${server.server_name}</h5> <h5>
<i class="fa-solid fa-star star-icon ${isFavorite ? 'favorite' : ''}" data-server-name="${server.server_name}"></i>
${server.server_name}
</h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<table class="table table-bordered w-100"> <div class="table-responsive"><table class="table table-bordered w-100">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th>Status</th> <th>Status</th>
@ -165,7 +183,7 @@
}); });
serversHtml += `</tbody> serversHtml += `</tbody>
</table> </table></div>
</div> </div>
</div>`; </div>`;
}); });
@ -193,8 +211,11 @@
$('#searchInput').on('keyup', function () { $('#searchInput').on('keyup', function () {
const value = $(this).val().toLowerCase(); const value = $(this).val().toLowerCase();
const filteredServers = []; localStorage.setItem('searchValue', value);
filterServers(value);
});
function filterServers(value) {
$('.server-card').each(function () { $('.server-card').each(function () {
let serverVisible = false; let serverVisible = false;
$(this).find('.client-row').each(function () { $(this).find('.client-row').each(function () {
@ -205,12 +226,30 @@
} }
}); });
$(this).toggle(serverVisible); $(this).toggle(serverVisible);
});
if (serverVisible) {
filteredServers.push($(this).html());
} }
$(document).on('click', '.star-icon', function () {
const serverName = $(this).data('server-name');
let favoriteServers = JSON.parse(localStorage.getItem('favoriteServers')) || [];
if (favoriteServers.includes(serverName)) {
favoriteServers = favoriteServers.filter(name => name !== serverName);
$(this).removeClass('favorite');
} else {
favoriteServers.push(serverName);
$(this).addClass('favorite');
}
localStorage.setItem('favoriteServers', JSON.stringify(favoriteServers));
renderServers(JSON.parse(localStorage.getItem('serversData')) || []);
const searchValue = localStorage.getItem('searchValue') || "";
filterServers(searchValue);
}); });
});
const savedSearchValue = localStorage.getItem('searchValue') || "";
$('#searchInput').val(savedSearchValue);
filterServers(savedSearchValue);
}); });
</script> </script>
</body> </body>