added two transaction panels
This commit is contained in:
parent
e8d6c53974
commit
71caaa8230
10 changed files with 74 additions and 17 deletions
|
@ -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>
|
||||||
|
|
|
@ -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"`
|
||||||
|
|
|
@ -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>
|
||||||
|
}
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -47,3 +47,4 @@ nav {
|
||||||
background-color: var(--#{$prefix}-nav-hover);
|
background-color: var(--#{$prefix}-nav-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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')};
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue