Banktransfer: Big import refactoring

src/static/pretixcontrol/js/ui/main.js

@@ -1,4 +1,4 @@
-/*global $*/
+/*global $,gettext*/
 
 function question_page_toggle_view() {
     var show = $("#id_type").val() == "C" || $("#id_type").val() == "M";
@@ -8,6 +8,42 @@ function question_page_toggle_view() {
     $(".alert-required-boolean").toggle(show);
 }
 
+var waitingDialog = {
+    show: function (message) {
+        "use strict";
+        $("#loadingmodal").find("h1").html(message);
+        $("body").addClass("loading");
+    },
+    hide: function () {
+        "use strict";
+        $("body").removeClass("loading");
+    }
+};
+
+var ajaxErrDialog = {
+    show: function (c) {
+        "use strict";
+        $("#ajaxerr").html(c);
+        $("#ajaxerr .links").html("<a class='btn btn-default ajaxerr-close'>"
+                                  + gettext("Close message") + "</a>");
+        $("body").addClass("ajaxerr");
+    },
+    hide: function () {
+        "use strict";
+        $("body").removeClass("ajaxerr");
+    }
+};
+
+$(document).ajaxError(function (event, jqXHR, settings, thrownError) {
+    waitingDialog.hide();
+    var c = $(jqXHR.responseText).filter('.container');
+    if (c.length > 0) {
+        ajaxErrDialog.show(c.first().html());
+    } else {
+        alert(gettext('Unknown error.'));
+    }
+});
+
 $(function () {
     "use strict";
 
@@ -45,6 +81,8 @@ $(function () {
     });
 
     $('.collapsible').collapse();
+    
+    $('[data-toggle="tooltip"]').tooltip()
 
     // Question editor
     if ($("#answer-options").length) {
@@ -63,4 +101,6 @@ $(function () {
             $("#id_codes").text(data.codes.join("\n"));
         });
     });
+
+    $("#ajaxerr").on("click", ".ajaxerr-close", ajaxErrDialog.hide);
 });

src/static/pretixcontrol/scss/main.scss

@@ -2,6 +2,7 @@
 @import "../../bootstrap/scss/_bootstrap.scss";
 $fa-font-path: static("fontawesome/fonts");
 @import "../../fontawesome/scss/font-awesome.scss";
+@import "../../typeahead/typeahead.css";
 @import "../css/metisMenu.min.css";
 @import "_sb-admin-2.scss";
 @import "_forms.scss";
@@ -129,3 +130,49 @@ h1 .btn-sm {
 .form-order-change .form-group {
     margin: 0;
 }
+
+#loadingmodal, #ajaxerr {
+    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-icon {
+        margin-top: 50px;
+        font-size: 200px;
+        color: $brand-primary;
+    }
+
+    .big-rotating-icon {
+        -webkit-animation: fa-spin 8s infinite linear;
+        animation: fa-spin 8s infinite linear;
+        margin-top: 50px;
+        font-size: 200px;
+        color: $brand-primary;
+    }
+}
+#ajaxerr {
+    background: rgba(236, 236, 236, .9);
+}
+
+.loading #loadingmodal, .ajaxerr #ajaxerr {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity .5s ease-in-out;
+    -moz-transition: opacity .5s ease-in-out;
+    -webkit-transition: opacity .5s ease-in-out;
+}
+
+.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;
+}

src/static/pretixpresale/scss/main.scss

@@ -135,4 +135,4 @@ body.loading .container {
     h2 {
         margin-top: 0;
     }
-}
+}

src/static/typeahead/typeahead.css

@@ -0,0 +1,93 @@
+span.twitter-typeahead .tt-menu,
+span.twitter-typeahead .tt-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  list-style: none;
+  font-size: 14px;
+  text-align: left;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  background-clip: padding-box;
+}
+span.twitter-typeahead .tt-suggestion {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.42857143;
+  color: #333333;
+  white-space: nowrap;
+}
+span.twitter-typeahead .tt-suggestion.tt-cursor,
+span.twitter-typeahead .tt-suggestion:hover,
+span.twitter-typeahead .tt-suggestion:focus {
+  color: #ffffff;
+  text-decoration: none;
+  outline: 0;
+  background-color: #337ab7;
+}
+.input-group.input-group-lg span.twitter-typeahead .form-control {
+  height: 46px;
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.3333333;
+  border-radius: 6px;
+}
+.input-group.input-group-sm span.twitter-typeahead .form-control {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+span.twitter-typeahead {
+  width: 100%;
+}
+.input-group span.twitter-typeahead {
+  display: block !important;
+  height: 34px;
+}
+.input-group span.twitter-typeahead .tt-menu,
+.input-group span.twitter-typeahead .tt-dropdown-menu {
+  top: 32px !important;
+}
+.input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control {
+  border-radius: 0;
+}
+.input-group span.twitter-typeahead:first-child .form-control {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-group span.twitter-typeahead:last-child .form-control {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.input-group.input-group-sm span.twitter-typeahead {
+  height: 30px;
+}
+.input-group.input-group-sm span.twitter-typeahead .tt-menu,
+.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
+  top: 30px !important;
+}
+.input-group.input-group-lg span.twitter-typeahead {
+  height: 46px;
+}
+.input-group.input-group-lg span.twitter-typeahead .tt-menu,
+.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
+  top: 46px !important;
+}