Fix #1074 -- More specific messages during asynctasks

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

@@ -72,11 +72,16 @@
 <div id="ajaxerr">
 </div>
 <div id="loadingmodal">
-    <i class="fa fa-cog big-rotating-icon"></i>
+    <div class="modal-card">
-    <h1>{% trans "We are processing your request …" %}</h1>
+        <div class="modal-card-icon">
-    <p>
+            <i class="fa fa-cog big-rotating-icon"></i>
-        {% trans "If this takes longer than a few minutes, please contact us." %}
+        </div>
-    </p>
+        <div class="modal-card-content">
+            <h3></h3>
+            <p class="text"></p>
+            <p class="status">{% trans "If this takes longer than a few minutes, please contact us." %}</p>
+        </div>
+    </div>
 </div>
 {% if DEBUG %}
     <script type="text/javascript" src="{% url 'javascript-catalog' lang=request.LANGUAGE_CODE %}" async></script>

src/pretix/presale/templates/pretixpresale/event/checkout_addons.html

@@ -5,7 +5,8 @@
     <p>
         {% trans "For some of the products in your cart, you can choose additional options before you continue." %}
     </p>
-    <form class="form-horizontal" method="post" data-asynctask>
+    <form class="form-horizontal" method="post" data-asynctask
+            data-asynctask-headline="{% trans "We're now trying to book these add-ons for you!" %}">
         {% csrf_token %}
         <div class="panel-group" id="questions_group">
             {% for form in forms %}

src/pretix/presale/templates/pretixpresale/event/checkout_confirm.html

@@ -8,7 +8,8 @@
     <h2>{% trans "Review order" %}</h2>
     {% include "pretixpresale/event/fragment_checkoutflow.html" %}
     <p>{% trans "Please review the details below and confirm your order." %}</p>
-    <form method="post" data-asynctask>
+    <form method="post" data-asynctask
+            data-asynctask-headline="{% trans "Please hang tight, we're finalizing your order!" %}">
         {% csrf_token %}
         <div class="panel panel-primary cart">
             <div class="panel-heading">

src/pretix/presale/templates/pretixpresale/event/fragment_cart.html

@@ -81,6 +81,7 @@
             <div class="count">
                 {% if editable %}
                 <form action="{% eventurl event "presale:event.cart.remove" cart_namespace=cart_namespace|default_if_none:"" %}"
+                        data-asynctask-headline="{% trans "Okay, we're removing that…" %}"
                         method="post" data-asynctask>
                     {% csrf_token %}
                     <input type="hidden" name="id" value="{{ line.id }}" />
@@ -92,6 +93,8 @@
                 {{ line.count }}
                 {% if editable %}
                 <form action="{% eventurl event "presale:event.cart.add" cart_namespace=cart_namespace|default_if_none:"" %}"
+                        data-asynctask-headline="{% trans "We're trying to reserve another one for you!" %}"
+                        data-asynctask-text="{% blocktrans with time=event.settings.reservation_time %}Once the items are in your cart, you will have {{ time }} minutes to complete your purchase.{% endblocktrans %}"
                     method="post" data-asynctask>
                     <input type="hidden" name="subevent" value="{{ line.subevent_id|default_if_none:"" }}" />
                     {% csrf_token %}

src/pretix/presale/templates/pretixpresale/event/index.html

@@ -180,6 +180,8 @@
 
         {% if ev.presale_is_running or event.settings.show_items_outside_presale_period %}
             <form method="post" data-asynctask
+                    data-asynctask-headline="{% trans "We're now trying to reserve this for you!" %}"
+                    data-asynctask-text="{% blocktrans with time=event.settings.reservation_time %}Once the items are in your cart, you will have {{ time }} minutes to complete your purchase.{% endblocktrans %}"
                     action="{% eventurl request.event "presale:event.cart.add" cart_namespace=cart_namespace %}?next={{ request.path|urlencode }}">
                 {% csrf_token %}
                 <input type="hidden" name="subevent" value="{{ subevent.id|default_if_none:"" }}" />

