158 lines
4.9 KiB
HTML
158 lines
4.9 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" %}
|
|
{{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:venue_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}} Venue</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="venueForm">
|
|
{% 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 css cdn link through html here -->
|
|
|
|
{% include "cdn_through_html/filepond_cdn_js.html" %}
|
|
|
|
{% include "cdn_through_html/jquery_validate_cdn_js.html" %}
|
|
|
|
|
|
<script>
|
|
|
|
$(document).ready(function(){
|
|
// initialize filepond
|
|
var image = initializeFilePond('id_image');
|
|
var imageUrl = "{% if form.image.value %}{{ form.image.value.url }}{% endif %}";
|
|
if (imageUrl){
|
|
image.addFile(imageUrl)
|
|
}
|
|
|
|
// Validate the form
|
|
$("#venueForm").validate({
|
|
rules: {
|
|
principal: {
|
|
required: true
|
|
},
|
|
title: {
|
|
required: true,
|
|
noSpace: true
|
|
},
|
|
address: {
|
|
required: true
|
|
},
|
|
image: {
|
|
required: true,
|
|
accept: "image/*"
|
|
},
|
|
latitude: {
|
|
required: true,
|
|
number: true,
|
|
},
|
|
longitude: {
|
|
required: true,
|
|
number: true,
|
|
}
|
|
},
|
|
messages: {
|
|
principal: {
|
|
required: "Please select a principal"
|
|
},
|
|
title: {
|
|
required: "Please enter a title"
|
|
},
|
|
address: {
|
|
required: "Please enter an address"
|
|
},
|
|
image: {
|
|
required: "Please upload an image",
|
|
accept: "Please upload a valid image file"
|
|
},
|
|
latitude: {
|
|
required: "Please enter a latitude",
|
|
number: "Please enter a valid number",
|
|
},
|
|
longitude: {
|
|
required: "Please enter a longitude",
|
|
number: "Please enter a valid number",
|
|
}
|
|
},
|
|
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) {
|
|
console.log("Form submission is valid");
|
|
form.submit();
|
|
}
|
|
});
|
|
|
|
})
|
|
|
|
// Function to initialize FilePond
|
|
function initializeFilePond(selector, allowMultiple = false) {
|
|
FilePond.registerPlugin(
|
|
FilePondPluginImagePreview,
|
|
FilePondPluginImageExifOrientation,
|
|
FilePondPluginFileValidateSize
|
|
);
|
|
return FilePond.create(document.getElementById(selector),{
|
|
allowMultiple: allowMultiple,
|
|
storeAsFile: true,
|
|
dropOnPage: true
|
|
});
|
|
}
|
|
|
|
</script>
|
|
{% endblock %} |