filter/sort

app/static/css/partials/_film.scss

@@ -8,6 +8,10 @@
     text-decoration: none;
   }
 
+  .actions {
+    text-align: right;
+  }
+
   select {
     font-size: 18px;
     font-family: "noto_sans", sans-serif;

app/static/css/partials/_player.scss

@@ -31,6 +31,7 @@
     @media screen and (max-width: 1100px) {
       h1 {
         display: block;
+        font-size: 16px;
       }
     }
 

app/static/js/films.js

@@ -5,10 +5,14 @@ function isNumeric (str) {
            !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
 }
 
-function selectChanged() {
+var options = parseHash();
+
+function sortChanged() {
     const sortValue = document.getElementById('sort-select').value
     const $films = [...document.querySelectorAll('.film')]
-    location.hash = sortValue
+
+    options.sort = sortValue
+    updateHash()
     $films.sort((a, b) => {
         let aVal = a.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('#', '')
-if (locationHash !== '') {
-    document.getElementById('sort-select').value = locationHash
-    selectChanged()
+function parseHash() {
+    var options = {}
+    location.hash.slice(1).split('&').forEach(kv => {
+        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 => {