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

61
index.html
View File

@ -1,5 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<!--
# _
# | |
@ -9,7 +8,8 @@
# |_| |_| |_|\___/|_| |_|\___/ \___|\__,_|_(_)__,_|___/
#
# (c) Andrea Santaniello 31/10/24 - FRN Weblist
-->
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -22,6 +22,9 @@
body {
background-color: #121212;
color: #e0e0e0;
background-image: url('https://archive.monocul.us/monoculus_sketch_2024_min.png');
background-position: bottom right;
background-repeat: no-repeat;
}
.container-fluid {
margin-top: 20px;
@ -72,6 +75,9 @@
.modal-title {
font-weight: bold;
}
.favorite {
color: yellow;
}
</style>
</head>
<body>
@ -113,19 +119,31 @@
<script>
function updateClientStatus() {
$.get("http://localhost:8181/clients", function (data) {
localStorage.setItem('serversData', JSON.stringify(data.servers));
renderServers(data.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 = "";
servers.forEach(server => {
const isFavorite = favoriteServers.includes(server.server_name);
serversHtml += `<div class="card mb-4 server-card">
<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 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">
<tr>
<th>Status</th>
@ -165,7 +183,7 @@
});
serversHtml += `</tbody>
</table>
</table></div>
</div>
</div>`;
});
@ -193,8 +211,11 @@
$('#searchInput').on('keyup', function () {
const value = $(this).val().toLowerCase();
const filteredServers = [];
localStorage.setItem('searchValue', value);
filterServers(value);
});
function filterServers(value) {
$('.server-card').each(function () {
let serverVisible = false;
$(this).find('.client-row').each(function () {
@ -205,13 +226,31 @@
}
});
$(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>
</body>
</html>
</html>