Better formatting

This commit is contained in:
Daniel Bulant 2020-04-14 11:56:49 +02:00
parent e781902368
commit d55b0f6a2d

View file

@ -12,7 +12,7 @@
<style> <style>
body { body {
margin: 30px auto; margin: 30px auto;
max-width: 800px; max-width: 900px;
line-height: 1.6; line-height: 1.6;
font-size: 18px; font-size: 18px;
color: #444; color: #444;
@ -40,10 +40,13 @@
td { td {
border: 1px solid black; border: 1px solid black;
border-collapse: collapse; border-collapse: collapse;
word-break: normal;
text-align: center;
} }
table { table {
width: 70%; width: min(90vw, 900px);
table-layout: fixed;
} }
th { th {
@ -58,6 +61,14 @@
background-color: #444; background-color: #444;
color: white; color: white;
} }
.collation {
word-break: break-all;
}
.null, .key {
width: 40px;
}
</style> </style>
<script> <script>
@ -72,16 +83,30 @@
(async () => { (async () => {
if(window.location.hostname !== "localhost") { if(window.location.hostname !== "localhost") {
console.log("Fetching info supported only from localhost!"); console.warn("Fetching info supported only from localhost!");
return; return;
} }
var dbRes = await fetch("/database");
var db = await dbRes.json();
if(!dbRes.ok) return console.warn("Couldn't fetch data");
app.innerText = "";
const appTitle = document.createElement("h1");
appTitle.innerText = "Data dictionary of " + db.name;
app.appendChild(appTitle);
const date = document.createElement("p");
var d = new Date();
date.innerText = "Generated " + d.toString() + ".";
app.appendChild(date);
var res = await fetch("/tables"); var res = await fetch("/tables");
var tables = await res.json(); var tables = await res.json();
var re = await fetch("/fieldsIgnored"); var re = await fetch("/fieldsIgnored");
var fieldsIgnored = await re.json(); var fieldsIgnored = await re.json();
fieldsIgnored = fieldsIgnored.map(el => el.toLowerCase()); fieldsIgnored = fieldsIgnored.map(el => el.toLowerCase());
app.innerText = "";
for (var table in tables) { for (var table in tables) {
var data = tables[table]; var data = tables[table];
@ -105,15 +130,15 @@
var head = htmlToElement(` var head = htmlToElement(`
<tr> <tr>
${fieldsIgnored.includes("field") ? "" : "<th>Field</th>" } ${fieldsIgnored.includes("field") ? "" : "<th class='field'>Field</th>" }
${fieldsIgnored.includes("type") ? "" : "<th>Type</th>" } ${fieldsIgnored.includes("type") ? "" : "<th class='type'>Type</th>" }
${fieldsIgnored.includes("collation") ? "" : "<th>Collation</th>" } ${fieldsIgnored.includes("collation") ? "" : "<th class='collation'>Collation</th>" }
${fieldsIgnored.includes("null") ? "" : "<th>Null?</th>" } ${fieldsIgnored.includes("null") ? "" : "<th class='null'>Null?</th>" }
${fieldsIgnored.includes("key") ? "" : "<th>Key?</th>" } ${fieldsIgnored.includes("key") ? "" : "<th class='key'>Key?</th>" }
${fieldsIgnored.includes("default") ? "" : "<th>Default</th>" } ${fieldsIgnored.includes("default") ? "" : "<th class='default'>Default</th>" }
${fieldsIgnored.includes("extra") ? "" : "<th>Extra?</th>" } ${fieldsIgnored.includes("extra") ? "" : "<th class='extra'>Extra?</th>" }
${fieldsIgnored.includes("privileges") ? "" : "<th>Privileges</th>" } ${fieldsIgnored.includes("privileges") ? "" : "<th class='privileges'>Privileges</th>" }
${fieldsIgnored.includes("comment") ? "" : "<th>Comment</th>" } ${fieldsIgnored.includes("comment") ? "" : "<th class='comment'>Comment</th>" }
</tr> </tr>
`); `);
@ -122,12 +147,15 @@
var el = ""; var el = "";
for(var field in column) { for(var field in column) {
if(fieldsIgnored.includes(field.toLowerCase())) continue; if(fieldsIgnored.includes(field.toLowerCase())) continue;
if(field.toLowerCase() === "privileges") {
column[field] = column[field].split(",").join(", ");
}
if(column[field]) { if(column[field]) {
el += "<td>" + column[field] + "</td>"; el += "<td class='" + field.toLowerCase() + "'>" + column[field] + "</td>";
} else if(field == "Default") { } else if(field == "Default") {
el += "<td>null</td>"; el += "<td class='" + field.toLowerCase() + "'>null</td>";
} else { } else {
el += "<td></td>"; el += "<td class='" + field.toLowerCase() + "'></td>";
} }
} }
tableEl.appendChild(htmlToElement(` tableEl.appendChild(htmlToElement(`