287 lines
12 KiB
HTML
287 lines
12 KiB
HTML
{% extends 'layout/base_template.html' %}
|
|
{% load static %}
|
|
{% block stylesheet %}
|
|
<!-- include required css cdn link through html here -->
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
|
{% include "cdn_through_html/flatpicker_cdn_css.html" %}
|
|
{% include "cdn_through_html/filepond_cdn_css.html" %}
|
|
|
|
<style>
|
|
/* Adjust the width and height of the FilePond container */
|
|
.filepond--root {
|
|
max-width: 200px; /* Set your desired width */
|
|
height: auto; /* Adjust height based on content */
|
|
margin: auto; /* Center the input */
|
|
}
|
|
|
|
/* Control the size of the preview panel */
|
|
.filepond--panel {
|
|
height: 200px !important; /* Set a fixed height for the panel */
|
|
}
|
|
|
|
/* Optionally customize the labels or placeholders */
|
|
.filepond--label-action {
|
|
font-size: 14px; /* Adjust font size */
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="row layout-top-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="row mb-2">
|
|
<div class="col">
|
|
<a href="{% url 'accounts:customer_list'%}" style="height: fit-content;width: fit-content;display: inline-block;">
|
|
<h3 class="card-title m-2 d-flex align-items-center gap-2" style="width: fit-content;"><span class="fw-bold material-symbols-outlined">
|
|
arrow_back
|
|
</span><span>{{operation}} Customer</span></h3>
|
|
</a>
|
|
</div>
|
|
|
|
{% if principal_obj.extended_data and not principal_obj.extended_data.is_transferred and principal_obj.extended_data.is_onboarded and principal_obj.principal_type.name == 'event_manager' %}
|
|
<div class="col text-end">
|
|
<a class="btn btn-dark mb-2 me-4" href="{% url 'accounts:customer_transfer' principal_obj.id %}">
|
|
Transfer Account
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
<div class="row layout-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="statbox widget box box-shadow">
|
|
<div class="widget-content widget-content-area">
|
|
|
|
<form method="post" id="addCustomer" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
{% include 'includes/dynamic_template_form.html' with form=form %}
|
|
<div class="mt-4 mb-0">
|
|
<div class="d-grid"><button class="btn btn-primary btn-block" type="submit">Submit</button></div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
<!-- include required js cdn link through html here -->
|
|
{% include "cdn_through_html/filepond_cdn_js.html" %}
|
|
{% include "cdn_through_html/flatpicker_cdn_js.html" %}
|
|
{% include "cdn_through_html/jquery_validate_cdn_js.html" %}
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
|
|
-->
|
|
<script>
|
|
|
|
// Register required FilePond plugins
|
|
FilePond.registerPlugin(
|
|
FilePondPluginFileValidateType,
|
|
FilePondPluginImageExifOrientation,
|
|
FilePondPluginImagePreview,
|
|
FilePondPluginImageCrop,
|
|
FilePondPluginImageResize,
|
|
FilePondPluginImageTransform
|
|
);
|
|
|
|
// Initialize FilePond for profile photo input
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const existingImageUrl = "{% if form.profile_photo.value %}{{ form.profile_photo.value.url }}{% endif %}";
|
|
|
|
const profileInput = FilePond.create(
|
|
document.querySelector('#id_profile_photo'), // Target the file input by its ID
|
|
{
|
|
storeAsFile: true,
|
|
imagePreviewHeight: 170,
|
|
imageCropAspectRatio: '1:1', // Square aspect ratio for cropping
|
|
imageResizeTargetWidth: 200, // Resize to 200px width
|
|
imageResizeTargetHeight: 200, // Resize to 200px height
|
|
stylePanelLayout: 'compact circle', // Circular layout for the preview
|
|
styleLoadIndicatorPosition: 'center bottom',
|
|
styleProgressIndicatorPosition: 'right bottom',
|
|
styleButtonRemoveItemPosition: 'left bottom',
|
|
styleButtonProcessItemPosition: 'right bottom',
|
|
labelIdle: `
|
|
<span class="no-image-placeholder">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
</span>
|
|
<p class="drag-para">Drag & Drop your picture or
|
|
<span class="filepond--label-action" tabindex="0">Browse</span>
|
|
</p>
|
|
`,
|
|
allowImageCrop: true, // Enable cropping
|
|
allowImageResize: true, // Enable resizing
|
|
imageTransformOutputMimeType: 'image/jpeg', // Ensure the output is a JPEG
|
|
imageTransformOutputQuality: 90, // Adjust the quality of the output image
|
|
allowProcess: false, // Prevent automatic processing to maintain cropping
|
|
}
|
|
);
|
|
|
|
// If there's an existing image, preload it
|
|
if (existingImageUrl) {
|
|
fetch(existingImageUrl)
|
|
.then((response) => response.blob())
|
|
.then((blob) => {
|
|
const file = new File([blob], "profile_photo.jpg", { type: blob.type });
|
|
profileInput.addFile(file);
|
|
})
|
|
.catch((error) => console.error("Error loading existing image:", error));
|
|
}
|
|
});
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
var start_date = flatpickr(document.getElementById('id_free_start_date'), {
|
|
// minDate: "today",
|
|
onChange: function(selectedDates, dateStr, instance) {
|
|
end_date.set('minDate', selectedDates[0]);
|
|
}
|
|
});
|
|
|
|
var end_date = flatpickr(document.getElementById('id_free_end_date'), {
|
|
minDate: null // initialize with no minimum date
|
|
});
|
|
|
|
$('.js-example-basic-multiple').select2({
|
|
placeholder: 'Select options',
|
|
allowClear: true,
|
|
tokenSeparators: [',', ' '], // Customize token separators
|
|
closeOnSelect: false // Keep the dropdown open after selection
|
|
});
|
|
|
|
|
|
// Add custom validation method for email
|
|
$.validator.addMethod("validEmail", function(value, element) {
|
|
return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(value);
|
|
}, "Please enter a valid email address.");
|
|
|
|
// Add custom validation method to check for special characters
|
|
$.validator.addMethod("noSpecialChars", function(value, element) {
|
|
return /^[a-zA-Z\s]*$/.test(value); // Allow only letters and whitespace
|
|
}, "Please enter only letters and spaces.");
|
|
|
|
// Add custom validation method to check for starting with a letter
|
|
$.validator.addMethod("startsWithLetter", function(value, element) {
|
|
return /^[a-zA-Z]/.test(value); // Check if the value starts with a letter
|
|
}, "Please start with a letter.");
|
|
|
|
// Add custom validation method for greater than start date
|
|
$.validator.addMethod("greaterThanStartDate", function(value, element) {
|
|
var startDate = $('#id_free_start_date').val();
|
|
if (!startDate || !value) {
|
|
return true;
|
|
}
|
|
return new Date(value) > new Date(startDate);
|
|
}, "The end date must be after the start date.");
|
|
|
|
|
|
|
|
$("#addCustomer").validate({
|
|
rules: {
|
|
first_name: {
|
|
required: true,
|
|
maxlength:15,
|
|
noSpecialChars: true,
|
|
startsWithLetter: true,
|
|
},
|
|
last_name: {
|
|
required: true,
|
|
maxlength: 15,
|
|
noSpecialChars: true,
|
|
startsWithLetter: true,
|
|
},
|
|
email: {
|
|
required: true,
|
|
validEmail: true,
|
|
},
|
|
preferences: {
|
|
required: true,
|
|
minlength: 1
|
|
},
|
|
free_start_date: {
|
|
required: true,
|
|
// You can add a custom validation method for date format (optional)
|
|
},
|
|
free_end_date: {
|
|
required: true,
|
|
// You can add a custom validation method for date format (optional)
|
|
}
|
|
},
|
|
messages: {
|
|
first_name: {
|
|
required: "Please enter your first name.",
|
|
maxlength: "First name must not exceed 20 characters.",
|
|
noSpecialChars: "Please enter only letters and spaces.",
|
|
startsWithLetter: "First name must start with a letter."
|
|
},
|
|
last_name: {
|
|
required: "Please enter your last name.",
|
|
maxlength: "First name must not exceed 20 characters.",
|
|
noSpecialChars: "Please enter only letters and spaces.",
|
|
startsWithLetter: "Last name must start with a letter."
|
|
},
|
|
email: {
|
|
required: "Please enter your email address.",
|
|
validEmail: "Please enter a valid email address."
|
|
},
|
|
preferences: {
|
|
required: "Please select at least one preference.",
|
|
minlength: "Please select at least one preference."
|
|
},
|
|
free_start_date: {
|
|
required: "Please select a start date for the free period."
|
|
},
|
|
free_end_date: {
|
|
required: "Please select an end date for the free period.",
|
|
greaterThanStartDate: "The end date must be after the start date."
|
|
}
|
|
},
|
|
errorElement: 'div',
|
|
errorPlacement: function(error, element) {
|
|
error.addClass('invalid-feedback');
|
|
$(element).closest('.form-group').append(error);
|
|
},
|
|
highlight: function(element, errorClass, validClass) {
|
|
$(element).addClass('is-invalid').removeClass('is-valid');
|
|
},
|
|
unhighlight: function(element, errorClass, validClass) {
|
|
$(element).removeClass('is-invalid').addClass('is-valid');
|
|
},
|
|
submitHandler: function(form) {
|
|
|
|
// Check if form is valid before submission
|
|
if ($(form).valid()) {
|
|
// Disable the submit button to prevent multiple submissions
|
|
$('button[type="submit"]').prop('disabled', true);
|
|
form.submit();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Trigger validation for select2 fields on change
|
|
$('#id_preferences').on('change', function() {
|
|
$(this).valid();
|
|
});
|
|
|
|
// Trigger validation for flatpickr fields on change
|
|
$('#id_free_start_date').on('change', function() {
|
|
$(this).valid();
|
|
});
|
|
$('#id_free_end_date').on('change', function() {
|
|
$(this).valid();
|
|
});
|
|
})
|
|
</script>
|
|
|
|
{% endblock %} |