Skip to content

Commit

Permalink
Remove stores.ts and call categories from layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@ddxv
ddxv committed Oct 22, 2023
1 parent eb60d18 commit 127d2d3
Show file tree
Hide file tree
Showing 8 changed files with 136 additions and 139 deletions.
28 changes: 28 additions & 0 deletions frontend/src/lib/IconDownload.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="1em"
height="1em"
viewBox="0 0 256 256"
xml:space="preserve"
>
<defs />
<g
style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
>
<path
d="M 73.178 87.033 H 16.822 c -0.82 0 -1.484 0.664 -1.484 1.484 c 0 0.819 0.664 1.484 1.484 1.484 h 56.357 c 0.819 0 1.484 -0.664 1.484 -1.484 C 74.662 87.697 73.997 87.033 73.178 87.033 z"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
stroke-linecap="round"
/>
<path
d="M 44.039 77.043 c 0.016 0.014 0.037 0.018 0.054 0.031 c 0.089 0.069 0.18 0.137 0.285 0.185 c 0.025 0.012 0.052 0.016 0.078 0.026 c 0.031 0.012 0.062 0.021 0.093 0.031 c 0.148 0.047 0.299 0.08 0.45 0.08 c 0 0 0 0 0 0 c 0 0 0 0 0 0 c 0.152 0 0.302 -0.032 0.45 -0.079 c 0.032 -0.01 0.063 -0.019 0.095 -0.032 c 0.025 -0.01 0.052 -0.014 0.077 -0.026 c 0.104 -0.048 0.195 -0.115 0.283 -0.184 c 0.017 -0.014 0.039 -0.018 0.056 -0.033 l 28.178 -23.97 c 0.624 -0.531 0.7 -1.467 0.169 -2.091 c -0.531 -0.623 -1.467 -0.699 -2.091 -0.169 L 46.484 72.704 V 1.484 C 46.484 0.664 45.819 0 45 0 c -0.82 0 -1.484 0.664 -1.484 1.484 v 71.22 L 17.783 50.813 c -0.624 -0.531 -1.56 -0.455 -2.091 0.169 c -0.531 0.624 -0.455 1.56 0.169 2.091 L 44.039 77.043 z"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
stroke-linecap="round"
/>
</g>
</svg>
0 frontend/static/IconSearch.svelte → frontend/src/lib/IconSearch.svelte
View file
File renamed without changes.
34 changes: 33 additions & 1 deletion frontend/src/routes/+layout.server.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,35 @@

export const ssr = true;
export const csr = true;

export interface Categories {
mycats: any;
status?: number;
error?: string;
}

/** @type {import('./$types').PageServerLoad} */
export async function load(): Promise<Categories> {
console.log(`stores load categories start`);
try {

const res = await fetch(`http://localhost:8000/api/categories`);

if (!res.ok) {
throw new Error(`Failed to fetch categories with status ${res.status}`);
}

const categories = await res.json();

console.log(`stores loaded categories with len: ${Object.keys(categories).length}`);
return { mycats: categories };

} catch (error) {
console.error('Failed to load data:', error);
return {
mycats: null,
status: 500,
error: 'Failed to load categories'
};
}
}

15 changes: 4 additions & 11 deletions frontend/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,11 @@
<script>
import { myList } from '../stores';
import '../app.postcss';
import { AppShell, AppBar, TabGroup, TabAnchor } from '@skeletonlabs/skeleton';
import { page } from '$app/stores';
import IconSearch from '../../static/IconSearch.svelte';
import IconSearch from '$lib/IconSearch.svelte';
import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
export let valueSingle = 'books';
//export let data;
/** @type {import('../stores.ts').Categories} */
let myVals;
myList.subscribe((values) => {
myVals = values;
});
export let data;
</script>

