first backend frontend split

with docker compose file
nextjs something something
also includes migrations

backend/playlist/templates/Vote.html

@@ -0,0 +1,95 @@
+{% extends "Base.html" %}
+
+{% block window-title %}
+Stemmen{% if vote_left or skip_left %}: {{vote_left|add:skip_left}} te gaan.{% endif %}
+{% endblock %}
+
+{% block main-content %}
+{% if user.profile.can_vote %}
+  {% if track %}
+  <div id="vote-box" hx-target="body">
+    {% if error %}<div class="error">{{ error }}</div>{% endif %}
+    {% include 'MediaPlayer.html' with track=track %}
+
+    <div
+      id="vote-stars"
+      hx-vals='{"spotify_id": "{{ track.id }}"}'
+      style="margin-top:10px;"
+      >
+      <fieldset>
+        <legend>Hoeveel sterren geef jij dit?</legend>
+        <div class="star-wrapper">
+          <a
+            hx-vals='{"vote": "1"}'
+            hx-post="{% url 'vote' %}"
+          ></a>
+          <a
+            hx-vals='{"vote": "2"}'
+            hx-post="{% url 'vote' %}"
+          ></a>
+          <a
+            hx-vals='{"vote": "3"}'
+            hx-post="{% url 'vote' %}"
+          ></a>
+          <a
+            hx-vals='{"vote": "4"}'
+            hx-post="{% url 'vote' %}"
+          ></a>
+          <a
+            hx-vals='{"vote": "5"}'
+            hx-post="{% url 'vote' %}"
+          ></a>
+        </div>
+      </fieldset>
+      <div class="skip-wrapper">
+        {% if not skipped %}
+          {% csrf_token %}
+          <button class="skip" hx-post="{% url 'skip' %}" >Skip</button>
+        {% endif %}
+      </div>
+      <div class="undo-wrapper"  hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >
+      {% if undo %}
+          {% csrf_token %}
+          <p>Je hebt {{undo.track}} een score van {{undo.points}} sterren gegeven!</p>
+          <button class="undo" hx-post="{% url 'undo' %}" >Undo</button>
+      {% endif %}
+      </div>
+    </div>
+  </div>
+  {% else %}
+  <p hx-boost="true">
+    Je hebt niets meer om te stemmen. Lekker bezig!
+    <a href="{% url 'nominate' %}">Nomineer zelf iets</a>, als je nog quota hebt.
+  </p>
+    {% if undo %}
+      <!--<form class="undo-wrapper" method="post" action="{% url 'undo' %}" hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >-->
+      <div class="undo-wrapper" hx-target="body" hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >
+        {% csrf_token %}
+        <p>Je hebt {{undo.track}} een score van {{undo.points}} sterren gegeven!</p>
+        <button class="undo" hx-post="{% url 'undo' %}" >Undo</button>
+      </div>
+    {% endif %}
+  {% endif %}
+{% else %}
+<p> Stemmen is voorbij. Joe.</p>
+{% endif %}
+{% endblock %}
+
+{% block clippy %}
+  {% include "Clippy.html" with body=track.banter img="img/draakje/draakje-headphones3.gif" %}
+{% endblock %}
+
+{% block status-bar%}
+<div class="status-bar" id="countdown">
+    <p class="status-bar-field"><span id="days"></span> dagen</p>
+    <p class="status-bar-field"><span id="hours"></span> uur</p>
+    <p class="status-bar-field"><span id="minutes"></span> minuten</p>
+    <p class="status-bar-field"><span id="seconds"></span> seconden</p>
+</div>
+<script>
+  document.body.addEventListener('htmx:load', function(evt) {
+    //startCountdown("2024-08-25T23:59:59+02:00");
+    startCountdown("{{user.profile.vote_end}}");
+  });
+</script>
+{% endblock %}