From cc5200fd2d3aa3021e748dd117d50f14c79fbdff Mon Sep 17 00:00:00 2001
From: Sanjay B <sanjaybhangar@gmail.com>
Date: Thu, 28 Oct 2021 21:49:16 +0530
Subject: [PATCH] add sort to films page

---
 app/static/js/films.js   | 15 +++++++++++++++
 app/templates/films.html | 27 +++++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 app/static/js/films.js

diff --git a/app/static/js/films.js b/app/static/js/films.js
new file mode 100644
index 0000000..42185dd
--- /dev/null
+++ b/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)
+    })
+})
\ No newline at end of file
diff --git a/app/templates/films.html b/app/templates/films.html
index 3b1b15a..2e85e2d 100644
--- a/app/templates/films.html
+++ b/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 %}
\ No newline at end of file