Closed ianbloc closed 2 months ago
Even when removing any reference to the templating library in the HTML code and removing everything except for requiring a template and rendering the page, it does not work. I also tried a different html file, which worked great, but I need to use the html file because the entire site revolves around it, so if you spot any problems, tell me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servers - Server Panel</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<a class="inline-flex items-center gap-2 text-sm font-medium pt-4 pl-4" href="/home">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4"
>
<path d="m12 19-7-7 7-7"></path>
<path d="M19 12H5"></path>
</svg>
Back to home
</a>
<div class="flex flex-col h-full">
<header class="bg-gray-100 p-4 md:p-6 flex items-center justify-between">
<h1 class="text-2xl font-bold">Servers</h1>
</header>
<div class="flex-1 overflow-auto p-4 md:p-6">
<div class="flex items-center justify-between mb-4">
<input
class="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 w-full max-w-md"
placeholder="Search servers..."
type="search"
value=""
/>
<button class="items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 hidden md:flex">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
>
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
Add Server
</button>
</div>
<div class="overflow-x-auto">
<div class="relative w-full overflow-auto">
<table class="w-full caption-bottom text-sm">
<thead class="[&_tr]:border-b">
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 cursor-pointer" id="name-sort">
Name <span class="ml-1" id="name-sort-arrow"> </span>
</th>
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 cursor-pointer" id="ip-sort">
IP Address <span class="ml-1" id="ip-sort-arrow"> </span>
</th>
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 cursor-pointer" id="status-sort">
Status <span class="ml-1" id="status-sort-arrow"> </span>
</th>
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 cursor-pointer" id="cpu-sort">
CPU <span class="ml-1" id="cpu-sort-arrow"> </span>
</th>
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 cursor-pointer" id="ram-sort">
RAM <span class="ml-1" id="ram-sort-arrow"> </span>
</th>
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 cursor-pointer" id="storage-sort">
Storage <span class="ml-1" id="storage-sort-arrow"> </span>
</th>
</tr>
</thead>
<!-- Servers -->
<!-- <script>
var Servers = 0;
function CreateServer(Text){
var NewServer = document.createElement("tr");
NewServer.innerHTML = '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{{Server' + Servers +'_Name}}</td>';
NewServer.innerHTML += '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">192.168.1.100</td>';
NewServer.innerHTML += '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0"><div class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Online</div></td>';
NewServer.innerHTML += '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">100%</td>';
NewServer.innerHTML += '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">100%</td>';
NewServer.innerHTML += '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">100%</td>';
NewServer.setAttribute("class", "border-b transition-colors hover:bg-gray-50 cursor-pointer");
NewServer.setAttribute("id", "Server" + Servers);
NewServer.setAttribute("onclick", "window.location = \"/services;\"");
var Parent = document.getElementById("ServerViewer");
Parent.appendChild(NewServer);
Servers += 1;
}
</script> -->
<tbody class="[&_tr:last-child]:border-0" id="ServerViewer">
<!-- <tr class="border-b transition-colors hover:bg-gray-50 cursor-pointer" onclick='window.location = "/services;"'>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{{Server1_Name}}</td>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{{Server1_IP}}</td>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
<div class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
{{Server1_Status}}
</div>
</td>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{{Server1_CPU}}</td>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{{Server1_RAM}}</td>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{{Server1_DISK}}</td>
</tr> -->
<tr class="border-b transition-colors hover:bg-gray-50 cursor-pointer" onclick='window.location = "/services;"'>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">Server B</td>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">192.168.1.101</td>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
<div class="px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
Offline
</div>
</td>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">30%</td>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">40%</td>
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">80%</td>
</tr>
</tbody>
<!-- Servers -->
</table>
</div>
</div>
</div>
<div class="bg-gray-100 p-4 md:hidden flex items-center justify-between">
<button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
>
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
Add Server
</button>
<button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 ml-auto"></button>
</div>
</div>
</body>
<script>
document.getElementById('name-sort').addEventListener('click', () => {
if (document.getElementById('name-sort-arrow').innerText === ' ') {
document.getElementById('name-sort-arrow').innerText = '↑';
document.getElementById('ip-sort-arrow').innerText = ' ';
document.getElementById('status-sort-arrow').innerText = ' ';
document.getElementById('cpu-sort-arrow').innerText = ' ';
document.getElementById('ram-sort-arrow').innerText = ' ';
document.getElementById('storage-sort-arrow').innerText = ' ';
} else {
document.getElementById('name-sort-arrow').innerText = document.getElementById('name-sort-arrow').innerText === '↑' ? '↓' : '↑';
document.getElementById('ip-sort-arrow').innerText = ' ';
document.getElementById('status-sort-arrow').innerText = ' ';
document.getElementById('cpu-sort-arrow').innerText = ' ';
document.getElementById('ram-sort-arrow').innerText = ' ';
document.getElementById('storage-sort-arrow').innerText = ' ';
}
});
document.getElementById('ip-sort').addEventListener('click', () => {
if (document.getElementById('ip-sort-arrow').innerText === ' ') {
document.getElementById('ip-sort-arrow').innerText = '↑';
document.getElementById('name-sort-arrow').innerText = ' ';
document.getElementById('status-sort-arrow').innerText = ' ';
document.getElementById('cpu-sort-arrow').innerText = ' ';
document.getElementById('ram-sort-arrow').innerText = ' ';
document.getElementById('storage-sort-arrow').innerText = ' ';
} else {
document.getElementById('ip-sort-arrow').innerText = document.getElementById('ip-sort-arrow').innerText === '↑' ? '↓' : '↑';
document.getElementById('name-sort-arrow').innerText = ' ';
document.getElementById('status-sort-arrow').innerText = ' ';
document.getElementById('cpu-sort-arrow').innerText = ' ';
document.getElementById('ram-sort-arrow').innerText = ' ';
document.getElementById('storage-sort-arrow').innerText = ' ';
}
});
document.getElementById('status-sort').addEventListener('click', () => {
if (document.getElementById('status-sort-arrow').innerText === ' ') {
document.getElementById('status-sort-arrow').innerText = '↑';
document.getElementById('name-sort-arrow').innerText = ' ';
document.getElementById('ip-sort-arrow').innerText = ' ';
document.getElementById('cpu-sort-arrow').innerText = ' ';
document.getElementById('ram-sort-arrow').innerText = ' ';
document.getElementById('storage-sort-arrow').innerText = ' ';
} else {
document.getElementById('status-sort-arrow').innerText = document.getElementById('status-sort-arrow').innerText === '↑' ? '↓' : '↑';
document.getElementById('name-sort-arrow').innerText = ' ';
document.getElementById('ip-sort-arrow').innerText = ' ';
document.getElementById('cpu-sort-arrow').innerText = ' ';
document.getElementById('ram-sort-arrow').innerText = ' ';
document.getElementById('storage-sort-arrow').innerText = ' ';
}
});
document.getElementById('cpu-sort').addEventListener('click', () => {
if (document.getElementById('cpu-sort-arrow').innerText === ' ') {
document.getElementById('cpu-sort-arrow').innerText = '↑';
document.getElementById('name-sort-arrow').innerText = ' ';
document.getElementById('ip-sort-arrow').innerText = ' ';
document.getElementById('status-sort-arrow').innerText = ' ';
document.getElementById('ram-sort-arrow').innerText = ' ';
document.getElementById('storage-sort-arrow').innerText = ' ';
} else {
document.getElementById('cpu-sort-arrow').innerText = document.getElementById('cpu-sort-arrow').innerText === '↑' ? '↓' : '↑';
document.getElementById('name-sort-arrow').innerText = ' ';
document.getElementById('ip-sort-arrow').innerText = ' ';
document.getElementById('status-sort-arrow').innerText = ' ';
document.getElementById('ram-sort-arrow').innerText = ' ';
document.getElementById('storage-sort-arrow').innerText = ' ';
}
});
document.getElementById('ram-sort').addEventListener('click', () => {
if (document.getElementById('ram-sort-arrow').innerText === ' ') {
document.getElementById('ram-sort-arrow').innerText = '↑';
document.getElementById('name-sort-arrow').innerText = ' ';
document.getElementById('ip-sort-arrow').innerText = ' ';
document.getElementById('status-sort-arrow').innerText = ' ';
document.getElementById('cpu-sort-arrow').innerText = ' ';
document.getElementById('storage-sort-arrow').innerText = ' ';
} else {
document.getElementById('ram-sort-arrow').innerText = document.getElementById('ram-sort-arrow').innerText === '↑' ? '↓' : '↑';
document.getElementById('name-sort-arrow').innerText = ' ';
document.getElementById('ip-sort-arrow').innerText = ' ';
document.getElementById('status-sort-arrow').innerText = ' ';
document.getElementById('cpu-sort-arrow').innerText = ' ';
document.getElementById('storage-sort-arrow').innerText = ' ';
}
});
document.getElementById('storage-sort').addEventListener('click', () => {
if (document.getElementById('storage-sort-arrow').innerText === ' ') {
document.getElementById('storage-sort-arrow').innerText = '↑';
document.getElementById('name-sort-arrow').innerText = ' ';
document.getElementById('ip-sort-arrow').innerText = ' ';
document.getElementById('status-sort-arrow').innerText = ' ';
document.getElementById('cpu-sort-arrow').innerText = ' ';
document.getElementById('ram-sort-arrow').innerText = ' ';
} else {
document.getElementById('storage-sort-arrow').innerText = document.getElementById('storage-sort-arrow').innerText === '↑' ? '↓' : '↑';
document.getElementById('name-sort-arrow').innerText = ' ';
document.getElementById('ip-sort-arrow').innerText = ' ';
document.getElementById('status-sort-arrow').innerText = ' ';
document.getElementById('cpu-sort-arrow').innerText = ' ';
document.getElementById('ram-sort-arrow').innerText = ' ';
}
});
</script>
</html>
I found out that resty-templates does not like scripts that add HTML elements.
var Servers = 0;
function CreateServer(Text){
var NewServer = document.createElement("tr");
NewServer.innerHTML = '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{{Server' + Servers +'_Name}}</td>';
NewServer.innerHTML += '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">192.168.1.100</td>';
NewServer.innerHTML += '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0"><div class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Online</div></td>';
NewServer.innerHTML += '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">100%</td>';
NewServer.innerHTML += '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">100%</td>';
NewServer.innerHTML += '<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">100%</td>';
NewServer.setAttribute("class", "border-b transition-colors hover:bg-gray-50 cursor-pointer");
NewServer.setAttribute("id", "Server" + Servers);
NewServer.setAttribute("onclick", "window.location = \"/services;\"");
var Parent = document.getElementById("ServerViewer");
Parent.appendChild(NewServer);
Servers += 1;
}
</script>```
which is sad, but I guess I solved it.
It still wont work.
I'm just moving on to another API as I've been experiencing a lot of instability and performance issues with this module.
When on my /servers page:
It just displays a blank page. which is weird because this exact thing used to work just fine, and I don't recall changing anything. My other pages with identical lua blocks work just fine:
Does anybody perhaps have a solution? There are no errors in the errors.log, and the HTML code is fine too because it works just fine with the default nginx try_files.