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-27 12:03:49 +00:00
|
|
|
|
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
|
|
|
|
2022-05-27 12:03:49 +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}>
|
2022-05-27 12:03:49 +00:00
|
|
|
<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
|
|
|
|