diff --git a/web/app/components/widget/dialog-scanner.vue b/web/app/components/widget/dialog-scanner.vue
index f4a70ba765df92c4ce259a3b7f46f229a6a5e4a2..3c74e5b6bd4cb0d394f33e0c8420750dfe7d7fa0 100644
--- a/web/app/components/widget/dialog-scanner.vue
+++ b/web/app/components/widget/dialog-scanner.vue
@@ -511,12 +511,12 @@ export default {
},
async keydownRedeem(evt) {
const self = this
- const charCode = evt.which ? evt.which : evt.keyCode
- if (charCode == 13) {
- let isValid = await this.$refs.InformasiRedeem.validate()
- if (!isValid) return
- self.$emit('onSubmit')
- }
+ // const charCode = evt.which ? evt.which : evt.keyCode
+ // if (charCode == 13) {
+ // let isValid = await this.$refs.InformasiRedeem.validate()
+ // if (!isValid) return
+ // self.$emit('onSubmit')
+ // }
},
onChangeTicketKind() {
const self = this
diff --git a/web/app/layouts/default.vue b/web/app/layouts/default.vue
index eb0524c218447761648c4a39f48105a0a3ddee90..282f92e3af37a0f04188f502e9d4708691def994 100644
--- a/web/app/layouts/default.vue
+++ b/web/app/layouts/default.vue
@@ -52,7 +52,7 @@
<v-main class="bg-main">
<v-container fluid class="pl-md-7 pt-0 pl-lg-7 pl-xl-7">
<v-row>
- <v-col cols="12" class="py-8">
+ <v-col cols="12">
<nuxt />
</v-col>
</v-row>
diff --git a/web/app/pages/redeem/index.vue b/web/app/pages/redeem/index.vue
index 9cd45753a658d363b81e9b29b99d8bbd32e91a91..9969e8798ebc69cd74efb05da9bbf54af8cc2fad 100644
--- a/web/app/pages/redeem/index.vue
+++ b/web/app/pages/redeem/index.vue
@@ -583,6 +583,9 @@ export default {
id: self.isOnSitePurchase
? self.tiketKind
: self.deatilScanner.Ticket.ticket_kind_reff.ticket_kind_id,
+ name: self.isOnSitePurchase
+ ? tiket.name
+ : self.deatilScanner.Ticket.ticket_kind_reff.name,
price: tiket ? tiket.price : 0,
},
}
diff --git a/web/app/pages/visitorcounter/index.vue b/web/app/pages/visitorcounter/index.vue
index 7c2d7c26a5eaa9b33c30feb8367827cc0b992b25..d7145f70456267dfc1e33b687be5bb059e6e344b 100644
--- a/web/app/pages/visitorcounter/index.vue
+++ b/web/app/pages/visitorcounter/index.vue
@@ -1,6 +1,6 @@
<template>
<v-container>
- <v-row class="from-scan">
+ <v-row>
<v-col cols="12" class="text-center">
<div class="title-header primary--text text--darken-2">
Count of Participants
@@ -52,6 +52,50 @@
</v-list-item>
</v-card>
</v-col>
+ <v-col cols="12" md="6">
+ <v-card class="mx-auto" :height="250" outlined color="#e7778b">
+ <v-list-item three-line>
+ <v-list-item-content>
+ <v-list-item-title class="text-h5 mb-1 white--text">
+ Ticket Presale
+ </v-list-item-title>
+ <v-list-item-subtitle
+ ><v-row align="center" class="count-in">
+ <v-col class="display-3 text-center" cols="12" md="12">
+ <div class="numCounterPresale">000000</div>
+ </v-col>
+ </v-row></v-list-item-subtitle
+ >
+ </v-list-item-content>
+
+ <v-list-item-avatar tile size="80">
+ <v-icon large color="white"> mdi-ticket </v-icon>
+ </v-list-item-avatar>
+ </v-list-item>
+ </v-card>
+ </v-col>
+ <v-col cols="12" md="6">
+ <v-card class="mx-auto" :height="250" outlined color="#7eb4c3">
+ <v-list-item three-line>
+ <v-list-item-content>
+ <v-list-item-title class="text-h5 mb-1 white--text">
+ Ticket On Site Purchase
+ </v-list-item-title>
+ <v-list-item-subtitle
+ ><v-row align="center" class="count-in">
+ <v-col class="display-3 text-center" cols="12" md="12">
+ <div class="numCounterOST">000000</div>
+ </v-col>
+ </v-row></v-list-item-subtitle
+ >
+ </v-list-item-content>
+
+ <v-list-item-avatar tile size="80">
+ <v-icon large color="white"> mdi-ticket-account </v-icon>
+ </v-list-item-avatar>
+ </v-list-item>
+ </v-card>
+ </v-col>
</v-row>
</v-container>
</template>
@@ -99,7 +143,11 @@ export default {
async mounted() {
const self = this
- const task = [self.getCountTicket(), self.getCountUsed()]
+ const task = [
+ self.getCountTicket(),
+ self.getCountUsed(),
+ self.getCountRedeem(),
+ ]
await axios.all(task).then(
axios.spread((...responses) => {
setTimeout(function () {
@@ -111,8 +159,8 @@ export default {
},
methods: {
- showCountParticipant(countVisitor) {
- const scopeElm = document.querySelector('.num-counter-participant')
+ showCountParticipant(countVisitor, myClass) {
+ const scopeElm = document.querySelector(myClass)
const digits = countVisitor
let digitsHTML = ''
for (let i = 0; i < digits.toString().length; i++) {
@@ -135,94 +183,50 @@ export default {
}
})
},
- showCountIn(countVisitor) {
- const scopeElm = document.querySelector('.numCounterIn')
- // generate digits markup
- // const digitsHTML = Array(4 + 1).join('<div><b data-value="1"></b></div>')
- const digits = countVisitor
- let digitsHTML = ''
- for (let i = 0; i < digits.toString().length; i++) {
- digitsHTML =
- digitsHTML +
- '<div><b data-value="' +
- digits.toString()[i] +
- '"></b></div>'
- }
- scopeElm.innerHTML = digitsHTML
-
- this.DOM = {
- scope: scopeElm,
- digits: scopeElm.querySelectorAll('b'),
- }
-
- this.DOM.scope.addEventListener('transitionend', (e) => {
- if (e.pseudoElement === '::before' && e.propertyName === 'margin-top') {
- e.target.classList.remove('blur')
- }
- })
- },
- showCountOut(countVisitor) {
- const scopeElm = document.querySelector('.numCounterOut')
- // generate digits markup
- const digits = countVisitor
- let digitsHTML = ''
- for (let i = 0; i < digits.toString().length; i++) {
- digitsHTML =
- digitsHTML +
- '<div><b data-value="' +
- digits.toString()[i] +
- '"></b></div>'
- }
- scopeElm.innerHTML = digitsHTML
-
- this.DOM = {
- scope: scopeElm,
- digits: scopeElm.querySelectorAll('b'),
- }
-
- this.DOM.scope.addEventListener('transitionend', (e) => {
- if (e.pseudoElement === '::before' && e.propertyName === 'margin-top') {
- e.target.classList.remove('blur')
- }
- })
- },
- getLog() {
+ getCountTicket() {
const self = this
- const params = {}
- self.$axios.post('checklog/totalcheckin', params).then(
+ const params = {
+ payment_status: 'paid',
+ }
+ self.$axios.post('ticket/countticketbyparam', params).then(
(r) => {
- self.showCountIn(r.data.total)
- setTimeout(self.getLog, 5000)
+ self.showCountParticipant(r.data, '.num-counter-participant')
+ // setTimeout(self.getCountTicket, 300000)
},
(e) => {
self.$dialog.notify.error(e.response.data)
},
)
},
- getCountTicket() {
+ getCountUsed() {
const self = this
const params = {
- payment_status: 'paid',
+ payment_status: 'used',
}
self.$axios.post('ticket/countticketbyparam', params).then(
(r) => {
- self.showCountParticipant(r.data)
- setTimeout(self.getCountTicket, 300000)
+ self.showCountParticipant(r.data, '.numCounterIn')
+ // setTimeout(self.getCountUsed, 300000)
},
(e) => {
self.$dialog.notify.error(e.response.data)
},
)
},
- getCountUsed() {
+ getCountRedeem() {
const self = this
- const params = {
- payment_status: 'used',
- }
- self.$axios.post('ticket/countticketbyparam', params).then(
+ const params = {}
+ self.$axios.post('ticket-redeem/participantsummary', params).then(
(r) => {
- self.showCountIn(r.data)
- setTimeout(self.getCountUsed, 300000)
+ console.log(r.data)
+ self.showCountParticipant(
+ r.data.total_participant_eticket,
+ '.numCounterPresale',
+ )
+ self.showCountParticipant(
+ r.data.total_participant_ots,
+ '.numCounterOST',
+ )
},
(e) => {
self.$dialog.notify.error(e.response.data)
@@ -333,15 +337,6 @@ export default {
.numCounterIn >>> div > b[data-value='9']::before {
margin-top: -810px;
}
-
-/* .numCounterIn >>> div:nth-last-child(3n)::before {
- content: ',';
- display: inline;
- font-size: 1.1em;
- opacity: 0.6;
- color: #666666;
-} */
-
.numCounterIn >>> div:nth-last-child(4)::after {
content: ',';
display: inline;
@@ -364,7 +359,7 @@ export default {
color: #f7ab1a;
}
-.numCounterOut {
+.numCounterPresale {
display: inline-block;
height: 90px;
line-height: 90px;
@@ -374,25 +369,25 @@ export default {
font-size: 80px;
}
-.numCounterOut >>> div {
+.numCounterPresale >>> div {
display: inline-block;
vertical-align: top;
height: 100%;
}
-.numCounterOut >>> div > b {
+.numCounterPresale >>> div > b {
display: inline-block;
width: 55px;
height: 100%;
margin: 0 0.1em;
border-radius: 8px;
text-align: center;
- background: #ff0000;
+ background: #7eb4c3;
overflow: hidden;
color: #ffffff;
}
-.numCounterOut >>> div > b::before {
+.numCounterPresale >>> div > b::before {
content: ' 0 1 2 3 4 5 6 7 8 9 ';
display: block;
word-break: break-all;
@@ -401,62 +396,54 @@ export default {
transition: 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15), text-shadow 150ms;
}
-.numCounterOut >>> div > b.blur {
+.numCounterPresale >>> div > b.blur {
text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.2),
0 0.1em 2px rgba(255, 255, 255, 0.6), 0 0.3em 3px rgba(255, 255, 255, 0.3),
0 -0.1em 2px rgba(255, 255, 255, 0.6), 0 -0.3em 3px rgba(255, 255, 255, 0.3);
}
-.numCounterOut >>> div > b[data-value='1']::before {
+.numCounterPresale >>> div > b[data-value='1']::before {
margin-top: -90px;
}
-.numCounterOut >>> div > b[data-value='2']::before {
+.numCounterPresale >>> div > b[data-value='2']::before {
margin-top: -180px;
}
-.numCounterOut >>> div > b[data-value='3']::before {
+.numCounterPresale >>> div > b[data-value='3']::before {
margin-top: -270px;
}
-.numCounterOut >>> div > b[data-value='4']::before {
+.numCounterPresale >>> div > b[data-value='4']::before {
margin-top: -360px;
}
-.numCounterOut >>> div > b[data-value='5']::before {
+.numCounterPresale >>> div > b[data-value='5']::before {
margin-top: -450px;
}
-.numCounterOut >>> div > b[data-value='6']::before {
+.numCounterPresale >>> div > b[data-value='6']::before {
margin-top: -540px;
}
-.numCounterOut >>> div > b[data-value='7']::before {
+.numCounterPresale >>> div > b[data-value='7']::before {
margin-top: -630px;
}
-.numCounterOut >>> div > b[data-value='8']::before {
+.numCounterPresale >>> div > b[data-value='8']::before {
margin-top: -720px;
}
-.numCounterOut >>> div > b[data-value='9']::before {
+.numCounterPresale >>> div > b[data-value='9']::before {
margin-top: -810px;
}
-
-/* .numCounterOut >>> div:nth-last-child(3n)::before {
- content: ',';
- display: inline;
- font-size: 1.1em;
- opacity: 0.6;
- color: #666666;
-} */
-.numCounterOut >>> div:nth-last-child(4)::after {
+.numCounterPresale >>> div:nth-last-child(4)::after {
content: ',';
display: inline;
font-size: 1.1em;
opacity: 0.6;
color: #ff0000;
}
-.numCounterOut >>> div:nth-last-child(7)::after {
+.numCounterPresale >>> div:nth-last-child(7)::after {
content: ',';
display: inline;
font-size: 1.1em;
opacity: 0.6;
color: #ff0000;
}
-.numCounterOut >>> div:nth-last-child(10)::after {
+.numCounterPresale >>> div:nth-last-child(10)::after {
content: ',';
display: inline;
font-size: 1.1em;
@@ -534,29 +521,113 @@ export default {
.num-counter-participant >>> div > b[data-value='9']::before {
margin-top: -810px;
}
-
-/* .num-counter-participant >>> div:nth-last-child(3n)::before {
+.num-counter-participant >>> div:nth-last-child(4)::after {
content: ',';
display: inline;
font-size: 1.1em;
opacity: 0.6;
- color: #666666;
-} */
-.num-counter-participant >>> div:nth-last-child(4)::after {
+ color: #ff0000;
+}
+.num-counter-participant >>> div:nth-last-child(7)::after {
content: ',';
display: inline;
font-size: 1.1em;
opacity: 0.6;
color: #ff0000;
}
-.num-counter-participant >>> div:nth-last-child(7)::after {
+.num-counter-participant >>> div:nth-last-child(10)::after {
content: ',';
display: inline;
font-size: 1.1em;
opacity: 0.6;
color: #ff0000;
}
-.num-counter-participant >>> div:nth-last-child(10)::after {
+
+.numCounterOST {
+ display: inline-block;
+ height: 90px;
+ line-height: 90px;
+ text-shadow: 0 0 2px #fff;
+ font-weight: bold;
+ white-space: normal;
+ font-size: 80px;
+}
+
+.numCounterOST >>> div {
+ display: inline-block;
+ vertical-align: top;
+ height: 100%;
+}
+
+.numCounterOST >>> div > b {
+ display: inline-block;
+ width: 55px;
+ height: 100%;
+ margin: 0 0.1em;
+ border-radius: 8px;
+ text-align: center;
+ background: #e7778b;
+ overflow: hidden;
+ color: #ffffff;
+}
+
+.numCounterOST >>> div > b::before {
+ content: ' 0 1 2 3 4 5 6 7 8 9 ';
+ display: block;
+ word-break: break-all;
+ -webkit-transition: 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15),
+ text-shadow 150ms;
+ transition: 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15), text-shadow 150ms;
+}
+
+.numCounterOST >>> div > b.blur {
+ text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.2),
+ 0 0.1em 2px rgba(255, 255, 255, 0.6), 0 0.3em 3px rgba(255, 255, 255, 0.3),
+ 0 -0.1em 2px rgba(255, 255, 255, 0.6), 0 -0.3em 3px rgba(255, 255, 255, 0.3);
+}
+
+.numCounterOST >>> div > b[data-value='1']::before {
+ margin-top: -90px;
+}
+.numCounterOST >>> div > b[data-value='2']::before {
+ margin-top: -180px;
+}
+.numCounterOST >>> div > b[data-value='3']::before {
+ margin-top: -270px;
+}
+.numCounterOST >>> div > b[data-value='4']::before {
+ margin-top: -360px;
+}
+.numCounterOST >>> div > b[data-value='5']::before {
+ margin-top: -450px;
+}
+.numCounterOST >>> div > b[data-value='6']::before {
+ margin-top: -540px;
+}
+.numCounterOST >>> div > b[data-value='7']::before {
+ margin-top: -630px;
+}
+.numCounterOST >>> div > b[data-value='8']::before {
+ margin-top: -720px;
+}
+.numCounterOST >>> div > b[data-value='9']::before {
+ margin-top: -810px;
+}
+.numCounterOST >>> div:nth-last-child(4)::after {
+ content: ',';
+ display: inline;
+ font-size: 1.1em;
+ opacity: 0.6;
+ color: #ff0000;
+}
+.numCounterOST >>> div:nth-last-child(7)::after {
+ content: ',';
+ display: inline;
+ font-size: 1.1em;
+ opacity: 0.6;
+ color: #ff0000;
+}
+.numCounterOST >>> div:nth-last-child(10)::after {
content: ',';
display: inline;
font-size: 1.1em;
diff --git a/web/app/store/layout.js b/web/app/store/layout.js
index 7c967cdcec5240cc85798d80e159ec64658d291c..c3a61f728db252c074ceb82e55b32fef663c3d94 100644
--- a/web/app/store/layout.js
+++ b/web/app/store/layout.js
@@ -27,24 +27,24 @@ export const state = () => ({
title: 'Redeem',
to: '/redeem',
},
- {
- menuID: 'doorprize',
- icon: 'mdi-gift',
- title: 'Doorprize',
- to: '/doorprize',
- },
+ // {
+ // menuID: 'doorprize',
+ // icon: 'mdi-gift',
+ // title: 'Doorprize',
+ // to: '/doorprize',
+ // },
{
menuID: 'visitorcounter',
icon: 'mdi-counter',
title: 'Visitor Counter',
to: '/visitorcounter',
},
- {
- menuID: 'screen',
- icon: 'mdi-monitor-screenshot',
- title: 'Screen',
- to: '/screen',
- },
+ // {
+ // menuID: 'screen',
+ // icon: 'mdi-monitor-screenshot',
+ // title: 'Screen',
+ // to: '/screen',
+ // },
// {
// menuID: 'log',
// icon: 'mdi-math-log',