filter/sort
This commit is contained in:
parent
2f9e863aa3
commit
097d64a2ce
7 changed files with 78 additions and 19 deletions
|
@ -8,6 +8,10 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: "noto_sans", sans-serif;
|
font-family: "noto_sans", sans-serif;
|
||||||
|
|
|
@ -31,6 +31,7 @@
|
||||||
@media screen and (max-width: 1100px) {
|
@media screen and (max-width: 1100px) {
|
||||||
h1 {
|
h1 {
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,10 +5,14 @@ function isNumeric (str) {
|
||||||
!isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
|
!isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectChanged() {
|
var options = parseHash();
|
||||||
|
|
||||||
|
function sortChanged() {
|
||||||
const sortValue = document.getElementById('sort-select').value
|
const sortValue = document.getElementById('sort-select').value
|
||||||
const $films = [...document.querySelectorAll('.film')]
|
const $films = [...document.querySelectorAll('.film')]
|
||||||
location.hash = sortValue
|
|
||||||
|
options.sort = sortValue
|
||||||
|
updateHash()
|
||||||
$films.sort((a, b) => {
|
$films.sort((a, b) => {
|
||||||
let aVal = a.dataset[sortValue]
|
let aVal = a.dataset[sortValue]
|
||||||
let bVal = b.dataset[sortValue]
|
let bVal = b.dataset[sortValue]
|
||||||
|
@ -24,12 +28,43 @@ function selectChanged() {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//document.getElementById('sort-select').addEventListener('change', selectChanged)
|
function filterChanged() {
|
||||||
|
const filterValue = document.getElementById('filter-select').value
|
||||||
|
options.filter = filterValue
|
||||||
|
document.querySelectorAll('.film').forEach(film => {
|
||||||
|
if (!options.filter || film.dataset.type.split(',').indexOf(options.filter) > -1) {
|
||||||
|
console.log(film.dataset.type.split(','), film.dataset.type.split(',').indexOf(options.filter))
|
||||||
|
film.style.display = ''
|
||||||
|
} else {
|
||||||
|
film.style.display = 'none'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
updateHash()
|
||||||
|
}
|
||||||
|
|
||||||
const locationHash = location.hash.replace('#', '')
|
function parseHash() {
|
||||||
if (locationHash !== '') {
|
var options = {}
|
||||||
document.getElementById('sort-select').value = locationHash
|
location.hash.slice(1).split('&').forEach(kv => {
|
||||||
selectChanged()
|
kv = kv.split('=')
|
||||||
|
options[kv.shift()] = kv.join('=')
|
||||||
|
})
|
||||||
|
return options;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHash() {
|
||||||
|
location.hash = '#' + Object.keys(options).map(key => { return key + '=' + options[key]; }).join('&')
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('sort-select').addEventListener('change', sortChanged)
|
||||||
|
document.getElementById('filter-select').addEventListener('change', filterChanged)
|
||||||
|
|
||||||
|
if (options.sort) {
|
||||||
|
document.getElementById('sort-select').value = options.sort
|
||||||
|
sortChanged()
|
||||||
|
}
|
||||||
|
document.getElementById('filter-select').value = options.filter
|
||||||
|
if (options.filter) {
|
||||||
|
filterChanged()
|
||||||
}
|
}
|
||||||
|
|
||||||
document.querySelectorAll('.films .film figure').forEach(figure => {
|
document.querySelectorAll('.films .film figure').forEach(figure => {
|
||||||
|
|
|
@ -3,28 +3,29 @@
|
||||||
{% block main %}
|
{% block main %}
|
||||||
|
|
||||||
<div class="films">
|
<div class="films">
|
||||||
<!--
|
<div class="actions">
|
||||||
<div>
|
<strong>Filter:</strong>
|
||||||
|
<select id="filter-select">
|
||||||
|
<option value="">All Types</option>
|
||||||
|
{% for type in types %}
|
||||||
|
<option value="{{ type.value }}">{{ type.title }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
<strong>Sort:</strong>
|
<strong>Sort:</strong>
|
||||||
<select id="sort-select">
|
<select id="sort-select">
|
||||||
<option value="position" selected>Default</option>
|
|
||||||
<option value="title">Title</option>
|
<option value="title">Title</option>
|
||||||
|
<option value="year">Year</option>
|
||||||
<option value="duration">Duration</option>
|
<option value="duration">Duration</option>
|
||||||
<option value="hue">Hue</option>
|
|
||||||
<option value="saturation">Saturation</option>
|
|
||||||
<option value="lightness">Lightness</option>
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
-->
|
|
||||||
<div id="films-list">
|
<div id="films-list">
|
||||||
{% for film in films %}
|
{% for film in films %}
|
||||||
<div class="film"
|
<div class="film"
|
||||||
data-position="{{ film.position }}"
|
data-position="{{ film.position }}"
|
||||||
data-title="{{ film.data.title }}"
|
data-title="{{ film.data.title }}"
|
||||||
data-duration="{{ film.data.duration }}"
|
data-year="{{ film.data.year|default:"9999" }}"
|
||||||
data-hue="{{ film.data.hue }}"
|
data-duration="{{ film.duration_seconds }}"
|
||||||
data-saturation="{{ film.data.saturation }}"
|
data-type="{{ film.data.type|join:"," }}"
|
||||||
data-lightness="{{ film.data.lightness }}"
|
|
||||||
>
|
>
|
||||||
<a href="{{ film.get_absolute_url }}">
|
<a href="{{ film.get_absolute_url }}">
|
||||||
<figure>
|
<figure>
|
||||||
|
|
|
@ -24,7 +24,7 @@ class Command(BaseCommand):
|
||||||
|
|
||||||
keys = [
|
keys = [
|
||||||
'id', 'title', 'director', 'summary', 'source', 'sourcedescription', 'date', 'location',
|
'id', 'title', 'director', 'summary', 'source', 'sourcedescription', 'date', 'location',
|
||||||
'country', 'type',
|
'country', 'type', 'year',
|
||||||
'duration', 'featuring', 'cinematographer',
|
'duration', 'featuring', 'cinematographer',
|
||||||
'hue', 'saturation', 'lightness',
|
'hue', 'saturation', 'lightness',
|
||||||
'folder', 'folderdescription', 'rightslevel'
|
'folder', 'folderdescription', 'rightslevel'
|
||||||
|
@ -50,6 +50,7 @@ class Command(BaseCommand):
|
||||||
folders[item['folder']] = {
|
folders[item['folder']] = {
|
||||||
'title': item['folder'],
|
'title': item['folder'],
|
||||||
'date': item.get('date', ''),
|
'date': item.get('date', ''),
|
||||||
|
'year': item.get('year', ''),
|
||||||
'country': item.get('country', []),
|
'country': item.get('country', []),
|
||||||
'featuring': item.get('featuring', []),
|
'featuring': item.get('featuring', []),
|
||||||
'type': item['type'],
|
'type': item['type'],
|
||||||
|
|
|
@ -37,6 +37,12 @@ class Film(models.Model):
|
||||||
if folder:
|
if folder:
|
||||||
return Text.objects.filter(Q(data__folder=folder) | Q(data__related=folder))
|
return Text.objects.filter(Q(data__folder=folder) | Q(data__related=folder))
|
||||||
|
|
||||||
|
def duration_seconds(self):
|
||||||
|
duration = 0
|
||||||
|
for item in self.data.get('items', []):
|
||||||
|
duration += item['duration']
|
||||||
|
return duration
|
||||||
|
|
||||||
def duration(self):
|
def duration(self):
|
||||||
return ox.format_duration(self.data['duration'] * 1000, verbosity=1, milliseconds=False)
|
return ox.format_duration(self.data['duration'] * 1000, verbosity=1, milliseconds=False)
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import logging
|
import logging
|
||||||
import json
|
import json
|
||||||
|
from collections import Counter
|
||||||
|
|
||||||
from django.shortcuts import render, redirect, get_object_or_404
|
from django.shortcuts import render, redirect, get_object_or_404
|
||||||
from django.views.decorators.csrf import csrf_exempt
|
from django.views.decorators.csrf import csrf_exempt
|
||||||
|
@ -56,6 +57,16 @@ def get_stream_prefix(request):
|
||||||
def films(request):
|
def films(request):
|
||||||
context = {}
|
context = {}
|
||||||
context['films'] = models.Film.objects.filter(public=True).order_by('position', 'data__title')
|
context['films'] = models.Film.objects.filter(public=True).order_by('position', 'data__title')
|
||||||
|
types = []
|
||||||
|
for f in context['films']:
|
||||||
|
types += f.data['type']
|
||||||
|
types = Counter(types)
|
||||||
|
context['types'] = []
|
||||||
|
for t in sorted(types):
|
||||||
|
context['types'].append({
|
||||||
|
'title': '%s (%s)' % (t, types[t]), 'value': t
|
||||||
|
})
|
||||||
|
|
||||||
context['stream_prefix'] = get_stream_prefix(request)
|
context['stream_prefix'] = get_stream_prefix(request)
|
||||||
context['settings'] = settings
|
context['settings'] = settings
|
||||||
return render(request, 'films.html', context)
|
return render(request, 'films.html', context)
|
||||||
|
|
Loading…
Reference in a new issue