2022-05-08 12:02:37 +00:00
|
|
|
<script>
|
|
|
|
import ItemCard from "./ItemCard.svelte"
|
2022-05-30 11:18:19 +00:00
|
|
|
import SearchForm from "./SearchForm.svelte"
|
2022-06-03 17:54:19 +00:00
|
|
|
import { formats } from "./formats.js"
|
|
|
|
import { fix_and_destroy_block } from "svelte/internal";
|
2022-05-27 12:03:49 +00:00
|
|
|
|
2022-05-08 12:02:37 +00:00
|
|
|
export let format;
|
2022-05-23 19:58:05 +00:00
|
|
|
export let alltopics;
|
2022-05-08 12:02:37 +00:00
|
|
|
let items = [];
|
2022-05-30 11:18:19 +00:00
|
|
|
let filteredItems = [];
|
|
|
|
|
|
|
|
let query = {
|
|
|
|
text: "",
|
|
|
|
topic: "",
|
|
|
|
level: "",
|
2022-06-03 13:35:57 +00:00
|
|
|
tag: "",
|
2022-05-30 11:18:19 +00:00
|
|
|
sortby: "rating"
|
|
|
|
};
|
2022-05-08 12:02:37 +00:00
|
|
|
|
2022-06-03 13:35:57 +00:00
|
|
|
$: query && fetch(`/learn/items.json?_shape=array&_size=100&links__contains=${format}|&topics__contains=${query.topic}`)
|
2022-05-08 12:02:37 +00:00
|
|
|
.then(r => r.json())
|
|
|
|
.then(data => {
|
|
|
|
items = data;
|
|
|
|
});
|
2022-05-30 11:18:19 +00:00
|
|
|
|
|
|
|
function handleQueryChanged(event){
|
2022-06-03 13:35:57 +00:00
|
|
|
// console.log("queryChanged: ", event.detail);
|
2022-05-30 11:18:19 +00:00
|
|
|
query = event.detail;
|
|
|
|
}
|
|
|
|
|
|
|
|
$: filteredItems = items.filter(item => {
|
|
|
|
if(query.text && !item.name.toLowerCase().includes(query.text.toLowerCase())){ return false; }
|
2022-06-03 13:35:57 +00:00
|
|
|
if(query.topic && !item.topics.includes(query.topic)){ return false; }
|
2022-05-30 11:18:19 +00:00
|
|
|
if(query.level && item.difficulty != query.level){ return false; }
|
2022-06-03 13:35:57 +00:00
|
|
|
if(query.tag && !item.tags.includes(query.tag)){ return false; }
|
2022-05-30 11:18:19 +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>
|
|
|
|
|
|
|
|
<div class="md:flex md:items-center md:justify-between mb-8">
|
|
|
|
<div class="flex-1 min-w-0">
|
2022-06-03 17:54:19 +00:00
|
|
|
<h2 class="text-2xl font-bold leading-7 text-lightSecondary2 sm:text-3xl sm:truncate"> {formats.find((f) => f.id === format).name}</h2>
|
2022-05-08 12:02:37 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2022-05-30 11:18:19 +00:00
|
|
|
<SearchForm {alltopics} on:queryChanged={handleQueryChanged} hideFormat={true}/>
|
2022-05-27 12:03:49 +00:00
|
|
|
|
2022-05-22 21:03:07 +00:00
|
|
|
{#if format == 'book'}
|
2022-05-30 13:21:32 +00:00
|
|
|
<div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center">
|
2022-05-30 11:18:19 +00:00
|
|
|
{#each filteredItems as item}
|
2022-05-22 21:03:07 +00:00
|
|
|
<ItemCard {item} displayType={format}/>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
{:else}
|
2022-05-30 20:45:34 +00:00
|
|
|
<div class="mt-12 mx-auto gap-5 flex flex-wrap">
|
2022-05-30 11:18:19 +00:00
|
|
|
{#each filteredItems as item}
|
2022-05-22 21:03:07 +00:00
|
|
|
<ItemCard {item} displayType={format}/>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
|