Recount-Server/web/templates/index.html

133 lines
4.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/site.css">
<script src="/static/htmx.min.js"></script>
<script src="/static/feather.min.js"></script>
<title>{{ .ActivePage }}</title>
</head>
<body class="latte">
<header>
</header>
<div class="d-flex" id="below-header">
<div id="left-col" class="cr-all">
<nav>
<ul>
<li>
<a id="logo-a">Recount</a>
</li>
<li>
<a
hx-get="/"
hx-swap="innerHtml swap:0.2s settle:0.2s"
hx-push-url="true"
hx-boost="true"
hx-target="#main-body-content"
{{ if (eq .ActivePage "Dashboard") }}
class="active"
{{ end }}
>
Dashboard
</a>
</li>
<li>
<a
hx-get="/transactions"
hx-swap="innerHtml swap:0.2s settle:0.2s"
hx-push-url="true"
hx-boost="true"
hx-target="#main-body-content"
{{ if (eq .ActivePage "Transactions") }}
class="active"
{{ end }}
>
Transactions
</a>
</li>
</ul>
</nav>
</div>
<div id="main-body-content">
{{.InnerHtml}}
</div>
<div id="right-col" class="cr-all">
<div id="transaction-quick-access-panel">
<div class="t-header">
<!--
<button
class="borderless-btn btn-sm mx-auto c-green ch-teal"
style="color: var(--pf-base);"
>
<i class="" data-feather="plus"></i>
Add New
</button>
-->
<div class="m-auto d-flex">
<input id="show-pending-transactions" type="checkbox"></input>
<label for="show-pending-transactions">
Show Pending
</label>
</div>
</div>
<div class="t-list">
<div class="tab-div">
<button id="open-draft">
<i data-feather="file-plus"></i>
</button>
{{.NewTransactionPane}}
</div>
<div
class="t-list-container"
hx-get="/components/data/transaction_quick_access"
hx-trigger="load"
>
</div>
</div>
</div>
<div style="height: 25%"></div>
{{.QuickAccessPane}}
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module">
import {
trigger_reset_handlers,
trigger_table_animation,
fill_chart,
close_drafts
} from "/static/index.js";
htmx.onLoad(function (element) {
feather.replace();
if (element.dataset.mainBody) {
close_drafts();
trigger_reset_handlers();
}
if (element.localName === "tr") {
trigger_table_animation();
}
if (element.querySelectorAll("canvas").length > 0) {
element.querySelectorAll("canvas").forEach(function (el) {
fill_chart(el);
});
}
});
document.body.addEventListener('htmx:beforeSwap', function (event) {
var charts = event.detail.target.querySelectorAll('.chartjs-chart');
charts.forEach(function (chart) {
// Destroy each Chart.js chart before swapping content
Chart.getChart(chart).destroy();
});
});
trigger_reset_handlers();
</script>
</body>
</html>