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
Download Patch File Download Diff File Expand all files Collapse all files

9
waiting_room/templates/base.html
View File

@ -6,11 +6,16 @@
<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-ext-ws@2.0.1/ws.js"></script>
<script>
if (!localStorage.getItem('userId')) {
localStorage.setItem('userId', '{{ user_id }}');
}
</script>
</head>
<body>
<main>
{% include 'progress_bar.html' %}
<section>{% block content %}{% endblock %}</section>
{% include 'components/tasks/layout.html' %}
{% block content %}{% endblock %}
</main>
</body>
</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 %}
<h1>Index</h1>
<section
id="form-start-task"
hx-ext="ws"
ws-connect="/ws/nombre_temporal/"
>
<form id="form" ws-send>
<input type="submit" name="task" value="calculate">
</form>
</section>
<script>
document.querySelector('#form-start-task').setAttribute('ws-connect', '/ws/' + localStorage.getItem('userId') + '/');
</script>
<section>
{% if result %}
<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>