lindeas
/
jilo-web
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Adds active state to last clicked graph button

main
Yasen Pramatarov 2024-10-11 10:22:20 +03:00
parent 88a3907d29
commit 1d706803b1
4 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/templates/graphs-combined.php
View File

@ -2,16 +2,16 @@
<div class="row"> <div class="row">
<div class="card w-auto bg-light border-light card-body filter-results"> <div class="card w-auto bg-light border-light card-body filter-results">
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<input type="button" style="margin-right: 3px;" onclick="setTimeRange('today')" value="today" /> <input type="button" class="button" style="margin-right: 3px;" onclick="setTimeRange('today'); setActive(this)" value="today" />
<input type="button" style="margin-right: 3px;" onclick="setTimeRange('last2days')" value="last 2 days" /> <input type="button" class="button" style="margin-right: 3px;" onclick="setTimeRange('last2days'); setActive(this)" value="last 2 days" />
<input type="button" style="margin-right: 3px;" onclick="setTimeRange('last7days')" value="last 7 days" /> <input type="button" class="button active" style="margin-right: 3px;" onclick="setTimeRange('last7days'); setActive(this)" value="last 7 days" />
<input type="button" style="margin-right: 3px;" onclick="setTimeRange('thisMonth')" value="month" /> <input type="button" class="button" style="margin-right: 3px;" onclick="setTimeRange('thisMonth'); setActive(this)" value="month" />
<input type="button" style="margin-right: 18px;" onclick="setTimeRange('thisYear')" value="year" /> <input type="button" class="button" style="margin-right: 18px;" onclick="setTimeRange('thisYear'); setActive(this)" value="year" />
<input type="date" style="margin-right: 3px;" id="start-date"> <input type="date" style="margin-right: 3px;" id="start-date">
<input type="date" style="margin-right: 3px;" id="end-date"> <input type="date" style="margin-right: 3px;" id="end-date">
<input type="button" onclick="setCustomTimeRange()" value="custom range" /> <input type="button" class="button" onclick="setCustomTimeRange(); setActive(this)" value="custom range" />
</div> </div>
</div> </div>
</div> </div>
@ -119,6 +119,18 @@ function setCustomTimeRange() {
}); });
} }
// Set the clicked button state to active
function setActive(element) {
// Remove 'active' class from all buttons
var buttons = document.querySelectorAll('.button');
buttons.forEach(function(btn) {
btn.classList.remove('active');
});
// Add 'active' class only to the clicked button
element.classList.add('active');
}
// Call setTimeRange('last7days') on page load to pre-load last 7 days by default // Call setTimeRange('last7days') on page load to pre-load last 7 days by default
window.onload = function() { window.onload = function() {
setTimeRange('last7days'); setTimeRange('last7days');

2
app/templates/page-header.php
View File

@ -37,5 +37,3 @@
</head> </head>
<body> <body>
<div class="container-fluid">

2
app/templates/page-menu.php
View File

@ -1,4 +1,6 @@
<div class="container-fluid">
<!-- Menu --> <!-- Menu -->
<div class="menu-container"> <div class="menu-container">
<ul class="menu-left"> <ul class="menu-left">

6
public_html/static/css/main.css
View File

@ -187,3 +187,9 @@
.table-results, .filter-results { .table-results, .filter-results {
font-size: 0.85em; font-size: 0.85em;
} }
.button.active {
background-color: lightgray;
border: 1px solid gray;
border-radius: 4px;
}