Sindbad~EG File Manager
{% extends 'user/layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Sign up{% endblock %}
{% block content %}
<div class=" row flex-row-reverse ">
<div class="col-md-12 col-sm-12 col-lg-7 ">
<div class="row justify-content-center">
<div class="col">
<form method="POST" enctype = "multipart/form-data" id="update_form" action="{{url_for('user.Post_edit',society_id=society_id,society_key=society_key,user_id=user_id)}}" >
<div class="row mt-3 ">
<div class="col-md-12 text-center">
<h1 class="text-primary py-3 ">Sign up</h1>
</div>
</div>
<!-- <div class="row">
<div class="col text-center">
{% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
<div class="alert alert-success text-center alert-dismissible" id="successMessage" >
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<h4><img src="/static/images/right.png" alt="right" height="21" width="21">{{ mesg|safe }}</h4>
</div>
{% endfor %}
{% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
<div class="alert alert-danger text-center alert-dismissible" id="successMessage" >
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<h4><img src="/static/images/wrong_img.png" alt="wrong"height="21" width="21">{{ mesg }}</h4>
</div>
{% endfor %}
</div>
</div> -->
<div class="row">
<div class=" col-md-6 form-group">
<label>Prefix<span class="text-danger">*</span>:</label>
</div>
<div class=" col-md-6 form-group">
<div class="dropdown" >
<select class="form-control" id="prefix" name="prefix">
<option id = "select" value="">Select Prefix</option>
<option value="Mr."{{ 'selected' if user.prefix=='Mr.' }}>Mr.</option>
<option value="Mrs."{{ 'selected' if user.prefix=='Mrs.' }}>Mrs.</option>
<option value="Dr."{{ 'selected' if user.prefix=='Dr.' }} {{ 'selected' if not user.prefix }} >Dr.</option>
<option value="Ms."{{ 'selected' if user.prefix=='Ms.' }}>Ms.</option>
<option value="Prof."{{ 'selected' if user.prefix=='Prof.' }}>Prof.</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class=" col-md-6 form-group">
<label>Full Name<span class="text-danger">*</span>:</label>
</div>
<div class=" col-md-6 form-group">
<input type="text" class="form-control" name="full_name" id="full_name" value="{{user.full_name or ''}}" placeholder="Enter your full name" />
</div>
</div>
<div class="row">
<div class=" col-md-6 form-group">
<label>Email id<span class="text-danger">*</span>:</label>
</div>
<div class=" col-md-6 form-group">
<input type="email" class="form-control" id="email" name="email" value="{{user.email}}" placeholder="Enter your Email id" >
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label>Mobile Number<span class="text-danger">*</span>:</label>
</div>
<div class=" col-md-6 form-group">
<input type="text" class="form-control" name="mobile" value="{{user.mobile or ''}}" id="mobile" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder="Enter your mobile number" maxlength="10"/>
</div>
</div>
<div class="row">
<div class=" col-md-6 form-group">
<label>Whatsapp Number:</label>
</div>
<div class=" col-md-6 form-group">
<input type="text" class="form-control" value="{{user.whatsapp_number or ''}}" name="whatsapp_number" id="whatsapp_number" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" maxlength="10" />
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label>DOB [DD-MM-YYYY]<span class="text-danger">*</span>:</label>
</div>
<div class=" col-md-6 form-group">
<input type="text" class="form-control" value="{{ user.dob or '' }}" name="dob" id="dob" />
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label>Gender<span class="text-danger">*</span>:</label>
</div>
<div class=" col-md-6 form-group">
<div class="row">
<div class="col-md-4 col-lg-3">
<input type="radio" class="form-input" name="gender" id="gender1" value="Male" {% if user.gender == 'Male' %} checked="checked" {% endif %} > <label for="gender1" class="text-dark">Male</label>
</div>
<div class="col-md-4 col-lg-4">
<input type="radio" class="form-input" name="gender" id="gender2" value="Female" {% if user.gender == 'Female' %} checked="checked" {% endif %}> <label for="gender2" class="text-dark">Female</label>
</div>
<div class="col-md-4 col-lg-5">
<input type="radio" class="form-input" name="gender" id="gender3" value="Transgender" {% if user.gender == 'Transgender' %} checked="checked" {% endif %} > <label for="gender3" class="text-dark">Transgender</label>
</div>
</div>
<label id="gender-error" class="error" for="gender"></label>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label>Address:</label>
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control" name="address_1" value="{{user.address1 or ''}}" id="address_1" placeholder="Line 1*"/>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group">
<input type="text" class="form-control" name="address_2" value="{{user.address2 or ''}}" id="address_2" placeholder="Line 2"/>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group">
<input type="text" class="form-control" name="address_3" id="address_3" value="{{user.address3 or ''}}" placeholder="Line 3"/>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label>City<span class="text-danger">*</span>:</label>
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control" name="city" id="city" value="{{user.city or ''}}" placeholder="City*"/>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label>District:</label>
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control" name="district" id="district" value="{{user.district or ''}}" placeholder="District"/>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label>Pincode:</label>
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control" name="pincode" id="pincode" value="{{user.pincode or ''}}" placeholder="Pincode" maxlength="6"/>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label>Country<span class="text-danger">*</span>:</label>
</div>
<div class="col-md-6 form-group">
<!-- user contry if not or new then default set 100 - india country id -->
{% set user_country = user.country_id if user.country_id else 101 %}
<select class = "form-control" id ="country" name= "country" onchange="onchange_country()">
<option value = "" id = "select">Select Country*</option>
{% if countries %}
{% for country in countries %}
<option value = "{{country.country_id}}" {{ "selected" if country.country_id == user_country }}> {{country.country_name}}</option>
{% endfor %}
{% endif %}
</select>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label>State<span class="text-danger">*</span>:</label>
</div>
<div class="col-md-6 form-group">
<select class = "form-control" id = "state" name = "state">
<option value = "" id = "select">Select Country First*</option>
{% if states %}
{% for state in states %}
<option value = "{{state.state_id}}">{{state.state_name}}</option>
{% if state.state_id == user.state_id %}
<option value = "{{state.state_id}}" selected>{{state.state_name}}</option>
{% endif %}
{% endfor %}
{% endif %}
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-lg-4 col-sm-12 col-md-6 text-center ">
{% if user.attach_path %}
<img src="{{user.attach_path}}/{{user.attach_file_name}}" id="img" class="rounded border border-primary img-fluid" width="120px" height="auto" />
{% else %}
<img src="/static/images/default-1.jpg" class="rounded border border-primary img-fluid" id="img" width="120px" height="auto" alt="image" />
{% endif %}
<br><br>
<label id="file-error" class="error" for="file_{{user.attach_type_id}}"></label>
<span class="btn btn-info btn-file text-center">Upload Profile picture
<input type="file" autocomplete="off" accept="image/*" id="files" name="files" />
</span>
</div>
</div>
<div class="row pb-2">
<div class="col">
<a href="{{ url_for('user.Login',society_id=society_id,society_key=society_key) }}" class="btn btn-danger ">Back</a>
</div>
<div class="col">
<input type="submit" value="Submit" name="submit_update" id="submit" class="btn btn-dark float-right form-input">
</div>
</div>
</form >
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-lg-5">
<img src="/static/images/background.png" class="img-fluid align-items-center">
</div>
</div>
{% endblock %}
{% block script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.1/moment.min.js"></script>
<script type="text/javascript">
var BaseUrl = document.location.origin
$('#dob').mask('00-00-0000');
$(document).ready(function()
{
onchange_country();
$('#files').change(function() {
const file = this.files[0];
if (file) {
let reader = new FileReader();
reader.onload = function(event) {
$('#img').attr('src', event.target.result);
}
reader.readAsDataURL(file);
}
});
$("#submit").click(function()
{
validate_update_form()
})
})
jQuery.validator.addMethod("validDate", function(value, element) {
var check = moment(value,"DD-MM-YYYY");
var isvalid = this.optional(element) || check.isValid();
if (isvalid == true)
{
var year = check.format('YYYY');
if (year == "0000" )
{
isvalid = false;
}
}
return isvalid
}, "Please enter a valid date in the format DD-MM-YYYY");
jQuery.validator.addMethod("valid23AboveYear", function(value, element) {
var check = moment(value,"DD-MM-YYYY");
var isvalid = this.optional(element) || check.isValid();
if (isvalid == true)
{
var year = check.format('YYYY');
var currentyear = new Date().getFullYear();
var checkyear = currentyear - 23;
if (checkyear < year)
{
isvalid = false;
}
}
return isvalid
}, "Invalid DOB ");
jQuery.validator.addMethod("validdatefromate", function(value, element) {
return this.optional(element) || /^\d{1,2}\-\d{1,2}\-\d{4}$/.test(value);
}, "Please enter valid date.");
function onchange_country()
{
var country_id=$("#country").val();
$.ajax({
type: 'GET',
url: BaseUrl+"/state",
data:{
country_id:country_id
},
dataType: 'json',
success: function(data){
$("#state").empty();
$("#state").append($("<option></option>").val('').html('Select State'));
$.each(data, function (i, state)
{
$("#state").append($("<option></option>").val(state.state_id).html(state.state_name));
})
//For edit state select from user table
$("#state").val("{{user.state_id}}")
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
function validate_update_form()
{
$("#update_form").validate({
rules : {
prefix : {
required: true,
},
full_name : {
required: true,
},
email :{
required:true,
email:true,
},
mobile : {
required : true,
minlength : 10,
maxlength : 10
},
dob : {
required : true,
validdatefromate: true,
validDate: true,
valid23AboveYear :true,
},
gender : {
required: true,
},
address_1 : {
required: true,
},
city : {
required: true,
},
pincode : {
minlength : 6,
maxlength : 6
},
country : {
required: true,
},
state : {
required: true,
},
},
messages : {
prefix : "Please select the prefix",
full_name : "Please enter your full name",
email : "Please enter your email id",
mobile : {
required : "Please enter mobile number",
maxlength : "Mobile Number provided is too long"
},
dob : {
required : "Please enter DOB format",
birth:"Invalid Date format"
},
gender : "Please select the Gender",
address_1 : "Please enter your address",
district : "Please enter your district ",
city : "Please enter your city",
pincode : {
maxlength:"Pincode must be 6 digits",
maxlength:"Pincode must be 6 digits",
},
country : "Please select your country",
state : "Please select your state",
},
submitHandler: function(form) {
form.submit();
},
})
}
</script>
{% endblock %}
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists