From 963ab7f0bfb5fe336131e239a1f5aeee21975d07 Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Mon, 12 Feb 2024 02:06:28 +0100
Subject: [PATCH] Voegt stijl toe En wat voor een stijl. Damn.

---
 playlist/models/track.py                      |   2 +-
 .../static/img/draakje/draakje-headphones.gif | Bin 0 -> 13237 bytes
 .../img/draakje/draakje-headphones2.gif       | Bin 0 -> 13150 bytes
 .../img/draakje/draakje-headphones3.gif       | Bin 0 -> 13220 bytes
 .../static/img/draakje/draakje-waiting.gif    | Bin 0 -> 12457 bytes
 playlist/static/style.css                     |  12 ++++
 playlist/tasks.py                             |  16 -----
 playlist/templates/Banter.html                |  15 +++--
 playlist/templates/Base.html                  |  51 ++++++++++++---
 playlist/templates/Nominate.html              |   6 +-
 playlist/templates/Popup.html                 |  31 +++++++++
 playlist/templates/SpotifyEmbed.html          |  59 +++++++++++-------
 playlist/templates/Vote.html                  |   5 +-
 13 files changed, 137 insertions(+), 60 deletions(-)
 create mode 100644 playlist/static/img/draakje/draakje-headphones.gif
 create mode 100644 playlist/static/img/draakje/draakje-headphones2.gif
 create mode 100644 playlist/static/img/draakje/draakje-headphones3.gif
 create mode 100644 playlist/static/img/draakje/draakje-waiting.gif
 create mode 100644 playlist/static/style.css
 create mode 100644 playlist/templates/Popup.html

diff --git a/playlist/models/track.py b/playlist/models/track.py
index fb44a33..af120d6 100644
--- a/playlist/models/track.py
+++ b/playlist/models/track.py
@@ -12,7 +12,7 @@ class Track(models.Model):
         s = f"'{self.name}'"
         if self.artists.count() > 0:
             artists = list(map(lambda a:a.name, self.artists.all()))
-            s += " by "
+            s += " door "
             s += " & ".join(artists)
         return s
     id = models.CharField(primary_key=True, max_length=128)
