Render progress info on non-javascript fallback page for celery tasks (#4452)

* Render progress info on non-javascript fallback page for celery tasks

* Review notes

src/pretix/base/views/tasks.py

@@ -144,7 +144,12 @@ class AsyncMixin:
                     return self.success(res.info)
                 else:
                     return self.error(res.info)
-            return render(request, 'pretixpresale/waiting.html')
+            state, info = res.state, res.info
+            return render(request, 'pretixpresale/waiting.html', {
+                'started': state in ('PROGRESS', 'STARTED'),
+                'percentage': info.get('value', 0) if isinstance(info, dict) else 0,
+                'steps': info.get('steps', []) if isinstance(info, dict) else None,
+            })
 
     def success(self, value):
         smes = self.get_success_message(value)

src/pretix/presale/templates/pretixpresale/waiting.html

@@ -21,6 +21,23 @@
 
         <h1>{% trans "We are processing your request …" %}</h1>
 
+        {% if percentage %}
+            <div class="progress">
+                <div class="progress-bar progress-bar-success progress-bar-{{ percentage|floatformat:0 }}">
+                </div>
+            </div>
+            {% if steps %}
+                <ol class="steps">
+                    {% for step in steps %}
+                        <li>
+                            <span class="fa fa-fw {% if step.done %}fa-check text-success{% else %}fa-cog fa-spin text-muted{% endif %}"></span>
+                            {{ step.label }}
+                        </li>
+                    {% endfor %}
+                </ol>
+            {% endif %}
+        {% endif %}
+
         <p>
             {% trans "If this takes longer than a few minutes, please contact us." %}
         </p>

src/pretix/static/pretixpresale/scss/waiting.scss

@@ -18,3 +18,18 @@ body {
     font-size: 200px;
     color: $brand-primary;
 }
+
+.progress {
+    max-width: 450px;
+    margin: 0 auto 20px;
+}
+.steps {
+    max-width: 450px;
+    text-align: left;
+    margin: 0 auto 20px;
+    list-style-type: none;
+    padding: 0;
+}
+@for $i from 0 through 100 {
+    .progress-bar-#{$i} { width: 1% * $i; }
+}