From 9c95c7889ff6901bee13e77860172e03500cd9cd Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 26 Oct 2022 00:54:55 -0700
Subject: transaction filters

---
 .../transactions/[...page]/+page.server.js         | 18 +++++-
 .../[username]/transactions/[...page]/+page.svelte | 71 +++++++++++++++++++---
 src/routes/send/[...text]/+page.svelte             | 25 ++++----
 .../send/user/[username]/[...amount]/+page.svelte  | 11 ++--
 4 files changed, 96 insertions(+), 29 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/[username]/transactions/[...page]/+page.server.js b/src/routes/[username]/transactions/[...page]/+page.server.js
index faa8a1ab..caa2e155 100644
--- a/src/routes/[username]/transactions/[...page]/+page.server.js
+++ b/src/routes/[username]/transactions/[...page]/+page.server.js
@@ -3,12 +3,24 @@ import { get, auth } from '$lib/utils';
 let offset = 25;
 
 export async function load({ cookies, params, request }) {
-	let page = parseInt(params.page || 1);
-	let transactions = await get('/payments', auth(cookies));
+	let parts = params.page.split('/');
+
+	let start, end, page;
+	if (parts.length === 1) [page] = parts;
+	if (parts.length === 2) [start, page] = parts;
+	if (parts.length === 3) [start, end, page] = parts;
+	if (!parseInt(page)) page = 1;
+
+	let url = '/payments';
+	if (start && end) url += `?start=${start}&end=${end}`;
+	else if (start) url += `?start=${start}`;
+	else if (end) url += `?end=${end}`;
+
+	let transactions = await get(url, auth(cookies));
 	let total = transactions.length;
 	let pages = new Array(Math.ceil(total / offset));
 	let i = (page - 1) * offset;
 	transactions = transactions.slice(i, i + offset);
 
-	return { total, transactions, page, pages };
+	return { total, transactions, page, pages, start, end };
 }
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index b957caf8..cf809445 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -1,23 +1,61 @@
 <script>
+	import { Icon } from '$comp';
 	import { onMount } from 'svelte';
 	import { formatDistance, parseISO } from 'date-fns';
 	import { newPayment } from '$lib/store';
 	import { t } from '$lib/translations';
 	import { f, s, sats } from '$lib/utils';
 	import { page } from '$app/stores';
+	import { differenceInDays, getUnixTime, sub } from 'date-fns';
 
 	export let data;
 
-	let { user } = data;
+	let { start, end, user } = data;
+
+	let presets = [
+		{ title: 'Today', start: sub(new Date(), { days: 1 }), end: null },
+		{ title: '7 days', start: sub(new Date(), { days: 7 }), end: null },
+		{ title: 'Last month', start: sub(new Date(), { months: 1 }), end: null },
+		{ title: 'All', start: null, end: null }
+	];
+
+	$: selection = start
+		? presets.findIndex((p) => Math.abs(differenceInDays(new Date(start * 1000), p.start)) < 1)
+		: presets.length - 1;
 
 	let p,
 		total,
 		transactions = [],
 		pages = [];
-	$: data && ({ page: p, pages, total, transactions } = data);
+	$: data && ({ page: p, pages, start, end, total, transactions } = data);
 
 	$: $page && ($newPayment = false);
 	$: $newPayment && invalidate(`/users/${user.username}`);
+
+	let csv = () => {
+		const keys = ['hash', 'updatedAt', 'rate', 'currency', 'amount', 'fee', 'tip'];
+		const csv =
+			keys.map((k) => `"${k}"`).join(',') +
+			'\n' +
+			transactions.map((r) => keys.map((k) => `"${r[k]}"`).join(',')).join('\n');
+
+		const filename = 'transactions.csv';
+		let blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+		if (navigator.msSaveBlob) {
+			navigator.msSaveBlob(blob, filename);
+		} else {
+			let link = document.createElement('a');
+			if (link.download !== undefined) {
+				let url = URL.createObjectURL(blob);
+				link.setAttribute('href', url);
+				link.setAttribute('download', filename);
+				link.style.visibility = 'hidden';
+				document.body.appendChild(link);
+				link.click();
+				document.body.removeChild(link);
+			}
+		}
+	};
 </script>
 
 <div class="mt-24 mb-20">
@@ -26,13 +64,32 @@
 	</h1>
 
 	<div class="container w-full mx-auto md:text-lg px-10 lg:px-72">
