efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(18): adding dynamic data

This commit is contained in:
efim 2024-03-13 17:08:03 +00:00
parent 269cb2967c
commit e81a22dd10
2 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
18-expenses-chart/main.go
View File

@ -4,12 +4,17 @@ import (
"fmt"
"net/http"
"sunshine.industries/temp-exercise/templates"
"github.com/a-h/templ"
"sunshine.industries/temp-exercise/templates"
)
func main() {
component := templates.IndexPage()
component := templates.IndexPage(templates.PageData{
Balance: 1021.12,
Expenses: []float32{37.45, 34.91, 37.36, 31.07, 7.39, 43.28, 25.48},
TotalThisMonth: 612.41,
PercentComparedToLastMonth: 3.1,
})
http.Handle("/", templ.Handler(component))

27
18-expenses-chart/templates/index.templ
View File

@ -3,12 +3,17 @@ package templates
import "fmt"
import "slices"
var costs []float32 = []float32{17.45, 34.91, 52.36, 31.07, 23.39, 43.28, 25.48}
type PageData struct {
Balance float32
Expenses []float32
TotalThisMonth float32
PercentComparedToLastMonth float32
}
templ myBalanceComponent() {
templ myBalanceComponent(balance float32) {
<div class="rounded-xl text-neutral-very-pale-orange text-xs bg-primary-soft-red p-4 shadow">
My balance
<p class="text-xl font-bold">$921.48</p>
<p class="text-xl font-bold">${ fmt.Sprintf("%.2f", balance) }</p>
</div>
}
@ -18,7 +23,7 @@ var days []string = []string{"mon", "tue", "wed", "thu", "fri", "sat", "sun"}
// with all attributes computed from the expenses slice
// the percentages of the columns, current day number, etc
// NOTE: this seems to be the way to mix go calculations and templates
func prepareSummaryComponent(expenses []float32) templ.Component {
func prepareSummaryComponent(expenses []float32, totalThisMonth, percentComparedToLastMonth float32) templ.Component {
fmt.Println("hello, preparing expenses: ", expenses)
max := slices.Max(expenses)
percentages := make([]float32, 0, len(expenses))
@ -28,7 +33,7 @@ func prepareSummaryComponent(expenses []float32) templ.Component {
currentDayNum := 2
return spendingSummaryComponent(expenses, percentages, currentDayNum)
return spendingSummaryComponent(expenses, percentages, currentDayNum, percentComparedToLastMonth, totalThisMonth)
}
css expenseBarVars(percentage float32) {
@ -58,7 +63,7 @@ templ expensesChart(expenses, percentages []float32, currentDayNum int) {
}
// Big container with chard and total expenses of the week
templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int) {
templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum int, totalThisMonth, percentComparedToLastMonth float32) {
<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 py-6 flex flex-col gap-y-4">
<p2 class="text-neutral-dark-brown text-xl font-bold pb-6">Spending - Last 7 days</p2>
@expensesChart(expenses, percentages, currentDayNum)
@ -66,17 +71,17 @@ templ spendingSummaryComponent(expenses, percentages []float32, currentDayNum in
<div class="grid grid-cols-2 text-sm text-neutral-medium-brown">
<p class="col-span-full">Total this month</p>
<div class="grow">
<p class="grid items-center text-neutral-dark-brown text-2xl font-bold h-full">$478.33</p>
<p class="grid items-center text-neutral-dark-brown text-2xl font-bold h-full">$ { fmt.Sprintf("%.2f", totalThisMonth) }</p>
</div>
<div class="text-right">
<p class="text-neutral-dark-brown font-bold">+2.4%</p>
<p class="text-neutral-dark-brown font-bold">{ fmt.Sprintf("%.2f", percentComparedToLastMonth) }%</p>
from last month
</div>
</div>
</div>
}
templ IndexPage() {
templ IndexPage(pageData PageData) {
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
@ -96,8 +101,8 @@ templ IndexPage() {
</head>
<body class="bg-neutral-cream text-bold p-4 h-full grid items-center">
<div class="flex flex-col gap-4">
@myBalanceComponent()
@prepareSummaryComponent(costs)
@myBalanceComponent(pageData.Balance)
@prepareSummaryComponent(pageData.Expenses, pageData.PercentComparedToLastMonth, pageData.TotalThisMonth)
</div>
<div class="attribution fixed bottom-0 inset-x-0">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.