mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
86 lines
2.4 KiB
Svelte
86 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { browser } from '$app/environment';
|
|
import { boredState } from '$root/lib/stores/boredState';
|
|
import { wishlistStore } from '$root/lib/stores/wishlistStore';
|
|
import { ToastType } from '$root/lib/types';
|
|
import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
|
|
import ClearWishlistDialog from '../dialog/ClearWishlistDialog.svelte';
|
|
import { toast } from '../toast/toast';
|
|
|
|
function saveWishlist() {
|
|
if (!browser) return;
|
|
localStorage.wishlist = JSON.stringify($wishlistStore);
|
|
toast.send('Saved wishlist', { duration: 3000, type: ToastType.INFO });
|
|
}
|
|
|
|
function exportWishlist() {
|
|
if (!browser) return;
|
|
const wishlistBlob = new Blob([JSON.stringify($wishlistStore)], {
|
|
type: 'application/json;charset=utf-8'
|
|
});
|
|
let url = window.URL || window.webkitURL;
|
|
let link = url.createObjectURL(wishlistBlob);
|
|
let a = document.createElement('a');
|
|
a.setAttribute('download', `wishlist.json`);
|
|
a.setAttribute('href', link);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
toast.send('Exported wishlist', { duration: 3000, type: ToastType.INFO });
|
|
}
|
|
|
|
function clearWishlist() {
|
|
if ($wishlistStore.length > 0) {
|
|
boredState.update((n) => ({
|
|
...n,
|
|
dialog: { isOpen: true, content: ClearWishlistDialog }
|
|
}));
|
|
} else {
|
|
toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR });
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<div>
|
|
<span class="wishlist-title"
|
|
><a href="/wishlist" title="Go to your wishlist">Your Wishlist</a></span
|
|
>
|
|
</div>
|
|
<div class="wishlist-buttons">
|
|
<button type="button" aria-label="Export Wishlist" on:click={() => exportWishlist()}
|
|
><ShareIcon width="24" height="24" />Export</button
|
|
>
|
|
<!-- <button type="button" aria-label="Save Wishlist" on:click={() => saveWishlist()}
|
|
><SaveIcon width="24" height="24" />Save</button
|
|
> -->
|
|
<button type="button" aria-label="Clear saved wishlist" on:click={() => clearWishlist()}>
|
|
<TrashIcon width="24" height="24" />Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
:global(.wishlist-title) {
|
|
padding-bottom: var(--spacing-8);
|
|
font-size: var(--font-24);
|
|
font-weight: 700;
|
|
line-height: 32px;
|
|
}
|
|
|
|
:global(.wishlist-buttons) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
// gap: 6rem;
|
|
|
|
@media (min-width: 480px) {
|
|
gap: 3rem;
|
|
}
|
|
}
|
|
|
|
button {
|
|
display: grid;
|
|
place-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
</style>
|