This repository has been archived on 2021-06-02. You can view files and clone it, but cannot push or open issues or pull requests.
RealtimeDB-OLD/views/admin.html

119 lines
3.6 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
2020-03-24 17:33:47 +00:00
<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: 0.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>
2020-03-24 17:33:47 +00:00
<template> </template>
2020-03-24 17:33:47 +00:00
<script>
const key = new URL(window.location.href).searchParams.get("key");
const content = document.getElementById("content");
const base = new URL(window.location.href).host;
2020-03-24 17:33:47 +00:00
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]);
2020-03-24 17:33:47 +00:00
url.searchParams.set("key", key);
if (view) url.searchParams.set("view", "true");
2020-03-24 17:33:47 +00:00
return url.href;
}
2020-03-24 17:33:47 +00:00
function loadView(name, params) {
content.src = getUrl(name, params);
}
2020-03-24 17:33:47 +00:00
loadView("settings");
2020-03-24 17:33:47 +00:00
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>
2020-03-24 17:33:47 +00:00
<button class=btn onclick="loadView('database/update', {database:'${database}'})">Change</button>
</div>`
2020-03-24 17:33:47 +00:00
)
)
.then(d => d.join("\n"))
.then(d => (dbsul.innerHTML = d))
.catch(console.error);
}
reloadDBs();
setInterval(reloadDBs, 5000);
</script>
</body>
</html>