Merge branch 'master' of https://github.com/khantey1998/nrml-dashboard
# Conflicts: # dashboard/public/js/dashboard/filter.js
This commit is contained in:
pcalengratha
@@ -32,11 +32,16 @@ Chart.register({
|
||||
if (chart.config.type !== 'doughnut') return;
|
||||
if (chart.$noData) return;
|
||||
|
||||
const { ctx, width, height } = chart;
|
||||
const { ctx, chartArea } = chart;
|
||||
|
||||
const data = chart.data.datasets[0].data;
|
||||
const total = data.reduce((a, b) => a + b, 0);
|
||||
|
||||
if (!chartArea) return;
|
||||
|
||||
const centerX = (chartArea.left + chartArea.right) / 2;
|
||||
const centerY = (chartArea.top + chartArea.bottom) / 2;
|
||||
|
||||
ctx.save();
|
||||
|
||||
ctx.textAlign = 'center';
|
||||
@@ -44,11 +49,11 @@ Chart.register({
|
||||
|
||||
ctx.font = 'bold 18px sans-serif';
|
||||
ctx.fillStyle = '#111827';
|
||||
ctx.fillText(total, width / 2, height / 2 - 8);
|
||||
ctx.fillText(total, centerX, centerY - 8);
|
||||
|
||||
ctx.font = '12px sans-serif';
|
||||
ctx.fillStyle = '#6b7280';
|
||||
ctx.fillText('Total cases', width / 2, height / 2 + 12);
|
||||
ctx.fillText('Total cases', centerX, centerY + 12);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
@@ -247,7 +252,7 @@ function buildChart(id, type, labels, data) {
|
||||
}
|
||||
if (type === 'doughnut') {
|
||||
options.cutout = '70%';
|
||||
|
||||
options.maintainAspectRatio = false;
|
||||
options.elements = {
|
||||
arc: {
|
||||
borderWidth: (ctx) => ctx.chart.$noData ? 0 : 1
|
||||
|
||||
300
dashboard/public/js/dashboard/export.js
Normal file
300
dashboard/public/js/dashboard/export.js
Normal file
@@ -0,0 +1,300 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
const toggle = document.getElementById("exportToggle");
|
||||
const items = document.getElementById("exportItems");
|
||||
const close = document.getElementById("exportClose");
|
||||
|
||||
if (!toggle || !items) return;
|
||||
|
||||
toggle.addEventListener("click", () => {
|
||||
items.classList.toggle("show");
|
||||
|
||||
toggle.innerText = items.classList.contains("show")
|
||||
? "Export ▾"
|
||||
: "Export ▸";
|
||||
});
|
||||
|
||||
if (close) {
|
||||
close.addEventListener("click", () => {
|
||||
items.classList.remove("show");
|
||||
toggle.innerText = "Export ▸";
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function openChartSelector() {
|
||||
|
||||
if (typeof charts === "undefined" || Object.keys(charts).length === 0) {
|
||||
alert("Charts are still loading. Please try again.");
|
||||
return;
|
||||
}
|
||||
|
||||
const modal = document.getElementById("chartModal");
|
||||
const list = document.getElementById("chartList");
|
||||
|
||||
list.innerHTML = "";
|
||||
|
||||
Object.keys(charts).forEach(id => {
|
||||
list.innerHTML += `
|
||||
<label style="display:block;margin-bottom:6px;">
|
||||
<input type="checkbox" value="${id}" checked>
|
||||
${formatChartName(id)}
|
||||
</label>
|
||||
`;
|
||||
});
|
||||
list.innerHTML += `
|
||||
<label>
|
||||
<input type="checkbox" value="provinceMap" checked>
|
||||
Geographic Distribution
|
||||
</label>
|
||||
`;
|
||||
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
function closeChartSelector() {
|
||||
document.getElementById("chartModal").style.display = "none";
|
||||
}
|
||||
|
||||
function formatChartName(id) {
|
||||
const map = {
|
||||
trendChart: "Case Trend & Positivity",
|
||||
pathogenChart: "Pathogen Distribution",
|
||||
provinceMap: "Geographic Distribution",
|
||||
ageChart: "Age Distribution",
|
||||
sexChart: "Sex Distribution",
|
||||
subtypeChart: "Influenza Subtypes",
|
||||
sentinelChart: "Sentinel Site Distribution"
|
||||
};
|
||||
|
||||
return map[id] || id;
|
||||
}
|
||||
|
||||
async function exportSelectedCharts() {
|
||||
|
||||
const { jsPDF } = window.jspdf;
|
||||
const pdf = new jsPDF("p", "mm", "a4");
|
||||
|
||||
const selected = document.querySelectorAll("#chartList input:checked");
|
||||
|
||||
const margin = 10;
|
||||
const pageWidth = 210;
|
||||
const usableWidth = pageWidth - margin * 2;
|
||||
|
||||
const gap = 5;
|
||||
const chartWidth = (usableWidth - gap) / 2;
|
||||
|
||||
let y = 35;
|
||||
|
||||
// ===== HEADER =====
|
||||
pdf.setFontSize(18);
|
||||
pdf.setFont(undefined, "bold");
|
||||
pdf.text(getReportTitle(), margin, 15);
|
||||
|
||||
pdf.setFontSize(10);
|
||||
pdf.setFont(undefined, "normal");
|
||||
pdf.text(`Generated: ${new Date().toLocaleString()}`, margin, 22);
|
||||
|
||||
pdf.setDrawColor(200);
|
||||
pdf.line(margin, 25, pageWidth - margin, 25);
|
||||
|
||||
// ===== PREPARE ITEMS =====
|
||||
const items = [];
|
||||
|
||||
for (const cb of selected) {
|
||||
|
||||
if (cb.value === "provinceMap") {
|
||||
const mapImg = await getMapImage();
|
||||
|
||||
if (mapImg) {
|
||||
items.push({
|
||||
id: "provinceMap",
|
||||
type: "map",
|
||||
img: mapImg
|
||||
});
|
||||
}
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
const chart = charts[cb.value];
|
||||
if (!chart) continue;
|
||||
|
||||
items.push({
|
||||
id: cb.value,
|
||||
type: "chart",
|
||||
chart
|
||||
});
|
||||
}
|
||||
|
||||
let i = 0;
|
||||
|
||||
const FIXED_HEIGHT = 70;
|
||||
const FIXED_WIDTH = chartWidth;
|
||||
|
||||
while (i < items.length) {
|
||||
|
||||
const left = items[i];
|
||||
const right = items[i + 1] || null;
|
||||
|
||||
let leftHeight = FIXED_HEIGHT;
|
||||
let rightHeight = 0;
|
||||
|
||||
const xLeft = margin;
|
||||
|
||||
pdf.setFontSize(11);
|
||||
pdf.setFont(undefined, "bold");
|
||||
pdf.text(formatChartName(left.id), xLeft, y - 3);
|
||||
|
||||
let leftWidth = FIXED_WIDTH;
|
||||
let leftImg;
|
||||
|
||||
if (left.type === "map") {
|
||||
leftWidth = FIXED_WIDTH;
|
||||
leftHeight = 60;
|
||||
leftImg = left.img;
|
||||
} else {
|
||||
leftImg = left.chart.toBase64Image();
|
||||
|
||||
if (["doughnut", "pie"].includes(left.chart.config.type)) {
|
||||
const size = Math.min(FIXED_WIDTH, FIXED_HEIGHT);
|
||||
leftWidth = size;
|
||||
leftHeight = size;
|
||||
} else {
|
||||
leftHeight = FIXED_HEIGHT;
|
||||
}
|
||||
}
|
||||
|
||||
const xLeftAdjusted = xLeft + (FIXED_WIDTH - leftWidth) / 2;
|
||||
|
||||
pdf.addImage(
|
||||
leftImg,
|
||||
"PNG",
|
||||
xLeftAdjusted,
|
||||
y,
|
||||
leftWidth,
|
||||
leftHeight
|
||||
);
|
||||
|
||||
if (right) {
|
||||
|
||||
const xRight = margin + chartWidth + gap;
|
||||
|
||||
pdf.setFontSize(11);
|
||||
pdf.setFont(undefined, "bold");
|
||||
pdf.text(formatChartName(right.id), xRight, y - 3);
|
||||
|
||||
let rightWidth = FIXED_WIDTH;
|
||||
let rightImg;
|
||||
|
||||
if (right.type === "map") {
|
||||
rightWidth = FIXED_WIDTH;
|
||||
rightHeight = 60;
|
||||
rightImg = right.img;
|
||||
} else {
|
||||
rightImg = right.chart.toBase64Image();
|
||||
|
||||
if (["doughnut", "pie"].includes(right.chart.config.type)) {
|
||||
const size = Math.min(FIXED_WIDTH, FIXED_HEIGHT);
|
||||
rightWidth = size;
|
||||
rightHeight = size;
|
||||
} else {
|
||||
rightHeight = FIXED_HEIGHT;
|
||||
}
|
||||
}
|
||||
|
||||
const xRightAdjusted = xRight + (FIXED_WIDTH - rightWidth) / 2;
|
||||
|
||||
pdf.addImage(
|
||||
rightImg,
|
||||
"PNG",
|
||||
xRightAdjusted,
|
||||
y,
|
||||
rightWidth,
|
||||
rightHeight
|
||||
);
|
||||
|
||||
i += 2;
|
||||
} else {
|
||||
i += 1;
|
||||
}
|
||||
|
||||
// ===== ROW HEIGHT =====
|
||||
const rowHeight = Math.max(leftHeight, rightHeight);
|
||||
y += rowHeight + 12;
|
||||
|
||||
// ===== PAGE BREAK =====
|
||||
if (y > 260) {
|
||||
pdf.addPage();
|
||||
y = 30;
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save("dashboard_report.pdf");
|
||||
closeChartSelector();
|
||||
}
|
||||
function prepareMapForExport() {
|
||||
if (!window.map) return;
|
||||
|
||||
const bounds = L.featureGroup(Object.values(map._layers)).getBounds();
|
||||
|
||||
if (bounds.isValid()) {
|
||||
map.setView([12.5, 104.9], 6);
|
||||
}
|
||||
}
|
||||
function exportFullDashboard() {
|
||||
|
||||
const el = document.querySelector(".content-area");
|
||||
|
||||
html2canvas(el, { scale: 2 }).then(canvas => {
|
||||
|
||||
const img = canvas.toDataURL("image/png");
|
||||
|
||||
const { jsPDF } = window.jspdf;
|
||||
const pdf = new jsPDF("p", "mm", "a4");
|
||||
|
||||
const width = 210;
|
||||
const height = (canvas.height * width) / canvas.width;
|
||||
|
||||
pdf.addImage(img, "PNG", 0, 0, width, height);
|
||||
|
||||
pdf.save("full_dashboard.pdf");
|
||||
|
||||
});
|
||||
|
||||
closeChartSelector();
|
||||
}
|
||||
async function getMapImage() {
|
||||
|
||||
const mapEl = document.getElementById("provinceMap");
|
||||
if (!mapEl) return null;
|
||||
|
||||
prepareMapForExport();
|
||||
|
||||
// wait for map tiles to re-render
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
const canvas = await html2canvas(mapEl, {
|
||||
useCORS: true,
|
||||
scale: 2
|
||||
});
|
||||
|
||||
return canvas.toDataURL("image/png");
|
||||
}
|
||||
function getReportTitle() {
|
||||
const program = window.PROGRAM_CODE || "Overview";
|
||||
|
||||
const rangeType = document.getElementById("trend_range")?.value;
|
||||
|
||||
if (rangeType === "custom") {
|
||||
const sy = document.getElementById("start_year")?.value;
|
||||
const sw = document.getElementById("start_week")?.value;
|
||||
const ey = document.getElementById("end_year")?.value;
|
||||
const ew = document.getElementById("end_week")?.value;
|
||||
|
||||
return `${program} Report (W${sw}/${sy} – W${ew}/${ey})`;
|
||||
}
|
||||
|
||||
return `${program} Report (Last ${rangeType} weeks)`;
|
||||
}
|
||||
@@ -75,9 +75,8 @@ class DashboardFilter {
|
||||
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
//for (let y = year-10; y <= year; y++) {
|
||||
for (let y = year; y >= year-10; y--) {
|
||||
|
||||
for (let y = year; y >= year-20; y--) {
|
||||
this.startYear.innerHTML += `<option value="${y}">${y}</option>`;
|
||||
this.endYear.innerHTML += `<option value="${y}">${y}</option>`;
|
||||
|
||||
|
||||
@@ -2,7 +2,20 @@ const standardPrograms = ['SARI', 'ILI', 'LBM', 'AFI'];
|
||||
const programCode = (window.PROGRAM_CODE || '').trim().toUpperCase();
|
||||
let map;
|
||||
let provinceLayer;
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
if (!standardPrograms.includes(programCode)) return;
|
||||
|
||||
new DashboardFilter((startYear, startWeek, endYear, endWeek) => {
|
||||
|
||||
fetch(`/api/dashboard/program?surveillance_id=${window.SURVEILLANCE_ID}&start_year=${startYear}&start_week=${startWeek}&end_year=${endYear}&end_week=${endWeek}`)
|
||||
.then(res => res.json())
|
||||
.then(programCode === 'AFI' ? renderAFIDashboard : renderDashboard)
|
||||
.catch(err => console.error("Dashboard API error:", err));
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
function normalizeProvince(name, validSet) {
|
||||
if (!name || !validSet) return null;
|
||||
|
||||
@@ -33,22 +46,6 @@ function normalizeProvince(name, validSet) {
|
||||
|
||||
return match || null;
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
if (!standardPrograms.includes(programCode)) return;
|
||||
|
||||
new DashboardFilter((startYear, startWeek, endYear, endWeek) => {
|
||||
|
||||
fetch(`/api/dashboard/program?surveillance_id=${window.SURVEILLANCE_ID}&start_year=${startYear}&start_week=${startWeek}&end_year=${endYear}&end_week=${endWeek}`)
|
||||
.then(res => res.json())
|
||||
.then(programCode === 'AFI' ? renderAFIDashboard : renderDashboard)
|
||||
.catch(err => console.error("Dashboard API error:", err));
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function renderAFIDashboard(data) {
|
||||
const pathogenRows = (data.pathogen_distribution || [])
|
||||
.sort((a, b) => b.total - a.total);
|
||||
@@ -100,11 +97,9 @@ function renderProvinceHeatmap(rows) {
|
||||
|
||||
rows.forEach(r => {
|
||||
|
||||
// ✅ FIX: use patient_province + validSet
|
||||
const province = normalizeProvince(r.patient_province, validProvinces);
|
||||
if (!province) return;
|
||||
|
||||
// ✅ FIX: accumulate instead of overwrite
|
||||
if (!totals[province]) {
|
||||
totals[province] = { total: 0, positive: 0 };
|
||||
}
|
||||
@@ -322,8 +317,6 @@ function renderDashboard(data) {
|
||||
'#8b5cf6', '#14b8a6', '#f97316', '#84cc16', '#e11dba', '#f6f63b'
|
||||
];
|
||||
|
||||
|
||||
|
||||
buildChart(
|
||||
'pathogenChart',
|
||||
'doughnut',
|
||||
@@ -438,7 +431,6 @@ function getColorForPathogen(name) {
|
||||
|
||||
if (colors[name]) return colors[name];
|
||||
|
||||
// fallback random color (for future pathogens)
|
||||
return `hsl(${Math.floor(Math.random() * 360)}, 70%, 60%)`;
|
||||
}
|
||||
function renderPathogenChart(rows) {
|
||||
@@ -481,4 +473,4 @@ function renderSubtypeChart(rows) {
|
||||
);
|
||||
}
|
||||
|
||||
//Seq
|
||||
|
||||
|
||||
@@ -4,23 +4,24 @@
|
||||
<head>
|
||||
<title>NRML Dashboard</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<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://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>
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
|
||||
<script src="/js/dashboard/filter.js"></script>
|
||||
<script src="/js/dashboard/charts.js"></script>
|
||||
|
||||
<script src="/js/dashboard/export.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
body { margin: 0; }
|
||||
|
||||
/* HEADER */
|
||||
.top-navbar {
|
||||
height: 60px;
|
||||
background: #0B8F3C;
|
||||
@@ -33,9 +34,9 @@
|
||||
.brand-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* NAV BAR */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
background: white;
|
||||
@@ -44,11 +45,8 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
}
|
||||
|
||||
/* NAV ITEMS */
|
||||
.btn-theme-outline {
|
||||
background-color: #fff;
|
||||
color: #0B8F3C;
|
||||
@@ -57,7 +55,6 @@
|
||||
|
||||
.btn-theme-outline:hover {
|
||||
background-color: #cce0d4;
|
||||
color: #0B8F3C;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@@ -69,9 +66,7 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #cce0d4;
|
||||
}
|
||||
.nav-item:hover { background: #cce0d4; }
|
||||
|
||||
.active-tab {
|
||||
color: #0B8F3C;
|
||||
@@ -79,47 +74,60 @@
|
||||
background: #e5efe8;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
/*min-height: calc(100vh - 60px);*/
|
||||
min-height: calc(100vh - 110px);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 0px !important;
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.form-select{
|
||||
border-radius: 0px !important;
|
||||
.form-select { border-radius: 0px !important; }
|
||||
.shadow-sm { box-shadow: none !important; }
|
||||
|
||||
.card h3 { color: #0B8F3C; }
|
||||
|
||||
/* EXPORT */
|
||||
.export-control { position: relative; }
|
||||
|
||||
#exportItems {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
pointer-events: none;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.shadow-sm{
|
||||
box-shadow: none !important;
|
||||
#exportItems.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
pointer-events: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
color: #0B8F3C;
|
||||
.export-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.export-content {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
width: 400px;
|
||||
margin: 10% auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* SLIDE FEATURE (from master) */
|
||||
.slide-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -136,23 +144,14 @@
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.slide.active {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
.slide.active { left: 0; opacity: 1; z-index: 2; }
|
||||
.slide.prev { left: -100%; opacity: 0; }
|
||||
|
||||
.slide.prev {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.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;
|
||||
@@ -164,87 +163,104 @@
|
||||
.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; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- TOP HEADER -->
|
||||
<div class="top-navbar">
|
||||
|
||||
<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>
|
||||
|
||||
<!-- NAVIGATION BAR -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar">
|
||||
|
||||
<a href="/dashboard" class="nav-item {{ request()->is('dashboard') ? 'active-tab' : '' }}">
|
||||
Overview
|
||||
</a>
|
||||
|
||||
@foreach($programs as $program)
|
||||
<a href="/dashboard/{{ strtolower($program->code) }}" title="{{$program->name_en}}"
|
||||
@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->where('code', '!=', 'NDS') as $program)--}}
|
||||
|
||||
{{-- @if($program->code === 'SEQ')--}}
|
||||
<div class="ms-auto d-flex align-items-center gap-2 pe-3">
|
||||
|
||||
{{-- <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-4 pe-3">
|
||||
<button type="button" onclick="reloadDataSource()" class="btn btn-sm btn-theme-outline" style="border-radius: 0px !important;">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Main Wrapper -->
|
||||
<div class="main-wrapper">
|
||||
</div>
|
||||
|
||||
<!-- Page Content -->
|
||||
</div>
|
||||
|
||||
<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>
|
||||
function reloadDataSource() {
|
||||
fetch(`/api/dashboard/reload`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
location.reload()
|
||||
});
|
||||
.then(() => location.reload());
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user