-		<div class="flex flex-wrap justify-end mb-8">
+		<div class="flex text-md text-secondary flex-wrap mb-4">
+			<div class="flex flex-wrap gap-2">
+				{#each presets as { start, end, title }, i}
+					<a
+						class:active={selection === i}
+						href={`/${user.username}/transactions/${start ? getUnixTime(start) + '/' : ''}1`}
+					>
+						<button class="rounded-full border py-2 px-5 hover:opacity-80 mb-2">
+							<div class="my-auto">{title}</div>
+						</button>
+					</a>
+				{/each}
+			</div>
+			<button class="ml-auto rounded-xl border py-2 px-5 hover:opacity-80 mb-2 flex" on:click={csv}>
+				<Icon icon="save" style="opacity-50 mr-2" />
+				<div class="my-auto">Export</div>
+			</button>
+		</div>
+
+		<div class="flex flex-wrap justify-center mb-8">
 			{#if pages.length > 1}
 				{#each pages as _, i}
 					<a
 						class="mr-1 last:mr-0"
 						href={`/${user.username}/transactions/${i + 1}`}
-						class:active={p === i + 1}
+						class:active={parseInt(p) === i + 1}
 					>
 						<div class="border py-2 rounded-full border-2 w-12 h-12 hover:opacity-80 text-center">
 							{i + 1}
@@ -44,7 +101,7 @@
 
 		<div class="text-secondary grid grid-cols-3 mb-5">
 			<h2>{$t('user.transactions.AMOUNT')}</h2>
-			<h2 class="text-center">{$t('user.transactions.TYPE')}</h2>
+			<h2 class="text-center" />
 			<h2 class="text-right">{$t('user.transactions.TIME')}</h2>
 		</div>
 
@@ -85,7 +142,7 @@
 </div>
 
 <style>
-	.active div {
-		@apply bg-gray-100;
+	.active * {
+		@apply bg-black text-white border-black;
 	}
 </style>
diff --git a/src/routes/send/[...text]/+page.svelte b/src/routes/send/[...text]/+page.svelte
index fe949617..1311422e 100644
--- a/src/routes/send/[...text]/+page.svelte
+++ b/src/routes/send/[...text]/+page.svelte
@@ -10,8 +10,8 @@
 	export let form;
 
 	let el;
-	let placeholder = 'Address, Invoice or Username';
-	let text = placeholder;
+	let placeholder = 'Paste a bitcoin address, lightning invoice or coinos username';
+	let text;
 
 	let focus = () => text === placeholder && (text = '');
 	let keypress = (e) => e.key === 'Enter' && (e.preventDefault() || el.click());
@@ -25,7 +25,11 @@
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<form method="POST" class="container px-4 mt-20 max-w-xl mx-auto" use:enhance>
+<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-8">
+	Send bitcoin or lightning
+</h1>
+
+<form method="POST" class="container px-4 max-w-xl mx-auto" use:enhance>
 	{#if form?.error}
 		<div class="text-red-600 text-center" in:fly>
 			{form.error}
@@ -35,17 +39,12 @@
 		<label for="invoice" class="font-bold mb-1 block">To</label>
 		<input type="hidden" name="text" bind:value={text} />
 
-		<div
-			class="expandable-textarea"
-			class:text-gray-400={text === placeholder}
-			role="textbox"
-			contenteditable
-			bind:textContent={text}
-			on:focus={focus}
+		<textarea
+			{placeholder}
 			on:keypress={keypress}
-		>
-			{text}
-		</div>
+			class="w-full p-4 border rounded-xl h-48"
+			bind:value={text}
+		/>
 	</div>
 
 	<div class="flex justify-end">
diff --git a/src/routes/send/user/[username]/[...amount]/+page.svelte b/src/routes/send/user/[username]/[...amount]/+page.svelte
index 6f4cb313..89cec12f 100644
--- a/src/routes/send/user/[username]/[...amount]/+page.svelte
+++ b/src/routes/send/user/[username]/[...amount]/+page.svelte
@@ -50,11 +50,10 @@
 	</div>
 {/if}
 
-<div class="container px-4 mt-20 max-w-xl mx-auto">
+<div class="container px-4 mt-20 max-w-xl mx-auto space-y-8">
 	{#if amount}
-		<div class="text-center mb-8">
-			<h1 class="text-xl md:text-2xl text-secondary mb-2">Send</h1>
-			<p class="text-6xl break-words mb-4">
+		<div class="text-center mb-8 space-y-5">
+			<p class="text-5xl break-words">
 				{fiat ? f(amountFiat, currency) : s(amount)}
 				{#if !fiat}
 					<span class="text-xl md:text-2xl text-secondary">sats</span>
@@ -64,8 +63,8 @@
 			<h1 class="text-xl md:text-2xl text-secondary mb-2">to</h1>
 
 			<div class="flex p-1 gap-2 justify-center">
-				<Avatar user={recipient} />
-				<p class="text-6xl break-words my-auto">{recipient.username}</p>
+				<Avatar user={recipient} size={'20'} />
+				<p class="text-4xl break-words my-auto">{recipient.username}</p>
 			</div>
 		</div>
 	{:else}
-- 
cgit v1.2.3