ChaoticByte/drinks-manager
1
1
Fork 0
Code Issues Pull requests Projects Releases 20 Packages Wiki Activity Actions

Rearranged statistics page

Browse source
This commit is contained in:
W13R 2022-05-24 20:49:18 +02:00
parent 95d37dbc3d
commit 9f965b8119
3 changed files with 8 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

42
application/app/templates/statistics.html
View file

@ -20,37 +20,9 @@
<div class="mainContainer"> <div class="mainContainer">
<div class="dropDownMenu" id="statisticsDropDownMenu">
<button class="dropDownButton" id="statisticsDropDownMenuButton">
<div>
{% translate "Choose" %}
</div>
</button>
<div class="dropDownList">
<button class="sChoice dropDownChoice" data-statistics_div="noyopd">
{% translate "Your orders per drink" %}
</button>
<button class="sChoice dropDownChoice" data-statistics_div="yopwd">
{% translate "Your orders per weekday" %}
</button>
<button class="sChoice dropDownChoice" data-statistics_div="yopml12m">
{% translate "Your orders per month (last 12 months)" %}
</button>
<button class="sChoice dropDownChoice" data-statistics_div="noaopd">
{% translate "All orders per drink" %}
</button>
<button class="sChoice dropDownChoice" data-statistics_div="aopwd">
{% translate "All orders per weekday" %}
</button>
<button class="sChoice dropDownChoice" data-statistics_div="aopml12m">
{% translate "All orders per month (last 12 months)" %}
</button>
</div>
</div>
<div class="tablesContainer"> <div class="tablesContainer">
<div id="noyopd" class="statisticsTable nodisplay"> <div id="noyopd" class="statisticsTable">
<h1>{% translate "Your orders per drink" %}</h1> <h1>{% translate "Your orders per drink" %}</h1>
{% if noyopd %} {% if noyopd %}
<table> <table>
@ -70,7 +42,7 @@
{% endif %} {% endif %}
</div> </div>
<div id="noaopd" class="statisticsTable nodisplay"> <div id="noaopd" class="statisticsTable">
<h1>{% translate "All orders per drink" %}</h1> <h1>{% translate "All orders per drink" %}</h1>
{% if noaopd %} {% if noaopd %}
<table> <table>
@ -90,7 +62,7 @@
{% endif %} {% endif %}
</div> </div>
<div id="yopml12m" class="statisticsTable nodisplay"> <div id="yopml12m" class="statisticsTable">
<h1>{% translate "Your orders per month (last 12 months)" %}</h1> <h1>{% translate "Your orders per month (last 12 months)" %}</h1>
{% if yopml12m %} {% if yopml12m %}
<table> <table>
@ -110,7 +82,7 @@
{% endif %} {% endif %}
</div> </div>
<div id="aopml12m" class="statisticsTable nodisplay"> <div id="aopml12m" class="statisticsTable">
<h1>{% translate "All orders per month (last 12 months)" %}</h1> <h1>{% translate "All orders per month (last 12 months)" %}</h1>
{% if aopml12m %} {% if aopml12m %}
<table> <table>
@ -130,7 +102,7 @@
{% endif %} {% endif %}
</div> </div>
<div id="yopwd" class="statisticsTable nodisplay"> <div id="yopwd" class="statisticsTable">
<h1>{% translate "Your orders per weekday" %}</h1> <h1>{% translate "Your orders per weekday" %}</h1>
{% if yopwd %} {% if yopwd %}
<table> <table>
@ -150,7 +122,7 @@
{% endif %} {% endif %}
</div> </div>
<div id="aopwd" class="statisticsTable nodisplay"> <div id="aopwd" class="statisticsTable">
<h1>{% translate "All orders per weekday" %}</h1> <h1>{% translate "All orders per weekday" %}</h1>
{% if aopwd %} {% if aopwd %}
<table> <table>
@ -174,6 +146,4 @@
</div> </div>
<script src="/static/js/statistics.js"></script>
{% endblock %} {% endblock %}

10
static/css/statistics.css
View file

@ -1,24 +1,21 @@
.mainContainer { .mainContainer {
min-width: 70vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: start; justify-content: start;
width: 100%;
flex-grow: 1;
} }
.statsHeading { .statsHeading {
min-width: max-content; min-width: max-content;
margin-left: 2rem;
margin-top: 0; margin-top: 0;
} }
.tablesContainer { .tablesContainer {
position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: start; justify-content: start;
width: 95%; width: 95%;
margin-top: 5rem; margin-top: 2rem;
} }
.statisticsTable { .statisticsTable {
margin-bottom: 2rem; margin-bottom: 2rem;
@ -46,9 +43,6 @@
.statisticsTable td:last-child { .statisticsTable td:last-child {
text-align: right; text-align: right;
} }
#statisticsDropDownMenu .dropDownList {
z-index: 195;
}
@media only screen and (max-width: 700px) { @media only screen and (max-width: 700px) {
.statisticsTable h1 { .statisticsTable h1 {
min-width: 90vw; min-width: 90vw;

42
static/js/statistics.js
View file

@ -1,42 +0,0 @@
{
let statistics_dropdown_choices;
let statistics_tables;
let dropDownMenuActive = false;
document.addEventListener("DOMContentLoaded", () => {
// elements
let statistics_dropdown_menu = document.getElementById("statisticsDropDownMenu");
let statistics_dropdown_menu_button = document.getElementById("statisticsDropDownMenuButton");
statistics_dropdown_choices = [...statistics_dropdown_menu.getElementsByClassName("sChoice")];
statistics_tables = [...document.getElementsByClassName("statisticsTable")];
statistics_dropdown_menu_button.addEventListener("click", () => {
if (statistics_dropdown_menu.classList.contains("dropDownVisible")) {
statistics_dropdown_menu.classList.remove("dropDownVisible");
}
else {
statistics_dropdown_menu.classList.add("dropDownVisible");
}
})
statistics_dropdown_choices.forEach(element => {
element.addEventListener("click", () => {
changeStatisticsChoice(element.innerText, element.dataset.statistics_div);
})
})
})
function changeStatisticsChoice(choice_name, div_id) {
statistics_tables.forEach(element => {
element.classList.add("nodisplay");
})
document.getElementById(div_id).classList.remove("nodisplay");
}
}