diff --git a/sun/sun-ui/src/components/details-view/HotspotsDetails.vue b/sun/sun-ui/src/components/details-view/HotspotsDetails.vue index 542357a3a..b7fd49060 100644 --- a/sun/sun-ui/src/components/details-view/HotspotsDetails.vue +++ b/sun/sun-ui/src/components/details-view/HotspotsDetails.vue @@ -4,7 +4,6 @@ Hotspot {{ info.data.name }} - {{info.data.description}} -
@@ -1208,6 +1207,127 @@
+
+
+ +
+
+ + + + + + + + + +
+ + +
{{ info.data.description }}
+ + + + + + + +
+
{{ vouchersToPrint[i].code | uppercase }}
+
+
+ + + {{ vouchersToPrint[i].duration }} {{ $t("hotspot.days") }} + + + {{ vouchersToPrint[i].expires | formatDate(true) }} + +
+
+ + {{ vouchersToPrint[i].user_name | truncate(12) }} +
+
+ + + {{ vouchersToPrint[i].remain_use }} {{ $t("hotspot.max_use") }} + + + {{ $t("hotspot.reusable") }} + +
+
+
+
+
+ + + + + + + + +
+
+ + + {{ vouchersToPrint[i].bandwidth_down }} Kbps + + + {{ $t("hotspot.unlimited") }} + +
+
+ + + {{ vouchersToPrint[i].max_traffic | byteFormat}} + + + {{ $t("hotspot.unlimited") }} + +
+
+
+ + + {{ vouchersToPrint[i].bandwidth_up }} Kbps + + + {{ $t("hotspot.unlimited") }} + +
+
+ + + {{ vouchersToPrint[i].max_time | secondsInHour }} + + + {{ $t("hotspot.unlimited") }} + +
+
+
+
+
+
+
@@ -1502,7 +1622,9 @@ export default { }, locale: this.$root.$options.currentLocale, smsMaxCount: 0, - smsMaxCountAdd: 0 + smsMaxCountAdd: 0, + showVoucherPrint: false, + vouchersToPrint: [] }; }, methods: { @@ -1931,323 +2053,79 @@ export default { context.getPreferences(); }); }, - printVoucher(voucher) { - let index; - for (let i = 0; i < this.vouchers.usable.length; i++) { - if (this.vouchers.usable[i].id === voucher.id) { - index = i; - } - } - - // update voucher status - this.hotspotUpdateVoucher( - voucher.id, - { - printed: true - }, - success => { - var doc = new jsPDF("portrait", "mm", "a4"); - var halfWidth = Math.round(doc.internal.pageSize.width / 2); - var fifthHeight = Math.round(doc.internal.pageSize.height / 5); - - doc.setDrawColor(17, 17, 17); - doc.line(0, fifthHeight, halfWidth, fifthHeight); - doc.line(halfWidth, 0, halfWidth, fifthHeight); - - var image = new Image(); - var context = this; - image.onload = function() { - var values = context.resizeImage(image, 20, 20); - doc.addImage( - context.preferences.captive[2].value, - 2, - 2, - values.width, - values.height - ); - doc.fromHTML( - document.getElementsByClassName("voucher-desc")[index], - 50, - -3, - { - width: 55 - } - ); - doc.fromHTML( - document.getElementsByClassName("voucher-main")[index], - 65, - 21 - ); - doc.fromHTML( - document.getElementsByClassName("voucher-valid")[index], - 1, - 21 - ); - doc.fromHTML( - document.getElementsByClassName("voucher-max-use")[index], - 1, - 29 - ); - - doc.setLineWidth(0.3); - doc.setDrawColor(158, 160, 163); - doc.line(5, 41, halfWidth - 5, +41); - doc.addImage(arrow.down, 4, 45, 3, 3); - doc.fromHTML( - document.getElementsByClassName("voucher-download")[index], - 8, - 40 - ); - doc.addImage(arrow.up, 4, 50, 3, 3); - doc.fromHTML( - document.getElementsByClassName("voucher-upload")[index], - 8, - 45 - ); - - doc.fromHTML( - document.getElementsByClassName("voucher-traffic")[index], - 65, - 40 - ); - doc.fromHTML( - document.getElementsByClassName("voucher-time")[index], - 65, - 45 - ); - - doc.autoPrint(); - window.open(doc.output("bloburl"), "_blank"); - }; - image.src = this.preferences.captive[2].value; - }, - error => { - console.error(error); - } - ); - }, - printAllVoucher() { - var doc = new jsPDF("portrait", "mm", "a4"); - var width = doc.internal.pageSize.width; - var height = doc.internal.pageSize.height; - var halfWidth = Math.round(width / 2); - var fifthHeight = Math.round(height / 5); - var pageNumber = 15 % 8 !== 0 ? Math.floor(15 / 8) + 1 : 15 / 8; - var row = 0; - var cordinates = { - y: 0, - x: 0, - width: 0, - height: 0 - }; - - var image = new Image(); + printVouchers(voucherList) { var context = this; var promises = []; - image.onload = function() { - var values = context.resizeImage(image, 20, 20); - - for (var index = 0; index < context.vouchers.usable.length; index++) { - promises.push( - new Promise(function(resolve, reject) { - context.hotspotUpdateVoucher( - context.vouchers.usable[index].id, - { - printed: true - }, - success => { - resolve(success); - }, - error => { - reject(error); - } - ); - }) - ); - - if (index % 10 === 0 && index !== 0) { - doc.addPage(); - row = 0; - cordinates = { - y: 0, - x: 0, - width: 0, - height: 0 - }; - } - doc.setLineWidth(0.3); - doc.setDrawColor(17, 17, 17); - // Left column - if (index % 2 === 0) { - doc.addImage( - context.preferences.captive[2].value, - 2, - cordinates.y + 2, - values.width, - values.height - ); - doc.fromHTML( - document.getElementsByClassName("voucher-desc")[index], - 50, - cordinates.y + -3, - { - width: 55 - } - ); - doc.fromHTML( - document.getElementsByClassName("voucher-main")[index], - 65, - cordinates.y + 21 - ); - doc.fromHTML( - document.getElementsByClassName("voucher-valid")[index], - 1, - cordinates.y + 21 - ); - doc.fromHTML( - document.getElementsByClassName("voucher-max-use")[index], - 1, - cordinates.y + 29 - ); - - doc.setLineWidth(0.3); - doc.setDrawColor(158, 160, 163); - doc.line(5, cordinates.y + 41, halfWidth - 5, cordinates.y + 41); - doc.addImage(arrow.down, 4, cordinates.y + 45, 3, 3); - doc.fromHTML( - document.getElementsByClassName("voucher-download")[index], - 8, - cordinates.y + 40 - ); - doc.addImage(arrow.up, 4, cordinates.y + 50, 3, 3); - doc.fromHTML( - document.getElementsByClassName("voucher-upload")[index], - 8, - cordinates.y + 45 - ); - - doc.fromHTML( - document.getElementsByClassName("voucher-traffic")[index], - 65, - cordinates.y + 40 - ); - doc.fromHTML( - document.getElementsByClassName("voucher-time")[index], - 65, - cordinates.y + 45 - ); - - doc.setDrawColor(17, 17, 17); - if (index % 10 === 8) { - doc.line( - halfWidth, - cordinates.y, - halfWidth, - cordinates.y + fifthHeight - ); - } else { - doc.line( - 0, - cordinates.y + fifthHeight, - halfWidth, - cordinates.y + fifthHeight - ); - doc.line( - halfWidth, - cordinates.y, - halfWidth, - cordinates.y + fifthHeight - ); - } - - // Right column - } else { - cordinates.x = halfWidth; - doc.addImage( - context.preferences.captive[2].value, - cordinates.x + 2, - cordinates.y + 2, - values.width, - values.height - ); - doc.fromHTML( - document.getElementsByClassName("voucher-desc")[index], - cordinates.x + 50, - cordinates.y + -3, + for (var index = 0; index < voucherList.length; index++) { + promises.push( + new Promise(function(resolve, reject) { + context.hotspotUpdateVoucher( + voucherList[index].id, { - width: 55 + printed: true + }, + success => { + resolve(success); + }, + error => { + reject(error); } ); - doc.fromHTML( - document.getElementsByClassName("voucher-main")[index], - cordinates.x + 65, - cordinates.y + 21 - ); - doc.fromHTML( - document.getElementsByClassName("voucher-valid")[index], - cordinates.x + 1, - cordinates.y + 21 - ); - doc.fromHTML( - document.getElementsByClassName("voucher-max-use")[index], - cordinates.x + 1, - cordinates.y + 29 - ); - doc.setLineWidth(0.3); - doc.setDrawColor(158, 160, 163); - doc.line( - cordinates.x + 5, - cordinates.y + 41, - cordinates.x * 2 - 5, - cordinates.y + 41 - ); - doc.addImage(arrow.down, cordinates.x + 4, cordinates.y + 45, 3, 3); - doc.fromHTML( - document.getElementsByClassName("voucher-download")[index], - cordinates.x + 8, - cordinates.y + 40 - ); - doc.addImage(arrow.up, cordinates.x + 4, cordinates.y + 50, 3, 3); - doc.fromHTML( - document.getElementsByClassName("voucher-upload")[index], - cordinates.x + 8, - cordinates.y + 45 - ); - - doc.fromHTML( - document.getElementsByClassName("voucher-traffic")[index], - cordinates.x + 65, - cordinates.y + 40 - ); - doc.fromHTML( - document.getElementsByClassName("voucher-time")[index], - cordinates.x + 65, - cordinates.y + 45 - ); + }) + ); - row++; - cordinates.width = cordinates.y; - cordinates.y = fifthHeight * row; - doc.setDrawColor(17, 17, 17); + Promise.all(promises) + .then(function() { + console.log("done"); + }) + .catch(function(err) { + console.error(err); + }); + } + this.vouchersToPrint = voucherList; + this.showVoucherPrint = true; - if (!(index % 10 === 9)) { - doc.line(halfWidth, cordinates.y, width, cordinates.y); - } - } + setTimeout(async function() { + context.printDiv('voucherPrint'); + }, 500); + }, + printDiv(div_id) { + $('body').html($("#"+div_id).html()); + scroll(0, 0); + var context = this; - Promise.all(promises) - .then(function() { - console.log("done"); - }) - .catch(function(err) { - console.error(err); - }); + window.onafterprint = function(event) { + // show "Go back to Hotspot Manager" button in Firefox + var browser = navigator.userAgent.toLowerCase(); + if (browser.indexOf('firefox') > -1) { + $("body").prepend('
'); + + $("#goBack").click(function(){ + location.reload(); + }); + + setTimeout(function () { + location.reload(); + }, 2000); + } else { + location.reload(); } - doc.autoPrint(); - window.open(doc.output("bloburl"), "_blank"); }; - image.src = this.preferences.captive[2].value; + + window.print(); + }, + printVoucher(voucher) { + for (let i = 0; i < this.vouchers.usable.length; i++) { + // print vocuher only if it's usable + if (this.vouchers.usable[i].id === voucher.id) { + this.printVouchers([ voucher ]); + break; + } + } + }, + printAllVoucher() { + this.printVouchers(this.vouchers.usable); }, exportCSVVoucher() { var voucherRows = JSON.parse(JSON.stringify(this.vouchers.usable)); @@ -2517,6 +2395,93 @@ textarea { background: #c8eb79; } +@media print { + @page { + margin: 15mm 10mm; + } + + .pagebreak { + break-after: always !important; + page-break-after: always !important; + } +} + +.voucherPrintContainer { + width: 210mm; + padding: 5mm; +} + +.voucher-print { + display: inline-block; + width: 49%; + border: 0.2mm dashed gray; + padding: 2mm; + vertical-align: top; +} + +.voucher-print-logo { + width: 22%; + float: right; +} + +.voucher-print-hs-title { + font-weight: 400; + font-size: 5mm; + margin-bottom: 3mm; +} + +.voucher-print-code { + font-weight: 800; + font-size: 6mm; +} + +.voucher-print-data { + display: inline-block; + width: 30mm; + font-size: 3mm; +} + +.width-100 { + width: 100%; +} + +.width-75 { + width: 75%; +} + +.voucher-print-q1 { + width: 3mm; + border-bottom: 0.3mm solid black; +} + +.voucher-print-q2 { + padding: 0; +} + +.voucher-print-q4 { + border-top: 0.3mm solid black; +} + +.padding-left-2 { + padding-left: 2mm; +} + +.padding-left-2-2 { + padding-left: 2.2mm; +} + +.border-left { + border-left: 0.3mm solid black; +} + +.line-height-5 { + line-height: 5.5mm; +} + +.align-top { + vertical-align: top; +} + .label-dateFilter { margin-right: 10px; } diff --git a/sun/sun-ui/src/filters/filters.js b/sun/sun-ui/src/filters/filters.js index 687009917..fa325c644 100644 --- a/sun/sun-ui/src/filters/filters.js +++ b/sun/sun-ui/src/filters/filters.js @@ -69,6 +69,16 @@ var Filters = { }, adjustPage: function(value) { return Math.ceil(value); + }, + uppercase: function (value) { + return value && value.toUpperCase() + }, + truncate(value, maxLength) { + if (value.length > maxLength) { + return value.substring(0, maxLength) + '...'; + } else { + return value; + } } }; diff --git a/sun/sun-ui/src/main.js b/sun/sun-ui/src/main.js index 60f6ac1e9..cffeece32 100644 --- a/sun/sun-ui/src/main.js +++ b/sun/sun-ui/src/main.js @@ -39,6 +39,8 @@ Vue.filter("secondsInHour", filters.secondsInHour); Vue.filter("formatDate", filters.formatDate); Vue.filter("formatDateShort", filters.formatDateShort); Vue.filter("adjustPage", filters.adjustPage); +Vue.filter("uppercase", filters.uppercase); +Vue.filter("truncate", filters.truncate); // init Vue app new Vue({ diff --git a/sun/sun-ui/src/styles/main.css b/sun/sun-ui/src/styles/main.css index b95d6fd93..40c5877f5 100644 --- a/sun/sun-ui/src/styles/main.css +++ b/sun/sun-ui/src/styles/main.css @@ -458,6 +458,17 @@ a { width: 38% !important; } +@media print { + .layout-pf.layout-pf-fixed body { + padding-top: 0 !important; + } +} + +.go-back-to-hotspot-manager { + text-align: center; + margin-bottom: 60px; +} + .datepicker-input { width: 100%; -} \ No newline at end of file +} diff --git a/wax/utils/utils.go b/wax/utils/utils.go index 0f8360bcb..b35a4f130 100644 --- a/wax/utils/utils.go +++ b/wax/utils/utils.go @@ -306,7 +306,7 @@ func HotspotHasValidSubscription(hotspotId int) bool { func GetVoucherByCode(code string, hotspotId int) models.HotspotVoucher { var hotspotVoucher models.HotspotVoucher db := database.Instance() - db.Where("binary code = ? AND hotspot_id = ?", code, hotspotId).First(&hotspotVoucher) + db.Where("binary code = ? AND hotspot_id = ?", strings.ToLower(code), hotspotId).First(&hotspotVoucher) return hotspotVoucher }