<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>SMEServer Mailstats</title>
<link rel='stylesheet' type='text/css' href='css/mailstats.css' />
<!-- Check links -->
<script>
function LinkCheck(url){
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
function doNavs() {
var aTags = document.getElementsByTagName('a'),
atl = aTags.length,i;
for (i = 0; i < atl; i++) {
if (aTags[i].innerText == "Previous") {
if (!LinkCheck(aTags[i].href)) {
aTags[i].style.visibility = "hidden";
} else {
aTags[i].style.visibility = "visible";
}
} else if (aTags[i].innerText == "Next") {
if (!LinkCheck(aTags[i].href)) {
aTags[i].style.visibility = "hidden";
} else {
aTags[i].style.visibility = "visible";
}
}
}
}
</script>
<style>
<!--css here-->
</style>
</head>
<body>
<div style="width:100%;overflow-x:auto;font-size:1cqw">
<!---Navigation here-->
<div class='linksattop'>
<a class='prevlink' href='http://${DomainName}/mailstats/mailstats_for_${PreviousDate}.html'>Previous</a>
<div class='divshowindex'><a class='showindex' href='http://${DomainName}/mailstats/'>Index of files</a></div>
<a class='nextlink' href='http://${DomainName}/mailstats/mailstats_for_${NextDate}.html'>Next</a></div> <!--format important here - used to insert see in browser for email -->
<br />
<h2>${structure:title}</h2>
<br />
<div class="headerpanel">
<div class = "innerheaderpanel">
<!---Add in header information here -->
</div>
</div>
<br />
<br />
<!--Tabs -->
<div class="tab-container">
<div class="tab tab-active" data-index="0" onclick="openTab(event, 'tab1')">Table</div>
<div class="tab" data-index="1" onclick="openTab(event, 'tab2')">Stacked Bar Graph</div>
<div class="tab" data-index="2" onclick="openTab(event, 'tab3')">Heat Map</div>
<div class="tab" data-index="3" onclick="openTab(event, 'tab4')">Line Graph</div>
</div>
<div id="tab1" class="tab-content tab-content-active">
<div class = "maintable">
<table style="border-collapse:collapse;width:98%">
<thead>
<tr>
<th>Date/Time</th>
<th tal:repeat="header column_headers" tal:content="header">Header</th>
</tr>
</thead>
<tbody>
<tr tal:repeat="row array_2d" tal:attributes="class python: 'row-total' if repeat.row.index == 24 else 'row-percent' if repeat.row.index == 25 else None">
<td tal:condition="repeat.row.index == 24" tal:attributes="class python:'col-total'" tal:content="'TOTALS'">Totals</td>
<td tal:condition="repeat.row.index == 25" tal:attributes="class python:'col-percent'" tal:content="'PERCENT'">Percent</td>
<td tal:condition="repeat.row.index < 24" tal:content="string:${reporting_date}, ${repeat.row.index}">Hour</td>
<td tal:repeat="cell row" tal:attributes="class python: 'col-' + str(repeat.cell.index)">
<!-- Check if 'nolinks' is true. If not, generate links for rows 0 to 23 except 'PERCENT' column -->
<tal:case tal:condition="not: nolinks">
<tal:case tal:condition="repeat.row.index >= 0 and repeat.row.index < 24 and repeat.cell.index != 16">
<a tal:attributes="href string:./showSummaryLogs.php?date=${reporting_date}&hour=${repeat.row.index}">
<!-- Check if cell value is zero and print "" -->
<tal:case tal:condition="cell != 0" tal:content="cell">Cell</tal:case>
<tal:case tal:condition="cell == 0" tal:content="''">-</tal:case>
</a>
</tal:case>
<!-- For 'PERCENT' column or other rows, just display the cell content -->
<tal:case tal:condition="not (repeat.row.index >= 0 and repeat.row.index < 24 and repeat.cell.index != 16)">
<!-- Check if cell value is zero and print "" -->
<tal:case tal:condition="cell != 0" tal:content="cell">Cell</tal:case>
<tal:case tal:condition="cell == 0" tal:content="''">-</tal:case>
</tal:case>
</tal:case>
<tal:case tal:condition="nolinks">
<!-- Display cell content without link if 'nolinks' is true -->
<tal:case tal:condition="cell != 0" tal:content="cell">Cell</tal:case>
<tal:case tal:condition="cell == 0" tal:content="''">-</tal:case>
</tal:case>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Next Tab-->
<div id="tab2" class="tab-content">
<a href="stacked_bar_${reporting_date}.html">${structure: stacked_bar_graph}</a>
</div>
<!-- Next Tab-->
<div id="tab3" class="tab-content">
<a href="heatmap_${reporting_date}.html">${structure: heatmap}</a>
</div>
<!-- Next Tab-->
<div id="tab4" class="tab-content">
<a href="line_graph_${reporting_date}.html">${structure: line_graph}</a>
</div>
<div class = "subtables">
<!---Add in sub tables here -->
</div>
<br />
<footer class="footer">${version}</footer>
<script>
window.onload = function(){doNavs();}
//function openTab(event, tabId){
//// Get all elements with class="tab-content" and hide them
//const tabContents = document.querySelectorAll('.tab-content');
//tabContents.forEach(content => content.classList.remove('tab-content-active'));
//// Get all elements with class="tab" and remove the class "tab-active"
//const tabs = document.querySelectorAll('.tab');
//tabs.forEach(tab => tab.classList.remove('tab-active'));
//// Show the current tab content, and add an "active" class to the clicked tab
//document.getElementById(tabId).classList.add('tab-content-active');
//event.target.classList.add('tab-active');}
function openTab(evt, tabName) {
// Declare all variables
var i, tab_content, tab;
// Get all elements with class="tab_content" and hide them
tab_content = document.getElementsByClassName("tab-content");
for (i = 0; i < tab_content.length; i++) {
tab_content[i].style.display = "none";
}
// Get all elements with class="tab" and remove the class "active"
tab = document.getElementsByClassName("tab");
for (i = 0; i < tab.length; i++) {
tab[i].className = tab[i].className.replace(" tab-active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " tab-active";
// Store the active tab index
sessionStorage.setItem('activeTab', evt.currentTarget.getAttribute("data-index"));
}
document.addEventListener("DOMContentLoaded", function() {
// Get the stored tab index from sessionStorage
let activeTab = sessionStorage.getItem('activeTab');
// If there's a stored tab, show that tab
if (activeTab !== null) {
document.querySelector(`[data-index="$${activeTab}"]`).click();
}
});
</script>
<!--
<p class="cssvalid">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
<p class="htmlvalid">
<a href="https://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>
-->
</div>
</body>
</html>