Commit fd6a9987 authored by David Trattnig's avatar David Trattnig
Browse files

Add initial cat dropdown implementation

parent cbe4eb50
<script>
import { onMount } from 'svelte'
import Select, { Option } from '@smui/select';
import { fetchApi } from './common/Common.svelte'
import ShowCardMedium from './cards/ShowCardMedium.svelte'
......@@ -9,18 +10,39 @@
export let urlShowDetail = undefined
export let limit = 300
export let activeonly = true
export let category = undefined
export let categoryId = undefined
export let language = undefined
export let labelAllShows = 'All shows'
export let labelShowsFor = 'Shows for'
export let enableCategoryDropdown = false
/* Nested Component Props */
export let renderhtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
let query
let shows
let cats
let allCategories
let defaultCat = {
'id': null,
'name': labelAllShows,
'description': ''
}
let selectedCat
$: selectedCat && loadShows(query)
/* Initialize the component */
onMount(() => {
loadShows()
loadCategories()
})
/* Loads the available categories */
function loadCategories() {
let apiQueryCats = `${api}/${endpointCats}`
fetchApi(apiQueryCats, processCatsResponse)
}
/* Loads the initial shows */
function loadShows() {
let url = new URL(window.location.href)
let filterQuery = '?'
......@@ -28,18 +50,30 @@
if (activeonly) filterQuery += 'active=true&'
// Filter by category
let urlCategory = url.searchParams.get('category')
if (urlCategory) category = urlCategory
if (category) filterQuery += `category=${category}&`
if (urlCategory) categoryId = urlCategory
if (categoryId) filterQuery += `category=${categoryId}&`
if (selectedCat) {
if (selectedCat.id) {
categoryId = null
filterQuery += `category=${selectedCat.id}&`
} else {
filterQuery = ''
}
}
// Filter by language
let urlLanguage = url.searchParams.get('language')
if (urlLanguage) language = urlLanguage
if (language) filterQuery += `language=${language}&`
// Evaluate if we should list all
if (!categoryId && !language && !selectedCat) {
selectedCat = defaultCat
}
query = filterQuery
let apiUrl = `${api}/${endpointShow}${filterQuery}limit=${limit}`
fetchApi(apiUrl, processResponse)
let apiQueryCats = `${api}/${endpointCats}`
fetchApi(apiQueryCats, processCatsResponse)
})
}
/* Callback to process the API response */
function processResponse(data) {
......@@ -54,8 +88,11 @@
let catMap = []
for (const cat of data) {
catMap[cat.id] = cat
if (cat.id == categoryId) {
selectedCat = cat
}
}
cats = catMap
allCategories = data
console.log('Cats API response:', data)
}
......@@ -78,14 +115,6 @@
return results
}
/* Retrieves the name for the category ID */
function getCategoryName() {
return cats[category].name
}
/* Retrieves the description for the category ID */
function getCategoryDesc() {
return cats[category].description
}
</script>
<style lang="scss">
......@@ -109,30 +138,38 @@
margin: 0;
color: #888;
}
</style>
<template>
{#if language || category}
{#if selectedCat}
<h1 class="list-title">
{#if cats && category}
<span class="category-wrapper">
<span class="category-prefix">{labelShowsFor}</span>
<span class="category-title">{getCategoryName()}</span>
<i class="aura-icons">
<div class="icon-category-{category}" />
</i>
</span>
{:else}{labelAllShows}{/if}
<span class="category-wrapper">
<span class="category-prefix"></span>
<span class="category-title">{selectedCat.name}</span>
<i class="aura-icons">
<div class="icon-category-{selectedCat.id}" />
</i>
</span>
{#if language}
<span class="language-wrapper">
(
<span class="language-key lang-{language}">{language}</span>
)
(<span class="language-key lang-{language}">{language}</span>)
</span>
{/if}
</h1>
<p class="category-description cat-{category}">{getCategoryDesc()}</p>
<p class="category-description cat-{selectedCat.id}">{selectedCat.description}</p>
{/if}
{#if allCategories && enableCategoryDropdown}
<Select class="shaped-outlined" variant="outlined" bind:value={selectedCat}>
<Option value="{defaultCat}">{defaultCat.name}</Option>
{#each allCategories as cat}
<Option value={cat}>{cat.name}</Option>
{/each}
</Select>
{/if}
<div class="card-container list">
{#if shows}
{#each shows as show}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment