finalize export function
This commit is contained in:
@@ -77,12 +77,14 @@
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:520px;">
|
||||
<div class="card-body" style="height:560px;">
|
||||
|
||||
<h6 class="fw-bold mb-3">
|
||||
Case Trends & Positivity Rate by Epiweek
|
||||
</h6>
|
||||
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<div style="height:460px; position:relative;">
|
||||
<canvas id="trendChart"></canvas>
|
||||
</div>
|
||||
@@ -94,10 +96,12 @@
|
||||
<!-- PATHOGEN DISTRIBUTION -->
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:520px">
|
||||
<div class="card-body" style="height:560px">
|
||||
|
||||
<h6 class="fw-bold mb-3">Pathogen Distribution</h6>
|
||||
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<div style="height:460px; position:relative;">
|
||||
<canvas id="pathogenChart"></canvas>
|
||||
</div>
|
||||
@@ -112,10 +116,12 @@
|
||||
<!-- MAP -->
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:520px">
|
||||
<div class="card-body" style="height:560px">
|
||||
|
||||
<h6 class="fw-bold mb-3">Cases by Province</h6>
|
||||
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<div id="provinceMap" style="height:450px;"></div>
|
||||
|
||||
</div>
|
||||
@@ -123,7 +129,7 @@
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:520px">
|
||||
<div class="card-body" style="height:560px">
|
||||
|
||||
<h6 class="fw-bold mb-3">Sentinel Sites & Influenza Subtypes</h6>
|
||||
|
||||
@@ -132,6 +138,9 @@
|
||||
<!-- SENTINEL PIE -->
|
||||
<div class="col-md-6 d-flex flex-column">
|
||||
<small class="text-muted mb-2">Cases by Sentinel Site</small>
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<div style="height: 460px; position:relative;">
|
||||
<canvas id="sentinelChart"></canvas>
|
||||
</div>
|
||||
@@ -140,6 +149,9 @@
|
||||
<!-- SUBTYPE -->
|
||||
<div class="col-md-6 d-flex flex-column">
|
||||
<small class="text-muted mb-2">Influenza Subtypes</small>
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<div style="height: 460px; position:relative;">
|
||||
<canvas id="subtypeChart"></canvas>
|
||||
</div>
|
||||
@@ -156,8 +168,11 @@
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:400px">
|
||||
<div class="card-body" style="height:480px">
|
||||
<h6 class="fw-bold mb-3">Sex Distribution</h6>
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<div style="height:360px; position:relative;">
|
||||
<canvas id="sexChart"></canvas>
|
||||
</div>
|
||||
@@ -167,8 +182,11 @@
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:400px">
|
||||
<div class="card-body" style="height:480px">
|
||||
<h6 class="fw-bold mb-3">Age Distribution</h6>
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<div style="height:360px; position:relative;">
|
||||
<canvas id="ageChart"></canvas>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
||||
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
|
||||
|
||||
@@ -20,7 +20,9 @@
|
||||
<script src="/js/dashboard/export.js"></script>
|
||||
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-navbar {
|
||||
height: 60px;
|
||||
@@ -69,7 +71,9 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-item:hover { background: #cce0d4; }
|
||||
.nav-item:hover {
|
||||
background: #cce0d4;
|
||||
}
|
||||
|
||||
.active-tab {
|
||||
color: #0B8F3C;
|
||||
@@ -88,13 +92,22 @@
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.form-select { border-radius: 0px !important; }
|
||||
.shadow-sm { box-shadow: none !important; }
|
||||
.form-select {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.card h3 { color: #0B8F3C; }
|
||||
.shadow-sm {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* EXPORT */
|
||||
.export-control { position: relative; }
|
||||
.card h3 {
|
||||
color: #0B8F3C;
|
||||
}
|
||||
|
||||
|
||||
.export-control {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#exportItems {
|
||||
display: flex;
|
||||
@@ -118,7 +131,7 @@
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
@@ -147,14 +160,22 @@
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.slide.active { left: 0; opacity: 1; z-index: 2; }
|
||||
.slide.prev { left: -100%; opacity: 0; }
|
||||
.slide.active {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.slide.prev {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-btn {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0,128,0,0.43);
|
||||
background: rgba(0, 128, 0, 0.43);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 15px;
|
||||
@@ -162,108 +183,123 @@
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.prev-btn { right: 75px; }
|
||||
.next-btn { right: 25px; }
|
||||
.prev-btn {
|
||||
right: 75px;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.slide-btn:hover {
|
||||
background: rgba(7,120,24,0.8);
|
||||
background: rgba(7, 120, 24, 0.8);
|
||||
}
|
||||
|
||||
@media print {
|
||||
#floatingExport { display: none !important; }
|
||||
.nav-bar, .top-navbar { display: none !important; }
|
||||
.card { page-break-inside: avoid; }
|
||||
#floatingExport {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-bar,
|
||||
.top-navbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="top-navbar">
|
||||
<div class="brand-title">
|
||||
National Reference Medical Laboratory Surveillance Dashboard
|
||||
<div class="top-navbar">
|
||||
<div class="brand-title">
|
||||
National Reference Medical Laboratory Surveillance Dashboard
|
||||
</div>
|
||||
<div class="ms-auto small">
|
||||
Last update: 12:05 | 2026-03-15
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-auto small">
|
||||
Last update: 12:05 | 2026-03-15
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar">
|
||||
|
||||
<a href="/dashboard" class="nav-item {{ request()->is('dashboard') ? 'active-tab' : '' }}">
|
||||
Overview
|
||||
</a>
|
||||
<a href="/dashboard" class="nav-item {{ request()->is('dashboard') ? 'active-tab' : '' }}">
|
||||
Overview
|
||||
</a>
|
||||
|
||||
@foreach($programs as $program)
|
||||
@if($program->code === 'SEQ')
|
||||
<a href="/dashboard/seq" class="nav-item {{ request()->is('dashboard/seq') ? 'active-tab' : '' }}">
|
||||
SEQ
|
||||
</a>
|
||||
@else
|
||||
<a href="/dashboard/{{ strtolower($program->code) }}"
|
||||
class="nav-item {{ request()->is('dashboard/' . strtolower($program->code)) ? 'active-tab' : '' }}">
|
||||
{{ $program->code }}
|
||||
</a>
|
||||
@endif
|
||||
@endforeach
|
||||
@foreach($programs as $program)
|
||||
@if($program->code === 'SEQ')
|
||||
<a href="/dashboard/seq" class="nav-item {{ request()->is('dashboard/seq') ? 'active-tab' : '' }}">
|
||||
SEQ
|
||||
</a>
|
||||
@else
|
||||
<a href="/dashboard/{{ strtolower($program->code) }}"
|
||||
class="nav-item {{ request()->is('dashboard/' . strtolower($program->code)) ? 'active-tab' : '' }}">
|
||||
{{ $program->code }}
|
||||
</a>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
<div class="ms-auto d-flex align-items-center gap-2 pe-3">
|
||||
<div class="ms-auto d-flex align-items-center gap-2 pe-3">
|
||||
|
||||
<button onclick="reloadDataSource()" class="btn btn-sm btn-theme-outline">
|
||||
Refresh Data
|
||||
</button>
|
||||
|
||||
<div id="exportControl" class="d-flex align-items-center gap-2">
|
||||
|
||||
<button id="exportToggle" class="btn btn-sm btn-theme-outline">
|
||||
Export ▸
|
||||
<button onclick="reloadDataSource()" class="btn btn-sm btn-theme-outline">
|
||||
Refresh Data
|
||||
</button>
|
||||
|
||||
<div id="exportItems" class="align-items-center gap-2">
|
||||
<button class="btn btn-sm btn-light" onclick="openChartSelector()">Charts</button>
|
||||
<button class="btn btn-sm btn-light" onclick="exportFullDashboard()">Screen</button>
|
||||
<button class="btn btn-sm btn-light" onclick="window.print()">Print</button>
|
||||
<button class="btn btn-sm btn-outline-secondary" id="exportClose">✕</button>
|
||||
</div>
|
||||
<div id="exportControl" class="d-flex align-items-center gap-2">
|
||||
|
||||
<div id="chartModal" class="export-modal">
|
||||
<div class="export-content">
|
||||
<h5>Select Charts</h5>
|
||||
<div id="chartList"></div>
|
||||
<button id="exportToggle" class="btn btn-sm btn-theme-outline">
|
||||
Export ▸
|
||||
</button>
|
||||
|
||||
<div class="mt-3 d-flex justify-content-end gap-2">
|
||||
<button onclick="closeChartSelector()">Cancel</button>
|
||||
<button onclick="exportSelectedCharts()">Download PDF</button>
|
||||
<div id="exportItems" class="align-items-center gap-2">
|
||||
<button class="btn btn-sm btn-light" onclick="openChartSelector()">Charts</button>
|
||||
<button class="btn btn-sm btn-light" onclick="exportFullDashboard()">Screen</button>
|
||||
<button class="btn btn-sm btn-light" onclick="window.print()">Print</button>
|
||||
<button class="btn btn-sm btn-outline-secondary" id="exportClose">✕</button>
|
||||
</div>
|
||||
|
||||
<div id="chartModal" class="export-modal">
|
||||
<div class="export-content">
|
||||
<h5>Select Charts</h5>
|
||||
<div id="chartList"></div>
|
||||
|
||||
<div class="mt-3 d-flex justify-content-end gap-2">
|
||||
<button onclick="closeChartSelector()">Cancel</button>
|
||||
<button onclick="exportSelectedCharts()">Download PDF</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="content-area">
|
||||
@yield('content')
|
||||
<div class="main-wrapper">
|
||||
<div class="content-area">
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@yield('scripts')
|
||||
@yield('scripts')
|
||||
|
||||
<script>
|
||||
window.addEventListener("click", (e) => {
|
||||
const modal = document.getElementById("chartModal");
|
||||
if (e.target === modal) modal.style.display = "none";
|
||||
});
|
||||
<script>
|
||||
window.addEventListener("click", (e) => {
|
||||
const modal = document.getElementById("chartModal");
|
||||
if (e.target === modal) modal.style.display = "none";
|
||||
});
|
||||
|
||||
function reloadDataSource() {
|
||||
fetch(`/api/dashboard/reload`)
|
||||
.then(res => res.json())
|
||||
.then(() => location.reload());
|
||||
}
|
||||
</script>
|
||||
function reloadDataSource() {
|
||||
fetch(`/api/dashboard/reload`)
|
||||
.then(res => res.json())
|
||||
.then(() => location.reload());
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user