added two transaction panels

This commit is contained in:
Nickiel12 2024-01-24 18:58:29 -08:00
parent e8d6c53974
commit 71caaa8230
10 changed files with 74 additions and 17 deletions

View file

@ -14,7 +14,7 @@ templ dashboard() {
<div class="w-50"> <div class="w-50">
<canvas <canvas
class="chartjs-chart" class="chartjs-chart"
data-chart-endpoint="/web/dashboard/expenditure_chart" data-chart-endpoint="/components/data/expenditure_chart"
data-chart-type="historical_vs_current" data-chart-type="historical_vs_current"
id="IncomeVsExpenditureChart" id="IncomeVsExpenditureChart"
></canvas> ></canvas>
@ -22,7 +22,7 @@ templ dashboard() {
<div class="w-50 c-surface1" style="overflow-y: scroll"> <div class="w-50 c-surface1" style="overflow-y: scroll">
<div class="m-4 my-5" <div class="m-4 my-5"
hx-trigger="load delay:0.25s" hx-trigger="load delay:0.25s"
hx-get="web/account_summaries" hx-get="/components/account_summaries"
> >
</div> </div>
</div> </div>
@ -66,7 +66,7 @@ templ dashboard() {
</thead> </thead>
<tbody <tbody
hx-trigger="load delay:0.25s" hx-trigger="load delay:0.25s"
hx-get="/web/transaction_table_rows" hx-get="/components/data/transaction_table_rows"
hx-params="" hx-params=""
> >
</tbody> </tbody>

View file

@ -39,6 +39,18 @@ func getTransactionsRows(w http.ResponseWriter, req *http.Request) {
component.Render(context.Background(), w); component.Render(context.Background(), w);
} }
func getTransactionQuickAccess(w http.ResponseWriter, req *http.Request) {
component := transaction_quick_access();
component.Render(context.Background(), w);
}
func getRightPanelQuickAccess(w http.ResponseWriter, req *http.Request) {
component := right_panel_quick_access();
component.Render(context.Background(), w);
}
func getExpenditureChart(w http.ResponseWriter, req *http.Request) { func getExpenditureChart(w http.ResponseWriter, req *http.Request) {
data_package := struct{ data_package := struct{
Labels []string `json:"labels"` Labels []string `json:"labels"`

View file

@ -37,7 +37,7 @@ templ account_summary_rows(accounts *[]types.TwoIntsItem){
<div class="w-75" style="height:75px"> <div class="w-75" style="height:75px">
<canvas <canvas
class="chartjs-chart sparkline-chart" class="chartjs-chart sparkline-chart"
data-chart-endpoint={"/web/dashboard/account_summary/" + strconv.Itoa(value.Item2)} data-chart-endpoint={"/components/data/account_summary/" + strconv.Itoa(value.Item2)}
data-chart-type="sparkline_summary" data-chart-type="sparkline_summary"
></canvas> ></canvas>
</div> </div>
@ -56,3 +56,14 @@ templ account_summary_rows(accounts *[]types.TwoIntsItem){
</div> </div>
} }
} }
templ transaction_quick_access() {
<div class="c-base h-100">
<p> Hello world </p>
</div>
}
templ right_panel_quick_access() {
<div class="c-base h-100">
</div>
}

View file

@ -29,11 +29,15 @@ func WebRouter() http.Handler {
r := chi.NewRouter() r := chi.NewRouter()
r.Get("/", getDashboard) r.Get("/", getDashboard)
r.Get("/transactions", getTransactionsPage) r.Get("/transactions", getTransactionsPage)
r.Get("/web/transaction_table_rows", getTransactionsRows)
r.Get("/web/account_summaries", getAccountSummaries) r.Get("/components/account_summaries", getAccountSummaries)
r.Get("/web/dashboard/expenditure_chart", getExpenditureChart) r.Get("/components/transactions_quick_access", getTransactionQuickAccess)
r.Get("/web/dashboard/account_summary/{accountID}", getAccountSummaryChart) r.Get("/components/right_panel_quick_access", getRightPanelQuickAccess)
r.Handle("/chart.js/*", http.StripPrefix("/chart.js/", http.FileServer(http.Dir("web/node_modules/chart.js/"))))
r.Get("/components/data/transaction_table_rows", getTransactionsRows)
r.Get("/components/data/expenditure_chart", getExpenditureChart)
r.Get("/components/data/account_summary/{accountID}", getAccountSummaryChart)
r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static/")))) r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static/"))))
return r return r
} }

