mysqlExporter/static/index.html
2020-04-14 11:32:28 +02:00

146 lines
No EOL
4.3 KiB
HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MySQL exporter</title>
</head>
<body>
<div id="app">Loading...</div>
<style>
body {
margin: 30px auto;
max-width: 800px;
line-height: 1.6;
font-size: 18px;
color: #444;
padding: 0 10px
}
h1,
h2,
h3 {
font-family: Simplifica;
line-height: 1.2
}
a {
text-decoration: none;
color: rgb(0, 140, 255);
}
a:visited {
color: rgb(153, 0, 255);
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 70%;
}
th {
padding: 10px;
}
td {
padding: 5px;
}
tr:hover {
background-color: #444;
color: white;
}
</style>
<script>
const app = document.getElementById("app");
function htmlToElement(html) {
var template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content.firstChild;
}
(async () => {
if(window.location.hostname !== "localhost") {
console.log("Fetching info supported only from localhost!");
return;
}
var res = await fetch("/tables");
var tables = await res.json();
var re = await fetch("/fieldsIgnored");
var fieldsIgnored = await re.json();
fieldsIgnored = fieldsIgnored.map(el => el.toLowerCase());
app.innerText = "";
for (var table in tables) {
var data = tables[table];
var tableEl = document.createElement("table");
var title = document.createElement("h2");
title.innerText = table;
app.appendChild(title);
if(!data.columns) {
console.error(data);
app.appendChild(htmlToElement("<p>" + data + "<p>"));
continue;
}
try {
var comment = document.createElement("p");
comment.innerText = data.comment[0].table_comment;
app.appendChild(comment);
} catch(e) { }
var head = htmlToElement(`
<tr>
${fieldsIgnored.includes("field") ? "" : "<th>Field</th>" }
${fieldsIgnored.includes("type") ? "" : "<th>Type</th>" }
${fieldsIgnored.includes("collation") ? "" : "<th>Collation</th>" }
${fieldsIgnored.includes("null") ? "" : "<th>Null?</th>" }
${fieldsIgnored.includes("key") ? "" : "<th>Key?</th>" }
${fieldsIgnored.includes("default") ? "" : "<th>Default</th>" }
${fieldsIgnored.includes("extra") ? "" : "<th>Extra?</th>" }
${fieldsIgnored.includes("privileges") ? "" : "<th>Privileges</th>" }
${fieldsIgnored.includes("comment") ? "" : "<th>Comment</th>" }
</tr>
`);
tableEl.appendChild(head);
for(var column of data.columns) {
var el = "";
for(var field in column) {
if(fieldsIgnored.includes(field.toLowerCase())) continue;
if(column[field]) {
el += "<td>" + column[field] + "</td>";
} else if(field == "Default") {
el += "<td>null</td>";
} else {
el += "<td></td>";
}
}
tableEl.appendChild(htmlToElement(`
<tr>
${el}
</tr>
`))
}
app.appendChild(tableEl);
}
})()
</script>
</body>
</html>