Backgrounds

playlist/templates/Settings.html

@@ -10,11 +10,25 @@
     </div>
   </form>
   {% endif %}
-  <div class="field-row">
-    <label for="wallpaper">Eigen wallpaper url:</label>
-    <input id="wallpaper" type="text" onchange="wallpaperChanged()" />
-    <button id="wallpaper-reset" onclick="wallpaperChanged()">Reset</button>
-  </div>
+  <form method="post">
+    {% csrf_token %}
+    {% if backgrounds %}
+    <div class="field-row">
+      <label for="wallpaper">Wallpaper:</label>
+      <select id="background" name="background" onchange="this.form.submit()">
+        {% for background in backgrounds %}
+          <option
+            value="{{background.id}}"
+            {% if background.id == currentBackground %} selected{% endif %}
+            >
+            {{background.name}}
+          </option>
+        {% endfor %}
+      </select>
+      <button id="wallpaper-reset" onclick="wallpaperChanged()">Reset</button>
+    </div>
+    {% endif %}
+  </form>
   <script>
     function wallpaperChanged() {
       const expression = /^https?:\/\/.*\.(jpeg|jpg|png|gif)$/
@@ -26,6 +40,5 @@
         setWallpaper()
       }
     }
-
   </script>
 {% endblock %}