web-app-demos/apps/reporter/templates/report.html
2025-03-17 16:11:01 -06:00

98 lines
No EOL
4.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title}</title>
<link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap-icons.min.css">
<link rel="stylesheet" type="text/css" href="/reporter/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/reporter/static/css/tabulator_bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="/reporter/static/css/autocomplete.min.css">
<link rel="shortcut icon" type="image/png" href="/reporter/static/favicon.png">
<link rel="shortcut icon" sizes="192x192" href="/reporter/static/favicon.png">
<link rel="apple-touch-icon" href="/reporter/static/favicon.png">
</head>
<body>
<div id="wrapper" class="d-flex flex-column vh-100">
${menu}
<div class="container-fluid flex-grow-1 min-height-0 z-0">
<div class="row h-100">
<div class="col-md-4 col-xl-3 mh-100">
<div class="bg-body-tertiary mh-100 overflow-y-auto">
<form method="post" id="report_options">
<div class="sticky-top px-3 pt-3 bg-body-tertiary">
<div class="d-flex justify-content-between align-items-center gap-3 mb-2">
<span class="fs-2 fw-medium">Options</span>
<button type="submit" class="btn btn-primary fs-4 text-nowrap"><i class="bi bi-play"></i> Run</button>
<input type="hidden" id="autorun" value="${autorun}">
</div>
<div class="progress bg-dark d-flex mb-2 position-relative" role="progressbar" aria-label="Report progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div id="report_status" class="position-absolute w-100 text-center align-self-center text-light">Ready</div>
<div id="report_progress" class="progress-bar" style="width: 0%"></div>
</div>
<div>
<p class="mb-0">${report_description}</p>
</div>
<hr>
</div>
${options}
<!--
<div class="mb-3">
<label for="slider" class="form-label">Range Slider</label>
<input type="range" class="form-range" id="slider">
</div>
<div class="mb-3">
<label for="dropdown" class="form-label">Dropdown Selector</label>
<select class="form-select" id="dropdown">
<option selected>Select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</div>
-->
<div class="sticky-bottom px-3 pb-3 bg-body-tertiary">
<hr>
<button type="button" id="create_link" class="btn btn-dark w-100"><i class="bi bi-star-fill"></i> Direct link to report with these options</button>
</div>
</form>
</div>
</div>
<div class="col-md-8 col-xl-9 h-100 d-flex flex-column">
<div class="p-3" id="title_container">
<span class="fs-1 fw-medium" id="report_title">${report_title}</span>
</div>
<div id="table-controls" class="btn-toolbar justify-content-between invisible">
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" id="filter" placeholder="Search...">
</div>
<div class="d-none mb-3" id="group-controls">
<button type="button" class="btn btn-secondary" id="btn_expand"><i class="bi bi-arrows-expand"></i> Expand all</button>
<button type="button" class="btn btn-secondary" id="btn_collapse"><i class="bi bi-arrows-collapse"></i> Collapse all</button>
</div>
<div class="btn-group mb-3">
<!--button type="button" class="btn btn-secondary" id="tool_select">Mouse: Drag</button-->
<button type="button" class="btn btn-secondary" id="btn_print"><i class="bi bi-printer"></i> Print</button>
<button type="button" class="btn btn-excel" id="export_excel"><i class="bi bi-file-earmark-spreadsheet"></i> To Excel</button>
</div>
</div>
<div id="datatable" class="flex-grow-1"></div>
</div>
</div>
</div>
</div>
<script src="/static/bootstrap/bootstrap.bundle.min.js"></script>
<script src="/reporter/static/js/luxon.min.js"></script>
<script src="/reporter/static/js/exceljs.bare.min.js"></script>
<script src="/reporter/static/js/tabulator.min.js"></script>
<script src="/reporter/static/js/autocomplete.min.js"></script>
<script src="/reporter/static/js/script_reports.js"></script>
</body>
</html>