deadlines

playlist/templates/Nominate.html

@@ -7,10 +7,17 @@ Nomineren
 {% block main-content %}
 <form method="post">
     {% csrf_token %}
-    <p>Vul een spotify link in om een nummer te nomineren.</p>
-    <input type="text" id="spotify-input" name="spotify_link" placeholder="Spotify-link">
-    <input type="submit" value="Insturen" {% if user.profile.quota < 1%}disabled{%endif%}>
+    {% if user.profile.can_nominate.0 %}
+      <p>Vul een spotify link in om een nummer te nomineren.</p>
+      <input type="text" id="spotify-input" name="spotify_link" placeholder="Spotify-link">
+      <input type="submit" value="Insturen" {% if user.profile.quota < 1%}disabled{%endif%}>
+    {% elif user.profile.can_nominate.1 == 'quota' %}
+      <p>Je quotum is op. Je zal helaas eventjes moeten wachten met nomineren.</p>
+    {% elif user.profile.can_nominate.1 == 'over' %}
+      <p>Het nomineren is voorbij voor dit jaar! Bedankt voor de inzendingen.</p>
+    {% endif %}
 </form>
+
 {% endblock %}
 
 {% block status-bar%}
@@ -23,4 +30,16 @@ Nomineren
     </div>
     <p class="status-bar-field">{{user.profile.quota_display}} nominaties over.</p>
 </div>
+<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-06-25T23:59:59+02:00");
+    startCountdown("{{user.profile.nominate_end}}");
+  });
+</script>
 {% endblock %}

playlist/templates/Overview.html

@@ -5,14 +5,14 @@ Overzicht
 {% endblock %}
 
 {% block multi-row %}
-  <menu role="tablist" hx-boost="true" class="multirows">
+  {% comment %} <menu role="tablist" hx-boost="true" class="multirows">
     <li role="tab" aria-selected="true">
       <a href="{% url 'overview' %}">Tracks</a>
     </li>
     <li role="tab">
       <a href="{% url 'playlist-list' %}">Playlists</a>
     </li>
-  </menu>
+  </menu> {% endcomment %}
 {% endblock %}
 
 {% block main-content %}

playlist/templates/Vote.html

@@ -5,59 +5,86 @@ Stemmen
 {% endblock %}
 
 {% block main-content %}
-{% if track %}
-<div id="vote-box" hx-target="body">
-  {% if error %}<div class="error">{{ error }}</div>{% endif %}
-  {% include 'MediaPlayer.html' with track=track %}
+{% 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
+      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>
+      {% if undo %}
+        <!--<form class="undo-wrapper" method="post" action="{% url 'undo' %}" hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >-->
+        <div class="undo-wrapper"  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 %}
+    </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-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 %}
-  </div>
-</div>
+  {% endif %}
 {% 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>
+<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 %}

playlist/templates/head.html

@@ -2,6 +2,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="{% static 'js/htmx.min.js' %}" defer></script>
 <script src="{% static 'js/interact.js' %}" defer></script>
+<script src="{% static 'js/countdown.js' %}" defer></script>
 <link href="{% static '98.css/style.css' %}" rel="stylesheet" type="text/css" />
 <link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
 <style>