learndb/src/TopicDetail.svelte

98 wiersze
3.5 KiB
Svelte
Czysty Zwykły widok Historia

2022-05-08 12:02:37 +00:00
<script>
import ItemCard from "./ItemCard.svelte"
2022-05-11 14:08:38 +00:00
import TopicMasonryGrid from "./TopicMasonryGrid.svelte"
2022-05-23 17:30:22 +00:00
import { formats } from "./formats.js"
import BookCard from "./BookCard.svelte"
import VideoCard from "./VideoCard.svelte"
import GenericCard from "./GenericCard.svelte"
2022-05-23 19:58:05 +00:00
import SearchForm from "./SearchForm.svelte"
2022-05-08 12:02:37 +00:00
2022-05-19 15:51:06 +00:00
export let topicname;
2022-05-23 17:50:08 +00:00
export let alltopics;
2022-05-08 12:02:37 +00:00
let items = [];
2022-05-24 14:31:52 +00:00
let filteredItems = [];
let query = {
text: "",
topic: "",
format: "",
level: "",
2022-05-30 11:18:19 +00:00
quality: "",
2022-05-24 14:31:52 +00:00
sortby: "rating"
};
2022-05-08 12:02:37 +00:00
2022-05-19 15:51:06 +00:00
$: fetch(`/learn/items.json?_shape=array&topics__contains=${topicname}`)
2022-05-08 12:02:37 +00:00
.then(r => r.json())
.then(data => {
items = data;
2022-05-24 14:31:52 +00:00
filteredItems = data;
2022-05-16 17:24:19 +00:00
});
2022-05-24 14:31:52 +00:00
function handleQueryChanged(event){
console.log("queryChanged: ", event.detail);
query = event.detail;
}
$: filteredItems = items.filter(item => {
if(query.text && !item.name.toLowerCase().includes(query.text.toLowerCase())){ return false; }
if(query.format && !item.links.includes(query.format)) { return false; }
if(query.level && item.difficulty != query.level){ return false; }
2022-05-30 11:18:19 +00:00
// TODO: apply quality filter
2022-05-24 14:31:52 +00:00
return true;
}).sort((a,b) => {
if(query.sortby == 'rating') { return (a.rating - b.rating) };
if(query.sortby == 'year') { return (a.year - b.year)};
if(query.sortby == 'name') { return a.name.localeCompare(b.name)};
});
2022-05-08 12:02:37 +00:00
</script>
2022-05-11 14:08:38 +00:00
2022-05-23 17:50:08 +00:00
<TopicMasonryGrid {topicname} {alltopics}/>
2022-05-08 12:02:37 +00:00
2022-05-30 11:18:19 +00:00
<SearchForm {alltopics} on:queryChanged={handleQueryChanged} hideTopic={true} hideFormat={true}/>
2022-05-23 17:30:22 +00:00
<div class="mt-10">
2022-05-23 17:30:22 +00:00
<div class="">
2022-05-26 10:47:14 +00:00
<sl-tab-group placement="start">
2022-05-30 11:18:19 +00:00
{#each formats.filter(f => items.filter(x => x.links.includes(f.id + '|')).length > 0) as format, i}
<sl-tab slot="nav" panel={format.id} active={i == 0}>{format.name}</sl-tab>
2022-05-26 10:47:14 +00:00
2022-05-23 17:30:22 +00:00
{#if format.id == 'book'}
2022-05-30 11:18:19 +00:00
<sl-tab-panel name={format.id} active={i == 0}>
2022-05-28 16:30:17 +00:00
<div class="grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-items-center">
2022-05-24 14:31:52 +00:00
{#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
2022-05-23 17:30:22 +00:00
<BookCard {item}/>
{/each}
</div>
</sl-tab-panel>
{:else if format.id == 'video'}
2022-05-30 11:18:19 +00:00
<sl-tab-panel name={format.id} active={i == 0}>
<div class="max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
2022-05-24 14:31:52 +00:00
{#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
2022-05-23 17:30:22 +00:00
<VideoCard {item}/>
{/each}
</div>
</sl-tab-panel>
{:else}
2022-05-30 11:18:19 +00:00
<sl-tab-panel name={format.id} active={i == 0}>
2022-05-30 13:28:25 +00:00
<div class="max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-4 2xl:grid-cols-6 ">
2022-05-24 14:31:52 +00:00
{#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
2022-05-23 17:30:22 +00:00
<GenericCard {item}/>
{/each}
</div>
</sl-tab-panel>
{/if}
{/each}
</sl-tab-group>
</div>
2022-05-16 17:24:19 +00:00
</div>
2022-05-08 12:02:37 +00:00
2022-05-20 08:46:06 +00:00