Enabled asynchronous cart/order actions

src/static/pretixpresale/js/ui/asynctask.js

@@ -0,0 +1,65 @@
+var async_task_id = null;
+var async_task_timeout = null;
+var async_task_check_url = null;
+
+$(function () {
+    $("body").on('submit', 'form[data-asynctask]', function (e) {
+        e.preventDefault();
+        if ($(this).data('ajaxing')) return;
+        $(this).data('ajaxing', true);
+        waitingDialog.show(default_loading_message);
+
+        $.ajax(
+            {
+                'type': 'POST',
+                'url': $(this).attr('action'),
+                'data': $(this).serialize() + '&ajax=1',
+                'success': async_task_callback,
+                'error': async_task_error,
+                'context': this,
+                'dataType': 'json'
+            }
+        );
+    });
+});
+
+function async_task_check() {
+    $.ajax(
+        {
+            'type': 'GET',
+            'url': async_task_check_url,
+            'success': async_task_check_callback,
+            'error': async_task_error,
+            'context': this,
+            'dataType': 'json'
+        }
+    );
+}
+
+function async_task_check_callback(data, jqXHR, status) {
+    if (data.ready && data.redirect) {
+        location.href = data.redirect;
+        return;
+    }
+    async_task_timeout = window.setTimeout(async_task_check, 500);
+}
+
+function async_task_callback(data, jqXHR, status) {
+    $(this).data('ajaxing', false);
+    if (data.redirect) {
+        location.href = data.redirect;
+        return;
+    }
+    async_task_id = data.async_id;
+    async_task_check_url = data.check_url;
+    async_task_timeout = window.setTimeout(async_task_check, 500);
+}
+
+function async_task_error(jqXHR, textStatus, errorThrown) {
+    waitingDialog.hide();
+    // TODO
+    // if(jqXHR.status == 500) {
+    // } if(jqXHR.status == 403) {
+    // } if(jqXHR.status == 503) {
+    // }
+}

src/static/pretixpresale/js/ui/main.js

@@ -13,62 +13,15 @@ $(function () {
     $(".collapsed").removeClass("collapsed").addClass("collapse");
 });
 
-
-/**
- * Module for displaying "Waiting for..." dialog using Bootstrap
- *
- * @author Eugene Maslovich <ehpc@em42.ru>
- * MIT License
- */
-
 var waitingDialog = (function ($) {
 
-    // Creating modal dialog's DOM
-    var $dialog = $(
-        '<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">' +
-        '<div class="modal-dialog modal-m">' +
-        '<div class="modal-content">' +
-        '<div class="modal-header"><h3 style="margin:0;"></h3></div>' +
-        '<div class="modal-body">' +
-        '<div class="progress progress-striped active" style="margin-bottom:0;"><div class="progress-bar" style="width: 100%"></div></div>' +
-        '</div>' +
-        '</div></div></div>');
-
     return {
-        /**
-         * Opens our dialog
-         * @param message Custom message
-         * @param options Custom options:
-         *                  options.dialogSize - bootstrap postfix for dialog size, e.g. "sm", "m";
-         *                  options.progressType - bootstrap postfix for progress bar type, e.g. "success", "warning".
-         */
         show: function (message, options) {
-            // Assigning defaults
-            var settings = $.extend({
-                                        dialogSize: 'm',
-                                        progressType: ''
-                                    }, options);
-            if (typeof message === 'undefined') {
-                message = 'Loading';
-            }
-            if (typeof options === 'undefined') {
-                options = {};
-            }
-            // Configuring dialog
-            $dialog.find('.modal-dialog').attr('class', 'modal-dialog').addClass('modal-' + settings.dialogSize);
-            $dialog.find('.progress-bar').attr('class', 'progress-bar');
-            if (settings.progressType) {
-                $dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType);
-            }
-            $dialog.find('h3').text(message);
-            // Opening dialog
-            $dialog.modal();
+            $("#loadingmodal h1").html(message);
+            $("body").addClass("loading");
         },
-        /**
-         * Closes dialog
-         */
         hide: function () {
-            $dialog.modal('hide');
+            $("body").removeClass("loading");
         }
     }
 

src/static/pretixpresale/less/main.less

@@ -56,6 +56,44 @@ a:hover .panel-primary > .panel-heading {
         color: @brand-success;
     }
 }
+
+body.loading .container {
+    -webkit-filter: blur(2px);
+    -moz-filter: blur(2px);
+    -ms-filter: blur(2px);
+    -o-filter: blur(2px);
+    filter: blur(2px);
+}
+
+#loadingmodal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(255, 255, 255, .7);
+    opacity: 0;
+    text-align: center;
+    z-index: 900000;
+    visibility: hidden;
+
+    .big-rotating-icon {
+        margin-top: 50px;
+        -webkit-animation: fa-spin 8s infinite linear;
+        animation: fa-spin 8s infinite linear;
+        font-size: 200px;
+        color: @brand-primary;
+    }
+}
+
+.loading #loadingmodal {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity .5s ease-in-out;
+    -moz-transition: opacity .5s ease-in-out;
+    -webkit-transition: opacity .5s ease-in-out;
+}
+
 @media (min-width: @screen-md-min) {
     .thank-you {
         height: 170px;

src/static/pretixpresale/less/waiting.less

@@ -0,0 +1,19 @@
+@import "../../bootstrap/less/bootstrap.less";
+@import "../../fontawesome/less/font-awesome.less";
+@import "../../pretixbase/less/colors.less";
+
+@fa-font-path: "../../fontawesome/fonts";
+
+body {
+    background: #ececec;
+    text-align: center;
+    padding: 50px 0;
+}
+
+.big-rotating-icon {
+    margin-top: 50px;
+    -webkit-animation: fa-spin 8s infinite linear;
+    animation: fa-spin 8s infinite linear;
+    font-size: 200px;
+    color: @brand-primary;
+}