Skip to content

Commit

Permalink
Menu for store and list type is active, not yet for category
Browse files Browse the repository at this point in the history
  • Loading branch information
@ddxv
ddxv committed Oct 23, 2023
1 parent 75c0f9e commit 907b60e
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 113 deletions.
42 changes: 19 additions & 23 deletions backend/api_app/controllers/apps.py
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import datetime

from api_app.models import AppDetail, AppGroup, AppsOverview, Section
from api_app.models import AppDetail, AppsOverview, Collection, StoreSection
from config import get_logger
from dbcon.queries import get_single_app, query_recent_apps
from litestar import Controller, get
Expand All @@ -19,34 +19,30 @@ def get_string_date_from_days_ago(days: int) -> str:


def get_app_overview_dict() -> AppsOverview:
new_apps = query_recent_apps(period="weekly")
trending_apps = query_recent_apps(period="monthly")
trending_ios_apps = trending_apps[~trending_apps["store"].str.contains("oogl")]
trending_google_apps = trending_apps[trending_apps["store"].str.contains("oogl")]
new_ios_dicts = new_apps[~new_apps["store"].str.contains("oogl")].to_dict(
new_weekly = query_recent_apps(period="weekly")
new_monthly = query_recent_apps(period="monthly")
monthly_ios_apps = new_monthly[~new_monthly["store"].str.contains("oogl")]
monthly_google_apps = new_monthly[new_monthly["store"].str.contains("oogl")]
weekly_ios_dicts = new_weekly[~new_weekly["store"].str.contains("oogl")].to_dict(
orient="records"
)
new_google_dicts = new_apps[new_apps["store"].str.contains("oogl")].to_dict(
weekly_google_dicts = new_weekly[new_weekly["store"].str.contains("oogl")].to_dict(
orient="records"
)
trending_google_dicts = trending_google_apps.to_dict(orient="records")
trending_ios_dicts = trending_ios_apps.to_dict(orient="records")
trending_title = "New Apps this Month"
recent_title = "New Apps this Week"
monthly_google_dicts = monthly_google_apps.to_dict(orient="records")
monthly_ios_dicts = monthly_ios_apps.to_dict(orient="records")
monthly_title = "New Apps this Month"
weekly_title = "New Apps this Week"
my_dict = AppsOverview(
new=Section(
title=recent_title,
data=[
AppGroup(title="Google", apps=new_google_dicts),
AppGroup(title="iOS", apps=new_ios_dicts),
],
new_weekly=Collection(
title=weekly_title,
google=StoreSection(title="Google", apps=weekly_google_dicts),
ios=StoreSection(title="iOS", apps=weekly_ios_dicts),
),
trending=Section(
title=trending_title,
data=[
AppGroup(title="Google", apps=trending_google_dicts),
AppGroup(title="iOS", apps=trending_ios_dicts),
],
new_monthly=Collection(
title=monthly_title,
google=StoreSection(title="Google", apps=monthly_google_dicts),
ios=StoreSection(title="iOS", apps=monthly_ios_dicts),
),
)
return my_dict
Expand Down
15 changes: 8 additions & 7 deletions backend/api_app/models.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,22 @@ class AppDetail:


@dataclass
class AppGroup:
title: str
class StoreSection:
title: str # iOS or Google
apps: list[AppDetail]


@dataclass
class Section:
title: str
data: list[AppGroup]
class Collection:
title: str # Title like "Weekly by Downloads"
ios: StoreSection
google: StoreSection


@dataclass
class AppsOverview:
new: Section
trending: Section
new_weekly: Collection
new_monthly: Collection


@dataclass
Expand Down
69 changes: 47 additions & 22 deletions frontend/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,17 @@
import { page } from '$app/stores';
import IconSearch from '$lib/IconSearch.svelte';
import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
export let valueSingle = 'books';
import { myListSelectionStore } from '../stores';
let localMyList = $myListSelectionStore;
// Reactive statement to update the store when localValue changes
$: myListSelectionStore.set(localMyList);
import { myStoreSelection } from '../stores';
let localMyStore = $myStoreSelection;
$: myStoreSelection.set(localMyStore);
let myCategories = ['books'];
export let data;
</script>

Expand Down Expand Up @@ -65,27 +75,42 @@
<svelte:fragment slot="sidebarLeft">
{#if $page.url.pathname == '/'}
<div class="p-2">
<ListBox>
<br />
Type
<hr class="!border-t-2" />
<ListBoxItem bind:group={valueSingle} name="medium" value="google">Google</ListBoxItem>
<ListBoxItem bind:group={valueSingle} name="medium" value="ios">iOS</ListBoxItem>
<br />
Categories
<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 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
>
{/if}
{/each}
{/if}
</ListBox>
<br />
<h4 class="h4">List</h4>
<div class=" card p-4 text-token">
<ListBox>
<ListBoxItem bind:group={localMyList} name="medium" value="new_weekly"
>New this Week by Downloads</ListBoxItem
>
<ListBoxItem bind:group={localMyList} name="medium" value="new_monthly"
>New this Month by Downloads</ListBoxItem
>
</ListBox>
</div>

<br />
<h4 class="h4">Stores</h4>
<div class=" card p-4 text-token">
<ListBox>
<ListBoxItem bind:group={localMyStore} name="medium" value="google">Google</ListBoxItem>
<ListBoxItem bind:group={localMyStore} name="medium" value="ios">Apple</ListBoxItem>
</ListBox>
</div>
<br />
<h4 class="h4">Categories</h4>
<div class=" card p-4 text-token">
<ListBox multiple>
{#if data}
{#each Object.entries(data.mycats.categories) as [_prop, values]}
{#if values.id}
<ListBoxItem bind:group={myCategories} name="medium" value="${values.id}"
>{values.name}</ListBoxItem
>
{/if}
{/each}
{/if}
</ListBox>
</div>
</div>
{/if}
<!-- --- -->
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routes/+page.server.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export const ssr: boolean = true;
export const csr: boolean = false;
export const csr: boolean = true;
console.log('Script executed');

interface LoadResponse {
Expand Down
114 changes: 54 additions & 60 deletions frontend/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,74 +4,68 @@
function getClass(app) {
return app.featured_image_url && app.featured_image_url !== 'null' ? 'col-span-2' : '';
}
// import myListSelection from './+layout.svelte';
import { myListSelectionStore } from '../stores';
import { myStoreSelection } from '../stores';
</script>

<h1 class="h1 p-4">Welcome</h1>
<h1 class="h1 p-4">Welcome!</h1>

<div>
{#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">
<h2 class="h2 p-4">{collectionData.title}</h2>
<hr class="section-divider" />
<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>
<h1 class="h1 p-2">{data.myapps[$myListSelectionStore].title}</h1>
<div class="card p-2">
<h2 class="h2 p-4">{data.myapps[$myListSelectionStore][$myStoreSelection].title}</h2>
<hr class="section-divider" />
<section class="grid grid-cols-3 md:grid-cols-5 gap-4">
{#each data.myapps[$myListSelectionStore][$myStoreSelection].apps as app}
<a href={`/apps/${app.store_id}`} class={`card overflow-hidden ${getClass(app)}`}>
<div class="app-item">
<header>
<div>
<!-- Show Featured Image (spans 2 cols) -->
{#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}
/>
<AppDetails {app} />
</div>
<!-- Show Icon Only (smaller) -->
{:else if app.tablet_image_url && app.tablet_image_url != 'null'}
<div>
<!-- Show Featured Image (spans 2 cols) -->
{#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}
/>
<AppDetails {app} />
</div>
<!-- Show Icon Only (smaller) -->
{: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}
/>
<AppDetails {app} />
{/if}
<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>
</header>
{:else}
<img
class="h-auto max-w-full rounded-lg"
src={app.icon_url_512}
alt={app.name}
/>
<AppDetails {app} />
{/if}
</div>
</a>
{/each}
</section>
<!-- {/each} -->
</div>
<p class="p-2" />
{/each}
{/each}
</header>
</div>
</a>
{/each}
</section>
</div>
<p class="p-2" />
{:else}
<p>Loading...</p>
{data}
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/stores.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { writable } from 'svelte/store';

export const myListSelectionStore = writable('new_weekly');
export const myStoreSelection = writable('google');

0 comments on commit 907b60e

Please sign in to comment.