Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-23 14:59:36 +02:00
Code Issues Releases Activity

Fetch and display categories in CategoryFilterDropdown; update adventure details to include category information

Browse source
This commit is contained in:
Sean Morley 2024-11-16 23:32:23 -05:00
parent 42f07dc2fb
commit 129c76078e
4 changed files with 33 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/lib/components/CategoryFilterDropdown.svelte
View file

@ -1,13 +1,17 @@
<script lang="ts">
import { ADVENTURE_TYPES } from '$lib';
import type { Category } from '$lib/types';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
let types_arr: string[] = [];
export let types: string;
let adventure_types: Category[] = [];
onMount(() => {
console.log(types);
onMount(async () => {
let categoryFetch = await fetch('/api/categories/categories');
let categoryData = await categoryFetch.json();
adventure_types = categoryData;
console.log(categoryData);
types_arr = types.split(',');
});
@ -17,12 +21,15 @@
}
function toggleSelect(type: string) {
if (types_arr.includes(type)) {
types_arr = types_arr.filter((t) => t !== type);
if (types_arr.indexOf(type) > -1) {
types_arr = types_arr.filter((item) => item !== type);
} else {
types_arr.push(type);
}
types_arr = types_arr.filter((item) => item !== '');
// turn types_arr into a comma seperated list with no spaces
types = types_arr.join(',');
console.log(types);
console.log(types_arr);
}
@ -37,16 +44,16 @@
<button class="btn btn-wide btn-neutral-300" on:click={clearTypes}
>{$t(`adventures.clear`)}</button
>
{#each ADVENTURE_TYPES as type}
{#each adventure_types as type}
<li>
<label class="cursor-pointer">
<input
type="checkbox"
value={type.label}
on:change={() => toggleSelect(type.type)}
checked={types.indexOf(type.type) > -1}
value={type.name}
on:change={() => toggleSelect(type.name)}
checked={types.indexOf(type.name) > -1}
/>
<span>{$t(`adventures.activities.${type.type}`)}</span>
<span>{type.display_name + ' ' + type.icon}</span>
</label>
</li>
{/each}