filter/sort

This commit is contained in:
j 2022-01-27 14:42:48 +00:00
parent 2f9e863aa3
commit 097d64a2ce
7 changed files with 78 additions and 19 deletions

View file

@ -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;

View file

@ -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;
} }
} }

View file

@ -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 => {

View file

@ -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>

View file

@ -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'],

View file

@ -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)

View file

@ -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)