Sindbad~EG File Manager
{% extends "firebase/firebase_layout.html" %}
<title>{% block title %}Notification Form{% 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 %}
<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">
{% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
<div class="row mt-3">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<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 |safe }}</h6>
</div>
<div class="col-sm-3"></div>
</div>
</div>
{% endfor %}
{% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
<div class="row mt-3">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<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 |safe }}</h6>
</div>
<div class="col-sm-3"></div>
</div>
</div>
{% endfor %}
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<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>
</div>
<div class="col-lg-3"></div>
</div>
<input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}" >
<input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}" >
<input type="hidden" name="html_data" id="html_data" value="{{html_data}}" >
<input type="hidden" name="notification_id" id="notification_id" >
<input type="hidden" name="is_update" id="is_update">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-6">
<h4 style="text-align: center;">{{get_conf.conf_name}} - Notification</h4>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<label>Title</label>
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<input type="text" name="notification_title" id="notification_title" class="form-control" placeholder="Enter Title"/>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<label>Content</label>
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<textarea name="notification_content" id="notification_content" rows="3" cols="68" class="form-control" style="white-space: pre-wrap;" placeholder="Enter Content"></textarea>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<label>Upload Image</label>
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<input type="hidden" name="image_name" id="image_name" />
<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;"
/>
</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>
<br />
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<label>Select User</label>
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<select class="form-control w-100" id="send_user" name="send_user">
<option value="" id="select"> Select User</option>
<option value="For all">For all</option>
<option value="Logged User">Loggedin User</option>
<option value="Commitment User">Commitment User</option>
</select>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 text-center">
<button type="button" class="btn btn-md btn-warning preview_btn" name="preview_btn" id="preview_btn" title="Preview" value="Preview">Preview</button>
<button type="button" class="btn btn-md btn-success save_btn" name="save_btn" id="save_btn" title="Save" value="Save">Save</button>
<button type="button" class="btn btn-md btn-secondary save_btn" name="save_and_send_btn" id="save_and_send_btn" title="Save and Send Now" value="Save and Send Now">Save and Send Now</button>
<button style="display:None;" type="button" class="btn btn-md btn-primary" name="update_btn" id="update_btn" title="Update" value="Update">Update</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 preview_area" >
<h4 style="text-align: center;">Preview</h4>
<div class="bg-white" id="preview_area" style="border-style: ridge;">
<div style=" margin-left: 10px;margin-right: 10px;">
<div class="row">
<div class="col-lg-9">
<p id="title"></p>
</div>
<div class="col-lg-3">
<img id="image" alt="" style="max-width: 50px;margin-left:18px ;">
</div>
</div><hr>
<div class="row">
<div class="col-lg-12">
<p id="content"></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
<div id="notification_index"></div>
</form>
<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_btn" id="uptade_btn" title="Update" onclick="croppie_rotate(-90)">Rotate Left</button>
<button type="button" class="btn btn-md btn-warning" name="uptade_btn" id="uptade_btn" 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="apply_btn()">Apply</button>
</div>
<div class="col-md-2">
<button type="button" id="discard_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 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 croppie;
var BaseUrl = document.location.origin;
var oneMB = 1048576;
$(document).ready(function () {
$("#ImageRemove").hide();
$(".preview_area").hide();
var html_data = $("#html_data").val();
$("#notification_index").html(html_data);
// for title
var titleinputElement = $('#notification_title');
titleinputElement.keyup(function() {
var titleinputValue = titleinputElement.val();
var titlecontentDiv = $('#title');
titlecontentDiv.html(titleinputValue);
});
// for content
var contentinputElement = $('#notification_content');
contentinputElement.keyup(function() {
let content = e.target.value.replace(/\r\n|\r|\n/g, "<br />")
$('#content').html("<pre>"+content+"</pre>");
// var contentinputValue = contentinputElement.val();
// var contentDiv = $('#content');
// contentDiv.html(contentinputValue);
});
});
$(document).on("click", ".close_id", function (e) {
$("#addMsg").hide();
$("#addmsg").html('');
$("#ErrorMsg").hide();
$("#errormsg").html('');
});
$(document).on("click", ".preview_btn", function (e) {
var notification_title = $("#notification_title").val();
var notification_content = $("#notification_content").val();
var send_user = $("#send_user").val();
var image = $("#image_name").val();
if(notification_title.length > 0 || notification_content.length > 0 || image.length > 0)
{
$(".preview_area").show();
$("#title").html(notification_title);
// $("#content").html(notification_content);
var notification_content = notification_content.replace(/\r\n|\r|\n/g, "<br />")
$('#content').html("<pre>"+notification_content+"</pre>");
$("#image").attr("src",image);
}
else{
alert("Please fill the form");
return false;
}
});
$(document).on("click", ".send_notification", function (e) {
var notification_id = $(this).val();
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
if(confirm("Confirm to send notification.")) {
$.ajax({
type : 'GET',
data : {
"notification_id" : notification_id
},
url : BaseUrl+"/"+conf_id+"/"+conf_key+"/send_fb_notification",
dataType : "html",
success: function(data){
var data_1 = JSON.parse(data);
var msg = data_1.msg;
var data = data_1.edit_data;
if(data_1.status == 1)
{
$("#addMsg").show();
$("#addmsg").html(msg);
topFunction();
}
else{
alert(msg);
return false;
}
}
});
}
else{
return false;
}
});
$(document).on("click", ".save_btn", function (e) {
var is_send = $(this).val();
if(is_send== "Save"){
var is_send = 0 ;
}
else{
var is_send = 1 ;
}
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
var notification_title = $("#notification_title").val();
var notification_content = $("#notification_content").val();
var send_user = $("#send_user").val();
var image = $("#image_name").val();
if(notification_title){
$.ajax({
type : 'POST',
data : {
"notification_title" : notification_title,
"notification_content" : notification_content,
"send_user" : send_user,
"image_data" : image,
"is_send" : is_send
},
url : BaseUrl+"/"+conf_id+"/"+conf_key+"/post_fb_notification",
dataType : "html",
success: function(data){
var data_1 = JSON.parse(data);
var msg = data_1.msg;
if(data_1.status == 1)
{
$("#addMsg").show();
$("#addmsg").html(msg);
$("#notification_index").empty();
$("#notification_index").html(data_1.html_data);
clear();
topFunction();
}
else{
alert(msg);
return false;
}
}
});
}
else{
alert("Please enter Title");
return false;
}
});
$(document).on("click", "#edit_btn", function (e) {
var notification_id = $(this).val();
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
$.ajax({
type : 'GET',
data : {
"notification_id" : notification_id
},
url : BaseUrl+"/"+conf_id+"/"+conf_key+"/edit_fb_notification",
dataType : "html",
success: function(data){
var data_1 = JSON.parse(data);
var msg = data_1.msg;
var data = data_1.edit_data;
if(data_1.status == 1)
{
$("#notification_id").val(data.notification_id);
$("#send_user").val(data.send_user);
$("#notification_title").val(data.notification_title);
$("#notification_content").val(data.notification_content);
if(data.image){
$("#image_name").val(data.image);
$("#image_container").attr("src",'');
$("#image_container").attr("src",data.image);
$("#image_container").show();
$("#files").attr("src",data.image);
$("#Imageupload").hide();
$("#ImageRemove").show();
}
else{
$("#Imageupload").show();
$("#ImageRemove").hide();
}
$("#update_btn").show();
$("#save_btn").hide();
$("#save_and_send_btn").hide();
$("#is_update").val(1);
topFunction();
}
else{
alert(msg);
return false;
}
}
});
});
$(document).on("click", "#update_btn", function (e) {
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
var notification_id = $("#notification_id").val();
var is_update = $("#is_update").val();
var notification_title = $("#notification_title").val();
var notification_content = $("#notification_content").val();
var send_user = $("#send_user").val();
var image = $("#image_name").val();
var is_send = 0 ;
$.ajax({
type : 'POST',
data : {
"notification_id" : notification_id,
"notification_title" : notification_title,
"notification_content" : notification_content,
"send_user" : send_user,
"image_data" : image,
"is_update" : is_update
},
url : BaseUrl+"/"+conf_id+"/"+conf_key+"/post_fb_notification",
dataType : "html",
success: function(data){
var data_1 = JSON.parse(data);
var msg = data_1.msg;
if(data_1.status == 1)
{
$("#addMsg").show();
$("#addmsg").html(msg);
$("#notification_index").empty();
$("#notification_index").html(data_1.html_data);
clear();
topFunction();
}
else{
alert(msg);
return false;
}
}
});
});
function apply_btn() {
var file_name = $("#files").val().split("\\").pop();
var conf_id = $("#conf_id").val();
var conf_key = $("#conf_key").val();
$("#upload-button").html("Please Wait..");
$("#upload-button").attr("disabled",true);
if (file_name){
if (file_name.length == 0) {
file_name = "camera.png";
}
croppie.result("base64").then(function (data) {
$.ajax({
url : BaseUrl+"/"+conf_id+"/"+conf_key+"/apply_file_upload",
method : "POST",
data : {'image_data':data,'file_name':file_name},
dataType :"html",
success : function (response) {
$("#upload-button").html("Apply")
$("#upload-button").attr("disabled",false)
var responseObject = JSON.parse(response);
$("#myModal").modal('hide');
$("#Imageupload").hide();
$("#Imageupload").removeClass('d-none');
$("#ImageRemove").show();
$("#ImageRemove").removeClass('d-none');
var image_data = responseObject.image_path+ responseObject.image_name;
$("#image_name").val(image_data);
$("#image_container").attr("src",'');
$("#image_container").attr("src",image_data);
$("#image_container").show();
},
error: function (xhr, status, error) {
console.log(xhr);
alert("Error saving image: " + error);
},
});
});
}
}
function clear() {
$("#is_update").val('');
$("#notification_id").val('');
$("#notification_title").val('');
$("#notification_content").val('');
$("#send_user").val('');
$("#image_name").val('');
$("#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");
$("#Imageupload").show();
$("#Imageupload").removeClass("d-none");
$(".save_btn").show();
$("#update_btn").hide();
$("#preview_area").empty();
$(".preview_area").hide();
}
function removeImage() {
$("#file_exists").val("");
$("#files").val("");
$("#image_name").val('');
$("#image_container").hide();
$("#Imageupload").show();
$("#Imageupload").removeClass("d-none");
$("#ImageRemove").addClass("d-none");
$("#image_deleted").val(1);
$("#addMsg").hide();
$("#addmsg").text("");
$("#del_update_btn").hide();
$("#cropped-image-container").empty();
$("#show_image").attr("src", "");
$("#show_image").hide();
}
function croppie_rotate(degree) {
croppie.rotate(degree);
}
$("#discard_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");
});
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").hide();
$("#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,
// To Zoom start
enableZoom:true,
showZoomer: false,
enableResize: true,
mouseWheelZoom: 'ctrl'
// To Zoom end
});
// Bind Croppie to existing image
croppie
.bind({
url: $("#show_image").attr("src"),
orientation: 1,
})
// .then(function () {
croppie.result('blob').then(function(blob) {
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 topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
{% endblock %}
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists