statoolinfosweb/src/fr/devinsy/statoolinfos/htmlize/metricMenuView.xhtml

178 lines
6.6 KiB
HTML
Raw Normal View History

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>StatoolInfos</title>
<meta charset="UTF-8" />
<meta name="keywords" content="statoolinfos,devinsy,federation" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="statoolinfos.css" />
<script src="sorttable.js" />
<script src="Chart.bundle.min.js"></script>
</head>
<body>
<div>
<div style="margin: 5px;">
<span style="display: inline-block; width: 100px">Type</span>
<a onclick="javascript:selectTypeMenu('summary');" href="#" id="summaryTypeButton" class="button">Résumé</a>
<a onclick="javascript:selectTypeMenu('generic');" href="#" id="genericTypeButton" class="button">Génériques</a>
<a onclick="javascript:selectTypeMenu('specific');" href="#" id="specificTypeButton" class="button">Spécifiques</a>
<a onclick="javascript:selectTypeMenu('web');" href="#" id="webTypeButton" class="button">Web</a>
</div>
2021-06-02 16:10:09 +02:00
<div style="margin: 5px;">
<span style="display: inline-block; width: 100px">Vue</span>
<a onclick="javascript:selectViewMenu('years');" href="#" id="yearsViewButton" class="button">Années</a>
<a onclick="javascript:selectViewMenu('months');" href="#" id="monthsViewButton" class="button">Mois</a>
<a onclick="javascript:selectViewMenu('weeks');" href="#" id="weeksViewButton" class="button">Semaines</a>
<a onclick="javascript:selectViewMenu('days');" href="#" id="daysViewButton" class="button">Jours</a>
</div>
<div style="margin: 5px;">
<span style="display: inline-block; width: 100px">Période</span>
<a onclick="javascript:selectPeriodMenu('full');" href="#" id="fullPeriodButton" class="button">Tout</a>
2021-06-02 16:10:09 +02:00
<a onclick="javascript:selectPeriodMenu('last');" href="#" id="lastPeriodButton" class="button">12 mois</a>
<a onclick="javascript:selectPeriodMenu('2020');" href="#" id="2020PeriodButton" class="button">2020</a>
<a onclick="javascript:selectPeriodMenu('2021');" href="#" id="2021PeriodButton" class="button">2021</a>
</div>
</div>
<script type="text/javascript">
2021-06-02 16:10:09 +02:00
var CHART_YEARS_FULL = 0;
var CHART_MONTHS_FULL = 1;
var CHART_MONTHS_LAST = 2;
var CHART_MONTHS_2020 = 3;
var CHART_MONTHS_2021 = 4;
var CHART_WEEKS_FULL = 5;
var CHART_WEEKS_LAST = 6;
var CHART_WEEKS_2020 = 7;
var CHART_WEEKS_2021 = 8;
var CHART_DAYS_LAST = 9;
2021-06-02 16:10:09 +02:00
var currentView = 'months';
var currentPeriod = 'last';
function refreshMenu()
{
2021-06-02 16:10:09 +02:00
//
document.getElementById('yearsViewButton').classList.remove('selected');
document.getElementById('monthsViewButton').classList.remove('selected');
document.getElementById('weeksViewButton').classList.remove('selected');
document.getElementById('daysViewButton').classList.remove('selected');
2021-06-02 16:10:09 +02:00
document.getElementById(currentView + 'ViewButton').classList.add('selected');
//
document.getElementById('fullPeriodButton').classList.remove('selected');
document.getElementById('lastPeriodButton').classList.remove('selected');
document.getElementById('2020PeriodButton').classList.remove('selected');
document.getElementById('2021PeriodButton').classList.remove('selected');
2021-06-02 16:10:09 +02:00
document.getElementById(currentPeriod + 'PeriodButton').classList.add('selected');
//
document.getElementById('charts_' + CHART_YEARS_FULL).style.display = 'none';
document.getElementById('charts_' + CHART_MONTHS_FULL).style.display = 'none';
document.getElementById('charts_' + CHART_MONTHS_LAST).style.display = 'none';
document.getElementById('charts_' + CHART_MONTHS_2020).style.display = 'none';
document.getElementById('charts_' + CHART_MONTHS_2021).style.display = 'none';
document.getElementById('charts_' + CHART_WEEKS_FULL).style.display = 'none';
document.getElementById('charts_' + CHART_WEEKS_LAST).style.display = 'none';
document.getElementById('charts_' + CHART_WEEKS_2020).style.display = 'none';
document.getElementById('charts_' + CHART_WEEKS_2021).style.display = 'none';
//document.getElementById('charts_' + CHART_DAYS_LAST).style.display = 'none';
if (currentView == 'years')
{
2021-06-02 16:10:09 +02:00
if (currentPeriod == 'full')
{
document.getElementById('charts_' + CHART_YEARS_FULL).style.display = 'block';
}
else if (currentPeriod == 'last')
{
document.getElementById('charts_' + CHART_YEARS_FULL).style.display = 'block';
}
else if (currentPeriod == '2020')
{
document.getElementById('charts_' + CHART_YEARS_FULL).style.display = 'block';
}
else if (currentPeriod == '2021')
{
document.getElementById('charts_' + CHART_YEARS_FULL).style.display = 'block';
}
}
2021-06-02 16:10:09 +02:00
else if (currentView == 'months')
{
2021-06-02 16:10:09 +02:00
if (currentPeriod == 'full')
{
document.getElementById('charts_' + CHART_MONTHS_FULL).style.display = 'block';
}
else if (currentPeriod == 'last')
{
document.getElementById('charts_' + CHART_MONTHS_LAST).style.display = 'block';
}
else if (currentPeriod == '2020')
{
document.getElementById('charts_' + CHART_MONTHS_2020).style.display = 'block';
}
else if (currentPeriod == '2021')
{
document.getElementById('charts_' + CHART_MONTHS_2021).style.display = 'block';
}
}
2021-06-02 16:10:09 +02:00
else if (currentView == 'weeks')
{
2021-06-02 16:10:09 +02:00
if (currentPeriod == 'full')
{
document.getElementById('charts_' + CHART_WEEKS_FULL).style.display = 'block';
}
else if (currentPeriod == 'last')
{
document.getElementById('charts_' + CHART_WEEKS_LAST).style.display = 'block';
}
else if (currentPeriod == '2020')
{
document.getElementById('charts_' + CHART_WEEKS_2020).style.display = 'block';
}
else if (currentPeriod == '2021')
{
document.getElementById('charts_' + CHART_WEEKS_2021).style.display = 'block';
}
}
2021-06-02 16:10:09 +02:00
else if (currentView == 'days')
{
2021-06-02 16:10:09 +02:00
if (currentPeriod == 'full')
{
document.getElementById('charts_' + CHART_DAYS_LAST).style.display = 'block';
}
else if (currentPeriod == 'last')
{
document.getElementById('charts_' + CHART_DAYS_LAST).style.display = 'block';
}
else if (currentPeriod == '2020')
{
document.getElementById('charts_' + CHART_DAYS_LAST).style.display = 'block';
}
else if (currentPeriod == '2021')
{
document.getElementById('charts_' + CHART_DAYS_LAST).style.display = 'block';
}
}
}
2021-06-02 16:10:09 +02:00
function selectViewMenu(selection)
{
currentView = selection;
refreshMenu();
}
function selectPeriodMenu(selection)
{
currentPeriod = selection;
refreshMenu();
}
window.onload=function() {refreshMenu();}
</script>
</body>
</html>