src/pretix/presale/templates/pretixpresale/event/voucher.html

@@ -21,7 +21,11 @@
     {% if event.presale_is_running or event.settings.show_items_outside_presale_period %}
         <form method="post"
                 action="{% eventurl request.event "presale:event.cart.add" cart_namespace=cart_namespace %}?next={% eventurl request.event "presale:event.index" cart_namespace=cart_namespace %}{% if "iframe" in request.GET and not new_tab %}&iframe={{ request.GET.iframe }}{% endif %}{% if "take_cart_id" in request.GET and new_tab %}&take_cart_id={{ request.GET.take_cart_id }}{% endif %}"
-            {% if new_tab %}target="_blank"{% else %}data-asynctask{% endif %}>
+            {% if new_tab %}target="_blank"{% else %}
+                data-asynctask
+                data-asynctask-headline="{% trans "We're now trying to reserve this for you!" %}"
+                data-asynctask-text="{% blocktrans with time=event.settings.reservation_time %}Once the items are in your cart, you will have {{ time }} minutes to complete your purchase.{% endblocktrans %}"
+            {% endif %}>
             {% csrf_token %}
             <input type="hidden" name="subevent" value="{{ subevent.id|default_if_none:"" }}" />
             <input type="hidden" name="_voucher_code" value="{{ voucher.code }}">

src/pretix/static/pretixbase/js/asynctask.js

@@ -35,13 +35,17 @@ function async_task_check_callback(data, jqXHR, status) {
     async_task_timeout = window.setTimeout(async_task_check, 250);
 
     if (async_task_is_long) {
-        $("#loadingmodal p").text(gettext('Your request has been queued on the server and will now be ' +
+        $("#loadingmodal p.status").text(gettext(
-                                          'processed. Depending on the size of your event, this might take up to a ' +
+            'Your request has been queued on the server and will now be ' +
-                                          'few minutes.'));
+            'processed. Depending on the size of your event, this might take up to a ' +
+            'few minutes.'
+        ));
     } else {
-        $("#loadingmodal p").text(gettext('Your request has been queued on the server and will now be ' +
+        $("#loadingmodal p.status").text(gettext(
-                                          'processed. If this takes longer than two minutes, please contact us or go ' +
+            'Your request arrived on the server but we still wait for it to be ' +
-                                          'back in your browser and try again.'));
+            'processed. If this takes longer than two minutes, please contact us or go ' +
+            'back in your browser and try again.'
+        ));
     }
 }
 
