Commit 78cecd35 authored by David Trattnig's avatar David Trattnig
Browse files

Provide initial version of category overview

parent c4648304
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Aura Player Bundle</title>
<link rel="shortcut icon" href="/assets/aura_fav96x96.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="description" content="AURA PWA and Web Component Demo" />
<meta name="theme-color" content="#2196f3" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="AURA PWA" />
<link rel="stylesheet" href="/aura-demo.css" />
<link rel="stylesheet" href="/build/smui.css" />
<link rel="stylesheet" href="/build/aura-player-bundle.css" />
<link rel="stylesheet" href="/aura-player-theme.css" />
<script defer src="/build/aura-player-bundle.js"></script>
</head>
<style></style>
<body>
<div id="common-area">
<img id="aura-logo" src="/assets/aura-logo.png" width="128" />
<h1>Category List Component</h1>
<p></p>
</div>
<aura-service-worker></aura-service-worker>
<div id="category-list"></div>
<script>
/** Inject component into HTML **/
document.addEventListener('DOMContentLoaded', function (event) {
new AuraCategoryList({
target: document.getElementById('category-list'),
props: {
renderhtml: true,
urlShowList: '/show-list.html',
categoriesToDisplay: [
'1385089', /* Unter vielen */
'1385076', /* Im Unterschied */
'2060582', /* Auf Entdeckung */
'1385111', /* Spielarten */
'1385106', /* Der gute Ton */
'1385094', /* Im Interesse */
'1385100', /* Durchs Dickicht */
/*'1385116',*/
],
},
})
})
</script>
</body>
</html>
......@@ -47,6 +47,7 @@
<a href="/programme-paper.html">Programme Component (Paper View)</a>
</li>
<li><a href="/trackservice.html">TrackService Component</a></li>
<li><a href="/category-list.html">Category List Component</a></li>
</ul>
</div>
......
<script lang="ts">
import { onMount } from 'svelte'
import { fetchApi } from './common/Common.svelte'
import CategoryCard from './cards/CategoryCard.svelte'
export let api: string = 'https://prog-info.o94.at/api.php'
export let endpointCategories: string = 'categories'
export let categoriesToDisplay: [] // Display all categories
export let displayDescription: boolean = true
/* Nested props */
export let urlShowList: string
export let renderhtml: boolean = false // Attention: to avoid XSS attack vectors use with trusted API sources only
let categories: [{ [name: string]: any }]
/* Initialize the component */
onMount(() => {
let episodeUrl = `${api}/${endpointCategories}/`
console.log('Categories API Url:' + episodeUrl)
fetchApi(episodeUrl, processResponse)
})
/* Callback to process the API response */
function processResponse(data: any) {
console.log('Categories API response:', data)
if (!categoriesToDisplay || categoriesToDisplay.length == 0) {
categories = data
} else {
let selectedCats: [] = []
for (let chosenCat of categoriesToDisplay) {
for (let cat of data) {
if (chosenCat == cat.id) {
selectedCats.push(cat)
}
}
}
categories = selectedCats
}
}
</script>
<style lang="scss">
/* SMUI components need to be selected via global namespace */
* :global(.aura-card.category) {
min-width: 400px;
min-height: 400px;
width: 400px;
height: 400px;
margin: 4px;
float: left;
}
* :global(.aura-card.category > div) {
height: 100%;
}
</style>
<div class="card-container list">
{#if categories}
{#each categories as category}
<CategoryCard {category} {urlShowList} {displayDescription} {renderhtml} />
{/each}
{:else}
<div class="loading">
<div class="aura-spinner">
<div />
<div />
</div>
</div>
{/if}
</div>
<script lang="ts">
import Card, { Content, PrimaryAction } from '@smui/card'
import { openLink } from '../common/Common.svelte'
import Display from '../common/Display.svelte'
import CategoryTitle from '../elements/CategoryTitle.svelte'
export let category: any
export let urlShowList: string
export let displayDescription: boolean
export let renderhtml: boolean // Attention: to avoid XSS attack vectors use with trusted API sources only
</script>
<style lang="scss">
/* SMUI components need to be selected via global namespace */
</style>
<template>
<Card class="aura-card category cat-{category.id}">
<PrimaryAction on:click={() => openLink(urlShowList + "?category=" + category.id)}>
<Content class="category-content">
<CategoryTitle {category} />
{#if displayDescription && category.description}
<p class="description">
<Display value={category.description} {renderhtml} renderLinks={true} />
</p>
{/if}
</Content>
</PrimaryAction>
</Card>
</template>
<script lang="ts">
export let category: { [name: string]: any }
</script>
<style lang="scss">
h2, h3 {
margin: 0;
}
</style>
<template>
<div class="category-title-wrapper">
{#if category.id}
<i class="aura-icons">
<div class="icon-category-{category.id}" />
</i>
{/if}
<div class="heading">
<h2 class="title">{category.name}</h2>
<h3 class="subtitle">
{#if category.subtitle}
<span class="delimiter"></span>
{category.subtitle}
{/if}
</h3>
</div>
</div>
</template>
......@@ -15,6 +15,7 @@ import HostDetail from './HostDetail.svelte';
import ShowList from './ShowList.svelte';
import ShowDetail from './ShowDetail.svelte';
import EpisodeDetail from './EpisodeDetail.svelte';
import CategoryList from './CategoryList.svelte';
/** Inject non web-components into HTML **/
declare const window: any;
......@@ -45,4 +46,7 @@ window.AuraProgramme = function (options : any) {
};
window.AuraTrackService = function (options : any) {
return new TrackService(options);
};
window.AuraCategoryList = function (options : any) {
return new CategoryList(options);
};
\ No newline at end of file
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