1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
import { h, withVar, mount } from 'lib/rx'
interface Book {
title: string
authors: Array<string>
authorsSort: string
genres: Array<string>
date: string
read: boolean
cover: string
}
// @ts-ignore
const sortedBooks: Array<Book> = (books as Array<Book>).sort((a, b) =>
a.authorsSort == b.authorsSort
? a.date > b.date
: a.authorsSort > b.authorsSort)
enum Filter {
All,
Read,
Unread
}
const view = withVar(Filter.All, (filter, updateFilter) => [
h('aside',
{ className: 'g-Aside' },
h('select',
{ name: 'filter',
id: 'filter',
onchange: (event: Event) => updateFilter(_ => (event.target as HTMLSelectElement).value as any)
},
h('option', { value: Filter.All }, 'Tous les livres'),
h('option', { value: Filter.Read }, 'Livres lus'),
h('option', { value: Filter.Unread }, 'Livres non lus')
)
),
h('main',
{ className: 'g-Main' },
filter.map(f =>
sortedBooks
.filter(b => f == Filter.All || b.read == (f == Filter.Read))
.map(book => h('img', { className: 'g-Book', src: book.cover }))
)
)
])
mount(view)
|
