Reverse mouse scroll direction

I found myself scrolling in the wrong direction... This should help
Default scrolling payment date to first of month
2024-08-31 12:10:57 +02:00 · 2024-08-31 11:59:57 +02:00 · 2024-08-19 14:40:24 +02:00 · 2024-08-19 14:34:47 +02:00 · 2024-08-19 14:03:44 +02:00 · 2024-08-19 14:00:35 +02:00
12 changed files with 156 additions and 56 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8"/>
-    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-    <title>wails-template</title>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>bill-manager</title>
 </head>
+
 <body>
-<div id="app"></div>
-<script src="./src/main.ts" type="module"></script>
+    <div id="app"></div>
+    <script src="./src/main.ts" type="module"></script>
 </body>
-</html>
+
+</html>
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Toaster } from "svelte-sonner";
-	import Header from "$lib/components/Header.svelte";
 	import Router from "$lib/router/Router.svelte";
 	import { Close } from "$wails/main/App";
+	import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";

 	function keyDown(event: KeyboardEvent) {
 		if (event.ctrlKey && event.key == "r") {
@@ -11,13 +11,26 @@
 		if (event.ctrlKey && event.key == "w") {
 			Close();
 		}
+		if (event.key == "ArrowLeft") {
+			scrollingTimeFrameStore.prev();
+		}
+		if (event.key == "ArrowRight") {
+			scrollingTimeFrameStore.next();
+		}
+	}
+	function scroll(event: WheelEvent) {
+		if (event.deltaY < 0) {
+			scrollingTimeFrameStore.prev();
+		} else {
+			scrollingTimeFrameStore.next();
+		}
 	}
 </script>

-<svelte:window on:keydown={keyDown} />
+<svelte:window on:keydown={keyDown} on:wheel={scroll} />
 <Toaster theme="dark" expand visibleToasts={9} />
 <template>
-	<Header />
+	<!-- <Header /> -->
 	<main class="flex-1">
 		<Router />
 	</main>
--- a/frontend/src/lib/components/PaymentBillComp.svelte
+++ b/frontend/src/lib/components/PaymentBillComp.svelte
@@ -1,17 +1,45 @@
 <script lang="ts">
 	import { type PaymentBill } from "$lib/types";
+	import { SetPaid } from "$wails/main/App";
+	import { toast } from "svelte-sonner";

 	export let paymentBill: PaymentBill = {
 		id: -1,
 		name: "none",
 		payment: null,
 	};
+	export let monthFor: Date = new Date();

-	console.log(paymentBill);
+	let paymentDate: string = "";
+	$: {
+		if (!!paymentBill.payment?.paymentDate) {
+			// @ts-ignore Yes split exists... The type is time.Time but it's actually a string
+			// Because typescript is a worthless waste of bytes
+			// And I don't know how to properly convert time.Time to Date or String
+			// So I'm doing this bullshit
+			paymentDate = paymentBill.payment!.paymentDate.split("T")[0];
+		}
+	}
+
+	async function doPaid(event: MouseEvent) {
+		const res = await SetPaid(paymentBill.id, monthFor);
+		if (!res.success) {
+			toast.error(`failed setting paid for ${paymentBill.id} and month ${monthFor} with error ${res.error}`);
+			return;
+		}
+		paymentBill.payment = res.data;
+	}
 </script>

 <template>
-	<div>
-		<p>{paymentBill.name}</p>
+	<div class="grid grid-cols-2 w-full text-start px-3 text-xl">
+		<p class={paymentBill.payment == null ? "text-red-700" : ""}>{paymentBill.name}</p>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<p
+			class="h-[1.6em] cursor-pointer border-2 border-transparent hover:border-solid hover:border-sky-500"
+			on:click={doPaid}
+		>
+			{paymentDate}
+		</p>
 	</div>
 </template>
--- a/frontend/src/lib/components/Payments.svelte
+++ b/frontend/src/lib/components/Payments.svelte
@@ -6,6 +6,12 @@
 	import PaymentBillComp from "./PaymentBillComp.svelte";

 	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 } = {};
 	for (const bill of $billsStore) {
@@ -30,9 +36,14 @@
 </script>

 <template>
-	<div>
-		{#each Object.values(paymentsModel) as payment}
-			<PaymentBillComp paymentBill={payment} />
-		{/each}
+	<div class="border-double border-2 border-gray-500 m-1">
+		<div class="text-4xl font-bold">
+			{dateString}
+		</div>
+		<div class="">
+			{#each Object.values(paymentsModel) as payment}
+				<PaymentBillComp paymentBill={payment} monthFor={date} />
+			{/each}
+		</div>
 	</div>
 </template>
--- a/frontend/src/lib/router/routes/Home.svelte
+++ b/frontend/src/lib/router/routes/Home.svelte
@@ -1,12 +1,26 @@
 <script lang="ts">
 	import Payments from "$lib/components/Payments.svelte";
+	import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
 	import { lastMonthPaymentsStore } from "$lib/store/lastMonthPaymentsStore";
 	import { thisMonthPaymentsStore } from "$lib/store/thisMonthPaymentsStore";

-
+	let forceupdate = false;
+	thisMonthPaymentsStore.subscribe(() => {
+		forceupdate = !forceupdate;
+	});
+	lastMonthPaymentsStore.subscribe(() => {
+		forceupdate = !forceupdate;
+	});
 </script>

 <template>
-	<Payments payments={$thisMonthPaymentsStore} />
-	<Payments payments={$lastMonthPaymentsStore} />
-</template>
+	<div class="grid grid-cols-2">
+		{#if forceupdate}
+			<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
+			<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
+		{:else}
+			<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
+			<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
+		{/if}
+	</div>
+</template>
--- a/frontend/src/lib/store/lastMonthPaymentsStore.ts
+++ b/frontend/src/lib/store/lastMonthPaymentsStore.ts
@@ -2,13 +2,11 @@ import { get, type Writable, writable } from "svelte/store";
 import { GetPaymentsForMonth } from "$wails/main/App";
 import { main } from "$wails/models";
 import { toast } from "svelte-sonner";
-import { nowStore } from "$lib/store/nowStore";
+import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";

 async function createStore(): Promise<Writable<main.Payment[]>> {
 	const payments: main.Payment[] = [];
-	const now = new Date();
-	now.setMonth(get(nowStore).getMonth() - 1)
-	const res = await GetPaymentsForMonth(now);
+	const res = await GetPaymentsForMonth(get(scrollingTimeFrameStore).from);
 	if (!res.success) {
 		toast.error("Error getting payments " + res.error);
 	} 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 };
--- a/frontend/src/lib/store/nowStore.ts
+++ b/frontend/src/lib/store/nowStore.ts
@@ -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();
--- a/frontend/src/lib/store/scrollingTimeFrameStore.ts
+++ b/frontend/src/lib/store/scrollingTimeFrameStore.ts
@@ -0,0 +1,34 @@
+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();
+	thism.setDate(1);
+	lastm.setDate(1);
+	thism.setMonth(thism.getMonth() - 1);
+	lastm.setMonth(lastm.getMonth() - 2);
+
+	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();
--- a/frontend/src/lib/store/thisMonthPaymentsStore.ts
+++ b/frontend/src/lib/store/thisMonthPaymentsStore.ts
@@ -2,12 +2,11 @@ import { get, type Writable, writable } from "svelte/store";
 import { GetPaymentsForMonth } from "$wails/main/App";
 import { main } from "$wails/models";
 import { toast } from "svelte-sonner";
-import { nowStore } from "$lib/store/nowStore";
+import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";

 async function createStore(): Promise<Writable<main.Payment[]>> {
 	const payments: main.Payment[] = [];
-	const now = get(nowStore)
-	const res = await GetPaymentsForMonth(now);
+	const res = await GetPaymentsForMonth(get(scrollingTimeFrameStore).to);
 	if (!res.success) {
 		toast.error("Error getting payments " + res.error);
 	} 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 };
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -5,3 +5,7 @@ export type PaymentBill = {
 	name: string;
 	payment: main.Payment|null;
 };
+export type ScrollingTimeframe = {
+	from: Date;
+	to: Date;
+}
--- a/go.mod
+++ b/go.mod
@@ -1,4 +1,4 @@
-module wails-template
+module bill-manager

 go 1.21

--- a/wails.json
+++ b/wails.json
@@ -1,7 +1,7 @@
 {
  "$schema": "https://wails.io/schemas/config.v2.json",
-  "name": "wails-template",
-  "outputfilename": "wails-template",
+  "name": "bill-manager",
+  "outputfilename": "bill-manager",
  "frontend:install": "pnpm install",
  "frontend:build": "pnpm build",
  "frontend:dev:watcher": "pnpm dev",
Author	SHA1	Message	Date
PhatPhuckDave	123b2961a2	Reverse mouse scroll direction I found myself scrolling in the wrong direction... This should help	2024-08-31 12:10:57 +02:00
PhatPhuckDave	f1c8c394c9	Default scrolling payment date to first of month	2024-08-31 11:59:57 +02:00
PhatPhuckDave	e83fb7abb8	Enable scroll through time with mousewheel	2024-08-19 14:40:24 +02:00
PhatPhuckDave	3ca12139cd	Default display to last month Since we pay bills for the last month in the current month...	2024-08-19 14:34:47 +02:00
PhatPhuckDave	236b113c10	Rename application	2024-08-19 14:03:44 +02:00
PhatPhuckDave	4ee622e65e	Enable marking as paid	2024-08-19 14:00:35 +02:00
PhatPhuckDave	2ac082f230	Add force redraw on navigate	2024-08-19 13:55:10 +02:00
PhatPhuckDave	45030f8634	More better displaying	2024-08-19 13:51:00 +02:00
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