350 lines
14 KiB
HTML
350 lines
14 KiB
HTML
{% extends 'layout/base_template.html' %}
|
|
{% load static %}
|
|
{% block stylesheet %}
|
|
<!-- include required css cdn link through html here -->
|
|
|
|
{% include "cdn_through_html/filepond_cdn_css.html" %}
|
|
{% include "cdn_through_html/flatpicker_cdn_css.html" %}
|
|
{% include "cdn_through_html/tagify_cdn_css.html" %}
|
|
{% include "cdn_through_html/sweetalert2_cdn_css.html" %}
|
|
{{form.media}}
|
|
|
|
{% 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 'manage_events:event_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}} Event</span></h3>
|
|
</a>
|
|
</div>
|
|
</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" enctype="multipart/form-data" id="eventForm">
|
|
{% 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">Submit</button></div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
<!-- include required css 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/tagify_cdn_js.html" %}
|
|
{% include "cdn_through_html/sweetalert2_cdn_js.html" %}
|
|
{% include "cdn_through_html/jquery_validate_cdn_js.html" %}
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// Function to initialize FilePond
|
|
function initializeFilePond(selector, allowMultiple = false) {
|
|
FilePond.registerPlugin(
|
|
FilePondPluginImagePreview,
|
|
FilePondPluginImageExifOrientation,
|
|
FilePondPluginFileValidateSize
|
|
);
|
|
return FilePond.create(document.getElementById(selector),{
|
|
allowMultiple: allowMultiple,
|
|
acceptedFileTypes: ['image/*'],
|
|
storeAsFile: true,
|
|
dropOnPage: true
|
|
});
|
|
}
|
|
|
|
// Function to initialize Flatpickr
|
|
function initializeFlatpickr(selector, config) {
|
|
return flatpickr(document.getElementById(selector), config);
|
|
}
|
|
|
|
// Function to initialize Tagify
|
|
function initializeTagify(selector) {
|
|
var input = document.querySelector(selector);
|
|
return new Tagify(input, {
|
|
originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(', ')
|
|
});
|
|
}
|
|
|
|
// Function to handle principal change event and fetch venues
|
|
function handlePrincipalChange() {
|
|
$("#id_principal").change(function(){
|
|
var selectedPrincipalId = $(this).val();
|
|
|
|
// Clear existing venue options
|
|
$("#id_venue").empty().append($("<option value='' selected=''>---------</option>"));
|
|
|
|
if (selectedPrincipalId) {
|
|
$.ajax({
|
|
url: "{% url 'manage_events:venue_customer_filter' %}",
|
|
type: "GET",
|
|
data: { pk: selectedPrincipalId },
|
|
success: function(data) {
|
|
// Process and populate venue options
|
|
$.each(data.data, function(index, venue) {
|
|
$("#id_venue").append($("<option></option>").val(venue.id).text(venue.title));
|
|
});
|
|
|
|
// Preselect the venue if a value is already selected
|
|
var selectedVenueId = $("#id_venue").data('selected-venue');
|
|
if (selectedVenueId) {
|
|
$("#id_venue").val(selectedVenueId);
|
|
}
|
|
},
|
|
error: function(jqXHR, textStatus, errorThrown) {
|
|
console.error("Error fetching venue data:", textStatus, errorThrown);
|
|
console.error("Error fetching venue data:", jqXHR.responseJSON.message);
|
|
// Display error alert using SweetAlert2
|
|
Swal.fire({
|
|
icon: 'error',
|
|
text: jqXHR.responseJSON.message,
|
|
position: 'center',
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Store the selected venue data
|
|
var selectedVenueId = "{{ form.venue.value }}";
|
|
$("#id_venue").data('selected-venue', selectedVenueId);
|
|
|
|
// Trigger change event if a principal value is already selected
|
|
var selectedPrincipalId = $("#id_principal").val();
|
|
if (selectedPrincipalId) {
|
|
$("#id_principal").trigger("change");
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
// Set multiple attribute for event images
|
|
document.getElementById('id_event_images').setAttribute('multiple', '');
|
|
|
|
|
|
// Initialize FilePond
|
|
var thumbnail = initializeFilePond('id_image');
|
|
var thumbnailUrl = "{% if form.image.value %}{{ form.image.value.url }}{% endif %}";
|
|
if (thumbnailUrl){
|
|
thumbnail.addFile(thumbnailUrl)
|
|
}
|
|
|
|
var eventImages = initializeFilePond('id_event_images', true);
|
|
// var eventImagesUrl = "{% if form.event_images.value %}{{ form.event_images.value.url}}{%endif %}";
|
|
var eventImagesUrls = {{ event_images_urls|safe }};
|
|
|
|
if (Array.isArray(eventImagesUrls) && eventImagesUrls.length) {
|
|
eventImagesUrls.forEach(function(url) {
|
|
eventImages.addFile(url);
|
|
});
|
|
}
|
|
|
|
// Initialize Flatpickr
|
|
var startDate = initializeFlatpickr('id_start_date', {
|
|
minDate: "today",
|
|
onChange: function(selectedDates, dateStr, instance) {
|
|
endDate.set('minDate', selectedDates[0]);
|
|
}
|
|
});
|
|
|
|
var endDate = initializeFlatpickr('id_end_date', { minDate: null });
|
|
|
|
var fromTimeField = document.getElementById('id_from_time');
|
|
var fromTimeValue = fromTimeField.value; // Get the current value of the form field
|
|
|
|
initializeFlatpickr('id_from_time', {
|
|
enableTime: true,
|
|
noCalendar: true,
|
|
dateFormat: "H:i",
|
|
defaultDate: fromTimeValue ? fromTimeValue : new Date(), // Use form field value if available, otherwise use current time
|
|
allowInput: true,
|
|
});
|
|
|
|
var fromTimeField = document.getElementById('id_to_time');
|
|
var fromTimeValue = fromTimeField.value; // Get the current value of the form field
|
|
|
|
initializeFlatpickr('id_to_time', {
|
|
enableTime: true,
|
|
noCalendar: true,
|
|
dateFormat: "H:i",
|
|
defaultDate: fromTimeValue ? fromTimeValue : new Date(),
|
|
allowInput: true,
|
|
});
|
|
|
|
// Initialize Tagify
|
|
initializeTagify('#id_tags');
|
|
|
|
// Handle principal change
|
|
handlePrincipalChange();
|
|
|
|
// 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.");
|
|
|
|
$.validator.addMethod("greaterThanFromTime", function(value, element){
|
|
var startDateVal = $("#id_start_date").val();
|
|
var endDateVal = $("#id_end_date").val();
|
|
var fromTime = $("#id_from_time").val();
|
|
var toTime = $(element).val();
|
|
if (!toTime || !fromTime) {
|
|
return true; // Allow if either time is not selected (prevents errors)
|
|
}
|
|
if (startDateVal !== endDateVal) {
|
|
return true
|
|
}
|
|
return toTime > fromTime;
|
|
},"End time must be greater than start time on the same day")
|
|
|
|
// Initialize jQuery Validate
|
|
$("#eventForm").validate({
|
|
rules: {
|
|
principal: {
|
|
required: true
|
|
},
|
|
venue: {
|
|
required: true
|
|
},
|
|
title: {
|
|
required: true
|
|
},
|
|
description: {
|
|
required: true
|
|
},
|
|
image: {
|
|
required: true,
|
|
},
|
|
event_images: {
|
|
required: true,
|
|
},
|
|
start_date: {
|
|
required: true,
|
|
},
|
|
end_date: {
|
|
required: true,
|
|
greaterThanStartDate: true
|
|
},
|
|
from_time: {
|
|
required: true
|
|
},
|
|
to_time: {
|
|
required: true,
|
|
greaterThanFromTime: true
|
|
},
|
|
category:{
|
|
required: true
|
|
},
|
|
venue_capacity:{
|
|
required: true
|
|
},
|
|
entry_type: {
|
|
required: true
|
|
},
|
|
age_group: {
|
|
required: true
|
|
},
|
|
tags: {
|
|
required: true
|
|
}
|
|
// Add other fields with similar structure
|
|
},
|
|
messages: {
|
|
principal: {
|
|
required: "Please select a principal"
|
|
},
|
|
venue: {
|
|
required: "Please select a venue"
|
|
},
|
|
title: {
|
|
required: "Please enter a title",
|
|
},
|
|
description: {
|
|
required: "Please enter a description",
|
|
},
|
|
image: {
|
|
required: "Please upload a thumbnail",
|
|
},
|
|
event_images: {
|
|
required: "Please upload event images",
|
|
},
|
|
start_date: {
|
|
required: "Please select a start date",
|
|
},
|
|
end_date: {
|
|
required: "Please select an end date",
|
|
greaterThanStartDate: "The end date must be after or equal to the start date."
|
|
},
|
|
from_time: {
|
|
required: "Please select a start time"
|
|
},
|
|
to_time: {
|
|
required: "Please select an end time",
|
|
greaterThanFromTime: "End time must be greater than start time on the same day"
|
|
},
|
|
category:{
|
|
required: "Please select a category"
|
|
},
|
|
venue_capacity:{
|
|
required: "Please enter a venue capacity"
|
|
},
|
|
entry_type: {
|
|
required: "Please select a event type"
|
|
},
|
|
age_group: {
|
|
required: "Please select a age group"
|
|
},
|
|
tags: {
|
|
required: "Please enter tags"
|
|
}
|
|
},
|
|
errorElement: "div",
|
|
errorPlacement: function(error, element) {
|
|
error.addClass("invalid-feedback");
|
|
if (element.prop("type") === "checkbox") {
|
|
error.insertAfter(element.next("label"));
|
|
} else {
|
|
error.insertAfter(element);
|
|
}
|
|
},
|
|
highlight: function(element) {
|
|
$(element).addClass("is-invalid").removeClass("is-valid");
|
|
},
|
|
unhighlight: function(element) {
|
|
$(element).addClass("is-valid").removeClass("is-invalid");
|
|
},
|
|
submitHandler: function(form) {
|
|
// Disable the submit button to prevent multiple submissions
|
|
$('button[type="submit"]').prop('disabled', true);
|
|
form.submit();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |