yanick/bgg-ottawa-sell-club
2
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

add sorting

Browse Source
This commit is contained in:
Yanick Champoux 2024-02-01 14:37:15 -05:00
parent ae91cf8e65
commit 81164cd897
2 changed files with 85 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierrc.cjs
View File

@ -9,4 +9,5 @@ module.exports = {
svelteSortOrder: 'options-markup-scripts-styles', svelteSortOrder: 'options-markup-scripts-styles',
svelteStrictMode: false, svelteStrictMode: false,
svelteAllowShorthand: true, svelteAllowShorthand: true,
bracketSameLine: true,
}; };

93
src/routes/+page.svelte
View File

@ -1,81 +1,92 @@
<article> <article>
<h1>Ottawa board games for sale and to trade</h1> <h1>Ottawa board games for sale and to trade</h1>
<p>This is a list of games for sale or trade of people living in the Ottawa <p>
This is a list of games for sale or trade of people living in the Ottawa
region, taken from their profiles on region, taken from their profiles on
<a href="https://boardgamegeek.com">Board Game Geek</a>.</p> <a href="https://boardgamegeek.com">Board Game Geek</a>.
</p>
<p>If you want to be added to the list of sellers, you can send me a <p>
<a target="_blank" If you want to be added to the list of sellers, you can send me a
href="https://boardgamegeek.com/geekmail/compose?touser=yenzie"> BGG <a
mail</a>. All I need is your BGG username, and I'll be able to gather target="_blank"
all your games tagged <em>For Trade</em>. If there is a price mentioned in href="https://boardgamegeek.com/geekmail/compose?touser=yenzie">
the <em>Trading Notes</em> of the game (that is, any number prefixed with BGG mail</a
a <em>$</em>), it'll be assumed to be the asking price.</p> >. All I need is your BGG username, and I'll be able to gather all your
games tagged <em>For Trade</em>. If there is a price mentioned in the
<em>Trading Notes</em>
of the game (that is, any number prefixed with a <em>$</em>), it'll be
assumed to be the asking price.
</p>
<p> Have questions, suggestions, anything else? <p>
Discussion of this service happens in the <a Have questions, suggestions, anything else? Discussion of this service
href='https://boardgamegeek.com/thread/3238117/auto-generating-ottawa-specific-saletrade-page'>Ottawa Guild</a>.</p> happens in the <a
href="https://boardgamegeek.com/thread/3238117/auto-generating-ottawa-specific-saletrade-page"
>Ottawa Guild</a
>.
</p>
<header>
<header >
<Search {handler} /> <Search {handler} />
</header> </header>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>user</th> <Th {handler} orderBy="username">user</Th>
<th></th> <Th {handler} orderBy="name">game</Th>
<th>game</th>
<th></th>
<th>notes</th> <th>notes</th>
<th>price</th> <Th {handler} orderBy="price">price</Th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each $rows as row} {#each $rows as row}
<tr> <tr>
<td><a target="_blank" <td
href={`https://boardgamegeek.com/collection/user/${row.username}?trade=1&subtype=boardgame&ff=1`}>{row.username}</a> ><a
target="_blank"
href={`https://boardgamegeek.com/collection/user/${row.username}?trade=1&subtype=boardgame&ff=1`}
>{row.username}</a>
&nbsp; &nbsp;
<a <a
target="_blank" target="_blank"
href={`https://boardgamegeek.com/geekmail/compose?touser=${row.username}`}> href={`https://boardgamegeek.com/geekmail/compose?touser=${row.username}`}>
<i>email</i></a></td> <i>email</i></a>
<td> <a </td><td>
<div class="game-cell">
<a
class="game-desc"
target="_blank" target="_blank"
href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}> href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
{row.name}</a> {row.name}</a>
</td>
<td>
<a <a
target="_blank" target="_blank"
href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}> href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
<img src={row.thumbnail} height="60"/></a> <img src={row.thumbnail} height="60" /></a>
</div>
</td> </td>
<td>{row.notes}</td> <td>{row.notes}</td>
<td>{row.price??''}</td> <td>{row.price ?? ''}</td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</article> </article>
<script> <script>
// TODO sort // TODO sort
// TODO hide games I'm not interested in // TODO hide games I'm not interested in
// TODO add cart // TODO add cart
// TODO prettify via beercss // TODO prettify via beercss
// TODO use https://github.com/dasDaniel/svelte-table#readme // TODO use https://github.com/dasDaniel/svelte-table#readme
import { DataHandler, Search } from '@vincjo/datatables' import { DataHandler, Search, Th } from '@vincjo/datatables';
export let data; export let data;
const handler = new DataHandler(data.games, { rowsPerPage: 500 }) const handler = new DataHandler(data.games, { rowsPerPage: 500 });
const rows = handler.getRows() const rows = handler.getRows();
</script> </script>
<style> <style>
@ -95,4 +106,16 @@
color: var(--primary); color: var(--primary);
text-decoration: underline; text-decoration: underline;
} }
.game-cell {
display: flex;
}
.game-cell > * {
display: block;
}
.game-desc {
flex: 1;
}
td {
font-size: var(--font-size-10);
}
</style> </style>