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
Fabian Stamm 1f193fd5a1 Fixing bug on collection deletion
Extending Admin Interface
Adding cleanup procedure, that clears undeleted collection data
2019-11-07 01:27:56 +01:00

112 lines
3.1 KiB
HTML

<!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>