Add quick-start assistant for new users (#833)

* First draft for quick-setup

* Add payment

* Fix stripe w/o connect

* cols

* Add tests

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

@@ -206,15 +206,19 @@ var form_handlers = function (el) {
         dependency.on("change", update);
     });
 
-    $("input[data-display-dependency]").each(function () {
+    $("div[data-display-dependency], input[data-display-dependency]").each(function () {
         var dependent = $(this),
             dependency = $($(this).attr("data-display-dependency")),
             update = function (ev) {
                 var enabled = (dependency.attr("type") === 'checkbox' || dependency.attr("type") === 'radio') ? dependency.prop('checked') : !!dependency.val();
+                var $toggling = dependent;
+                if (dependent.tagName === "input") {
+                    $toggling = dependent.closest('.form-group');
+                }
                 if (ev) {
-                    dependent.closest('.form-group').slideToggle(enabled);
+                    $toggling.stop().slideToggle(enabled);
                 } else {
-                    dependent.closest('.form-group').toggle(enabled);
+                    $toggling.stop().toggle(enabled);
                 }
             };
         update();

src/pretix/static/pretixcontrol/js/ui/quicksetup.js

@@ -0,0 +1,50 @@
+$(function () {
+    "use strict";
+
+    var ticket_type_quota_calculation = function () {
+        var sum = 0;
+        $("#ticket-type-formset div[data-formset-form]").each(function () {
+            if (!$(this).find("input[name$=DELETE]").prop("checked")) {
+                var val = $(this).find("input[name$=quota]").val();
+                if (val === "") {
+                    sum = "∞";
+                } else if (sum !== "∞") {
+                    sum += parseInt(val);
+                }
+            }
+        });
+        $("#total-capacity").text(sum);
+    };
+
+    var toggle_payment = function () {
+        var any = false;
+        $("#ticket-type-formset div[data-formset-form]").each(function () {
+            if (!$(this).find("input[name$=DELETE]").prop("checked")) {
+                var val = $(this).find("input[name$=default_price]").val();
+                if (/.*[1-9].*/.test(val)) {
+                    any = true;
+                }
+            }
+        });
+        if ($("#quick-setup-step-payment:visible").length && !any) {
+            $("#quick-setup-step-payment").stop().slideUp();
+        } else if (!$("#quick-setup-step-payment:visible").length && any) {
+            $("#quick-setup-step-payment").stop().slideDown();
+        }
+    };
+
+    $("#ticket-type-formset").bind("formAdded", ticket_type_quota_calculation);
+    $("#ticket-type-formset").on("change keyup keydown keypress", "input", function () {
+        ticket_type_quota_calculation();
+        toggle_payment();
+    });
+    ticket_type_quota_calculation();
+    toggle_payment();
+
+    $("#total-capacity-edit").click(function () {
+        $("#id_total_quota").val(parseInt($("#total-capacity").text()));
+        $("#total-capacity").hide();
+        $("#id_total_quota").closest("div").removeClass("sr-only");
+        $("#total-capacity-edit").hide();
+    });
+});

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -281,3 +281,18 @@ table td > .checkbox input[type="checkbox"] {
 .panel-title .radio {
   margin-left: 20px;
 }
+
+.form-quicksetup-total-capacity {
+  height: 34px;
+  strong {
+    line-height: 34px;
+  }
+}
+.form-horizontal [data-formset] .form-quicksetup-total-capacity .form-group {
+  margin: 0;
+  width: auto;
+}
+.form-quicksetup-total-capacity .form-control {
+  width: 100px;
+  display: inline;
+}

src/pretix/static/pretixcontrol/scss/main.scss

@@ -128,6 +128,10 @@ h1 .btn-sm {
     padding-top: 20px;
 }
 
+p.bigger {
+    font-size: 16px;
+}
+
 .helper-display-block {
     display: block !important;
 }
@@ -468,7 +472,33 @@ body.loading #wrapper {
         text-decoration: none;
     }
 }
+.quick-setup-step {
+    clear: both;
+    .quick-icon {
+        float: left;
+        width: 100px;
 
+        .fa-ticket, .fa-check-circle {
+            margin-top: -20px;
+        }
+        .fa-wrench {
+            margin-top: -30px;
+        }
+        .fa-money, .fa-envelope {
+            margin-top: -40px;
+        }
+    }
+    .quick-icon .fa {
+        font-size: 100px;
+        line-height: 170px;
+        display: block;
+    }
+    .quick-content {
+        margin-left: 160px;
+        padding-top: 5px;
+        overflow: hidden;
+    }
+}
 .thank-you {
     margin-bottom: 25px;
 
@@ -503,6 +533,16 @@ body.loading #wrapper {
         }
     }
 }
+@media (max-width: $screen-md-max) {
+    .quick-setup-step {
+        .quick-icon {
+            display: none;
+        }
+        .quick-content {
+            margin-left: 0;
+        }
+    }
+}
 @media (max-width: $screen-sm-max) {
     .thank-you {
         text-align: center;