Template not displaying page

ianbloc commented 3 months ago

When on my /servers page:

location /servers {

           root   C:\Users\ianbl\Desktop\Code\WebDev\ServerPanel;
           default_type text/html;
           content_by_lua_block {
               local template = require "resty.template"
               local template = require "resty.template.safe"
               function os.capture(cmd)
                   local f = assert(io.popen(cmd, 'r'))
                   local s = assert(f:read('*a'))
                    f:close()
                    return s
                end

                template.render("servers.html", {
                Name = "ServerPanel",
                IP = "127.0.0.1",
                Status = "Running",
                CPU = "Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz",
                RAM = "8 GB",
                DISK = "SSD"
                })
            }
        }

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:

location /login {
            root   C:\Users\ianbl\Desktop\Code\WebDev\ServerPanel;
            default_type text/html;
            content_by_lua_block {
                local template = require "resty.template"      -- OR
                local template = require "resty.template.safe" -- return nil, err on errors
                template.render("login.html", { message = "Hello, World!" })
            }
        }

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.

ianbloc commented 3 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="[&amp;_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 [&amp;: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 [&amp;: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 [&amp;: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 [&amp;: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 [&amp;: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 [&amp;: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 [&amp;:has([role=checkbox])]:pr-0">{{Server' + Servers +'_Name}}</td>';
                    NewServer.innerHTML += '<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">192.168.1.100</td>';
                    NewServer.innerHTML += '<td class="p-4 align-middle [&amp;: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 [&amp;:has([role=checkbox])]:pr-0">100%</td>';
                    NewServer.innerHTML += '<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">100%</td>';
                    NewServer.innerHTML += '<td class="p-4 align-middle [&amp;: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="[&amp;_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 [&amp;:has([role=checkbox])]:pr-0">{{Server1_Name}}</td>
                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">{{Server1_IP}}</td>
                <td class="p-4 align-middle [&amp;: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 [&amp;:has([role=checkbox])]:pr-0">{{Server1_CPU}}</td>
                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">{{Server1_RAM}}</td>
                <td class="p-4 align-middle [&amp;: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 [&amp;:has([role=checkbox])]:pr-0">Server B</td>
                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">192.168.1.101</td>
                <td class="p-4 align-middle [&amp;: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 [&amp;:has([role=checkbox])]:pr-0">30%</td>
                <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">40%</td>
                <td class="p-4 align-middle [&amp;: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>

ianbloc commented 2 months ago

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 [&amp;:has([role=checkbox])]:pr-0">{{Server' + Servers +'_Name}}</td>';
                            NewServer.innerHTML += '<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">192.168.1.100</td>';
                            NewServer.innerHTML += '<td class="p-4 align-middle [&amp;: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 [&amp;:has([role=checkbox])]:pr-0">100%</td>';
                            NewServer.innerHTML += '<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">100%</td>';
                            NewServer.innerHTML += '<td class="p-4 align-middle [&amp;: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.

ianbloc commented 2 months ago

It still wont work.

ianbloc commented 2 months ago

I'm just moving on to another API as I've been experiencing a lot of instability and performance issues with this module.

bungle / lua-resty-template

Template not displaying page #58