add sort to films page

app/static/js/films.js

@@ -0,0 +1,15 @@
+document.getElementById('sort-select').addEventListener('change', function () {
+    const sortValue = this.value
+    const $films = [...document.querySelectorAll('.film')]
+    console.log('$films', $films)
+    $films.sort((a, b) => {
+        console.log('a', a)
+        const aVal = a.dataset[sortValue]
+        const bVal = b.dataset[sortValue]
+        return aVal < bVal ? -1 : 1
+    })
+    document.getElementById('films').innerHTML = ''
+    $films.forEach($film => {
+        document.getElementById('films').appendChild($film)
+    })
+})

app/templates/films.html

@@ -1,9 +1,28 @@
 {% extends "base.html" %}
 {% block body_class%}animated animated-text{% endblock %}
 {% block main %}
-<div class="films">
+
+<div>
+	Sort:
+	<select id="sort-select">
+		<option value="position" selected>Default</option>
+		<option value="title">Title</option>
+		<option value="duration">Duration</option>
+		<option value="hue">Hue</option>
+		<option value="saturation">Saturation</option>
+		<option value="lightness">Lightness</option>
+	</select>
+</div>
+<div class="films" id="films">
 {% for film in films %}
-	<div class="film">
+	<div class="film"
+		data-position="{{ film.position }}"
+		data-title="{{ film.data.title }}"
+		data-duration="{{ film.data.duration }}"
+		data-hue="{{ film.data.hue }}"
+		data-saturation="{{ film.data.saturation }}"
+		data-lightness="{{ film.data.lightness }}"
+	>
 		<h1><a href="{{ film.get_absolute_url }}">
 			<span>{{ film.data.title | safe }}</span>
 			<span>{{ film.data.title_zh | safe }}</span>
@@ -17,3 +36,7 @@
 {% endfor %}
 </div>
 {% endblock %}
+
+{% block end %}
+	<script src="{% static 'js/films.js' %}"></script>
+{% endblock %}