Recount-Server/web/templates/index.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">
            <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">
            <div 
                id="transactions-quick-access"
                hx-get="/components/transactions_quick_access"
                hx-swap="innerHtml swap:0.2s settle:0.2s"
                hx-trigger="load"
            >
            </div>

            <div 
                class=""
                id="right-panel-quick-access"
                hx-get="/components/right_panel_quick_access"
                hx-swap="innerHtml swap:0.2s settle:0.2s"
                hx-trigger="load"
            >
            </div>
        </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} from "/static/index.js";
            htmx.onLoad(function (element) {
                feather.replace();
                if (element.dataset.mainBody) {
                    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) {
                // Get the target element where content will be replaced
                var target = event.detail.target;

                // Check if the target has Chart.js charts
                var charts = 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>
basic example with two types of templates 2024-01-12 16:34:26 -08:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
set up sass and htmx 2024-01-12 20:50:41 -08:00			`<link rel="stylesheet" href="/static/site.css">`
			`<script src="/static/htmx.min.js"></script>`
added dashboard cards 2024-01-15 13:47:16 -08:00			`<script src="/static/feather.min.js"></script>`
added transaction page 2024-01-20 15:05:06 -08:00			`<title>{{ .ActivePage }}</title>`
basic example with two types of templates 2024-01-12 16:34:26 -08:00			`</head>`
switched to css properties 2024-01-14 18:00:51 -08:00			`<body class="latte">`
style setup 2024-01-12 21:59:19 -08:00			`<header>`
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00
style setup 2024-01-12 21:59:19 -08:00			`</header>`
switched to css properties 2024-01-14 18:00:51 -08:00			`<div class="d-flex" id="below-header">`
set up sass and htmx 2024-01-12 20:50:41 -08:00
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00			`<div id="left-col">`
			`<nav>`
			`<ul>`
switched to css properties 2024-01-14 18:00:51 -08:00			`<li>`
			`<a id="logo-a">Recount</a>`
			`</li>`
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00			`<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"`
added transaction page 2024-01-20 15:05:06 -08:00			`{{ if (eq .ActivePage "Dashboard") }}`
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00			`class="active"`
			`{{ end }}`
			`>`
added transaction page 2024-01-20 15:05:06 -08:00			`Dashboard`
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00			`</a>`
set up sass and htmx 2024-01-12 20:50:41 -08:00
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00			`</li>`
			`<li>`
			`<a`
added transaction page 2024-01-20 15:05:06 -08:00			`hx-get="/transactions"`
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00			`hx-swap="innerHtml swap:0.2s settle:0.2s"`
			`hx-push-url="true"`
			`hx-boost="true"`
			`hx-target="#main-body-content"`
added transaction page 2024-01-20 15:05:06 -08:00			`{{ if (eq .ActivePage "Transactions") }}`
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00			`class="active"`
			`{{ end }}`
			`>`
added transaction page 2024-01-20 15:05:06 -08:00			`Transactions`
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00			`</a>`
			`</li>`
			`</ul>`
			`</nav>`
			`</div>`
			`<div id="main-body-content">`
			`{{.InnerHtml}}`
set up sass and htmx 2024-01-12 20:50:41 -08:00			`</div>`
switched to css properties 2024-01-14 18:00:51 -08:00			`<div id="right-col">`
added two transaction panels 2024-01-24 18:58:29 -08:00			`<div`
			`id="transactions-quick-access"`
			`hx-get="/components/transactions_quick_access"`
			`hx-swap="innerHtml swap:0.2s settle:0.2s"`
			`hx-trigger="load"`
			`>`
			`</div>`
switched to css properties 2024-01-14 18:00:51 -08:00
added two transaction panels 2024-01-24 18:58:29 -08:00			`<div`
			`class=""`
			`id="right-panel-quick-access"`
			`hx-get="/components/right_panel_quick_access"`
			`hx-swap="innerHtml swap:0.2s settle:0.2s"`
			`hx-trigger="load"`
			`>`
			`</div>`
switched to css properties 2024-01-14 18:00:51 -08:00			`</div>`
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00			`</div>`
added charts 2024-01-17 20:46:13 -08:00			`<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>`
set up sass and htmx 2024-01-12 20:50:41 -08:00			`<script type="module">`
switched to intelligent check for chartjs chart 2024-01-23 19:21:19 -08:00			`import {trigger_reset_handlers, trigger_table_animation, fill_chart} from "/static/index.js";`
added fading in tables 2024-01-15 19:26:51 -08:00			`htmx.onLoad(function (element) {`
switched to intelligent check for chartjs chart 2024-01-23 19:21:19 -08:00			`feather.replace();`
			`if (element.dataset.mainBody) {`
			`trigger_reset_handlers();`
			`}`
added fading in tables 2024-01-15 19:26:51 -08:00			`if (element.localName === "tr") {`
			`trigger_table_animation();`
switched to intelligent check for chartjs chart 2024-01-23 19:21:19 -08:00			`}`

			`if (element.querySelectorAll("canvas").length > 0) {`
			`element.querySelectorAll("canvas").forEach(function (el) {`
			`fill_chart(el);`
			`});`
added fading in tables 2024-01-15 19:26:51 -08:00			`}`
			`});`
switched to intelligent check for chartjs chart 2024-01-23 19:21:19 -08:00			`document.body.addEventListener('htmx:beforeSwap', function (event) {`
			`// Get the target element where content will be replaced`
			`var target = event.detail.target;`

			`// Check if the target has Chart.js charts`
			`var charts = target.querySelectorAll('.chartjs-chart');`
			`charts.forEach(function (chart) {`
			`// Destroy each Chart.js chart before swapping content`
			`Chart.getChart(chart).destroy();`
			`});`
			`});`
			`trigger_reset_handlers();`
set up sass and htmx 2024-01-12 20:50:41 -08:00			`</script>`
basic example with two types of templates 2024-01-12 16:34:26 -08:00			`</body>`
			`</html>`