<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Admin Interface</title> <link rel="stylesheet" href="https://unpkg.com/@hibas123/theme/out/base.css"> <link rel="stylesheet" href="https://unpkg.com/@hibas123/theme/out/light.css"> <script src="https://unpkg.com/handlebars/dist/handlebars.min.js"></script> <style> #message { visibility: hidden; background-color: lightgreen; border: 1px solid lime; border-radius: .5rem; padding: 1rem; font-size: 1.5rem; margin-bottom: 1rem; } .grid { display: grid; height: 100vh; grid-template-columns: 360px auto; } #content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } </style> </head> <body> <div class="grid"> <div style="border-right: 1px solid darkgrey; padding: 1rem;"> <h2>Navigation: </h2> <ul class="list list-clickable"> <li onclick="loadView('settings');">Settings</li> <li onclick="loadView('database', {full:true});">Databases</li> <li onclick="loadView('database/new');">New Database</li> </ul> Databases: <div id="dbs" class="list list-clickable" style="margin: 1rem;"></div> </div> <div style="position:relative;"> <iframe id="content"></iframe> </div> </div> <template> </template> <script> const key = new URL(window.location.href).searchParams.get("key"); const content = document.getElementById("content"); const base = new URL(window.location.href).host; function getUrl(name, params, view = true) { const url = new URL(window.location.href); url.pathname = "/v1/admin/" + name; for (let key in params || {}) url.searchParams.set(key, params[key]); url.searchParams.set("key", key); if (view) url.searchParams.set("view", "true"); return url.href; } function loadView(name, params) { content.src = getUrl(name, params); } loadView("settings") const dbsul = document.getElementById("dbs"); function reloadDBs() { fetch(getUrl("database", {}, false)) .then(res => res.json()) .then(databases => databases.map(database => ` <div class="card margin elv-4"> <h3>${database}</h3> <button class=btn onclick="loadView('data', {database:'${database}'})">Data</button> <button class=btn onclick="loadView('collections', {database:'${database}'})">Collections</button> <button class=btn onclick="loadView('collections/cleanup', {database:'${database}'})">Clean</button> </div>` )) .then(d => d.join("\n")) .then(d => dbsul.innerHTML = d) .catch(console.error) } reloadDBs(); setInterval(reloadDBs, 5000); </script> </body> </html>