diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.html | 4 | ||||
| -rw-r--r-- | src/components/LocationsMap.svelte | 38 | ||||
| -rw-r--r-- | src/routes/[username]/settings/_account.svelte | 39 | ||||
| -rw-r--r-- | src/routes/[username]/transactions/[...page]/+page.server.js | 14 | ||||
| -rw-r--r-- | src/routes/[username]/transactions/[...page]/+page.svelte (renamed from src/routes/[username]/transactions/+page.svelte) | 31 |
5 files changed, 96 insertions, 30 deletions
diff --git a/src/app.html b/src/app.html index ade9fa4b..4e3b66bd 100644 --- a/src/app.html +++ b/src/app.html @@ -8,6 +8,10 @@ <meta property="og:image" content="/icons/logo.svg" /> <title>coinos</title> %sveltekit.head% + <script src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js"></script> + <style> + img.huechange { filter: hue-rotate(170deg); } + </style> </head> <body> <div>%sveltekit.body%</div> diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index 2cff3449..063b4681 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -9,28 +9,54 @@ if (browser) { const leaflet = await import('leaflet'); - // this sets the inital view of the map on page load map = leaflet.map(mapElement).setView([49.267265, -123.1491965], 13); + const myCustomColour = 'orange'; + + const markerHtmlStyles = ` + background-color: ${myCustomColour}; + width: 3rem; + height: 3rem; + display: block; + left: -1.5rem; + top: -1.5rem; + position: relative; + border-radius: 3rem 3rem 0; + transform: rotate(45deg); + border: 1px solid #FFFFFF`; + + const icon = L.divIcon({ + className: 'my-custom-pin', + iconAnchor: [0, 24], + labelAnchor: [-6, 0], + popupAnchor: [0, -36], + html: `<span style="${markerHtmlStyles}" />` + }); + leaflet - .tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + .tileLayer('http://{s}tile.stamen.com/toner/{z}/{x}/{y}.png', { + // leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, - attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' + subdomains: ['', 'a.', 'b.', 'c.', 'd.'], }) .addTo(map); - // business locations + // let tonerLayer = new L.StamenTileLayer("toner"); + // map.addLayer(tonerLayer); + + + leaflet .marker([49.27034, -123.141373]) .addTo(map) .bindPopup( 'Rolf Vancouver <br> 1628 W 1st Ave #231, Vancouver <br> <a href="https://www.rolfbodywork.com" target="_blank" rel="noreferrer">www.rolfbodywork.com</a>' - ); + )._icon.classList.add("huechange"); leaflet .marker([49.26419, -123.15702]) .addTo(map) - .bindPopup('Tacos Jorge <br> 2287 W Broadway, Vancouver'); + .bindPopup('Tacos Jorge <br> 2287 W Broadway, Vancouver')._icon.classList.add("huechange"); } }); diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte index 78d9d511..5057ef5c 100644 --- a/src/routes/[username]/settings/_account.svelte +++ b/src/routes/[username]/settings/_account.svelte @@ -97,25 +97,26 @@ <input type="text" name="address" bind:value={$user.address} /> </div> -<div> - <div class="flex justify-between items-center"> - <span class="font-bold">{$t('user.settings.emailNotifications')}</span> - <Toggle id="email-notify" /> - </div> - <p class="text-secondary mt-1 w-9/12"> - {$t('user.settings.emailNotificationsDescription')} - </p> -</div> - -<div> - <div class="flex justify-between items-center"> - <span class="font-bold">{$t('user.settings.smsNotifications')}</span> - <Toggle id="sms-notify" /> - </div> - <p class="text-secondary mt-1 w-9/12"> - {$t('user.settings.smsNotificationsDescription')} - </p> -</div> +<!-- TODO --> +<!-- <div> --> +<!-- <div class="flex justify-between items-center"> --> +<!-- <span class="font-bold">{$t('user.settings.emailNotifications')}</span> --> +<!-- <Toggle id="email-notify" /> --> +<!-- </div> --> +<!-- <p class="text-secondary mt-1 w-9/12"> --> +<!-- {$t('user.settings.emailNotificationsDescription')} --> +<!-- </p> --> +<!-- </div> --> +<!-- --> +<!-- <div> --> +<!-- <div class="flex justify-between items-center"> --> +<!-- <span class="font-bold">{$t('user.settings.smsNotifications')}</span> --> +<!-- <Toggle id="sms-notify" /> --> +<!-- </div> --> +<!-- <p class="text-secondary mt-1 w-9/12"> --> +<!-- {$t('user.settings.smsNotificationsDescription')} --> +<!-- </p> --> +<!-- </div> --> <div> <span class="font-bold">{$t('user.settings.profileImage')}</span> diff --git a/src/routes/[username]/transactions/[...page]/+page.server.js b/src/routes/[username]/transactions/[...page]/+page.server.js new file mode 100644 index 00000000..d84c895a --- /dev/null +++ b/src/routes/[username]/transactions/[...page]/+page.server.js @@ -0,0 +1,14 @@ +import { get, auth } from '$lib/utils'; + +let offset = 25; + +export async function load({ params, request }) { + let page = parseInt(params.page || 1); + let transactions = await get('/payments', auth(request)); + 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 }; +} diff --git a/src/routes/[username]/transactions/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte index 5a132394..a5209ed8 100644 --- a/src/routes/[username]/transactions/+page.svelte +++ b/src/routes/[username]/transactions/[...page]/+page.svelte @@ -1,12 +1,15 @@ <script> import { AppHeader } from '$comp'; - import { user, newPayment } from '$lib/store'; + import { newPayment } from '$lib/store'; import { t } from '$lib/translations'; - import { f, s } from "$lib/utils"; + import { f, s } from '$lib/utils'; + export let data; - $newPayment = false; + let { user } = data; - $: transactions = $user.payments; + $newPayment = false; + let page, total, transactions = [], pages = []; + $: data && ({ page, pages, total, transactions } = data); </script> <AppHeader /> @@ -16,7 +19,21 @@ {$t('user.transactions.header')} </h1> - <div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg"> + <div class="container w-full mx-auto flex px-10 lg:px-40 mb-8 text-right"> + <div class="ml-auto flex"> + {#if pages.length > 1} + {#each pages as _, i} + <a href={`/${user.username}/transactions/${i+1}`} class:active={page === i + 1}> + <div class="border p-4 px-6 border-r-0 last:border-r"> + {i + 1} + </div> + </a> + {/each} + {/if} + </div> + </div> + + <div class="container w-full mx-auto md:text-lg px-10 lg:px-40"> <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> @@ -55,3 +72,7 @@ </div> </div> </div> + +<style> + .active { @apply font-bold; } +</style> |