aljaz/hypergolic
1
0
Fork 0
mirror of https://github.com/aljazceru/hypergolic.git synced 2025-12-24 00:34:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

problem: product page doesn't use product groups

Browse Source
This commit is contained in:
Bob
2024-08-06 16:40:25 +08:00
parent 6c6f7c14ac
commit 9c066c8ee0
5 changed files with 95 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/MeritsAndSatflow.svelte
View File

@@ -2,7 +2,6 @@
import * as Card from '@/components/ui/card';
import * as Table from '@/components/ui/table';
import { Rocket } from '@/event_helpers/rockets';
import type { NDKEvent } from '@nostr-dev-kit/ndk';
import { writable } from 'svelte/store';
import Pie from './Pie.svelte';
import { Avatar, Name } from '@nostr-dev-kit/ndk-svelte-components';

11
src/components/ProductCard.svelte
View File

@@ -11,7 +11,10 @@
{#if product.Validate()}
<Card.Root>
<Card.Header>
<Card.Title>{product.Group()} {#if product.Option().length > 0}(variant: {product.Option()}){/if}</Card.Title>
<Card.Title
>{product.Group()}
{#if product.Option().length > 0}(variant: {product.Option()}){/if}</Card.Title
>
<Card.Description>{product.Description()}</Card.Description>
</Card.Header>
@@ -27,9 +30,11 @@
</div>
</Card.Content>
{:else}
<img src={product.CoverImage()} alt="cover" class="aspect-square object-cover" />
<div class="grid place-items-center">
<img src={product.CoverImage()} alt="cover" class="aspect-square object-cover" />
</div>
{/if}
<Card.Footer class="flex justify-center pt-2">
<Card.Footer class="flex items-center justify-center pt-2">
{#if !rocket.Products().get(product.ID())}
<AddProductToRocket {product} {rocket} />
{:else}

76
src/components/ProductFomo.svelte
View File

@@ -1,17 +1,13 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card/index.js';
import { Product, Rocket } from '@/event_helpers/rockets';
import ProductCardFromId from './ProductCardFromID.svelte';
import ProductPurchases from './ProductPurchases.svelte';
import type { NDKEvent } from '@nostr-dev-kit/ndk';
import { fetchEvent } from '@/event_helpers/products';
import { ndk } from '@/ndk';
import { derived, writable } from 'svelte/store';
import * as Pagination from '@/components/ui/pagination';
import { ChevronLeft, ChevronRight } from 'lucide-svelte';
import ProductGroup from './ProductGroup.svelte';
export let rocket: Rocket;
export let unratifiedZaps:Map<string, number>;
export let unratifiedZaps: Map<string, number>;
let products = writable(new Map<string, Product>());
@@ -19,10 +15,10 @@
fetchEvent(id, $ndk).then((e) => {
let _p = new Product(e);
if (_p.Validate()) {
products.update(existing => {
existing.set(id, _p)
return existing
})
products.update((existing) => {
existing.set(id, _p);
return existing;
});
}
});
}
@@ -30,18 +26,23 @@
let groups = derived(products, ($products) => {
let productGroups = new Map<string, Map<string, Product>>();
for (let [id, p] of $products) {
console.log(p.Group())
console.log(p.Group());
if (!productGroups.get(p.Group())) {
productGroups.set(p.Group(), new Map());
}
let existing = productGroups.get(p.Group())!;
existing.set(id, p);
}
let productGroupArray = new Map<string, Product[]>()
let productGroupArray = new Map<string, Product[]>();
for (let [id, m] of productGroups) {
productGroupArray.set(id, Array.from(m, ([_, p]) => {return p}))
productGroupArray.set(
id,
Array.from(m, ([_, p]) => {
return p;
})
);
}
return productGroupArray
return productGroupArray;
});
</script>
@@ -52,53 +53,8 @@
</Card.Header>
<Card.Content class="grid grid-cols-1 gap-2">
{#each $groups as [identifier, products] (identifier)}
<Pagination.Root count={products.length} perPage={1} siblingCount={1} let:pages let:currentPage>
{#if currentPage} <ProductCardFromId {rocket} product={products[currentPage-1]}>
<ProductPurchases bind:unratifiedZaps {rocket} {products} />
</ProductCardFromId>{/if}
{#if products.length > 1}
<Pagination.Content>
<Pagination.Item>
<Pagination.PrevButton>
<ChevronLeft class="h-4 w-4" />
<span class="hidden sm:block">Previous Option</span>
</Pagination.PrevButton>
</Pagination.Item>
{#each pages as page (page.key)}
{#if page.type === "ellipsis"}
<Pagination.Item>
<Pagination.Ellipsis />
</Pagination.Item>
{:else}
<Pagination.Item>
<Pagination.Link {page} isActive={currentPage === page.value}>
{page.value}
</Pagination.Link>
</Pagination.Item>
{/if}
{/each}
<Pagination.Item>
<Pagination.NextButton>
<span class="hidden sm:block">Next Option</span>
<ChevronRight class="h-4 w-4" />
</Pagination.NextButton>
</Pagination.Item>
</Pagination.Content>
{/if}
</Pagination.Root>
<!-- {#each map as [id, product]} {#if true}
{/if}{/each} -->
<ProductGroup {products} {rocket} bind:unratifiedZaps />
{/each}
<!-- {#each products as [id, product] (id)}
<div>
<ProductCardFromId {rocket} {product}>
<ProductPurchases bind:unratifiedZaps {rocket} product={rocket.Products().get(id)} />
</ProductCardFromId>
</div>
{/each} -->
</Card.Content>
<Card.Footer></Card.Footer>
</Card.Root>

50
src/components/ProductGroup.svelte Normal file
View File

@@ -0,0 +1,50 @@
<script lang="ts">
import ProductCardFromId from './ProductCardFromID.svelte';
import ProductPurchases from './ProductPurchases.svelte';
import * as Pagination from '@/components/ui/pagination';
import { ChevronLeft, ChevronRight } from 'lucide-svelte';
import { Product, Rocket } from '@/event_helpers/rockets';
export let rocket: Rocket;
export let products: Product[];
export let unratifiedZaps: Map<string, number> | undefined = undefined;
</script>
<Pagination.Root count={products.length} perPage={1} siblingCount={1} let:pages let:currentPage>
{#if currentPage}
<ProductCardFromId {rocket} product={products[currentPage - 1]}>
{#if unratifiedZaps}
<ProductPurchases bind:unratifiedZaps {rocket} {products} />
{/if}
</ProductCardFromId>
{/if}
{#if products.length > 1}
<Pagination.Content>
<Pagination.Item>
<Pagination.PrevButton>
<ChevronLeft class="h-4 w-4" />
<span class="hidden sm:block">Previous Option</span>
</Pagination.PrevButton>
</Pagination.Item>
{#each pages as page (page.key)}
{#if page.type === 'ellipsis'}
<Pagination.Item>
<Pagination.Ellipsis />
</Pagination.Item>
{:else}
<Pagination.Item>
<Pagination.Link {page} isActive={currentPage === page.value}>
{page.value}
</Pagination.Link>
</Pagination.Item>
{/if}
{/each}
<Pagination.Item>
<Pagination.NextButton>
<span class="hidden sm:block">Next Option</span>
<ChevronRight class="h-4 w-4" />
</Pagination.NextButton>
</Pagination.Item>
</Pagination.Content>
{/if}
</Pagination.Root>

31
src/routes/products/+page.svelte
View File

@@ -5,8 +5,8 @@
import { onDestroy } from 'svelte';
import { derived } from 'svelte/store';
import Heading from '../../components/Heading.svelte';
import ProductCard from '../../components/ProductCard.svelte';
import { Product, Rocket } from '@/event_helpers/rockets';
import ProductGroup from '../../components/ProductGroup.svelte';
let rockets: NDKEventStore<NDKEvent> | undefined;
let products: NDKEventStore<NDKEvent> | undefined;
@@ -26,30 +26,41 @@
});
let productsToRender = derived([rocketsWithProducts, products], ([$rocketsWP, $products]) => {
let data = new Map<NDKEvent, NDKEvent[]>();
let data = new Map<Rocket, Map<string, Product[]>>();
let productMap = new Map($products.map((e) => [e.id, e]));
for (let r of $rocketsWP) {
let events = [];
let events: Product[] = [];
for (let p of r.getMatchingTags('product')) {
let productEvent = productMap.get(p[1].split(':')[0]);
if (productEvent) {
events.push(productEvent);
events.push(new Product(productEvent));
}
}
if (events.length > 0) {
data.set(r, events);
data.set(new Rocket(r), groups(events));
}
}
function groups(products: Product[]): Map</* group name*/ string, Product[]> {
return products.reduce((acc, product) => {
const group = product.Group();
if (!acc.has(group)) {
acc.set(group, []);
}
acc.get(group)!.push(product);
return acc;
}, new Map<string, Product[]>());
}
return data;
});
</script>
{#if productsToRender && $productsToRender}
{#each $productsToRender as [r, p] (r.id)}
<Heading title={r.dTag} />
<div class="grid gap-2" style="grid-template-columns: repeat(auto-fit, 350px);">
{#each p as product (product.id)}
<ProductCard product={new Product(product)} rocket={new Rocket(r)} />
{#each $productsToRender as [rocket, groups] (rocket.Event.id)}
<Heading title={rocket.Event.dTag} />
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fit, 350px);">
{#each groups as [identifier, products] (identifier)}
<ProductGroup {products} {rocket} />
{/each}
</div>
{/each}