<!DOCTYPE html>
<html lang="en">
<head>
<!-- signature stuff -->
<link href="css/jquery.signaturepad.css" rel="stylesheet">
<script src="js/numeric-1.2.6.min.js"></script>
<script src="js/bezier.js"></script>
<script src="js/jquery.signaturepad.js"></script>
<script type='text/javascript' src="js/html2canvas.js"></script>
<script src="js/json2.min.js"></script>
</head>
<div class="card shadow mb-4">
<div class="card-header py-3">
<div style="float: left;">
<div id="signArea" style="height:auto;width:304px;margin-left: 0px;margin-top: 10px;max-width: 90%">
<h2 class="tag-ingo" style="font-size: 15px;text-align: left;font-style: oblique;">Enter your signature below: <span class="sign-pad-clear" style="font-size: 10px;color: black;cursor: pointer;">(<u>clear signature</u>)</span></h2>
<div class="sig sigWrapper" style="height:auto;max-width: 90%">
<div class="typed"></div>
<canvas class="sign-pad" id="sign-pad" name="sign-pad" style="width: 300px;height: auto;max-width: 100%"></canvas>
</div>
</div>
<button id="btnSaveSign" class="btn btn-primary" style="margin-left: 0px;margin-top: 10px;"" onclick="saveSig()">Save Signature</button>
</div>
<div style="float: left;margin-left: 0px;margin-top: 10px;max-width: 90%">
<h2 class="tag-ingo" style="font-size: 15px;text-align: left;font-style: oblique;">Currently saved signature:</h2>
<img src="" id="current_sig" style="margin-bottom: 5px;width: 300px;height: auto;max-width: 90%;">
</div>
<div style="clear: both;"></div>
</div>
</div>
<script>
$("#signArea").signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:100,clear:".sign-pad-clear"});
function loadSig(){
var http = new XMLHttpRequest();
var url = hostUrl+"get_sign.php";
var params = "apiKey="+window.localStorage.getItem("api_key")+"&service_id="+service_id;
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
var obj = null;
try {
obj = JSON.parse(http.responseText);
}catch (e) {
vex.dialog.alert("Communication Error. Please try again later.");
}
if(obj!=null){
if(obj.message!=""){
if(obj.message=="Incorrect API credentials"){
performTheLogOut();
}else{
vex.dialog.alert(obj.message);
}
}else{
document.getElementById("current_sig").src = obj.data.img;
}
}
}
};
http.send(encodeURI(params));
}
function saveSig(){
vex.dialog.confirm({
message: 'By saving this signature you are confirming that the information contained in the work order is accurate to the best of your knowledge. Do you wish to proceed?',
callback: function (value) {
if (value) {
html2canvas([document.getElementById('sign-pad')], {
onrendered: function (canvas) {
var canvas_img_data = canvas.toDataURL('image/png');
var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");
//ajax call to save image inside folder
$.ajax({
url: hostUrl+'save_sign.php',
data: { img_data:img_data, service_id:service_id, apiKey: window.localStorage.getItem("api_key") },
type: 'post',
dataType: 'json',
success: function (response) {
if(response!=null){
if(response.message!=""){
console.log("Error: "+response.message);
}else{
$(".sign-pad-clear").trigger("click");
loadSig();
}
}
}
});
}
});
}
}
})
}