Sindbad~EG File Manager
{% extends 'badge/badge_layout.html' %}
<title>{% block title %}Photo Upload{% endblock %}Edit Data</title>
{% block style %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" />
<link href="https://cdn.jsdelivr.net/npm/jquery-jcrop@0.9.15/css/jquery.Jcrop.min.css" rel="stylesheet" />
<link rel='stylesheet' type='text/css' media='screen' href='/static/css/webcam-demo.css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
.loader {
position: absolute;
z-index: 10000;
background: #fff;
width: 100%;
height: 100vh;
top: 0;
}
.loader-text
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
{% endblock %}
{% block content %}
{% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
<div class=" text-center" id="successMsg" >
<h6 class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>{{ mesg }}</h6>
</div>
{% endfor %}
{% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
<div class="text-center" id="successMsg" >
<h6 class="alert alert-danger alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>{{ mesg }}</h6>
</div>
{% endfor %}
<div class="loader" style="display:none;"><h4 class="text-center text-danger loader-text" >Please wait..</h4></div>
<!-- <form id="edit_data" enctype="multipart/form-data"> -->
<form id="delegate_badge" action="{{url_for('badge.DelegateBatchPrintSpot')}}" method="POST" target="_blank">
<input type="hidden" class="form-control" name="badge_type" id="badge_type" value="Delegate Badge" >
<!-- <input type="hidden" class="form-control" name="badge_type" id="badge_type" value="Delegate Badge" >
<input type="hidden" class="form-control" name="badge_type" id="badge_type" value="Delegate Badge" >
-->
<div class="container">
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<br>
<div class="alert alert-success text-center alert-dismissible successMessage" id="addMsg" style="display:none;">
<p class="close close_id" aria-label="close">×</p>
<img src="/static/images/right.png" width="21px" height="21px">
<span id="addmsg"></span>
</div>
<div class="alert alert-danger text-center alert-dismissible successMessage" id="ErrorMsg" style="display:none;">
<p class="close close_id" aria-label="close">×</p>
<img src="/static/images/wrong_img.png" width="21px" height="21px">
<span id="errormsg"></span>
</div>
<br>
<h4 style="text-align:center;">Spot Print</h4>
<div class="card">
<div class="card-body">
<input type="text" class="form-control" name="conf_key" id="conf_key" value="{{conf_key}}" hidden>
<input type="text" class="form-control" name="conf_id" id="conf_id" value="{{conf_id}}" hidden>
<input type="hidden" name="del_table_name" value="{{del_table_name}}">
<input type="hidden" name="image_data" id="image_data" value="">
<div >
<h4>Delegate Details </h4>
<p style="color:red;font-size: 15px;">(If you want to update the delegate details, please use the input fields below)</p>
<div class="row">
<div class="col-sm-6">
<label>Name :
<input type="text" name="full_name" id ="full_name" class="form-control" value="">
<br>
<label>Email :
<input type="text" name="email" id ="email" value="" class="form-control">
<!-- <span id="email"></span></label><br> -->
</div>
<div class="col-sm-6">
<label>Mobile :
<input type="text" name="mobile" id ="mobile" value="" class="form-control">
<br>
<label>Role :
<select id="role" class="btn btn-light btn-lg form-control " name="role" style="text-align: left;">
{% if role %}
{% for r in role %}
<option value = "{{r.b_role|lower}}" {% if r.b_role|lower =='delegate' %} selected {% endif %} > {{r.b_role}} </option>
{% endfor %}
{% else %}
<option value = "DELEGATE" selected="selected" > DELEGATE </option>
{% endif %}
</select>
<br>
</div>
</div>
<div class="col-sm-12">
<h4>Delegate Image</h4>
<div id="Imageupload" >
<input type="hidden" name="file_exists" id="file_exists" value="">
<input type="hidden" name="image_deleted" id="image_deleted" value="">
<div class="row d-flex">
<label for="files" class="btn btn-info">
<i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input type="file" class="form-control" autocomplete="off" accept="image/*" id="files" name="files" data-toggle="modal" data-target="#myModal" target="_blank" onchange="image_upload()" style="display: none;" />
<button type="button" class="btn btn-danger ml-2" onclick="start_camera()">Camera</button>
</div>
</div>
<img id="image_container" class="img-thumbnail" >
<div id="ImageRemove" class="mt-3">
<img id="image_aws" class="img-thumbnail" src ="">
<button type="button" class="btn btn-danger" onclick="removeImage()" >Change or Remove </button>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 text-right">
<!-- <button type="submit" name="pdf" class="btn btn-md btn-info">Download Badge PDF</button> -->
<!-- <button type="submit" name="print" value="print" class="btn btn-md btn-info"><i class="fa fa-light fa-print p-1"> </i>Print Badge</button> -->
<button type="submit" name="print_spot" value="print_spot" class="btn btn-md btn-primary"><i class="fa fa-light fa-print p-1"> </i>Print Spot Badge</button>
<!-- <button type= "button" class="btn btn-md btn-success" name="update_btn" id="update_btn" title="Update" onclick="apply_btn(3)"> Update</button> -->
<a href="{{url_for('badge_user.SpotPrint',conf_id=conf_id ,conf_key=conf_key)}}" class="btn btn-md btn-danger ">Clear</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
</div>
</div>
</div>
</form>
<!-- <div class="modal" id="myModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Crop Image To Upload</h4>
<button type="button" class="btn-close" data-dismiss="modal"></button>
</div>
<div class="modal-body text-center">
<div class="row">
<div class="col-md-12" id="croppie-container">
<h5>Preview Image to crop:</h5>
<img id="show_image" class="my-image result" style="margin: 10px; height: 200px; width: 200px;" />
</div>
</div>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-2">
<button class="btn btn-success float-right" id="upload-button" onclick="apply_btn()">Apply</button>
</div>
<div class="col-md-2">
<button type="button" id="district_btn" class="btn btn-danger float-right" data-dismiss="modal">Discard</button>
</div>
</div>
</div>
</div>
</div>
</div> -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!--Sample Mail content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Crop Image To Upload</h4>
<button type="button" class="btn-close" data-dismiss="modal"></button>
</div>
<div class="modal-body text-center">
<div class="row">
<!-- changed -->
<h5 style="text-align:center;">Preview Image to crop:</h5>
<!-- changed -->
<div class="col-md-12" id="croppie-container" >
<img id="show_image" class="my-image result" style="margin: 10px; height: 200px; width: 200px;display: none;" />
</div>
<div id="croppie_div" class="demo"></div>
</div>
<div class="row">
<div class="col-md-8">
<button type= "button" class="btn btn-md btn-warning" name="uptade_btn1" id="uptade_btn1" title="Update" onclick="croppie_rotate(-90)"> Rotate Left</button>
<button type= "button" class="btn btn-md btn-warning" name="uptade_btn1" id="uptade_btn1" title="Update" onclick="croppie_rotate(90)"> Rotate Right</button>
</div>
<div class="col-md-2">
<button class="btn btn-success float-right" id="upload-button" onclick="photo_apply_btn()">Apply</button>
</div>
<div class="col-md-2">
<button type="button" id="district_btn" class="btn btn-danger float-right" data-dismiss="modal">Discard</button>
</div>
</div>
</div>
</div>
</div>
</div>
<main id="webcam-app" style="display: none;">
<div class="form-control webcam-start" id="webcam-control">
<label class="form-switch">
<input type="checkbox" id="webcam-switch">
<i></i>
<span id="webcam-caption">Click to Start Camera</span>
</label>
<button id="cameraFlip" class="btn d-none"><i class="material-icons flip_btn">cameraswitch</i></button>
</div>
<div class="row">
<div class="col-4 col-md-4" ></div>
<div id="successMsg" class="col-4 col-md-4 alert-success text-center d-none">
<h2 class="text-center">Selfie Capture Success</h2>
<button id="closeSuccess" class="btn btn-primary ml-3">OK</button>
</div>
<div class="col-4 col-md-4" ></div>
</div>
<div id="errorMsg" class="col-12 col-md-6 alert-danger d-none">
Fail to start camera, please allow permision to access camera. <br/>
If you are browsing through social media built in browsers, you would need to open the page in Sarafi (iPhone)/ Chrome (Android)
<button id="closeError" class="btn btn-primary ml-3">OK</button>
</div>
<div class="md-modal md-effect-12">
<div id="app-panel" class="app-panel md-content row p-0 m-0">
<div id="webcam-container" class="webcam-container col-12 d-none p-0 m-0">
<video id="webcam" autoplay playsinline width="640" height="480"></video>
<canvas id="canvas" class="d-none"></canvas>
<!--<img src="" id="canvas">-->
<canvas id="canvas2" class="d-none"></canvas>
<div class="flash"></div>
<audio id="snapSound" src="/static/audio/snap.wav" preload = "auto"></audio>
</div>
<div id="cameraControls" class="cameraControls">
<a href="#" id="exit-app" title="Exit App" class="d-none"><i class="material-icons">exit_to_app</i></a>
<a href="#" id="take-photo" title="Take Photo"><i class="material-icons">camera_alt</i></a>
<a href="#" id="download-photo" download="selfie.png" target="_blank" title="Download Photo" class="d-none"><i class="material-icons">file_download</i></a>
<!-- <a href="#" id="save-photo" title="Save Photo" class="d-none"><i class="material-icons">download_done</i></a> -->
<a href="#" id="resume-camera" title="Resume Camera" class="d-none"><i class="material-icons">camera_front</i></a>
</div>
</div>
</div>
<div class="md-overlay"></div>
</main>
{% endblock %}
{% block bottomscript %}
<script type="text/javascript">
var croppie;
</script>
<script src="/static/js/webcam-easy.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-jcrop@0.9.15/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src='/static/js/app_del.js'></script>
<script type="text/javascript">
var BaseUrl = document.location.origin;
var oneMB = 1048576
$(document).ready(function(){
// function removeradiovalue()
// {
// $("#role").val('');
// }
// added
// added
$("#ImageRemove").hide()
$("#files").on("click",function(){
// added
$("#show_image").attr("src",'');
$("#show_image").hide();
$("#croppie-container").hide();
// added
/* Current this object refer to input element */
var $input = $(this);
var reader = new FileReader();
reader.onload = function(){
$("#image_container").show();
$("#image_container").attr("src", reader.result);
}
reader.readAsDataURL($input[0].files[0]);
})
});
$("#files").on("change",function(){
/* Current this object refer to input element */
// added
$("#croppie-container").show();
// added
var $input = $(this);
var reader = new FileReader();
var ext = $('#files').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','jpg','jpeg','pdf','png','jfif','tif','tiff']) == -1)
{
clear();
alert('Invalid file type');
return false;
}
else if($('#files')[0].files[0].size > (oneMB*3))
{
alert('File Must less than 3MB');
clear();
return false;
}
else
{
reader.onload = function(){
$("#image_container").show();
$("#image_container").attr("src", reader.result);
$("#ImageRemove").removeClass('d-none');
$("#image_aws").attr("src","");
}
reader.readAsDataURL($input[0].files[0]);
}
});
function clear() {
$('input[type=file]').each(function()
{
$(this).val('');
});
}
// --------------------------
function removeImage()
{
$("#file_exists").val('');
$("#files").val('');
$("#image_container").attr("src",'');
$("#image_container").hide();
$("#Imageupload").show();
$("#Imageupload").removeClass('d-none');
$("#ImageRemove").addClass('d-none');
$("#image_deleted").val(1);
$("#uptade_btn").show();
// $("#addMsg").hide();
// $("#addmsg").text('');
// $("#del_update_btn").hide();
}
// --------------------------
$(document).on('click','#exist_btn' ,function(e)
{
clearfields();
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
var delegate_no = $("#delegate_no").val();
if(delegate_no.length > 0 ){
var url_1 = BaseUrl+"/"+conf_id+"/"+conf_key+"/delegate_batch_print_with_photo?delegate_no="+delegate_no;
$("#print_btn").attr("href",url_1);
$.ajax({
type: 'POST',
data:{'delegate_no':delegate_no},
url: BaseUrl+"/"+conf_id+"/"+conf_key+"/check_del_no_exist",
dataType: "html",
success: function(data){
var data_1 = JSON.parse(data);
var msg = data_1.msg;
var image = data_1.image;
if(data_1.status == 1)
{
$("#update_div").show();
$("#div_print_and_update").show();
$("#exist_btn_div").hide();
if (image == null){
$("#delegate_no").prop("readonly", true);
$("#Imageupload").show();
$("#ImageRemove").hide();
$("#image_container").hide();
$("#image_container").attr("src",'');
$("#uptade_btn").show();
// $("#update_btn").hide();
$("#full_name").val(data_1['data']['full_name']);
$("#email").val(data_1['data']['email']);
$("#mobile").val(data_1['data']['mobile']);
$("#role").val(data_1['data']['role'].toLowerCase()).attr("selected", "selected");
}
else{
$("#delegate_no").prop("readonly", true);
$("#Imageupload").hide();
$("#ImageRemove").show();
$("#image_container").show();
$("#image_container").attr("src",data_1.image);
$("#uptade_btn").hide();
$("#full_name").val(data_1['data']['full_name']);
$("#email").val(data_1['data']['email']);
$("#mobile").val(data_1['data']['mobile']);
$("#role").val(data_1['data']['role'].toLowerCase()).attr("selected", "selected");
}
}
else if(data_1.status == 3) {
$("#update_div").hide();
$("#exist_btn_div").show();
$("#ErrorMsg").show();
$("#errormsg").html(data_1.msg);
cleardata();
}
else
{
$("#update_div").hide();
$("#exist_btn_div").show();
$("#ErrorMsg").show();
$("#errormsg").html(data_1.msg);
cleardata();
}
}
});
}
else{
// added
$("#delegate_no").val('');
$("#delegate_no").prop("readonly", false);
alert("Please enter Delegate Number.");
return false;
// added
}
});
// --------------------------
$(document).on('click','.close_id',function(e)
{
e.preventDefault();
$("#addMsg").hide();
$("#addmsg").text('');
$("#ErrorMsg").hide();
$("#errormsg").text('');
});
// --------------------------
function croppie_rotate(degree) {
croppie.rotate(degree)
}
function clearfields() {
// body...
$("#addMsg").hide();
$("#addmsg").text('');
$("#ErrorMsg").hide();
$("#errormsg").text('');
$("#successMsg").hide();
$("#full_name").text('');
$("#email").text('');
$("#mobile").text('');
$("#role").val('');
}
function cleardata() {
// body...
$("#full_name").text('');
$("#email").text('');
$("#mobile").text('');
$("#role").val('');
}
function image_upload() {
var user_profile = $("#files")[0].files[0];
if($('#files')[0].files[0].size > (oneMB*3))
{
alert('File Must less than 3MB');
clear();
return false;
}
var reader = new FileReader();
reader.onload = function () {
$("#show_image").show();
$("#show_image").attr("src", reader.result);
if (croppie) {
croppie.destroy();
}
// Initialize Croppie
croppie = new Croppie(document.getElementById("show_image"), {
viewport: { width: 138, height: 158 },
boundary: { width: 210, height: 240 },
enableOrientation: true,
});
// Bind Croppie to existing image
croppie
.bind({
url: $("#show_image").attr("src"),
orientation: 1,
})
.then(function () {
croppie.element.addEventListener("update", function () {
croppie.result("base64").then(function (data) {
// Create new image element and update the existing one
var croppedImage = document.getElementById("cropped-image");
if (!croppedImage) {
croppedImage = new Image();
croppedImage.id = "cropped-image";
$("#cropped-image-container").append(croppedImage);
$("#show_image").attr("src",'');
$("#show_image").hide();
}
croppedImage.src = data;
});
});
});
};
reader.readAsDataURL(user_profile);
}
function apply_btn(type_id) {
var file_name = $("#files").val().split("\\").pop();
var conf_key = $("#conf_key").val();
var conf_id = $("#conf_id").val();
var delegate_no = $("#delegate_no").val();
var full_name = $("#full_name").val();
var email = $("#email").val();
var mobile = $("#mobile").val();
var role = $("#role").val();
// alert(full_name)
$("#upload-button").html("Please Wait..");
$("#upload-button").attr("disabled",true);
var url_1 = BaseUrl+"/"+conf_id+"/"+conf_key+"/delegate_batch_print_with_photo?delegate_no="+delegate_no;
$("#print_btn").attr("href",url_1);
if (type_id == 1){
$('#myModal').modal('hide')
croppie.result("base64").then(function (data) {
if (data) {
$("#image_container").attr("src", '');
$("#image_container").attr("src", data);
$("#image_container").show();
}
else {
removeImage()
}
});
}
else if(type_id == 3) {
var file_name = $("#show_image").val();
var data = $("#image_container").attr("src");
// var badge_photo = $("#badge_photo").val();
// var badge_size_dim = $("#badge_size").val();
$.ajax({
url: BaseUrl+"/"+conf_id+"/"+conf_key+"/post_photo_upload",
method: "POST",
data: {
'file_name': file_name,
'delegate_no': delegate_no,
'image_data': data, // base64 encode image data
'full_name':full_name,
'email':email,
'mobile':mobile,
'role':role
},
dataType:"html",
success: function (response) {
$("#upload-button").html("Apply")
$("#upload-button").attr("disabled",false)
var responseObject = JSON.parse(response);
// console.log(response);
$("#myModal").modal('hide');
$("#update_div").show();
$("#exist_btn_div").hide();
$("#addMsg").show();
$("#addmsg").html(responseObject.msg);
$("#delegate_no").prop("readonly", true);
$("#Imageupload").hide();
$("#Imageupload").removeClass('d-none');
$("#ImageRemove").show();
$("#ImageRemove").removeClass('d-none');
var image_data = responseObject.image_path+ responseObject.image_name;
if (image_data){
$("#image_container").attr("src",'');
$("#image_container").attr("src",image_data);
$("#image_container").show();
}
else
{
removeImage()
}
$("#uptade_btn").hide();
var url_1 = BaseUrl+"/"+conf_id+"/"+conf_key+"/delegate_batch_print_with_photo?delegate_no="+delegate_no;
$("#print_btn").attr("href",url_1);
},
error: function (xhr, status, error) {
console.log(xhr);
alert("Error saving image: " + error);
},
});
}
else{
var data = '';
$.ajax({
url: BaseUrl+"/"+conf_id+"/"+conf_key+"/post_photo_upload",
method: "POST",
data: {
'file_name': file_name,
'delegate_no': delegate_no,
'image_data': data, // base64 encode image data
'full_name':full_name,
'email':email,
'mobile':mobile,
'role':role
},
dataType:"html",
success: function (response) {
var responseObject = JSON.parse(response);
// console.log(response);
$("#myModal").modal('hide');
$("#update_div").show();
$("#exist_btn_div").hide();
$("#addMsg").show();
$("#addmsg").html(responseObject.msg);
$("#delegate_no").prop("readonly", true);
},
error: function (xhr, status, error) {
console.log(xhr);
alert("Error saving image: " + error);
},
});
}
}
function photo_apply_btn()
{
$('#myModal').modal('hide')
croppie.result("base64").then(function (data) {
if (data) {
$("#image_data").val(data)
$("#image_container").attr("src", '');
$("#image_container").attr("src", data);
$("#image_container").show();
}
else {
removeImage()
}
});
}
$("#district_btn").on("click", function () {
$("#show_image").attr("src",'');
$("#show_image").hide();
$("#cropped-image").hide();
$("#image_container").attr("src",'');
$("#file_exists").val('');
$("#files").val('');
$("#image_data").val('');
$("#image_container").hide();
$("#ImageRemove").hide();
$("#ImageRemove").removeClass('d-none');
});
</script>
{% endblock %}
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists