BartekGit/magico.prototype
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add consumption report page with installation filters and data visualization

Browse Source
This commit is contained in:
Bartek
2026-06-18 09:11:08 +02:00
parent 8ed8d3bb42
commit 9648214675
1 changed files with 100 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
prototype/telemetria/report-consumption.php
View File

@@ -40,15 +40,45 @@ include '../../header-telemetria.php';
<option value="3">Kurnik Główny</option>
</select>
</div>
<div class="col-12 col-md-3">
<label class="form-label" for="reportDateRange">Zakres dat</label>
<div class="input-group input-group-merge">
<span class="input-group-text"><i class="bx bx-calendar"></i></span>
<input type="text" id="reportDateRange" class="form-control flatpickr-range"
placeholder="Wybierz okres" value="2026-01-01 do 2026-06-30" />
<div class="col-12 col-md-2">
<label class="form-label d-block">&nbsp;</label>
<div class="btn-group w-100">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-calendar me-1"></i> Zakres
</button>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header text-uppercase">Dni</h6></li>
<li><a class="dropdown-item preset-date-range" href="javascript:void(0);" data-range="today">Dziś</a></li>
<li><a class="dropdown-item preset-date-range" href="javascript:void(0);" data-range="this-week">Ten tydzień</a></li>
<li><a class="dropdown-item preset-date-range" href="javascript:void(0);" data-range="last-week">Poprzedni tydzień</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header text-uppercase">Miesiące</h6></li>
<li><a class="dropdown-item preset-date-range" href="javascript:void(0);" data-range="this-month">Ten miesiąc</a></li>
<li><a class="dropdown-item preset-date-range" href="javascript:void(0);" data-range="last-month">Poprzedni miesiąc</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header text-uppercase">Lata</h6></li>
<li><a class="dropdown-item preset-date-range" href="javascript:void(0);" data-range="this-year">Ten rok</a></li>
<li><a class="dropdown-item preset-date-range" href="javascript:void(0);" data-range="last-year">Poprzedni rok</a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-3">
<div class="col-12 col-md-2">
<label class="form-label" for="reportDateFrom">Data od</label>
<div class="input-group input-group-merge">
<span class="input-group-text"><i class="bx bx-calendar"></i></span>
<input type="text" id="reportDateFrom" class="form-control flatpickr-date"
placeholder="YYYY-MM-DD" value="2026-01-01" />
</div>
</div>
<div class="col-12 col-md-2">
<label class="form-label" for="reportDateTo">Data do</label>
<div class="input-group input-group-merge">
<span class="input-group-text"><i class="bx bx-calendar"></i></span>
<input type="text" id="reportDateTo" class="form-control flatpickr-date"
placeholder="YYYY-MM-DD" value="2026-06-30" />
</div>
</div>
<div class="col-12 col-md-2">
<label class="form-label" for="reportGranularity">Szczegółowość</label>
<select id="reportGranularity" class="form-select select2">
<option value="days">Dni</option>
@@ -56,12 +86,12 @@ include '../../header-telemetria.php';
<option value="months" selected>Miesiące</option>
</select>
<small id="daysLimitInfo" class="text-muted d-none mt-1 d-block">
<i class="bx bx-info-circle fs-6 align-middle me-1"></i>Maksymalny okres wynosi 366 dni.
<i class="bx bx-info-circle fs-6 align-middle me-1"></i>Max 366 dni.
</small>
</div>
<div class="col-12 col-md-3 d-flex align-items-end">
<button type="button" class="btn btn-primary w-100 w-md-auto">
<i class="bx bx-refresh me-1"></i> Generuj
<div class="col-12 col-md-1 d-flex align-items-end">
<button type="button" class="btn btn-primary w-100 w-md-auto px-3" title="Generuj raport">
<i class="bx bx-refresh"></i>
</button>
</div>
</form>
@@ -166,12 +196,67 @@ include '../../header-telemetria.php';
document.addEventListener('DOMContentLoaded', function () {
// 1. Inicjalizacja Flatpickr dla zakresu dat
if (typeof flatpickr !== 'undefined') {
const dateRangeEl = document.querySelector('.flatpickr-range');
if (dateRangeEl) {
const fp = flatpickr(dateRangeEl, {
mode: 'range',
const dateInputs = document.querySelectorAll('.flatpickr-date');
let fpInstances = [];
dateInputs.forEach(el => {
fpInstances.push(flatpickr(el, {
dateFormat: 'Y-m-d',
locale: 'pl'
}));
});
if (fpInstances.length === 2 && typeof $ !== 'undefined') {
const fpFrom = fpInstances[0];
const fpTo = fpInstances[1];
document.querySelectorAll('.preset-date-range').forEach(item => {
item.addEventListener('click', function (e) {
e.preventDefault();
const rangeType = this.getAttribute('data-range');
const today = new Date();
let startDate = new Date();
let endDate = new Date();
switch (rangeType) {
case 'today':
break;
case 'this-week':
const day = today.getDay() || 7;
startDate.setDate(today.getDate() - day + 1);
break;
case 'last-week':
const lastWeek = new Date(today);
lastWeek.setDate(today.getDate() - 7);
const dayLW = lastWeek.getDay() || 7;
startDate = new Date(lastWeek);
startDate.setDate(lastWeek.getDate() - dayLW + 1);
endDate = new Date(lastWeek);
endDate.setDate(lastWeek.getDate() - dayLW + 7);
break;
case 'this-month':
startDate = new Date(today.getFullYear(), today.getMonth(), 1);
endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
break;
case 'last-month':
startDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);
endDate = new Date(today.getFullYear(), today.getMonth(), 0);
break;
case 'this-year':
startDate = new Date(today.getFullYear(), 0, 1);
endDate = new Date(today.getFullYear(), 11, 31);
break;
case 'last-year':
startDate = new Date(today.getFullYear() - 1, 0, 1);
endDate = new Date(today.getFullYear() - 1, 11, 31);
break;
}
if (startDate && endDate) {
fpFrom.setDate(startDate);
fpTo.setDate(endDate);
}
});
});
}
}