400 lines
10 KiB
PHP
400 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Stampa Report - {{ $data['title'] ?? 'Report' }}</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
color: #333;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.toolbar {
|
|
background: #2c3e50;
|
|
color: #fff;
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.toolbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.toolbar-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.toolbar-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toolbar label {
|
|
font-size: 13px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.toolbar select {
|
|
padding: 6px 12px;
|
|
border: 1px solid #4a5568;
|
|
border-radius: 4px;
|
|
background: #4a5568;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toolbar select:focus {
|
|
outline: none;
|
|
border-color: #63b3ed;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-print {
|
|
background: #28a745;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-print:hover {
|
|
background: #218838;
|
|
}
|
|
|
|
.btn-close {
|
|
background: #dc3545;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-close:hover {
|
|
background: #c82333;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #6c757d;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #5a6268;
|
|
}
|
|
|
|
.preview-container {
|
|
max-width: 210mm;
|
|
margin: 20px auto;
|
|
background: #fff;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
padding: 20px;
|
|
}
|
|
|
|
.preview-container.portrait {
|
|
width: 210mm;
|
|
min-height: 297mm;
|
|
}
|
|
|
|
.preview-container.landscape {
|
|
width: 297mm;
|
|
min-height: 210mm;
|
|
}
|
|
|
|
.report-header {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px solid #2c3e50;
|
|
}
|
|
|
|
.report-header h1 {
|
|
font-size: 24px;
|
|
color: #2c3e50;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.report-header .subtitle {
|
|
font-size: 14px;
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
.report-summary {
|
|
background: #e8f4f8;
|
|
padding: 12px 15px;
|
|
margin-bottom: 20px;
|
|
border-left: 4px solid #17a2b8;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.report-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 20px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.report-table th,
|
|
.report-table td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
.report-table th {
|
|
background: #f8f9fa;
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.report-table tr:nth-child(even) {
|
|
background: #fafafa;
|
|
}
|
|
|
|
.report-table tr:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
color: #999;
|
|
font-style: italic;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.no-data i {
|
|
font-size: 48px;
|
|
margin-bottom: 10px;
|
|
display: block;
|
|
}
|
|
|
|
.report-footer {
|
|
margin-top: 30px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #ddd;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
color: #999;
|
|
}
|
|
|
|
.row-count {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-top: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
@page {
|
|
margin: 15mm;
|
|
}
|
|
|
|
@media print {
|
|
@page portrait {
|
|
size: portrait;
|
|
}
|
|
|
|
@page landscape {
|
|
size: landscape;
|
|
}
|
|
|
|
.toolbar {
|
|
display: none !important;
|
|
}
|
|
|
|
body {
|
|
background: #fff;
|
|
padding: 0;
|
|
}
|
|
|
|
.preview-container {
|
|
margin: 0;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
max-width: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.preview-container.portrait {
|
|
width: auto;
|
|
min-height: auto;
|
|
}
|
|
|
|
.preview-container.landscape {
|
|
width: auto;
|
|
min-height: auto;
|
|
}
|
|
|
|
.report-table {
|
|
page-break-inside: auto;
|
|
}
|
|
|
|
.report-table tr {
|
|
page-break-inside: avoid;
|
|
page-break-after: auto;
|
|
}
|
|
|
|
.report-table thead {
|
|
display: table-header-group;
|
|
}
|
|
|
|
.report-table tfoot {
|
|
display: table-footer-group;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="toolbar" id="toolbar">
|
|
<div class="toolbar-left">
|
|
<span class="toolbar-title">Anteprima di Stampa</span>
|
|
<div class="toolbar-group">
|
|
<label for="orientation">Orientamento:</label>
|
|
<select id="orientation">
|
|
<option value="portrait">Verticale (Portrait)</option>
|
|
<option value="landscape">Orizzontale (Landscape)</option>
|
|
</select>
|
|
</div>
|
|
<div class="toolbar-group">
|
|
<label for="font-size">Dimensione font:</label>
|
|
<select id="font-size">
|
|
<option value="10">Piccolo (10px)</option>
|
|
<option value="11">Normale (11px)</option>
|
|
<option value="12" selected>Medio (12px)</option>
|
|
<option value="13">Grande (13px)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-secondary" onclick="window.opener ? window.close() : window.location.href='{{ route('report.index') }}'">
|
|
Indietro
|
|
</button>
|
|
<button class="btn btn-print" onclick="printReport()">
|
|
Stampa
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-container portrait" id="preview-container">
|
|
<div class="report-header">
|
|
<h1>{{ $data['title'] ?? 'Report' }}</h1>
|
|
<div class="subtitle">Generato il {{ now()->format('d/m/Y H:i') }}</div>
|
|
</div>
|
|
|
|
@if(!empty($data['summary']))
|
|
<div class="report-summary">
|
|
<strong>{{ $data['summary'] }}</strong>
|
|
</div>
|
|
@endif
|
|
|
|
@if(!empty($data['headers']) && !empty($data['rows']))
|
|
<table class="report-table" id="report-table">
|
|
<thead>
|
|
<tr>
|
|
@foreach($data['headers'] as $header)
|
|
<th>{{ $header }}</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($data['rows'] as $row)
|
|
<tr>
|
|
@foreach($row as $cell)
|
|
<td>{{ is_array($cell) ? json_encode($cell) : $cell }}</td>
|
|
@endforeach
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
<div class="row-count">Totale righe: {{ count($data['rows']) }}</div>
|
|
@else
|
|
<div class="no-data">
|
|
Nessun dato disponibile per questo report.
|
|
</div>
|
|
@endif
|
|
|
|
<div class="report-footer">
|
|
<p>Report generato automaticamente - Glastree</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const orientationSelect = document.getElementById('orientation');
|
|
const fontSizeSelect = document.getElementById('font-size');
|
|
const previewContainer = document.getElementById('preview-container');
|
|
const reportTable = document.getElementById('report-table');
|
|
|
|
function printReport() {
|
|
window.print();
|
|
}
|
|
|
|
orientationSelect.addEventListener('change', function() {
|
|
previewContainer.classList.remove('portrait', 'landscape');
|
|
previewContainer.classList.add(this.value);
|
|
|
|
if (this.value === 'landscape') {
|
|
document.body.classList.add('landscape-mode');
|
|
} else {
|
|
document.body.classList.remove('landscape-mode');
|
|
}
|
|
});
|
|
|
|
fontSizeSelect.addEventListener('change', function() {
|
|
const size = this.value;
|
|
document.body.style.fontSize = size + 'px';
|
|
if (reportTable) {
|
|
reportTable.style.fontSize = (parseInt(size) - 1) + 'px';
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const savedOrientation = localStorage.getItem('report-print-orientation');
|
|
const savedFontSize = localStorage.getItem('report-print-font-size');
|
|
|
|
if (savedOrientation) {
|
|
orientationSelect.value = savedOrientation;
|
|
orientationSelect.dispatchEvent(new Event('change'));
|
|
}
|
|
|
|
if (savedFontSize) {
|
|
fontSizeSelect.value = savedFontSize;
|
|
fontSizeSelect.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
|
|
orientationSelect.addEventListener('change', function() {
|
|
localStorage.setItem('report-print-orientation', this.value);
|
|
});
|
|
|
|
fontSizeSelect.addEventListener('change', function() {
|
|
localStorage.setItem('report-print-font-size', this.value);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|