diff options
Diffstat (limited to 'src/js/app.js')
| -rw-r--r-- | src/js/app.js | 191 |
1 files changed, 186 insertions, 5 deletions
diff --git a/src/js/app.js b/src/js/app.js index d39d848..aa8ce9c 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -20,10 +20,90 @@ function request(method, source, data = null) }); } +async function buildHeader(container, endpoint, title_text, about_text, repo_page = false) +{ + const info = JSON.parse(await request("GET", `http://localhost:1337/api/v1/${endpoint}`))["data"]; -document.addEventListener("DOMContentLoaded", async function () + const row_div = document.createElement("div"); + row_div.classList.add("row", "mx-0"); + + const col_div = document.createElement("div"); + col_div.classList.add("col", "ms-4", "mt-2"); + col_div.setAttribute("id", "header"); + + const title = document.createElement("a"); + title.classList.add("fs-1"); + title.setAttribute("id", "title"); + title.setAttribute("href", "/"); + title.appendChild(document.createTextNode(info[title_text])); + + const about = document.createElement("p"); + about.setAttribute("id", "about"); + about.classList.add("mb-3", "fs-4") + about.appendChild(document.createTextNode(info[about_text])); + + col_div.appendChild(title); + col_div.appendChild(about); + + if(repo_page) { + buildBackSVG(col_div); + } + + row_div.appendChild(col_div); + + container.appendChild(row_div); +} + +function buildProjectsHeader(container) +{ + const row_div = document.createElement("div"); + row_div.classList.add("row", "mx-0", "mt-5"); + + // Title column + const title_col_div = document.createElement("div"); + title_col_div.classList.add("col", "ms-4"); + title_col_div.setAttribute("id", "projects-header"); + + const projects_title = document.createElement("p"); + projects_title.classList.add("fs-1"); + projects_title.appendChild(document.createTextNode("Projects")); + + title_col_div.appendChild(projects_title); + + // Search column + const search_col_div = document.createElement("div"); + search_col_div.classList.add("col", "d-flex", "justify-content-end"); + search_col_div.setAttribute("id", "projects-search"); + + const form = document.createElement("form"); + const search = document.createElement("input"); + search.setAttribute("type", "search"); + search.setAttribute("name", "q"); + const submit = document.createElement("input"); + submit.setAttribute("type", "submit"); + submit.setAttribute("value", "Search"); + + form.appendChild(search); + form.appendChild(submit); + search_col_div.appendChild(form); + + row_div.appendChild(title_col_div); + row_div.appendChild(search_col_div); + + container.appendChild(row_div); +} + +async function buildProjects(container) { - const list = document.getElementById("repos"); + const row_div = document.createElement("div"); + row_div.classList.add("row", "mx-0"); + + const col_div = document.createElement("div"); + col_div.classList.add("col", "ms-4"); + + const list = document.createElement("ul"); + list.setAttribute("id", "repos"); + const repos = JSON.parse(await request("GET", "http://localhost:1337/api/v1/repos"))["data"]; const params = new URLSearchParams(window.location.search); @@ -38,15 +118,15 @@ document.addEventListener("DOMContentLoaded", async function () link.setAttribute("href", key); link.appendChild(document.createTextNode(key)); repo_title.appendChild(link); - repo_title.classList.add("repo-title"); + repo_title.classList.add("fs-3"); const repo_last_updated = document.createElement("span"); repo_last_updated.appendChild(document.createTextNode(`Last updated about ${value["last_updated"]} ago`)); - repo_last_updated.classList.add("repo-last-updated"); + repo_last_updated.classList.add("repo-last-updated", "fs-4"); const repo_desc = document.createElement("span"); repo_desc.appendChild(document.createTextNode(value["description"])); - repo_desc.classList.add("repo-desc"); + repo_desc.classList.add("fs-4"); repo_div.appendChild(repo_title) repo_div.appendChild(repo_last_updated) @@ -63,4 +143,105 @@ document.addEventListener("DOMContentLoaded", async function () list.appendChild(li); } } + + col_div.appendChild(list); + row_div.appendChild(col_div); + container.appendChild(row_div); +} + +function buildRepoNavbar(container, repo, page) +{ + const row_div = document.createElement("div"); + row_div.classList.add("row", "mx-0"); + + const col_div = document.createElement("div"); + col_div.classList.add("col", "ms-3"); + col_div.setAttribute("id", "repo-navbar"); + + const nav = document.createElement("nav"); + nav.classList.add("navbar", "navbar-expand", "navbar-dark"); + + const nav_container = document.createElement("div"); + nav_container.classList.add("container-fluid", "px-0"); + + const nav_collapse = document.createElement("div"); + nav_collapse.classList.add("collapse", "navbar-collapse"); + + const nav_nav = document.createElement("ul"); + nav_nav.classList.add("navbar-nav"); + + const nav_items = ["log", "refs", "tree"]; + + nav_items.forEach(item => + { + const item_li = document.createElement("li"); + item_li.classList.add("nav-item"); + + const item_link = document.createElement("a"); + item_link.classList.add("nav-link", "fs-3"); + if(item === page) { + item_link.classList.add("active"); + item_link.setAttribute("aria-current", "page"); + } + item_link.setAttribute("href", `/${repo}/${item}`); + item_link.appendChild(document.createTextNode(item)); + + item_li.appendChild(item_link); + + nav_nav.appendChild(item_li); + }); + + nav_collapse.appendChild(nav_nav); + nav_container.appendChild(nav_collapse); + nav.appendChild(nav_container); + col_div.appendChild(nav); + row_div.appendChild(col_div); + container.appendChild(row_div); +} + +function buildBackSVG(container) +{ + const xmlns = "http://www.w3.org/2000/svg"; + + let svg = document.createElementNS(xmlns, "svg"); + + svg.setAttributeNS(null, "height", "24px"); + svg.setAttributeNS(null, "width", "24px"); + svg.setAttributeNS(null, "viewBox", "0 0 24 24"); + svg.setAttributeNS(null, "fill", "#FFFFFF"); + + const path_one = document.createElementNS(xmlns, "path"); + path_one.setAttributeNS(null, "d", "M0 0h24v24H0z"); + path_one.setAttributeNS(null, "fill", "none"); + + const path_two = document.createElementNS(xmlns, "path"); + path_two.setAttributeNS(null, "d", "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"); + + svg.appendChild(path_one); + svg.appendChild(path_two); + container.appendChild(svg); +} + +document.addEventListener("DOMContentLoaded", async function () +{ + let path = window.location.pathname; + + if(path === "/") { + const container = document.getElementById("container"); + await buildHeader(container, "info", "title", "about"); + buildProjectsHeader(container); + buildProjects(container); + } + + const path_valid_and_split = /\/([a-zA-Z0-9\.\-_]+)\/([a-z]+)$/; + if(path_valid_and_split.test(path)) { + path = path_valid_and_split.exec(path); + const repo = path[1]; + const page = path[2]; + + const container = document.getElementById("container"); + + await buildHeader(container, `repos/${repo}`, "name", "description", true); + buildRepoNavbar(container, repo, page); + } });
\ No newline at end of file |