136 lines
6.2 KiB
HTML
136 lines
6.2 KiB
HTML
{% extends 'base_structure/layout/base_template.html' %}
|
|
{% load static %}
|
|
{% block stylesheet %}
|
|
<!-- include required css cdn link through html here -->
|
|
{% include "cdn_through_html/filepond_cdn_css.html" %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="row layout-top-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="row mb-2">
|
|
<div class="col">
|
|
<h3>Profile</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>
|
|
{% comment %} <a class="btn btn-primary mb-2 me-4" href="{% url 'accounts:role_add' %}">Add Role</a> {%endcomment %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row layout-spacing">
|
|
<div class="col-xl-12 col-lg-12 col-md-12 layout-spacing">
|
|
<div class="statbox widget box box-shadow">
|
|
<div class="widget-content widget-content-area">
|
|
<!-- <form class="section general-info">
|
|
<div class="info">
|
|
<h6 class="">Profile</h6>
|
|
<div class="row">
|
|
<div class="col-lg-11 mx-auto">
|
|
<div class="row">
|
|
<div class="col-xl-2 col-lg-12 col-md-4">
|
|
<div class="profile-image">
|
|
<div class="img-uploader-content">
|
|
<input type="file" class="filepond"
|
|
name="filepond" accept="image/png, image/jpeg"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-10 col-lg-12 col-md-8 mt-md-0 mt-4">
|
|
<div class="form">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="fullName">First Name</label>
|
|
<input type="text" class="form-control mb-3"
|
|
id="fullName" placeholder="Full Name"
|
|
value="Jimmy Turner">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="profession">Last Name</label>
|
|
<input type="text" class="form-control mb-3"
|
|
id="profession" placeholder="Designer"
|
|
value="Web Developer">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12 mt-1">
|
|
<div class="form-group text-end">
|
|
<button
|
|
class="btn btn-secondary _effect--ripple waves-effect waves-light">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form> -->
|
|
<form method="POST" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
{% include 'base_structure/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" %}
|
|
|
|
|
|
<script>
|
|
/**
|
|
* ==================
|
|
* Single File Upload
|
|
* ==================
|
|
*/
|
|
|
|
// We register the plugins required to do
|
|
// image previews, cropping, resizing, etc.
|
|
FilePond.registerPlugin(
|
|
FilePondPluginImagePreview,
|
|
FilePondPluginImageExifOrientation,
|
|
FilePondPluginFileValidateSize,
|
|
// FilePondPluginImageEdit
|
|
);
|
|
|
|
// Select the file input and use
|
|
// create() to turn it into a pond
|
|
const inputElement = document.getElementById('id_profile_photo');
|
|
const pond = FilePond.create(inputElement, {
|
|
storeAsFile: true,
|
|
dropOnPage: true
|
|
});
|
|
// Get the profile photo URL using Django template syntax
|
|
const profilePhotoUrl = "{% if form.profile_photo.value %}{{ form.profile_photo.value.url }}{% endif %}";
|
|
|
|
if (profilePhotoUrl) {
|
|
// If the URL exists, add the profile photo to FilePond
|
|
pond.addFile(profilePhotoUrl);
|
|
}
|
|
|
|
</script>
|
|
{% endblock %} |