steve
/
sunrise-cms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use a side menu for reports

deepsource-autofix-76c6eb20
Dan Gowans 2022-09-26 15:15:27 -04:00
parent dfe8c546d0
commit d5106b9784
5 changed files with 441 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public-typescript/reportSearch.d.ts vendored 100644
View File

24
public-typescript/reportSearch.js 100644
View File

@ -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);
}
})();

38
public-typescript/reportSearch.ts 100644
View File

@ -0,0 +1,38 @@
(() => {
const menuTabElements = document.querySelectorAll(".menu a") as NodeListOf<HTMLAnchorElement>;
const tabContainerElements = document.querySelectorAll(".tabs-container > div") as NodeListOf<HTMLElement>;
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);
}
})();

1
public/javascripts/reportSearch.min.js vendored 100644
View File

@ -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)})();

88
views/report-search.ejs
View File

@ -1,5 +1,46 @@
<%- include('_header'); -%>
<div class="columns">
<div class="column is-3">
<aside class="menu">
<h2 class="menu-label">
Reports
</h2>
<ul class="menu-list">
<li>
<a class="is-active" href="#tab--maps">
<span class="icon is-small"><i class="far fa-fw fa-map" aria-hidden="true"></i></span>
<span><%= configFunctions.getProperty("aliases.maps") %></span>
</a>
</li>
<li>
<a href="#tab--lots">
<span class="icon is-small"><i class="fas fa-fw fa-vector-square" aria-hidden="true"></i></span>
<span><%= configFunctions.getProperty("aliases.lots") %></span>
</a>
</li>
</ul>
<h2 class="menu-label">
Table Exports
</h2>
<ul class="menu-list">
<li>
<a href="#tab--dataTableExports">
<span class="icon is-small"><i class="fas fa-fw fa-table" aria-hidden="true"></i></span>
<span>Data Tables</span>
</a>
</li>
<li>
<a href="#tab--configTableExports">
<span class="icon is-small"><i class="fas fa-fw fa-tablet" aria-hidden="true"></i></span>
<span>Config Tables</span>
</a>
</li>
</ul>
</aside>
</div>
<div class="column">
<nav class="breadcrumb">
<ul>
<li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
@ -12,41 +53,9 @@
</ul>
</nav>
<h1 class="title is-1">
Reports
</h1>
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a href="#tab--maps">
<span class="icon is-small"><i class="fas fa-file" aria-hidden="true"></i></span>
<span><%= configFunctions.getProperty("aliases.maps") %></span>
</a>
</li>
<li>
<a href="#tab--lots">
<span class="icon is-small"><i class="fas fa-file" aria-hidden="true"></i></span>
<span><%= configFunctions.getProperty("aliases.lots") %></span>
</a>
</li>
<li>
<a href="#tab--dataTableExports">
<span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
<span>Data Table Exports</span>
</a>
</li>
<li>
<a href="#tab--configTableExports">
<span class="icon is-small"><i class="fas fa-table" aria-hidden="true"></i></span>
<span>Config Table Exports</span>
</a>
</li>
</ul>
</div>
<div class="tabs-container">
<div id="tab--maps">
<h2 class="title is-4"><%= configFunctions.getProperty("aliases.maps") %></h2>
<h1 class="title is-1"><%= configFunctions.getProperty("aliases.map") %> Reports</h1>
<div class="panel">
<a class="panel-block align-items-flex-start" href="<%= urlPrefix %>/reports/maps-formatted" download>
<div class="has-text-centered my-2 ml-2 mr-3">
@ -64,9 +73,11 @@
</a>
</div>
</div>
<div class="is-hidden" id="tab--lots"></div>
<div class="is-hidden" id="tab--lots">
<h1 class="title is-1"><%= configFunctions.getProperty("aliases.lot") %> Reports</h1>
</div>
<div class="is-hidden" id="tab--dataTableExports">
<h2 class="title is-4">Data Table Exports</h2>
<h1 class="title is-1">Data Table Exports</h1>
<div class="message is-info">
<p class="message-body">
Note that table exports are full, unfiltered, and unformatted exports.
@ -244,7 +255,7 @@
</div>
</div>
<div class="is-hidden" id="tab--configTableExports">
<h2 class="title is-4">Config Table Exports</h2>
<h1 class="title is-1">Config Table Exports</h1>
<div class="message is-info">
<p class="message-body">
Note that table exports are full, unfiltered, and unformatted exports.
@ -381,6 +392,11 @@
</div>
</div>
</div>
</div>
</div>
<%- include('_footerA'); -%>
<script src="<%= urlPrefix %>/javascripts/reportSearch.min.js"></script>
<%- include('_footerB'); -%>