From d5106b9784673168de37a6252675b7da6d601a4f Mon Sep 17 00:00:00 2001 From: Dan Gowans Date: Mon, 26 Sep 2022 15:15:27 -0400 Subject: [PATCH] use a side menu for reports --- public-typescript/reportSearch.d.ts | 0 public-typescript/reportSearch.js | 24 + public-typescript/reportSearch.ts | 38 ++ public/javascripts/reportSearch.min.js | 1 + views/report-search.ejs | 740 +++++++++++++------------ 5 files changed, 441 insertions(+), 362 deletions(-) create mode 100644 public-typescript/reportSearch.d.ts create mode 100644 public-typescript/reportSearch.js create mode 100644 public-typescript/reportSearch.ts create mode 100644 public/javascripts/reportSearch.min.js diff --git a/public-typescript/reportSearch.d.ts b/public-typescript/reportSearch.d.ts new file mode 100644 index 00000000..e69de29b diff --git a/public-typescript/reportSearch.js b/public-typescript/reportSearch.js new file mode 100644 index 00000000..135ec1a1 --- /dev/null +++ b/public-typescript/reportSearch.js @@ -0,0 +1,24 @@ +(() => { + const menuTabElements = document.querySelectorAll(".menu a"); + const tabContainerElements = document.querySelectorAll(".tabs-container > div"); + const selectTab = (clickEvent) => { + clickEvent.preventDefault(); + for (const menuTabElement of menuTabElements) { + menuTabElement.classList.remove("is-active"); + } + const selectedTabElement = clickEvent.currentTarget; + selectedTabElement.classList.add("is-active"); + const selectedTabContainerId = selectedTabElement.href.slice(Math.max(0, selectedTabElement.href.indexOf("#") + 1)); + for (const tabContainerElement of tabContainerElements) { + if (tabContainerElement.id === selectedTabContainerId) { + tabContainerElement.classList.remove("is-hidden"); + } + else { + tabContainerElement.classList.add("is-hidden"); + } + } + }; + for (const menuTabElement of menuTabElements) { + menuTabElement.addEventListener("click", selectTab); + } +})(); diff --git a/public-typescript/reportSearch.ts b/public-typescript/reportSearch.ts new file mode 100644 index 00000000..593e522b --- /dev/null +++ b/public-typescript/reportSearch.ts @@ -0,0 +1,38 @@ +(() => { + + const menuTabElements = document.querySelectorAll(".menu a") as NodeListOf; + const tabContainerElements = document.querySelectorAll(".tabs-container > div") as NodeListOf; + + const selectTab = (clickEvent: Event) => { + clickEvent.preventDefault(); + + // Remove .is-active from all tabs + + for (const menuTabElement of menuTabElements) { + menuTabElement.classList.remove("is-active"); + } + + // Set .is-active on clicked tab + + const selectedTabElement = clickEvent.currentTarget as HTMLAnchorElement; + selectedTabElement.classList.add("is-active"); + + // Hide all but selected tab + + const selectedTabContainerId = selectedTabElement.href.slice(Math.max(0, selectedTabElement.href.indexOf("#") + 1)); + + for (const tabContainerElement of tabContainerElements) { + + if (tabContainerElement.id === selectedTabContainerId) { + tabContainerElement.classList.remove("is-hidden"); + } else { + tabContainerElement.classList.add("is-hidden"); + } + } + }; + + + for (const menuTabElement of menuTabElements) { + menuTabElement.addEventListener("click", selectTab); + } +})(); \ No newline at end of file diff --git a/public/javascripts/reportSearch.min.js b/public/javascripts/reportSearch.min.js new file mode 100644 index 00000000..d9442f63 --- /dev/null +++ b/public/javascripts/reportSearch.min.js @@ -0,0 +1 @@ +(()=>{const e=document.querySelectorAll(".menu a"),s=document.querySelectorAll(".tabs-container > div"),t=t=>{t.preventDefault();for(const s of e)s.classList.remove("is-active");const c=t.currentTarget;c.classList.add("is-active");const i=c.href.slice(Math.max(0,c.href.indexOf("#")+1));for(const e of s)e.id===i?e.classList.remove("is-hidden"):e.classList.add("is-hidden")};for(const s of e)s.addEventListener("click",t)})(); \ No newline at end of file diff --git a/views/report-search.ejs b/views/report-search.ejs index 07c67274..20ae5512 100644 --- a/views/report-search.ejs +++ b/views/report-search.ejs @@ -1,386 +1,402 @@ <%- include('_header'); -%> - -

- Reports -

+
+
+ +
+
+ -
- -
-
-
-

<%= configFunctions.getProperty("aliases.maps") %>

-
- -
- - -
- CSV +
+
+

<%= configFunctions.getProperty("aliases.map") %> Reports

+
+ +
+ + +
+ CSV +
+
+

Full <%= configFunctions.getProperty("aliases.map") %> List

+

+ All active <%= configFunctions.getProperty("aliases.maps").toLowerCase() %>. +

+
+
-
-

Full <%= configFunctions.getProperty("aliases.map") %> List

-

- All active <%= configFunctions.getProperty("aliases.maps").toLowerCase() %>. +

+ + -
- -