View file

@ -47,3 +47,4 @@ nav {
background-color: var(--#{$prefix}-nav-hover); background-color: var(--#{$prefix}-nav-hover);
} }
} }

View file

@ -12,7 +12,7 @@ $border-radius: 8px;
body { body {
background-color: var(--#{$prefix}-bg); background-color: var(--#{$prefix}-base);
height: 97vh; height: 97vh;
} }
@ -53,7 +53,7 @@ div#below-header {
div#left-col { div#left-col {
width: 15vw; width: 15vw;
padding: 10px; padding: 10px;
background-color: var(--#{$prefix}-nav-bg); background-color: var(--#{$prefix}-nav-base);
border-radius: $border-radius; border-radius: $border-radius;
} }
@ -77,4 +77,18 @@ div#right-col {
padding: 10px; padding: 10px;
background-color: var(--#{$prefix}-nav-bg); background-color: var(--#{$prefix}-nav-bg);
border-radius: $border-radius; border-radius: $border-radius;
display: flex;
flex-direction: column;
}
#transactions-quick-access {
border-radius: $border-radius;
height: 500px;
}
#right-panel-quick-access {
border-radius: $border-radius;
margin-top: auto;
margin-bottom: 10px;
height: 300px;
} }

View file

@ -118,7 +118,7 @@ $w_h_sizes: (
} }
.btn-c-invert { .btn-c-invert {
color: var(--#{$prefix}-bg) !important; color: var(--#{$prefix}-base) !important;
} }
.btn-c-invert:hover { .btn-c-invert:hover {
color: var(--#{$prefix}-text) !important; color: var(--#{$prefix}-text) !important;
@ -160,7 +160,7 @@ table.table-striped {
tbody { tbody {
tr { tr {
&.row_awaiting_processing { &.row_awaiting_processing {
background-color: var(--#{$prefix}-bg) !important; background-color: var(--#{$prefix}-base) !important;
max-width: 0px; max-width: 0px;
div { div {
opacity: 0; opacity: 0;
@ -200,7 +200,7 @@ table.table-striped {
left: 0; left: 0;
font-size: 1em; font-size: 1em;
background-color: var(--#{$prefix}-overlay0); background-color: var(--#{$prefix}-overlay0);
color: var(--#{$prefix}-bg); color: var(--#{$prefix}-base);
border-radius: 0px 0px $border-radius $border-radius; border-radius: 0px 0px $border-radius $border-radius;
border-style: solid; border-style: solid;
border-color: var(--#{$prefix}-overlay2); border-color: var(--#{$prefix}-overlay2);

View file

@ -2,7 +2,7 @@
@each $flavor, $color in catppuccin.$palette { @each $flavor, $color in catppuccin.$palette {
body.#{$flavor} { body.#{$flavor} {
--#{$prefix}-bg: #{map-get($color, 'base')}; --#{$prefix}-base: #{map-get($color, 'base')};
--#{$prefix}-crust: #{map-get($color, 'crust')}; --#{$prefix}-crust: #{map-get($color, 'crust')};
--#{$prefix}-mantle: #{map-get($color, 'mantle')}; --#{$prefix}-mantle: #{map-get($color, 'mantle')};
--#{$prefix}-surface0: #{map-get($color, 'surface0')}; --#{$prefix}-surface0: #{map-get($color, 'surface0')};

View file

@ -56,7 +56,22 @@
{{.InnerHtml}} {{.InnerHtml}}
</div> </div>
<div id="right-col"> <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>
</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 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>

View file

@ -62,7 +62,7 @@ templ transactions_page(userID int, accounts *[]string) {
<button <button
class="borderless-btn ms-auto me-3 c-green ch-teal" class="borderless-btn ms-auto me-3 c-green ch-teal"
style="color: var(--pf-bg);" style="color: var(--pf-base);"
> >
<i class="" data-feather="plus"></i> <i class="" data-feather="plus"></i>
Add New Add New
@ -99,7 +99,7 @@ templ transactions_page(userID int, accounts *[]string) {
</thead> </thead>
<tbody <tbody
hx-trigger="load delay:0.25s" hx-trigger="load delay:0.25s"
hx-get="/web/transaction_table_rows" hx-get="/components/data/transaction_table_rows"
hx-params="" hx-params=""
> >
</tbody> </tbody>