Fix #308 -- Preview for email templates (#438)

* add ajax and dummy api response

* add preview <p> blocks

* finalise order_placed setup

- use <pre> for mail preview
- create dummy data in backend

* fix i18n text conversion

* create fragment template for mail preview

* support i18n in mail preview view

* apply mail fragment in all mail settings

fix mistake in input[lang=en] flag style
add dummy data for all placeholders
apply fragment template to all fields
add exclude option to fragment template

* remove migration file

* add translation mapping & fix field label

remove hardcoded field label
add transblock for translation file

* add test for mail setting preview

* fix code style in preview class

* bug fix in mail preview view

- fixed localised date values
- added locale index mapping
- added tests on multi-language event
- enhanced dummy data

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

@@ -0,0 +1,67 @@
+function preview_task_callback(data, jqXHR, status) {
+    "use strict";
+    if (data.item) {
+        $('#' + data.item + '_panel').data('ajaxing', false);
+        for (var m in data.msgs){
+            var target = $('pre[for=' + data.item + '][lang=' + m +']');
+            if (target.length === 1){
+                target.text(data.msgs[m]);
+            }
+        }
+    }
+}
+
+function preview_task_error(item) {
+    "use strict";
+    return function(jqXHR, textStatus, errorThrown) {
+        $('#' + item + '_panel').data('ajaxing', false);
+        $('#' + item + '_preview pre').text(gettext('An error has occurred.'));
+        if (textStatus === "timeout") {
+            alert(gettext("The request took to long. Please try again."));
+        } else {
+            if (jqXHR.status >= 400 && jqXHR.status < 500) {
+                alert(gettext('An error of type {code} occurred.').replace(/\{code\}/, jqXHR.status));
+            } else {
+                alert(gettext('We currently cannot reach the server. Please try again. ' +
+                              'Error code: {code}').replace(/\{code\}/, jqXHR.status));
+            }
+        }
+    }
+}
+
+$(function () {
+    "use strict";
+
+    $('a[type=preview]').on('click', function () {
+        var itemName = $(this).closest('.preview-panel').attr('for');
+        if ($('#' + itemName + '_panel').data('ajaxing') || $(this).parent('.active').length !== 0) {
+            return;
+        }
+
+        // gathering data
+        var parentForm = $(this).closest('form');
+        var previewUrl = $(parentForm).attr('mail-preview-url');
+        var token = $(parentForm).find('input[name=csrfmiddlewaretoken]').val();
+        var dataString = 'item=' + itemName + '&csrfmiddlewaretoken=' + token;
+        $('#' + itemName + '_edit textarea').each(function () {
+            dataString += '&' + $(this).serialize();
+        });
+
+        // prepare for ajax
+        $('#' + itemName + '_panel').data('ajaxing', true);
+        $('#' + itemName + '_preview pre').text(gettext('Generating messages …'));
+
+        $.ajax(
+            {
+                'type': 'POST',
+                'url': previewUrl,
+                'data': dataString,
+                'success': preview_task_callback,
+                'error': preview_task_error(itemName),
+                'dataType': 'json',
+                'timeout': 60000,
+            }
+        );
+
+    });
+});