goodtimes/templates/manage_cms/education_add.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/quill_cdn_css.html" %}
    {% include "cdn_through_html/tagify_cdn_css.html" %}
    {% include "cdn_through_html/flatpicker_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">
                <h3>{{operation}} {{page_title}}</h3>
            </div>
            <div class="col text-end">
                <button class="btn btn-dark mb-2 me-4" onclick="history.back()">
                    <i class="fa fa-arrow-left"></i>
                    Back
                </button>
            </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">
                            {% 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>
                        {% comment %} <form id="imageUploadForm" enctype="multipart/form-data"> {% endcomment %}
                            {% comment %} <form method="POST" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="mb-3">
                                    <label for="title" class="form-label">Title</label>
                                    <input type="text" name="title" class="form-control" id="title" aria-describedby="title">
                                    <div id="emailHelp" class="form-text" style="color: grey;">We'll never share your email with anyone else.</div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Description</label>
                                    <div id="description"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="product-images">Image</label>
                                    <div class="multiple-file-upload">
                                        <input type="file" 
                                            class="filepond"
                                            name="filepond"
                                            id="filepond"
                                            multiple
                                        >   
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="tags">Tags</label>
                                    <input id="tags" name="tag" class="tags" value="">
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form> {% endcomment %}
                    </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/quill_cdn_js.html" %}
    {% include "cdn_through_html/tagify_cdn_js.html" %}
    {% include "cdn_through_html/flatpicker_cdn_js.html" %}


    <script>
        /**
        * ===================================
        *    Description Editor 
        * ===================================
        */
        var quill = new Quill('#description', {
            modules: {
                toolbar: [
                [{ header: [1, 2, false] }],
                ['bold', 'italic', 'underline'],
                ['image', 'code-block']
                ]
            },
            placeholder: 'Write description...',
            theme: 'snow'  // or 'bubble'
        });


        /**
        * ====================
        *      File Pond 
        * ====================
        */

        
        FilePond.registerPlugin(
            FilePondPluginImagePreview,
            FilePondPluginImageExifOrientation,
            FilePondPluginFileValidateSize,
            // FilePondPluginImageEdit
        );

        // Select the file input and use 
        // create() to turn it into a Pond
        const existingImageUrl = "{{ form.thumbnail.value.url}}"
        const inputElement = document.getElementById('id_thumbnail');
        const pond = FilePond.create(inputElement, {
            storeAsFile: true,
            dropOnPage: true
        });
        if (existingImageUrl){
            pond.addFile(existingImageUrl)
        }

        /**
        * =====================
        *      Blog Tags 
        * =====================
        */
        // The DOM element you wish to replace with Tagify
        var input = document.querySelector('#id_tags');

        // initialize Tagify on the above input node reference
        new Tagify(input,{
            originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(', ')
        })

         $("#id_published_at, #id_withdrawn_at").flatpickr({
        enableTime: true,
        dateFormat: "Y-m-dTH:i",
        allowInput: true
        });


        {% comment %} document.getElementById('imageUploadForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the default form submission
            // Get the FilePond instance
            const inputElement = document.getElementById('filepond');
            const pond = FilePond.find(inputElement);
            // Get the file object
            const file = pond.getFiles()[0].file;
            console.log("fileis ", file)
        }) {% endcomment %}

    </script>
{% endblock %}