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

Compare commits

base: dave:8c10540309fe77fb622392ebb5ee13dd38468b63
Branches Tags
dave:master
dave:1.1.0 dave:1.0.1 dave:1.0.0
...
compare: dave:79b89a01e5b705f178ec6ab8a6caa19b0e134065
Branches Tags
dave:master
dave:1.1.0 dave:1.0.1 dave:1.0.0

4 Commits
8c10540309 ... 79b89a01e5

Author SHA1 Message Date
PhatPhuckDave
79b89a01e5 Refresh payment stores on time frame change 2024-08-19 13:09:14 +02:00
PhatPhuckDave
37a0c52464 Fix scrolling in frame 2024-08-19 13:09:06 +02:00
PhatPhuckDave
f018459818 Rework "nowStore" to scrollingTimeFrameStore that contains both from and to dates 2024-08-19 12:45:37 +02:00
PhatPhuckDave
c5613ee0cc Make formatting a bit more better 
Display dates for months in view
 2024-08-19 12:33:26 +02:00
10 changed files with 99 additions and 54 deletions
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>

10
frontend/src/App.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import { Toaster } from "svelte-sonner"; import { Toaster } from "svelte-sonner";
import Header from "$lib/components/Header.svelte";
import Router from "$lib/router/Router.svelte"; import Router from "$lib/router/Router.svelte";
import { Close } from "$wails/main/App"; import { Close } from "$wails/main/App";
import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
function keyDown(event: KeyboardEvent) { function keyDown(event: KeyboardEvent) {
if (event.ctrlKey && event.key == "r") { if (event.ctrlKey && event.key == "r") {
@@ -11,13 +11,19 @@
if (event.ctrlKey && event.key == "w") { if (event.ctrlKey && event.key == "w") {
Close(); Close();
} }
if (event.key == "ArrowLeft") {
scrollingTimeFrameStore.prev();
}
if (event.key == "ArrowRight") {
scrollingTimeFrameStore.next();
}
} }
</script> </script>
<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>

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

@@ -6,12 +6,8 @@
name: "none", name: "none",
payment: null, payment: null,
}; };
console.log(paymentBill);
</script> </script>
<template> <template>
<div> <p>{paymentBill.name}</p>
<p>{paymentBill.name}</p>
</div>
</template> </template>

