From 114dbb5ab7952ab66a041c814d5c6a028c8e3039 Mon Sep 17 00:00:00 2001 From: Mike Crute Date: Mon, 22 Nov 2021 07:54:18 -0800 Subject: Split assets from templates --- cmd/web/server.go | 1 + templates/assets/site.css | 62 +++++++++++++++++ templates/assets/site.js | 102 +++++++++++++++++++++++++++ templates/index.tpl | 171 +--------------------------------------------- 4 files changed, 168 insertions(+), 168 deletions(-) create mode 100644 templates/assets/site.css create mode 100644 templates/assets/site.js diff --git a/cmd/web/server.go b/cmd/web/server.go index d2ea861..3797acd 100644 --- a/cmd/web/server.go +++ b/cmd/web/server.go @@ -154,6 +154,7 @@ func webMain(cfg app.Config, embeddedTemplates fs.FS, version string) { } s.GET("/favicon.ico", echo.NotFoundHandler) s.GET("/logout", controllers.LogoutHandler) + s.CachedStaticRoute("/assets", "assets") s.GET("/", controllers.IndexHandler, am.Middleware) runner := service.NewAppRunner(ctx, s.Logger) diff --git a/templates/assets/site.css b/templates/assets/site.css new file mode 100644 index 0000000..65fb4ce --- /dev/null +++ b/templates/assets/site.css @@ -0,0 +1,62 @@ +html { + display: grid; + grid-template-columns: [left] 10% [main] auto [right] 10%; + grid-template-rows: [main] auto; +} +body { + grid-column: main; + grid-row: main; +} +table { + width: 100%; + border: 1px solid black; + border-collapse: collapse; +} +td, th { + border: 1px solid black; + padding: 0.5em; +} +th { + background-color: #CCCCCC; +} +textarea { + height: 10em; + width: 100%; + resize: none; +} +a, a:visited { + color: blue; +} +h1 { + text-align: center; +} +tt { + background-color: #CCC; + border: 1px solid #999; + padding: 0.25em; +} +#api-key { + margin: auto; +} +#api-key textarea { + height: 100%; +} +#api-error { + border: 0.25em solid red; + color: white; + font-size: 2em; + background-color: #ff8080; + padding: 1em; + text-align: center; + display: none; +} +#account-table tr td:nth-child(2), +#account-table tr td:nth-child(3) { + text-align: center; +} +.admin { + display: none; +} +body.isAdmin .admin { + display: initial; +} diff --git a/templates/assets/site.js b/templates/assets/site.js new file mode 100644 index 0000000..485a4cd --- /dev/null +++ b/templates/assets/site.js @@ -0,0 +1,102 @@ +function fillTemplate(templateId, values) { + var tpl = document.getElementById(templateId).text; + + Object.keys(values).forEach(function(key) { + tpl = tpl.replace(new RegExp("\\[\\[ \\." + key + " \\]\\]", "g"), values[key]); + }); + + var out = []; + tpl.split("\n").forEach(function(line) { + line = line.replace(/^\s+/, "").replace(/\s+$/, ""); + if (line !== "") { + out.push(line); + } + }); + + return out.join("\n"); +} + +function getJSON(response) { + if (!response.ok) { + document.getElementById("api-error").style.display = "block"; + throw new Error("Error loading api"); + } + + return response.json(); +} + +function accountTableLinkClick(event) { + event.preventDefault(); + + var thisRow = event.target.parentElement.parentElement; + var template = event.target.getAttribute("data-template"); + var account = thisRow.getAttribute("data-account-name"); + var credentialEndpoint = thisRow.getAttribute("data-global-credential-endpoint"); + var oldText = event.target.text; + + var existingTr = document.getElementById("credentials-for-" + account); + if (existingTr) { + existingTr.remove(); + } + + event.target.text = "Loading..."; + + fetch(credentialEndpoint).then(getJSON).then(function(vals) { + vals["ShortName"] = account; + + var newTr = fillTemplate("credential_row_template", { + "Account": account, + "Content": fillTemplate(template, vals) + }); + + event.target.text = oldText; + thisRow.insertAdjacentHTML("afterend", newTr); + thisRow.nextElementSibling.getElementsByTagName("button")[0].addEventListener("click", function(event) { + event.target.parentNode.parentNode.remove(); + }); + }); + + return false; +} + +function populateAccountTable() { + fetch("/api/account").then(getJSON).then(function(response) { + response.forEach(populateAccountRow); + }); +} + +function populateAccountRow(row) { + var out = fillTemplate("account_row_template", row); + document.querySelector("#account-table tr").insertAdjacentHTML("afterend", out); + + document.querySelectorAll("#account-row-" + row["short_name"] + " a[data-template]").forEach(function(element) { + element.addEventListener("click", accountTableLinkClick); + }); +} + +function getCookie(name) { + return document.cookie.match(new RegExp(name + "=\"?([^;\"]*)\"?;?"))[1]; +} + +function parseJWT(token) { + return JSON.parse(atob(token.split(".")[1])); +} + +function parseJWTExpires(token) { + return new Date(parseJWT(token)["exp"] * 1000); +} + +function isAdmin(token) { + return parseJWT(token)["admin"]; +} + +function populateAPIKey() { + document.querySelector("#api-key textarea").innerText = getCookie("github-token"); + document.querySelector("#session-expires").innerText = parseJWTExpires(getCookie("github-token")); +} + +function setAdminClass() { + if (isAdmin(getCookie("github-token"))) { + document.body.classList.add("isAdmin"); + } +} diff --git a/templates/index.tpl b/templates/index.tpl index 3a6acbf..da0b59e 100644 --- a/templates/index.tpl +++ b/templates/index.tpl @@ -3,70 +3,7 @@ Select Account - + + -- cgit v1.2.3