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" 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} 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) {
                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>
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
rearranged files 2024-02-10 08:51:27 -08:00			`<div id="left-col" class="cr-all">`
added htmx swapping and url history features 2024-01-13 18:33:26 -08:00			`<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>`
rearranged files 2024-02-10 08:51:27 -08:00			`<div id="right-col" class="cr-all">`
added more to right quick access 2024-01-27 12:20:25 -08:00			`<div id="transaction-quick-access-panel">`
			`<div class="t-header">`
added stuff to the transactions pane 2024-02-09 19:02:08 -08:00			`<!--`
added more to right quick access 2024-01-27 12:20:25 -08:00			`<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>`
added stuff to the transactions pane 2024-02-09 19:02:08 -08:00			`-->`
added more to right quick access 2024-01-27 12:20:25 -08:00			`<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">`
added stuff to the transactions pane 2024-02-09 19:02:08 -08:00			`<i data-feather="file-plus"></i>`
added more to right quick access 2024-01-27 12:20:25 -08:00			`</button>`
rearranged files 2024-02-10 08:51:27 -08:00			`{{.NewTransactionPane}}`
added more to right quick access 2024-01-27 12:20:25 -08:00			`</div>`
			`<div`
			`class="t-list-container"`
			`hx-get="/components/data/transaction_quick_access"`
			`hx-trigger="load"`
			`>`

			`</div>`
			`</div>`
added two transaction panels 2024-01-24 18:58:29 -08:00			`</div>`
added more to right quick access 2024-01-27 12:20:25 -08:00			`<div style="height: 25%"></div>`
switched to css properties 2024-01-14 18:00:51 -08:00
rearranged files 2024-02-10 08:51:27 -08:00			`{{.QuickAccessPane}}`
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) {`
added stuff to the transactions pane 2024-02-09 19:02:08 -08:00			`var charts = event.detail.target.querySelectorAll('.chartjs-chart');`
switched to intelligent check for chartjs chart 2024-01-23 19:21:19 -08:00			`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>`