Moved most of the page to js, added settings & removed a bunch of hardcoded stuff

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