diff --git a/playlist/static/img/draakje/draakje-headphones.gif b/playlist/static/img/draakje/draakje-headphones.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b997080dd7c87ffaf1574ee17ec66c16a7fbba5e
GIT binary patch
literal 13237
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
W^GBR+=jicQ(1X*3{3*K--G2b_mf)QL

literal 0
HcmV?d00001

diff --git a/playlist/static/img/draakje/draakje-headphones2.gif b/playlist/static/img/draakje/draakje-headphones2.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ce5a5073182d94ec40e8a5dee99b3f7fb6049515
GIT binary patch
literal 13150
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
TDV?dtkFEx@?f4&TJI?+M<ex;R

literal 0
HcmV?d00001

diff --git a/playlist/static/img/draakje/draakje-headphones3.gif b/playlist/static/img/draakje/draakje-headphones3.gif
new file mode 100644
index 0000000000000000000000000000000000000000..260eda6a7d2fcf81b7c3df12038a854c9757cea5
GIT binary patch
literal 13220
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
CAkW(X

literal 0
HcmV?d00001

diff --git a/playlist/static/img/draakje/draakje-waiting.gif b/playlist/static/img/draakje/draakje-waiting.gif
new file mode 100644
index 0000000000000000000000000000000000000000..03a57c1e0e52a8199695327e5c65906fce582539
GIT binary patch
literal 12457
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
A{{R30

literal 0
HcmV?d00001

diff --git a/playlist/static/style.css b/playlist/static/style.css
new file mode 100644
index 0000000..10f0b01
--- /dev/null
+++ b/playlist/static/style.css
@@ -0,0 +1,12 @@
+.popup {
+	position: fixed;
+	z-index:99;
+	min-width: 380px;
+	max-width:540px;
+	resize: both;
+	overflow-y:scroll;
+	overflow-x:visible;
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: space-between;
+}
diff --git a/playlist/tasks.py b/playlist/tasks.py
index 254957b..92456a0 100644
--- a/playlist/tasks.py
+++ b/playlist/tasks.py
@@ -17,7 +17,6 @@ def get_banter(id):
     track = Track.objects.get(pk=id)
     r = requests.post(
         os.getenv('AI_ENDPOINT'),
-        #'http://localhost:11434/api/generate',
         json={
             'model': os.getenv('AI_MODEL'),
             'prompt': str(track)
@@ -41,18 +40,3 @@ def get_banter(id):
             track.banter_done = True
             track.save()
             return body['context']
-@shared_task
-def get_banter_test(id):
-    letters = ["a","b","c","d","e","q","w", " "]
-    track = Track.objects.get(pk=id)
-    time.sleep(20)
-    track.banter = "Lorem "
-    track.save()
-    time.sleep(.5)
-
-    for i in range(100):
-        track.banter += choice(letters)
-        track.save()
-        time.sleep(.3)
-    track.banter_done = True
-    track.save()
diff --git a/playlist/templates/Banter.html b/playlist/templates/Banter.html
index 365efba..4cb3b6e 100644
--- a/playlist/templates/Banter.html
+++ b/playlist/templates/Banter.html
@@ -1,14 +1,13 @@
+{% load static %}
 <div
-  class="banter"
-  hx-get="{% url 'track-banter' track.id %}"
+  id="banter"
   {% if not track.banter_done %}
-    hx-trigger="every {% if track.banter %}500ms{% else %}5s{% endif %}"
+    hx-get="{% url 'track-banter' track.id %}"
+    hx-trigger="load delay:{% if track.banter %}500ms{% else %}5s{% endif %}"
   {% endif %}
   hx-swap="outerHTML"
+  hx-target="#banter"
   >
-  {% if track.banter != "" %}
-    {{track.banter}}
-  {% else %}
-  {{ waiting | random }}
-  {% endif %}
+  {% include "Popup.html" with body=track.banter title=track img="img/draakje/draakje-headphones3.gif" %}
+</div>
 </div>
diff --git a/playlist/templates/Base.html b/playlist/templates/Base.html
index dddb075..0262f77 100644
--- a/playlist/templates/Base.html
+++ b/playlist/templates/Base.html
@@ -1,21 +1,52 @@
 <html>
   <head>
     {% load static %}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="{% static 'js/htmx.min.js' %}" defer></script>
+    <script src="https://unpkg.com/interactjs"></script>
+    <link
+  rel="stylesheet"
+  href="https://unpkg.com/98.css"
+>
+
+      <link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
+
   </head>
-  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+    <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="background:#01817F;">
     <header>
-      <nav>
-        <ul hx-boost="true">
-          <li><a href="{% url 'vote' %}">Stemmen</a></li>
-          <li><a href="{% url 'nominate' %}">Nomineren</a></li>
-          <li><a href="/">Statistieken</a></li>
-        </ul>
-      </nav>
-      <h1>{% block page-name %}Muzak{% endblock %}</h1>
     </header>
     <main>
-      {% block main-content %}{% endblock %}
     </main>
+
+  <div class="window" style="max-width:960px">
+    <div class="title-bar">
+      <div class="title-bar-text">
+        {% block window-title %}{% endblock %}
+      </div>
+      <div class="title-bar-controls">
+        <button aria-label="Help"></button>
+        <button aria-label="Close"></button>
+      </div>
+    </div>
+    <div class="window-body">
+      <menu role="tablist" hx-boost="true">
+        <li role="tab" {% if request.path == '/vote/' %}aria-selected="true" {% endif %}>
+          <a href="{% url 'vote' %}">Stemmen</a>
+        </li>
+        <li role="tab" {% if request.path == '/track/' %}aria-selected="true" {% endif %}>
+          <a href="{% url 'nominate' %}">Nomineren</a>
+        </li>
+        <li role="tab" {% if request.path == '/' %}aria-selected="true" {% endif %}>
+          <a href="/">Statistieken</a>
+        </li>
+      </menu>
+       <div class="window" role="tabpanel">
+    <div class="window-body">
+        {% block main-content %}{% endblock %}
+    </div>
+  </div>
+  {% block popup %}{% endblock %}
+
+  </div>
   </body>
 </html>
diff --git a/playlist/templates/Nominate.html b/playlist/templates/Nominate.html
index e9a5df3..196af88 100644
--- a/playlist/templates/Nominate.html
+++ b/playlist/templates/Nominate.html
@@ -1,7 +1,10 @@
 {% extends "Base.html" %}
 
+{% block window-title %}
+Nomineren
+{% endblock %}
+
 {% block main-content %}
-<h2>Nominate</h2>
 {% if warning %}
 <div class="info warning">{{warning}}</div>
 {% endif %}
@@ -14,7 +17,6 @@
     <input type="submit" value="OK">
 </form>
 {% if nominated %}
-<div class="info">{% if error %}❌{% else %}✅{% endif %} {{nominated}}</div>
 {% include "Banter.html" with track=nominated %}
 {% endif %}
 {% endblock %}
diff --git a/playlist/templates/Popup.html b/playlist/templates/Popup.html
new file mode 100644
index 0000000..548d590
--- /dev/null
+++ b/playlist/templates/Popup.html
@@ -0,0 +1,31 @@
+{% load static %}
+<div class="window popup">
+  <div class="title-bar">
+    <div class="title-bar-text">{{title}}</div>
+  </div>
+  <div class="window-body">
+    {{ body }}
+    {% if img %}
+    <br /><img src="{% static img %}" />
+    {% endif %}
+  </div>
+  <div class="status-bar">
+    <p class="status-bar-field">{{title}}</p>
+    <p class="status-bar-field">CPU Usage: 14%</p>
+  </div>
+</div>
+<script>
+  position = { x: 0, y: 0 }
+
+  interact('.popup .title-bar').draggable({
+    listeners: {
+      move (event) {
+        position.x += event.dx
+        position.y += event.dy
+
+        event.target.parentElement.style.transform =
+          `translate(${position.x}px, ${position.y}px)`
+      },
+    }
+  })
+</script>
diff --git a/playlist/templates/SpotifyEmbed.html b/playlist/templates/SpotifyEmbed.html
index 12794d4..bd9e5a5 100644
--- a/playlist/templates/SpotifyEmbed.html
+++ b/playlist/templates/SpotifyEmbed.html
@@ -2,30 +2,45 @@
 <div id="vote-box" hx-target="#vote-box">
   {% if error %}<div class="error">{{ error }}</div>{% endif %}
   <iframe src="https://open.spotify.com/embed/track/{{ track.id }}"
-  class="play-sample" width="300" height="380" frameborder="0" allowtransparency="true" 
+  class="play-sample"
+  width="100%"
+  height="352"
+  frameborder="0"
   allow="encrypted-media"></iframe>
-  <div id="vote-buttons" hx-vals='{"spotify_id": "{{ track.id }}"}'>
-    <button
-      hx-vals='{"vote": "2"}'
-      hx-post="{% url 'vote-track' %}"
-    >Helemaal mee eens</button>
-    <button
-      hx-vals='{"vote": "1"}'
-      hx-post="{% url 'vote-track' %}"
-    >Mee eens</button>
-    <button
-      hx-vals='{"vote": "0"}'
-      hx-post="{% url 'vote-track' %}"
-    >Neutraal</button>
-    <button
-      hx-vals='{"vote": "-1"}'
-      hx-post="{% url 'vote-track' %}"
-    >Niet mee eens</button>
-    <button
-      hx-vals='{"vote": "-2"}'
-      hx-post="{% url 'vote-track' %}"
-    >Helemaal niet mee eens</button>
+  <div
+    id="vote-buttons"
+    hx-vals='{"spotify_id": "{{ track.id }}"}'
+    style="margin-top:10px;"
+    >
+    <fieldset>
+      <legend>Dit vind ik een leuk nummer!</legend>
+      <button
+        hx-vals='{"vote": "2"}'
+        hx-post="{% url 'vote-track' %}"
+      >Helemaal mee eens</button>
+      <button
+        hx-vals='{"vote": "1"}'
+        hx-post="{% url 'vote-track' %}"
+      >Mee eens</button>
+      <button
+        hx-vals='{"vote": "0"}'
+        hx-post="{% url 'vote-track' %}"
+      >Neutraal</button>
+      <button
+        hx-vals='{"vote": "-1"}'
+        hx-post="{% url 'vote-track' %}"
+      >Niet mee eens</button>
+      <button
+        hx-vals='{"vote": "-2"}'
+        hx-post="{% url 'vote-track' %}"
+      >Helemaal niet mee eens</button>
+    </fieldset>
   </div>
+  {% if track.banter %}
+    {% block popup %}
+      {% include "Popup.html" with body=track.banter title=track img="img/draakje/draakje-headphones3.gif" %}
+    {% endblock %}
+  {% endif %}
 </div>
 {% else %}
 <p hx-boost="true">
diff --git a/playlist/templates/Vote.html b/playlist/templates/Vote.html
index 98854e8..8df201a 100644
--- a/playlist/templates/Vote.html
+++ b/playlist/templates/Vote.html
@@ -1,7 +1,10 @@
 {% extends "Base.html" %}
 
+{% block window-title %}
+Stemmen
+{% endblock %}
+
 {% block main-content %}
-  <h2>Lekker stemmen</h2>
   <div hx-get="{% url 'vote-track' %}" hx-trigger="load">
     Laden...
   </div>