dave/bill-manager
1
0
Fork 0
generated from dave/wails-template
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Make formatting a bit more better

Browse Source 
Display dates for months in view
This commit is contained in:
PhatPhuckDave
2024-08-19 12:33:26 +02:00
parent 8c10540309
commit c5613ee0cc
5 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/index.html
View File

@@ -1,12 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>wails-template</title> <title>wails-template</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="./src/main.ts" type="module"></script> <script src="./src/main.ts" type="module"></script>
</body> </body>
</html> </html>

2
frontend/src/App.svelte
View File

@@ -17,7 +17,7 @@
<svelte:window on:keydown={keyDown} /> <svelte:window on:keydown={keyDown} />
<Toaster theme="dark" expand visibleToasts={9} /> <Toaster theme="dark" expand visibleToasts={9} />
<template> <template>
<Header /> <!-- <Header /> -->
<main class="flex-1"> <main class="flex-1">
<Router /> <Router />
</main> </main>

2
frontend/src/lib/components/PaymentBillComp.svelte
View File

@@ -11,7 +11,5 @@
</script> </script>
<template> <template>
<div>
<p>{paymentBill.name}</p> <p>{paymentBill.name}</p>
</div>
</template> </template>

11
frontend/src/lib/components/Payments.svelte
View File

@@ -6,6 +6,12 @@
import PaymentBillComp from "./PaymentBillComp.svelte"; import PaymentBillComp from "./PaymentBillComp.svelte";
export let payments: main.Payment[] = []; export let payments: main.Payment[] = [];
export let date: Date = new Date();
let dateString: string = date.toISOString()
$: {
dateString = date.toISOString().split("T")[0]
dateString = dateString.split("-").slice(0, 2).join("-");
}
const paymentsModel: { [key: number]: PaymentBill } = {}; const paymentsModel: { [key: number]: PaymentBill } = {};
for (const bill of $billsStore) { for (const bill of $billsStore) {
@@ -30,9 +36,14 @@
</script> </script>
<template> <template>
<div class="border-double border-2 border-gray-500 m-1">
<div class="text-4xl font-bold">
{dateString}
</div>
<div> <div>
{#each Object.values(paymentsModel) as payment} {#each Object.values(paymentsModel) as payment}
<PaymentBillComp paymentBill={payment} /> <PaymentBillComp paymentBill={payment} />
{/each} {/each}
</div> </div>
</div>
</template> </template>

12
frontend/src/lib/router/routes/Home.svelte
View File

@@ -1,12 +1,18 @@
<script lang="ts"> <script lang="ts">
import Payments from "$lib/components/Payments.svelte"; import Payments from "$lib/components/Payments.svelte";
import { nowStore } from "$lib/store/nowStore";
import { lastMonthPaymentsStore } from "$lib/store/lastMonthPaymentsStore"; import { lastMonthPaymentsStore } from "$lib/store/lastMonthPaymentsStore";
import { thisMonthPaymentsStore } from "$lib/store/thisMonthPaymentsStore"; import { thisMonthPaymentsStore } from "$lib/store/thisMonthPaymentsStore";
const thisMonth = new Date();
thisMonth.setMonth($nowStore.getMonth());
const previousMonth = new Date();
previousMonth.setMonth($nowStore.getMonth() - 1);
</script> </script>
<template> <template>
<Payments payments={$thisMonthPaymentsStore} /> <div class="grid grid-cols-2">
<Payments payments={$lastMonthPaymentsStore} /> <Payments date={previousMonth} payments={$lastMonthPaymentsStore} />
<Payments date={thisMonth} payments={$thisMonthPaymentsStore} />
</div>
</template> </template>