mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

Voegt stijl toe

Browse Source 
En wat voor een stijl. Damn.
This commit is contained in:
Mark Hoekveen
2024-02-12 02:06:28 +01:00
parent 66e69bc23d
commit 963ab7f0bf
13 changed files with 137 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
playlist/models/track.py
+1 -1
View File
@@ -12,7 +12,7 @@ class Track(models.Model):
s = f"'{self.name}'" s = f"'{self.name}'"
if self.artists.count() > 0: if self.artists.count() > 0:
artists = list(map(lambda a:a.name, self.artists.all())) artists = list(map(lambda a:a.name, self.artists.all()))
s += " by " s += " door "
s += " & ".join(artists) s += " & ".join(artists)
return s return s
id = models.CharField(primary_key=True, max_length=128) id = models.CharField(primary_key=True, max_length=128)
playlist/static/img/draakje/draakje-headphones.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

playlist/static/img/draakje/draakje-headphones2.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

playlist/static/img/draakje/draakje-headphones3.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

playlist/static/img/draakje/draakje-waiting.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

playlist/static/style.css
+12
View File
@@ -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;
}
playlist/tasks.py
-16
View File
@@ -17,7 +17,6 @@ def get_banter(id):
track = Track.objects.get(pk=id) track = Track.objects.get(pk=id)
r = requests.post( r = requests.post(
os.getenv('AI_ENDPOINT'), os.getenv('AI_ENDPOINT'),
#'http://localhost:11434/api/generate',
json={ json={
'model': os.getenv('AI_MODEL'), 'model': os.getenv('AI_MODEL'),
'prompt': str(track) 'prompt': str(track)
@@ -41,18 +40,3 @@ def get_banter(id):
track.banter_done = True track.banter_done = True
track.save() track.save()
return body['context'] 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()
playlist/templates/Banter.html
+7 -8
View File
@@ -1,14 +1,13 @@
{% load static %}
<div <div
class="banter" id="banter"
hx-get="{% url 'track-banter' track.id %}"
{% if not track.banter_done %} {% 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 %} {% endif %}
hx-swap="outerHTML" hx-swap="outerHTML"
hx-target="#banter"
> >
{% if track.banter != "" %} {% include "Popup.html" with body=track.banter title=track img="img/draakje/draakje-headphones3.gif" %}
{{track.banter}} </div>
{% else %}
{{ waiting | random }}
{% endif %}
</div> </div>
playlist/templates/Base.html
+41 -10
View File
@@ -1,21 +1,52 @@
<html> <html>
<head> <head>
{% load static %} {% load static %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="{% static 'js/htmx.min.js' %}" defer></script> <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> </head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'> <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="background:#01817F;">
<header> <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> </header>
<main> <main>
{% block main-content %}{% endblock %}
</main> </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> </body>
</html> </html>
playlist/templates/Nominate.html
+4 -2
View File
@@ -1,7 +1,10 @@
{% extends "Base.html" %} {% extends "Base.html" %}
{% block window-title %}
Nomineren
{% endblock %}
{% block main-content %} {% block main-content %}
<h2>Nominate</h2>
{% if warning %} {% if warning %}
<div class="info warning">{{warning}}</div> <div class="info warning">{{warning}}</div>
{% endif %} {% endif %}
@@ -14,7 +17,6 @@
<input type="submit" value="OK"> <input type="submit" value="OK">
</form> </form>
{% if nominated %} {% if nominated %}
<div class="info">{% if error %}❌{% else %}✅{% endif %} {{nominated}}</div>
{% include "Banter.html" with track=nominated %} {% include "Banter.html" with track=nominated %}
{% endif %} {% endif %}
{% endblock %} {% endblock %}
playlist/templates/Popup.html
+31
View File
@@ -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>
playlist/templates/SpotifyEmbed.html
+17 -2
View File
@@ -2,9 +2,18 @@
<div id="vote-box" hx-target="#vote-box"> <div id="vote-box" hx-target="#vote-box">
{% if error %}<div class="error">{{ error }}</div>{% endif %} {% if error %}<div class="error">{{ error }}</div>{% endif %}
<iframe src="https://open.spotify.com/embed/track/{{ track.id }}" <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> allow="encrypted-media"></iframe>
<div id="vote-buttons" hx-vals='{"spotify_id": "{{ track.id }}"}'> <div
id="vote-buttons"
hx-vals='{"spotify_id": "{{ track.id }}"}'
style="margin-top:10px;"
>
<fieldset>
<legend>Dit vind ik een leuk nummer!</legend>
<button <button
hx-vals='{"vote": "2"}' hx-vals='{"vote": "2"}'
hx-post="{% url 'vote-track' %}" hx-post="{% url 'vote-track' %}"
@@ -25,7 +34,13 @@
hx-vals='{"vote": "-2"}' hx-vals='{"vote": "-2"}'
hx-post="{% url 'vote-track' %}" hx-post="{% url 'vote-track' %}"
>Helemaal niet mee eens</button> >Helemaal niet mee eens</button>
</fieldset>
</div> </div>
{% if track.banter %}
{% block popup %}
{% include "Popup.html" with body=track.banter title=track img="img/draakje/draakje-headphones3.gif" %}
{% endblock %}
{% endif %}
</div> </div>
{% else %} {% else %}
<p hx-boost="true"> <p hx-boost="true">
playlist/templates/Vote.html
+4 -1
View File
@@ -1,7 +1,10 @@
{% extends "Base.html" %} {% extends "Base.html" %}
{% block window-title %}
Stemmen
{% endblock %}
{% block main-content %} {% block main-content %}
<h2>Lekker stemmen</h2>
<div hx-get="{% url 'vote-track' %}" hx-trigger="load"> <div hx-get="{% url 'vote-track' %}" hx-trigger="load">
Laden... Laden...
</div> </div>