andros/example-in-django-waiting-room-for-asynchronous-tasks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add templates

Browse Source
This commit is contained in:
Andros Fenollosa 2024-11-07 08:17:10 +01:00
parent 19d5317f0d
commit d8ffe60909
8 changed files with 55 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
db.sqlite3 Normal file
View File

Binary file not shown.

10
waiting_room/tasks.py
View File

@ -1,5 +1,6 @@
from huey.contrib.djhuey import task from huey.contrib.djhuey import task
import operator import operator
from django.template.loader import render_to_string
from itertools import permutations from itertools import permutations
from collections import Counter from collections import Counter
from functools import reduce from functools import reduce
@ -7,13 +8,16 @@ from math import factorial
from channels.layers import get_channel_layer from channels.layers import get_channel_layer
from asgiref.sync import async_to_sync from asgiref.sync import async_to_sync
def render_progress_bar(group_name, message): def render_progress_bar(group_name, progress, result=None):
channel_layer = get_channel_layer() channel_layer = get_channel_layer()
async_to_sync(channel_layer.group_send)( async_to_sync(channel_layer.group_send)(
group_name, group_name,
{ {
'type': 'channel_message', 'type': 'channel_message',
'message': f'<div id="notification">{message}</div>', 'message': render_to_string('components/tasks/update.html', {
'progress': progress,
'result': result,
}),
} }
) )
@ -64,7 +68,7 @@ def calculate_min_distance(group_name):
route_distance += distances[perm[-1]][perm[0]] # Back to the start city route_distance += distances[perm[-1]][perm[0]] # Back to the start city
shortest_route = min(shortest_route, route_distance) shortest_route = min(shortest_route, route_distance)
render_progress_bar(group_name, 100) render_progress_bar(group_name, 100, shortest_route)
return shortest_route return shortest_route
return calculate_shortest_route(distances) return calculate_shortest_route(distances)

9
waiting_room/templates/base.html
View File

@ -6,11 +6,16 @@
<title>{% block title %}Waiting Room{% endblock %}</title> <title>{% block title %}Waiting Room{% endblock %}</title>
<script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script> <script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx-ext-ws@2.0.1/ws.js"></script> <script src="https://unpkg.com/htmx-ext-ws@2.0.1/ws.js"></script>
<script>
if (!localStorage.getItem('userId')) {
localStorage.setItem('userId', '{{ user_id }}');
}
</script>
</head> </head>
<body> <body>
<main> <main>
{% include 'progress_bar.html' %} {% include 'components/tasks/layout.html' %}
<section>{% block content %}{% endblock %}</section> {% block content %}{% endblock %}
</main> </main>
</body> </body>
</html> </html>

15
waiting_room/templates/components/tasks/layout.html Normal file
View File

@ -0,0 +1,15 @@
<section
id="component-notification"
hx-ext="ws"
style="
position: fixed;
right: 0;
bottom: 0;
padding: 2rem;
background: lightgray;
">
{% include 'components/tasks/update.html' %}
</section>
<script>
document.querySelector('#component-notification').setAttribute('ws-connect', '/ws/' + localStorage.getItem('userId') + '/');
</script>

11
waiting_room/templates/components/tasks/update.html Normal file
View File

@ -0,0 +1,11 @@
<div id="component-notification__update">
<h1>Task</h1>
{% if result %}
<h2>Done!</h2>
<a href="{% url 'waiting_room:index' %}?result={{ result }}">Go to result</a>
{% elif progress %}
<progress value="{{ progress }}" max="100">{{ progress }}</progress>
{% else %}
<p>Nothing</p>
{% endif %}
</div>

5
waiting_room/templates/index.html
View File

@ -5,13 +5,16 @@
{% block content %} {% block content %}
<h1>Index</h1> <h1>Index</h1>
<section <section
id="form-start-task"
hx-ext="ws" hx-ext="ws"
ws-connect="/ws/nombre_temporal/"
> >
<form id="form" ws-send> <form id="form" ws-send>
<input type="submit" name="task" value="calculate"> <input type="submit" name="task" value="calculate">
</form> </form>
</section> </section>
<script>
document.querySelector('#form-start-task').setAttribute('ws-connect', '/ws/' + localStorage.getItem('userId') + '/');
</script>
<section> <section>
{% if result %} {% if result %}
<h2>The result is {{ result }}</h2> <h2>The result is {{ result }}</h2>

20
waiting_room/templates/progress_bar.html
View File

@ -1,20 +0,0 @@
<section
hx-ext="ws"
ws-connect="/ws/nombre_temporal/"
hx-swap-oob="innerHTML:notification"
style="
position: fixed;
right: 0;
bottom: 0;
padding: 2rem;
background: lightgray;
">
<div id="notification"></div>
<!-- <h1>Task</h1>
{% if result %}
<h3>Done!</h3>
<a href="{% url 'waiting_room:index' %}?result={{ result }}">Show result</a>
{% else %}
<progress value="{{ progress }}" max="100">{{ progress }}</progress>
{% endif %} -->
</section>

13
waiting_room/views.py
View File

@ -1,8 +1,17 @@
from django.shortcuts import render from django.shortcuts import render
import uuid
def make_user_id():
return str(uuid.uuid4()).replace('-', '')
def index(request): def index(request):
result = request.GET.get('result', None) result = request.GET.get('result', None)
return render(request, 'index.html', {'result': result}) return render(request, 'index.html', {
'result': result,
'user_id': make_user_id(),
})
def about_us(request): def about_us(request):
return render(request, 'about_us.html') return render(request, 'about_us.html', {
'user_id': make_user_id(),
})