@@ -62,7 +66,7 @@ function async_task_check_error(jqXHR, textStatus, errorThrown) {
             alert(gettext('An error of type {code} occurred.').replace(/\{code\}/, jqXHR.status));
         } else {
             // 500 can be an application error or overload in some cases :(
-            $("#loadingmodal p").text(gettext('We currently cannot reach the server, but we keep trying.' +
+            $("#loadingmodal p.status").text(gettext('We currently cannot reach the server, but we keep trying.' +
                                               ' Last error code: {code}').replace(/\{code\}/, jqXHR.status));
             async_task_timeout = window.setTimeout(async_task_check, 5000);
         }
@@ -87,13 +91,17 @@ function async_task_callback(data, jqXHR, status) {
     async_task_timeout = window.setTimeout(async_task_check, 100);
 
     if (async_task_is_long) {
-        $("#loadingmodal p").text(gettext('Your request has been queued on the server and will now be ' +
+        $("#loadingmodal p.status").text(gettext(
-                                          'processed. Depending on the size of your event, this might take up to a ' +
+            'Your request has been queued on the server and will now be ' +
-                                          'few minutes.'));
+            'processed. Depending on the size of your event, this might take up to a ' +
+            'few minutes.'
+        ));
     } else {
-        $("#loadingmodal p").text(gettext('Your request has been queued on the server and will now be ' +
+        $("#loadingmodal p.status").text(gettext(
-                                          'processed. If this takes longer than two minutes, please contact us or go ' +
+            'Your request arrived on the server but we still wait for it to be ' +
-                                          'back in your browser and try again.'));
+            'processed. If this takes longer than two minutes, please contact us or go ' +
+            'back in your browser and try again.'
+        ));
     }
     if (location.href.indexOf("async_id") === -1) {
         history.pushState({}, "Waiting", async_task_check_url.replace(/ajax=1/, ''));
@@ -134,10 +142,21 @@ $(function () {
         async_task_is_long = $(this).is("[data-asynctask-long]");
         async_task_old_url = location.href;
         $("body").data('ajaxing', true);
-        waitingDialog.show(gettext('We are processing your request …'));
+        if ($(this).is("[data-asynctask-headline]")) {
-        $("#loadingmodal p").text(gettext('We are currently sending your request to the server. If this takes longer ' +
+            waitingDialog.show($(this).attr("data-asynctask-headline"));
-                                          'than one minute, please check your internet connection and then reload ' +
+        } else {
-                                          'this page and try again.'));
+            waitingDialog.show(gettext('We are processing your request …'));
+        }
+        if ($(this).is("[data-asynctask-text]")) {
+            $("#loadingmodal p.text").text($(this).attr("data-asynctask-text")).show();
+        } else {
+            $("#loadingmodal p.text").hide();
+        }
+        $("#loadingmodal p.status").text(gettext(
+            'We are currently sending your request to the server. If this takes longer ' +
+            'than one minute, please check your internet connection and then reload ' +
+            'this page and try again.'
+        ));
 
         $.ajax(
             {
@@ -157,7 +176,7 @@ $(function () {
 var waitingDialog = {
     show: function (message) {
         "use strict";
-        $("#loadingmodal").find("h1").html(message);
+        $("#loadingmodal").find("h3").html(message);
         $("body").addClass("loading");
     },
     hide: function () {

src/pretix/static/pretixpresale/scss/main.scss

@@ -96,7 +96,6 @@ body.loading .container {
     height: 100vh;
     background: rgba(255, 255, 255, .7);
     opacity: 0;
-    text-align: center;
     z-index: 900000;
     visibility: hidden;
     padding: 10px;
@@ -107,14 +106,53 @@ body.loading .container {
         color: $brand-primary;
     }
 
-    .big-rotating-icon {
+    .modal-card {
-        -webkit-animation: fa-spin 8s infinite linear;
+        margin: 50px auto 0;
-        animation: fa-spin 8s infinite linear;
+        top: 50px;
-        margin-top: 50px;
+        width: 90%;
-        font-size: 200px;
+        max-width: 600px;
-        color: $brand-primary;
+        background: white;
+        border-radius: $border-radius-large;
+        box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
+        padding: 20px;
+        min-height: 160px;
+
+        .modal-card-icon {
+            float: left;
+            width: 150px;
+            text-align: center;
+            .big-rotating-icon {
+                -webkit-animation: fa-spin 8s infinite linear;
+                animation: fa-spin 8s infinite linear;
+                font-size: 120px;
+                color: $brand-primary;
+            }
+        }
+        .modal-card-content {
+            margin-left: 160px;
+            text-align: left;
+            h3 {
+                margin-top: 0;
+            }
+        }
     }
 }
+@media (max-width: 700px) {
+    #loadingmodal, #ajaxerr {
+        .modal-card {
+            .modal-card-icon {
+                float: none;
+                width: 100%;
+            }
+            .modal-card-content {
+                text-align: center;
+                margin-left: 0;
+                margin-top: 10px;
+            }
+        }
+    }
+}
+
 #ajaxerr {
     background: rgba(236, 236, 236, .9);
 }

src/pretix/testutils/settings.py

@@ -29,6 +29,9 @@ PASSWORD_HASHERS = ['django.contrib.auth.hashers.MD5PasswordHasher']
 # Disable celery
 CELERY_ALWAYS_EAGER = True
 HAS_CELERY = False
+CELERY_BROKER_URL = None
+CELERY_RESULT_BACKEND = None
+CELERY_TASK_ALWAYS_EAGER = True
 
 # Don't use redis
 SESSION_ENGINE = "django.contrib.sessions.backends.db"