unserver-unify
Version:
172 lines (165 loc) • 19.1 kB
JavaScript
'use strict';
angular.module('bamboo.common').service('CertService', function($rootScope, loginService, ApiService, CommonService,$q) {
var self = this;
//Chinese
//en_US
this.schoolBaseIconUrl = ApiService.PSURL + "/school/";
this.courseBaseIconUrl = ApiService.SHOST + "/lcourse/";
console.log($rootScope.currentLanguage);
this.DownloadCertificate = function() {
downloadURI("certificate.png");
};
function getDate(time) {
var d = new Date(time);
var datestring = d.getDate() + " / " + (d.getMonth() + 1) + " / " + d.getFullYear();
return datestring;
}
/**
* @param {boolean} loginService.school.courseCertificate - is the flag decide if use coursebase cert
*/
this.getCertTplByCourseId = function(courseId, callback) {
ApiService.get('/course/' + courseId).then(function(result) {
console.log(result);
console.log(loginService.school.courseCertificate);
console.log(loginService.school.certificate);
if (result.data.success) {
var cert = result.data.data.certificate;
var lcourse = result.data.data;
console.log(lcourse);
console.log(loginService.school);
console.log(cert);
var tpl, orientation;
if (loginService.school.courseCertificate && cert) {
tpl = cert;
tpl = self.courseBaseIconUrl + courseId + '/' + tpl;
orientation = lcourse.certOrientation;
} else if (loginService.school.certificate) {
tpl = loginService.school.certificate;
orientation = loginService.school.certOrientation;
tpl = self.schoolBaseIconUrl + ApiService.gid + '/' + tpl;
} else if (loginService.school.certificates&&loginService.school.certificates.length!=0) {
tpl = loginService.school.certificates[loginService.school.certificates.length-1];
orientation = loginService.school.certOrientation;
tpl = self.schoolBaseIconUrl + ApiService.gid + '/' + tpl;
} else {
//loginService.school.certificate is undefined
tpl = null;
}
console.info(tpl);
console.info(self.courseBaseIconUrl);
var data = {
cert: tpl,
serial: result.data.data.serial,
orientation: orientation
};
callback(data);
} else {
CommonService.showNoBlockErr('Get failed: ' + result.data.error || result.data.data.error);
}
})
}
this.getCertOriByCourseId = function(courseId) {
var deferred = $q.defer();
var promise = deferred.promise;
ApiService.get('/course/' + courseId).then(function(result) {
if (result.data.success) {
var cert = result.data.data.certificate;
var lcourse = result.data.data;
var tpl, orientation;
if (loginService.school.courseCertificate && cert) {
orientation = lcourse.certOrientation;
} else if (loginService.school.certificate) {
tpl = loginService.school.certificate;
orientation = loginService.school.certOrientation;
tpl = self.schoolBaseIconUrl + ApiService.gid + '/' + tpl;
} else if (loginService.school.certificates&&loginService.school.certificates.length!=0) {
tpl = loginService.school.certificates[loginService.school.certificates.length-1];
orientation = loginService.school.certOrientation;
tpl = self.schoolBaseIconUrl + ApiService.gid + '/' + tpl;
}
var data = {
orientation: orientation
};
deferred.resolve(data);
} else {
deferred.reject(result.data.error || result.data.data.error);
}
})
return promise;
}
// this.drawCanvas = function(ElementId, template, paddingtop, userfullname, coursename, schoolname, schoolIconUrl, time) {
// if ($rootScope.currentLanguage == 'en_US') {
// self.drawCanvasEnglish(ElementId, template, paddingtop, userfullname, coursename, schoolname, schoolIconUrl, time);
// } else {
// self.drawCanvasChinese(ElementId, template, paddingtop, userfullname, coursename, schoolname, schoolIconUrl, time);
// }
// }
this.drawCanvas = function(certinfo) {
drawCert(certinfo);
}
function getCertTpl(certInfo) {
var USTplWithNo = '<svg xmlns="http://www.w3.org/2000/svg">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:30px; width:100%; text-align:center; font-weight:500; font-family:arial; padding-top:' + certInfo.paddingtop + 'px">' + '<div style="margin-bottom:20px; font-size:30px;">This certifies that</div>' + '<div style="margin-bottom:20px; font-size:30px;">Name: <span style="border-bottom:solid 2px #555; font-size:35px; font-weight:600; padding:0 10px; text-transform:uppercase;">' + certInfo.userfullname + '</span></div>' + '<div style="margin:0 auto;text-align: center;margin-bottom:20px;">Has successfully completed the</div>' + '<div style="margin-bottom:20px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.coursename + '</div>' + '<div style="margin-bottom:20px;">and is awarded this certificate by</div>' + '<div style="margin-bottom:60px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.schoolname + '</div>' + '<div style="margin-bottom:20px;">' + '<span style="padding:0 10px;"> Date: ' + getDate(certInfo.time) + '</span>' + '<span> No: ' + certInfo.certNo + '</span>' + '</div>' + '</div>' + '</foreignObject>' + '</svg>';
var USTplWithNoSgpower_portrait = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px; width:100%; text-align:center; font-weight:500; font-family:arial; padding-top:' + certInfo.paddingtop + 'px">' + '<div style="margin-top:250px; margin-bottom:20px; font-size:50px; font-style:italic; font-weight:600; text-transform:uppercase;">' + certInfo.userfullname + '</div>' + '<div style="margin-bottom:50px; font-size:40px;">' + certInfo.icid + '</div>' + '<div style="margin-bottom:40px; text-align: center;">has successfully attended the course on</div>' + '<div style="margin-bottom:60px; font-size:45px; font-weight:600; text-transform:uppercase; font-weight:600;">' + certInfo.coursename + '</div>' + '<div style="margin-bottom:50px;">conducted by</div>' + '<div style="margin-bottom:50px; font-size:50px; font-style:italic; font-weight:500; font-family:tahoma;">Singapore Institute of Power and Gas Pte Ltd</div>' + '<div style="margin-bottom:250px; font-size:36px;">' + getDate(certInfo.time) + '</div>' + '<div style="margin-bottom:20px; font-size:30px; font-family:Times New Roman;">Peter Leong</div>' + '<div style="margin-bottom:20px; font-size:30px; font-family:Times New Roman;">Principal</div>' + '</div>' + '</foreignObject>' + '</svg>';
var USTplWithNoSgpower_landscape = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px; width:100%; text-align:center; font-weight:500; font-family:arial; padding-top:' + certInfo.paddingtop + 'px">' + '<div style="margin-top:0px; margin-bottom:20px; font-size:50px; font-style:italic; font-weight:600; text-transform:uppercase;">' + certInfo.userfullname + '</div>' + '<div style="margin-bottom:50px; font-size:40px;">' + certInfo.icid + '</div>' + '<div style="margin-bottom:40px; text-align: center;">has successfully attended the course on</div>' + '<div style="margin-bottom:60px; font-size:45px; font-weight:600; text-transform:uppercase; font-weight:600;">' + certInfo.coursename + '</div>' + '<div style="margin-bottom:50px;">conducted by</div>' + '<div style="margin-bottom:50px; font-size:50px; font-style:italic; font-weight:500; font-family:tahoma;">Singapore Institute of Power and Gas Pte Ltd</div>' + '<div style="margin-bottom:250px; font-size:36px;">' + getDate(certInfo.time) + '</div>' + '<div style="margin-bottom:20px; font-size:30px; font-family:Times New Roman;">Peter Leong</div>' + '<div style="margin-bottom:20px; font-size:30px; font-family:Times New Roman;">Principal</div>' + '</div>' + '</foreignObject>' + '</svg>';
var USTplWithoutNo_landscape = '<svg xmlns="http://www.w3.org/2000/svg">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:30px; width:100%; text-align:center; font-weight:500; font-family:arial; padding-top:100px">' + '<div style="margin-bottom:20px; font-size:30px;">This certifies that</div>' + '<div style="margin-bottom:20px; font-size:30px;">Name: <span style="border-bottom:solid 2px #555; font-size:35px; font-weight:600; padding:0 10px; text-transform:uppercase;">' + certInfo.userfullname + '</span></div>' + '<div style="margin:0 auto;text-align: center;margin-bottom:20px;">Has successfully completed the</div>' + '<div style="margin-bottom:20px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.coursename + '</div>' + '<div style="margin-bottom:20px;">and is awarded this certificate by</div>' + '<div style="margin-bottom:20px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.schoolname + '</div>' + '<div style="margin-bottom:20px;">Date: <span style="border-bottom:solid 2px #555; padding:0 10px;">' + getDate(certInfo.time) + '</span></div>' + '</div>' + '</foreignObject>' + '</svg>';
var USTplWithoutNo_portrait = '<svg xmlns="http://www.w3.org/2000/svg">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px; width:100%; text-align:center; font-weight:500; font-family:arial; padding-top:80px">' + '<div style="margin-top:250px;margin-bottom:50px; font-size:40px;">This certifies that</div>' + '<div style="margin-bottom:50px; font-size:40px;">Name: <span style="border-bottom:solid 2px #555; font-size:45px; font-weight:600; padding:0 10px; text-transform:uppercase;">' + certInfo.userfullname + '</span></div>' + '<div style="margin:0 auto;text-align: center; font-size:35px; margin-bottom:40px;">Has successfully completed the</div>' + '<div style="margin-bottom:50px; font-size:45px; text-transform:uppercase; font-weight:600;">' + certInfo.coursename + '</div>' + '<div style="margin-bottom:50px; font-size:35px;">and is awarded this certificate by</div>' + '<div style="margin-bottom:50px; font-size:50px; font-style:italic; font-weight:500; font-family:tahoma;">' + certInfo.schoolname + '</div>' + '<div style="margin-bottom:30px; font-size:35px;">Date: <span style="border-bottom:solid 2px #555; padding:0 10px;">' + getDate(certInfo.time) + '</span></div>' + '</div>' + '</foreignObject>' + '</svg>';
var USTplWithoutNo_caregivenasia_portrait = '<svg xmlns="http://www.w3.org/2000/svg">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px; width:100%; text-align:center; font-weight:500; font-family:arial; padding-top:20px">' + '<div style="margin-top:250px;margin-bottom:50px; font-size:40px;">This certifies that</div>' + '<div style="margin-bottom:50px; font-size:40px;">Name: <span style="border-bottom:solid 2px #555; font-size:45px; font-weight:600; padding:0 10px; text-transform:uppercase;">' + certInfo.userfullname + '</span></div>' + '<div style="margin:0 auto;text-align: center; font-size:35px; margin-bottom:40px;">Has successfully completed the</div>' + '<div style="margin-bottom:50px; font-size:45px; text-transform:uppercase; font-weight:600;">' + certInfo.coursename + '</div>' + '<div style="margin-bottom:50px; font-size:35px;">and is awarded this certificate by</div>' + '<div style="margin-bottom:50px; font-size:50px; font-style:italic; font-weight:500; font-family:tahoma;">' + certInfo.schoolname + '</div>' + '<div style="margin-bottom:30px; font-size:35px;">Date: <span style="border-bottom:solid 2px #555; padding:0 10px;">' + getDate(certInfo.time) + '</span></div>' + '</div>' + '</foreignObject>' + '</svg>';
var USTplWithoutNo_caregivenasia_landscape = '<svg xmlns="http://www.w3.org/2000/svg">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:30px; width:100%; text-align:center; font-weight:500; font-family:arial; padding-top:130px">' + '<div style="margin-bottom:20px; font-size:30px;">This certifies that</div>' + '<div style="margin-bottom:20px; font-size:30px;">Name: <span style="border-bottom:solid 2px #555; font-size:35px; font-weight:600; padding:0 10px; text-transform:uppercase;">' + certInfo.userfullname + '</span></div>' + '<div style="margin:0 auto;text-align: center;margin-bottom:20px;">Has successfully completed the</div>' + '<div style="margin-bottom:20px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.coursename + '</div>' + '<div style="margin-bottom:20px;">and is awarded this certificate by</div>' + '<div style="margin-bottom:20px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.schoolname + '</div>' + '<div style="margin-bottom:20px;">Date: <span style="border-bottom:solid 2px #555; padding:0 10px;">' + getDate(certInfo.time) + '</span></div>' + '</div>' + '</foreignObject>' + '</svg>';
var CNTplWithNo = '<svg xmlns="http://www.w3.org/2000/svg">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:30px; width:100%; text-align:center; font-weight:500; font-family:arial; padding-top:' + certInfo.paddingtop + 'px">' + '<div style="margin-bottom:20px; font-size:30px;">兹证明</div>' + '<div style="margin-bottom:20px; font-size:30px;">姓名: <span style="border-bottom:solid 2px #555; font-size:35px; font-weight:600; padding:0 10px; text-transform:uppercase;">' + certInfo.userfullname + '</span></div>' + '<div style="margin:0 auto;text-align: center;margin-bottom:20px;">已顺利完成</div>' + '<div style="margin-bottom:20px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.coursename + '</div>' + '<div style="margin-bottom:20px;">成绩合格 特发此证</div>' + '<div style="margin-bottom:60px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.schoolname + '</div>' + '<div style="margin-bottom:20px;">日期: <span style="padding:0 10px;">' + getDate(certInfo.time) + '</span>' + '<span> 编号: ' + certInfo.certNo + '</span>' + '</div>' + '</div>' + '</foreignObject>' + '</svg>';
var CNTplWithNoSgpower = '<svg xmlns="http://www.w3.org/2000/svg">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:30px; width:100%; text-align:center; font-weight:500; font-family:arial; padding-top:' + certInfo.paddingtop + 'px">' + '<div style="margin-bottom:20px; font-size:30px;">兹证明</div>' + '<div style="margin-bottom:20px; font-size:30px;">姓名: <span style="border-bottom:solid 2px #555; font-size:35px; font-weight:600; padding:0 10px; text-transform:uppercase;">' + certInfo.userfullname + '</span></div>' + '<div style="margin:0 auto;text-align: center;margin-bottom:20px;">已顺利完成</div>' + '<div style="margin-bottom:20px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.coursename + '</div>' + '<div style="margin-bottom:20px;">成绩合格 特发此证</div>' + '<div style="margin-bottom:60px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.schoolname + '</div>' + '<div style="margin-bottom:20px;">日期: <span style="padding:0 10px;">' + getDate(certInfo.time) + '</span>' + '<span> 编号: ' + certInfo.certNo + '</span>' + '</div>' + '</div>' + '</foreignObject>' + '</svg>';
var CNTplWithoutNo = '<svg xmlns="http://www.w3.org/2000/svg">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:30px; width:100%; text-align:center; font-weight:500; font-family:arial; padding-top:' + certInfo.paddingtop + 'px">' + '<div style="margin-bottom:20px; font-size:30px;">兹证明</div>' + '<div style="margin-bottom:20px; font-size:30px;">姓名: <span style="border-bottom:solid 2px #555; font-size:35px; font-weight:600; padding:0 10px; text-transform:uppercase;">' + certInfo.userfullname + '</span></div>' + '<div style="margin:0 auto;text-align: center;margin-bottom:20px;">已顺利完成</div>' + '<div style="margin-bottom:20px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.coursename + '</div>' + '<div style="margin-bottom:20px;">成绩合格 特发此证</div>' + '<div style="margin-bottom:20px; font-size:35px; text-transform:uppercase; font-weight:600;">' + certInfo.schoolname + '</div>' + '<div style="margin-bottom:20px;">日期: <span style="border-bottom:solid 2px #555; padding:0 10px;">' + getDate(certInfo.time) + '</span></div>' + '</div>' + '</foreignObject>' + '</svg>';
if ($rootScope.currentLanguage == 'en_US') {
if (loginService.subDomain == 'sgpower') {
if (certInfo.orientation === 'landscape') {
return USTplWithNoSgpower_landscape;
} else {
return USTplWithNoSgpower_portrait;
}
} else if (loginService.subDomain == 'caregiverasia') {
if (certInfo.orientation === 'landscape') {
return USTplWithoutNo_caregivenasia_landscape;
} else {
return USTplWithoutNo_caregivenasia_portrait;
}
} else {
if (certInfo.orientation === 'landscape') {
return USTplWithoutNo_landscape;
} else {
return USTplWithoutNo_portrait;
}
//return USTplWithoutNo;
}
} else {
if (loginService.subDomain == 'sgpower') {
return CNTplWithNoSgpower;
} else {
return CNTplWithoutNo;
}
}
return USTplWithoutNo;
}
function drawCert(certinfo) {
var circle_canvas = document.getElementById(certinfo.ElementId);
var context = circle_canvas.getContext("2d");
var background = new Image();
background.setAttribute('crossOrigin', 'anonymous');
//---------------------------------
var data = getCertTpl(certinfo);
console.log(certinfo);
background.onload = function() {
console.log('--- step background onload ---');
circle_canvas.width = background.width * 1;
circle_canvas.height = background.height * 1;
context.drawImage(background, 0, 0, circle_canvas.width, circle_canvas.height);
var img = new Image();
var url = 'data:image/svg+xml;base64,' + window.btoa((unescape(encodeURIComponent(data))));
console.log(url);
img.onload = function() {
console.log('--- step img onload ---');
context.drawImage(img, 0, 120);
};
img.src = url;
}
background.src = certinfo.template;
}
});