Voegt stijl toe

En wat voor een stijl. Damn.
2024-02-12 02:06:28 +01:00
parent 66e69bc23d
commit 963ab7f0bf
13 changed files with 137 additions and 60 deletions
@@ -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)
@@ -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;
+}
@@ -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()
@@ -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>
@@ -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>
@@ -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 %}
@@ -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>
@@ -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">
@@ -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>