<!-- App Shell -->
Expand Down Expand Up @@ -83,8 +76,8 @@
<hr class="!border-t-2" />
<ListBoxItem bind:group={valueSingle} name="medium" value="books">BOOKS</ListBoxItem>
<ListBoxItem bind:group={valueSingle} name="medium" value="tv">TV</ListBoxItem>
{#if myVals}
{#each Object.entries(myVals.mycats.categories) as [_prop, values]}
{#if data}
{#each Object.entries(data.mycats.categories) as [_prop, values]}
{#if values.id}
<ListBoxItem bind:group={valueSingle} name="medium" value="${values.id}"
>{values.name}</ListBoxItem
Expand Down
142 changes: 70 additions & 72 deletions frontend/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script>
/** @type {import('./$types').PageData} */
export let data;
import IconDownload from '../../static/IconDownload.svelte';
import IconDownload from '$lib/IconDownload.svelte';
import Rating from './Rating.svelte';
function getClass(app) {
return app.featured_image_url && app.featured_image_url !== 'null' ? 'col-span-2' : '';
Expand All @@ -11,88 +10,87 @@
<h1 class="h1 p-4">Welcome</h1>

<div>
{#if data}
{#each Object.entries(data) as [_prop, values]}
{#each Object.entries(values) as [_collection, collectionData]}
{#if data.myapps}
{#each Object.entries(data.myapps) as [_prop, values]}
<h1 class="h1 p-2">{values.title}</h1>
{#each Object.entries(values.data) as [_collection, collectionData]}
<div class="card p-2">
<h1 class="h1 p-2">{collectionData.title}</h1>
<h2 class="h2 p-4">valuesdata={collectionData.title}</h2>
<hr class="section-divider" />
{#each Object.entries(collectionData.data) as [_collection2, collectionData2]}
<h2 class="h2 p-4">{collectionData2.title}</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4">
{#each collectionData2.apps as app}
<a href={`/apps/${app.store_id}`} class={`card overflow-hidden ${getClass(app)}`}>
<div class="app-item">
<header>
<div>
{#if app.featured_image_url && app.featured_image_url != 'null'}
<div class="justify-center">
<img
class="h-auto object-fill rounded-lg"
src={app.featured_image_url}
alt={app.name}
/>
</div>
<div class="inline-flex text-left">
<img
class="h-auto w-1/4 p-3 rounded-lg"
src={app.icon_url_512}
alt={app.name}
/>
<div class="inline-block">
<h5 class="h5 p-3">{app.name}</h5>
{#if app.rating_count != 0 && app.rating_count != 'N/A'}
<div class="inline-flex p-2">
<Rating total={5} size={20} rating={app.rating} />
({app.rating_count})
</div>
{/if}
{#if app.installs != 0 && app.installs != 'N/A'}
<div class="block p-2">
<div class="inline-flex">
<IconDownload />
{app.installs}
</div>
</div>
{/if}
</div>
</div>
{:else if app.tablet_image_url && app.tablet_image_url != 'null'}
<div>
<img
class="h-auto max-w-full rounded-lg"
src={app.phone_image_url_1}
alt={app.name}
/>
<img
class="h-auto w-1/4 rounded-lg"
src={app.icon_url_512}
alt={app.name}
/>
</div>
{:else}
<section class="grid grid-cols-3 md:grid-cols-5 gap-4">
{#each collectionData.apps as app}
<a href={`/apps/${app.store_id}`} class={`card overflow-hidden ${getClass(app)}`}>
<div class="app-item">
<header>
<div>
{#if app.featured_image_url && app.featured_image_url != 'null'}
<div class="justify-center">
<img
class="h-auto max-w-full rounded-lg"
class="h-auto object-fill rounded-lg"
src={app.featured_image_url}
alt={app.name}
/>
</div>
<div class="inline-flex text-left">
<img
class="h-auto w-1/4 p-3 rounded-lg"
src={app.icon_url_512}
alt={app.name}
/>
<div class="card-footer p-2">
<h5 class="h5">{app.name}</h5>
<div class="inline-block">
<h5 class="h5 p-3">{app.name}</h5>
{#if app.rating_count != 0 && app.rating_count != 'N/A'}
<div class="inline-flex">
<div class="inline-flex p-2">
<Rating total={5} size={20} rating={app.rating} />
({app.rating_count})
</div>
{/if}
{#if app.installs != 0 && app.installs != 'N/A'}
<div class="block p-2">
<div class="inline-flex">
<IconDownload />
{app.installs}
</div>
</div>
{/if}
</div>
{/if}
</div>
</header>
</div>
</a>
{/each}
</section>
{/each}
</div>
{:else if app.tablet_image_url && app.tablet_image_url != 'null'}
<div>
<img
class="h-auto max-w-full rounded-lg"
src={app.phone_image_url_1}
alt={app.name}
/>
<img
class="h-auto w-1/4 rounded-lg"
src={app.icon_url_512}
alt={app.name}
/>
</div>
{:else}
<img
class="h-auto max-w-full rounded-lg"
src={app.icon_url_512}
alt={app.name}
/>
<div class="card-footer p-2">
<h5 class="h5">{app.name}</h5>
{#if app.rating_count != 0 && app.rating_count != 'N/A'}
<div class="inline-flex">
<Rating total={5} size={20} rating={app.rating} />
({app.rating_count})
</div>
{/if}
</div>
{/if}
</div>
</header>
</div>
</a>
{/each}
</section>
<!-- {/each} -->
</div>
<p class="p-2" />
{/each}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routes/apps/[id]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<Rating total={5} size={50} rating={data.myapp.rating} />
</div>

{#if data.myapp.feature_image}
{#if data.myapp.featured_image}
<img src={data.myapp.featured_image} alt={data.myapp.name} class="app-icon" />
{/if}
</div>
Expand Down
54 changes: 0 additions & 54 deletions frontend/src/stores.ts
View file

This file was deleted.

Empty file removed frontend/static/IconDownload.svelte
View file
Empty file.

0 comments on commit 127d2d3

Please sign in to comment.