19
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> <div class="border-double border-2 border-gray-500 m-1">
{#each Object.values(paymentsModel) as payment} <div class="text-4xl font-bold">
<PaymentBillComp paymentBill={payment} /> {dateString}
{/each} </div>
<div>
{#each Object.values(paymentsModel) as payment}
<PaymentBillComp paymentBill={payment} />
{/each}
</div>
</div> </div>
</template> </template>

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

@@ -1,12 +1,13 @@
<script lang="ts"> <script lang="ts">
import Payments from "$lib/components/Payments.svelte"; import Payments from "$lib/components/Payments.svelte";
import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
import { lastMonthPaymentsStore } from "$lib/store/lastMonthPaymentsStore"; import { lastMonthPaymentsStore } from "$lib/store/lastMonthPaymentsStore";
import { thisMonthPaymentsStore } from "$lib/store/thisMonthPaymentsStore"; import { thisMonthPaymentsStore } from "$lib/store/thisMonthPaymentsStore";
</script> </script>
<template> <template>
<Payments payments={$thisMonthPaymentsStore} /> <div class="grid grid-cols-2">
<Payments payments={$lastMonthPaymentsStore} /> <Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
</div>
</template> </template>

18
frontend/src/lib/store/lastMonthPaymentsStore.ts
View File

@@ -2,13 +2,11 @@ import { get, type Writable, writable } from "svelte/store";
import { GetPaymentsForMonth } from "$wails/main/App"; import { GetPaymentsForMonth } from "$wails/main/App";
import { main } from "$wails/models"; import { main } from "$wails/models";
import { toast } from "svelte-sonner"; import { toast } from "svelte-sonner";
import { nowStore } from "$lib/store/nowStore"; import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
async function createStore(): Promise<Writable<main.Payment[]>> { async function createStore(): Promise<Writable<main.Payment[]>> {
const payments: main.Payment[] = []; const payments: main.Payment[] = [];
const now = new Date(); const res = await GetPaymentsForMonth(get(scrollingTimeFrameStore).from);
now.setMonth(get(nowStore).getMonth() - 1)
const res = await GetPaymentsForMonth(now);
if (!res.success) { if (!res.success) {
toast.error("Error getting payments " + res.error); toast.error("Error getting payments " + res.error);
} else { } else {
@@ -23,4 +21,14 @@ async function createStore(): Promise<Writable<main.Payment[]>> {
}; };
} }
export const lastMonthPaymentsStore = await createStore(); const lastMonthPaymentsStore = await createStore();
scrollingTimeFrameStore.subscribe(async (timeframe) => {
const res = await GetPaymentsForMonth(timeframe.from);
if (!res.success) {
toast.error("Error getting payments " + res.error);
return;
}
lastMonthPaymentsStore.set(res.data);
});
export { lastMonthPaymentsStore };

24
frontend/src/lib/store/nowStore.ts
View File

@@ -1,24 +0,0 @@
import { type Writable, writable } from "svelte/store";
async function createStore(): Promise<Writable<Date> & { next: Function; prev: Function }> {
const { subscribe, update, set } = writable(new Date());
return {
subscribe,
update,
set,
next: () => {
update((now: Date) => {
now.setMonth(now.getMonth() + 1);
return now;
});
},
prev: () => {
update((now: Date) => {
now.setMonth(now.getMonth() - 1);
return now;
});
},
};
}
export const nowStore = await createStore();

31
frontend/src/lib/store/scrollingTimeFrameStore.ts Normal file
View File

@@ -0,0 +1,31 @@
import { type ScrollingTimeframe } from "$lib/types";
import { type Writable, writable } from "svelte/store";
async function createStore(): Promise<Writable<ScrollingTimeframe> & { next: Function; prev: Function }> {
const thism = new Date();
const lastm = new Date();
lastm.setMonth(thism.getMonth() - 1);
const { subscribe, update, set } = writable({ from: lastm, to: thism });
return {
subscribe,
update,
set,
next: () => {
update((frame: ScrollingTimeframe) => {
frame.from.setMonth(frame.from.getMonth() + 1);
frame.to.setMonth(frame.to.getMonth() + 1);
return frame;
});
},
prev: () => {
update((frame: ScrollingTimeframe) => {
frame.from.setMonth(frame.from.getMonth() - 1);
frame.to.setMonth(frame.to.getMonth() - 1);
return frame;
});
},
};
}
export const scrollingTimeFrameStore = await createStore();

17
frontend/src/lib/store/thisMonthPaymentsStore.ts
View File

@@ -2,12 +2,11 @@ import { get, type Writable, writable } from "svelte/store";
import { GetPaymentsForMonth } from "$wails/main/App"; import { GetPaymentsForMonth } from "$wails/main/App";
import { main } from "$wails/models"; import { main } from "$wails/models";
import { toast } from "svelte-sonner"; import { toast } from "svelte-sonner";
import { nowStore } from "$lib/store/nowStore"; import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
async function createStore(): Promise<Writable<main.Payment[]>> { async function createStore(): Promise<Writable<main.Payment[]>> {
const payments: main.Payment[] = []; const payments: main.Payment[] = [];
const now = get(nowStore) const res = await GetPaymentsForMonth(get(scrollingTimeFrameStore).to);
const res = await GetPaymentsForMonth(now);
if (!res.success) { if (!res.success) {
toast.error("Error getting payments " + res.error); toast.error("Error getting payments " + res.error);
} else { } else {
@@ -22,4 +21,14 @@ async function createStore(): Promise<Writable<main.Payment[]>> {
}; };
} }
export const thisMonthPaymentsStore = await createStore(); const thisMonthPaymentsStore = await createStore();
scrollingTimeFrameStore.subscribe(async (timeframe) => {
const res = await GetPaymentsForMonth(timeframe.to);
if (!res.success) {
toast.error("Error getting payments " + res.error);
return;
}
thisMonthPaymentsStore.set(res.data);
});
export { thisMonthPaymentsStore };

4
frontend/src/lib/types.ts
View File

@@ -5,3 +5,7 @@ export type PaymentBill = {
name: string; name: string;
payment: main.Payment|null; payment: main.Payment|null;
}; };
export type ScrollingTimeframe = {
from: Date;
to: Date;
}