update flow final
This commit is contained in:
bagus-arie05
2
.vscode/settings.json
vendored
Normal file
2
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
{
|
||||
}
|
||||
@@ -4,29 +4,29 @@
|
||||
<div class="logo-group-contact">
|
||||
<v-img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png"
|
||||
width="60"
|
||||
height="60"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
|
||||
width="60"
|
||||
height="60"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
|
||||
width="60"
|
||||
height="60"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
|
||||
width="60"
|
||||
height="60"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
@@ -49,7 +49,7 @@
|
||||
:cycle="false"
|
||||
:interval="0"
|
||||
class="banner-carousel"
|
||||
height="450"
|
||||
height="300"
|
||||
:continuous="false"
|
||||
>
|
||||
<v-carousel-item
|
||||
@@ -93,7 +93,7 @@
|
||||
class="thumbnail-img"
|
||||
/>
|
||||
<div class="play-button-overlay">
|
||||
<v-icon color="white" size="64">mdi-play-circle</v-icon>
|
||||
<v-icon color="white" size="48">mdi-play-circle</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,50 +110,31 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="cta-section-contact">
|
||||
<v-btn
|
||||
@click="navigateToQrisPayment"
|
||||
color="#FF9248"
|
||||
class="cta-button"
|
||||
x-large
|
||||
>
|
||||
<span class="button-text">LANJUT KE PEMBAYARAN</span>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
@click="navigateToDebugPage"
|
||||
color="#FF9248"
|
||||
class="cta-button debug-button"
|
||||
x-large
|
||||
>
|
||||
<span class="button-text">DEBUG KE STEP 2</span>
|
||||
</v-btn>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="orange-background-contact">
|
||||
<div class="contact-info-section-contact">
|
||||
<div class="contact-item-contact">
|
||||
<div class="contact-icon-contact whatsapp-icon">
|
||||
<v-icon color="#25D366" size="28">mdi-whatsapp</v-icon>
|
||||
<v-icon color="#25D366" size="24">mdi-whatsapp</v-icon>
|
||||
</div>
|
||||
<div class="contact-text-contact">+62 815-5560-6668</div>
|
||||
</div>
|
||||
<div class="contact-item-contact">
|
||||
<div class="contact-icon-contact instagram-icon">
|
||||
<v-icon color="#E1306C" size="28">mdi-instagram</v-icon>
|
||||
<v-icon color="#E1306C" size="24">mdi-instagram</v-icon>
|
||||
</div>
|
||||
<div class="contact-text-contact">rssasaifulanwar</div>
|
||||
</div>
|
||||
<div class="contact-item-contact">
|
||||
<div class="contact-icon-contact phone-icon">
|
||||
<v-icon color="#FF9248" size="28">mdi-phone</v-icon>
|
||||
<v-icon color="#FF9248" size="24">mdi-phone</v-icon>
|
||||
</div>
|
||||
<div class="contact-text-contact">0341-362101</div>
|
||||
</div>
|
||||
<div class="contact-item-contact">
|
||||
<div class="contact-icon-contact web-icon">
|
||||
<v-icon color="#2196F3" size="28">mdi-web</v-icon>
|
||||
<v-icon color="#2196F3" size="24">mdi-web</v-icon>
|
||||
</div>
|
||||
<div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
|
||||
</div>
|
||||
@@ -233,9 +214,8 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.contact-page-container {
|
||||
min-height: 100vh;
|
||||
min-height:auto;
|
||||
width: 100%;
|
||||
background: white;
|
||||
display: flex;
|
||||
@@ -244,29 +224,29 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
|
||||
.orange-background-contact {
|
||||
width: 100%;
|
||||
height: clamp(120px, 15vh, 200px);
|
||||
height: clamp(80px, 12vh, 180px);
|
||||
background: #ff9248;
|
||||
border-top-left-radius: 60px;
|
||||
border-top-right-radius: 60px;
|
||||
border-top-left-radius: 40px;
|
||||
border-top-right-radius: 40px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 20px;
|
||||
margin-top: 2rem;
|
||||
padding-bottom: 10px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.logo-section-contact {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 15px 20px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-group-contact {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
@@ -274,8 +254,8 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
|
||||
.logo-img-contact {
|
||||
transition: transform 0.3s ease;
|
||||
width: clamp(40px, 6vw, 60px) !important;
|
||||
height: clamp(40px, 6vw, 60px) !important;
|
||||
width: clamp(20px, 5vw, 50px) !important;
|
||||
height: clamp(20px, 5vw, 50px) !important;
|
||||
}
|
||||
|
||||
.logo-img-contact:hover {
|
||||
@@ -290,52 +270,52 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 10px 20px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.title-section-contact {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.main-title-contact {
|
||||
color: #ff9248;
|
||||
font-size: clamp(2.2rem, 5vw, 3.5rem);
|
||||
font-size: clamp(2rem, 2vw, 1.5rem);
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 800;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 8px;
|
||||
line-height: 0.8;
|
||||
}
|
||||
|
||||
.subtitle-contact {
|
||||
color: black;
|
||||
font-size: clamp(0.9rem, 2vw, 1.1rem);
|
||||
font-size: clamp(0.8rem, 1.8vw, 1rem);
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
max-width: 600px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.banner-carousel-container {
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
margin-bottom: 30px;
|
||||
width: 95%;
|
||||
max-width: 800px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.banner-carousel {
|
||||
border-radius: 20px;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
height: 450px;
|
||||
height: clamp(300px, 45vh, 400px);
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
@@ -352,7 +332,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.video-thumbnail {
|
||||
@@ -369,7 +349,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 20px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.play-button-overlay {
|
||||
@@ -379,7 +359,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 50%;
|
||||
padding: 20px;
|
||||
padding: 15px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -395,23 +375,23 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||||
color: white;
|
||||
padding: 40px 30px 30px;
|
||||
padding: 30px 20px 20px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
max-width: 600px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.overlay-title {
|
||||
font-size: clamp(1.4rem, 2vw, 1.8rem);
|
||||
font-size: clamp(1.2rem, 1.8vw, 1.6rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 6px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.overlay-description {
|
||||
font-size: clamp(0.9rem, 1.5vw, 1.1rem);
|
||||
font-size: clamp(0.8rem, 1.3vw, 1rem);
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
@@ -420,17 +400,17 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
|
||||
.custom-indicators {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.indicator-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
@@ -448,7 +428,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
|
||||
.contact-info-section-contact {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
@@ -459,18 +439,18 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.contact-icon-contact {
|
||||
width: clamp(40px, 8vw, 50px);
|
||||
height: clamp(40px, 8vw, 50px);
|
||||
border-radius: 50%;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 80%;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -480,7 +460,7 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
|
||||
.contact-text-contact {
|
||||
color: white;
|
||||
font-size: clamp(12px, 2vw, 14px);
|
||||
font-size: 12px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
@@ -490,13 +470,13 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
gap: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
max-width: 250px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
@@ -510,6 +490,6 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
}
|
||||
|
||||
:deep(.v-carousel__controls--bottom) {
|
||||
bottom: 50px !important;
|
||||
bottom: 40px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="payment-step">
|
||||
<v-card-text class="pa-8 text-center">
|
||||
<div class="mb-2">
|
||||
<v-card-text class="pa-0 text-center">
|
||||
<div class="mb-0">
|
||||
<v-img
|
||||
src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
|
||||
height="100"
|
||||
class="mx-auto"
|
||||
height="80"
|
||||
class="mb-1"
|
||||
contain
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2>
|
||||
<!-- <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2> -->
|
||||
|
||||
<div class="qr-container mb-6">
|
||||
<v-card
|
||||
@@ -24,7 +24,7 @@
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<v-row dense class="mb-2">
|
||||
<v-row dense class="mb-1">
|
||||
<v-col cols="5" class="text-left">
|
||||
<strong>NAMA PASIEN:</strong>
|
||||
</v-col>
|
||||
@@ -33,7 +33,7 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row dense class="mb-2">
|
||||
<v-row dense class="mb-1">
|
||||
<v-col cols="5" class="text-left">
|
||||
<strong>NOMINAL:</strong>
|
||||
</v-col>
|
||||
@@ -42,7 +42,7 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row dense class="mb-2">
|
||||
<v-row dense class="mb-1">
|
||||
<v-col cols="5" class="text-left">
|
||||
<strong>NOMOR TAGIHAN:</strong>
|
||||
</v-col>
|
||||
@@ -60,9 +60,9 @@
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-4 justify-center">
|
||||
<v-btn color="grey" variant="outlined" @click="paymentStore.prevStep">
|
||||
<!-- <v-btn color="grey" variant="outlined" @click="paymentStore.prevStep">
|
||||
Kembali
|
||||
</v-btn>
|
||||
</v-btn> -->
|
||||
<v-btn color="primary" variant="flat" @click="paymentStore.nextStep">
|
||||
Simulasi Pembayaran
|
||||
</v-btn>
|
||||
@@ -103,6 +103,10 @@ watch(() => paymentStore.qrData, () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.payment-content {
|
||||
padding-top: 40px !important; /* Sesuaikan jarak atas */
|
||||
padding-bottom: 40px !important; /* Sesuaikan jarak bawah */
|
||||
}
|
||||
.payment-step {
|
||||
background: rgb(233, 233, 233);
|
||||
}
|
||||
|
||||
98
pages/SetupIP.vue
Normal file
98
pages/SetupIP.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="setup-container">
|
||||
<v-card class="setup-card" elevation="4">
|
||||
<v-card-title class="text-h5 text-center font-weight-bold">
|
||||
Setup Loket Pembayaran
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<div v-if="currentIp" class="mb-4 text-center">
|
||||
<p class="text-subtitle-1 text-grey-darken-1">IP Loket Saat Ini:</p>
|
||||
<p class="text-h5 font-weight-bold">{{ currentIp }}</p>
|
||||
<v-btn
|
||||
color="red"
|
||||
variant="text"
|
||||
size="small"
|
||||
class="mt-2"
|
||||
@click="clearIp"
|
||||
>
|
||||
Hapus IP
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-text-field
|
||||
v-model="loketIp"
|
||||
label="Masukkan IP Address Baru"
|
||||
variant="outlined"
|
||||
:rules="[rules.required, rules.ipAddress]"
|
||||
hide-details="auto"
|
||||
class="mt-4"
|
||||
></v-text-field>
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="saveIpAddress"
|
||||
:disabled="!isValidIp"
|
||||
variant="flat"
|
||||
>
|
||||
Simpan dan Lanjutkan
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const loketIp = ref('');
|
||||
const currentIp = ref(null);
|
||||
const router = useRouter();
|
||||
|
||||
const rules = {
|
||||
required: value => !!value || 'IP Address wajib diisi.',
|
||||
ipAddress: value => {
|
||||
const pattern = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
|
||||
return pattern.test(value) || 'Format IP Address tidak valid.';
|
||||
}
|
||||
};
|
||||
|
||||
const isValidIp = computed(() => {
|
||||
return loketIp.value && rules.ipAddress(loketIp.value) === true;
|
||||
});
|
||||
|
||||
const saveIpAddress = () => {
|
||||
if (isValidIp.value) {
|
||||
localStorage.setItem('loketIp', loketIp.value);
|
||||
console.log('IP Address disimpan:', loketIp.value);
|
||||
router.push('/');
|
||||
}
|
||||
};
|
||||
|
||||
const clearIp = () => {
|
||||
localStorage.removeItem('loketIp');
|
||||
currentIp.value = null;
|
||||
loketIp.value = '';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
currentIp.value = localStorage.getItem('loketIp');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.setup-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #ffd7b5 20%, #ff9248 100%);
|
||||
}
|
||||
.setup-card {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
</style>
|
||||
175
pages/index.vue
175
pages/index.vue
@@ -11,7 +11,11 @@
|
||||
'payment-centered': paymentStore.currentStep !== 1,
|
||||
}"
|
||||
>
|
||||
<component :is="activeComponent" />
|
||||
<component :is="activeComponent" v-if="hasIpAddress" />
|
||||
<div v-else class="text-center pa-10">
|
||||
<v-progress-circular indeterminate color="primary"></v-progress-circular>
|
||||
<p class="mt-4">Memeriksa konfigurasi...</p>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -24,83 +28,180 @@ import { usePaymentStore } from '~/stores/payment';
|
||||
import Home from '~/components/Home.vue';
|
||||
import QRISPayment from '~/components/QRISPayment.vue';
|
||||
import Success from '~/components/PembayaranSukses.vue';
|
||||
import Gagal from '~/components/PembayaranGagal.vue';
|
||||
import { onMounted, onUnmounted, ref, computed, watch } from 'vue';
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
const apiURL = 'http://10.10.150.37:8084/api/v1/qris';
|
||||
const router = useRouter();
|
||||
const localIpAddress = ref(null);
|
||||
const pollingInterval = ref(null);
|
||||
|
||||
const hasIpAddress = computed(() => !!localIpAddress.value);
|
||||
const apiURL = 'http://10.10.150.68:8084/api/v1/qris/allstatus';
|
||||
|
||||
const paymentSteps = {
|
||||
1: Home,
|
||||
2: QRISPayment,
|
||||
3: Success,
|
||||
4: Gagal,
|
||||
};
|
||||
|
||||
const activeComponent = computed(() => {
|
||||
return paymentSteps[paymentStore.currentStep] || Home;
|
||||
});
|
||||
|
||||
const { data: apiData, refresh } = await useFetch(apiURL, {
|
||||
server: false,
|
||||
immediate: false,
|
||||
});
|
||||
// Watch untuk debugging perubahan step
|
||||
watch(() => paymentStore.currentStep, (newStep, oldStep) => {
|
||||
console.log(`Step berubah dari ${oldStep} ke ${newStep}`);
|
||||
}, { immediate: true });
|
||||
|
||||
const startPolling = () => {
|
||||
if (pollingInterval.value) {
|
||||
clearInterval(pollingInterval.value);
|
||||
console.log('🛑 Stopping previous polling');
|
||||
}
|
||||
|
||||
pollingInterval.value = setInterval(async () => {
|
||||
try {
|
||||
console.log(`🔄 POLLING - Step: ${paymentStore.currentStep}`);
|
||||
const response = await $fetch(apiURL);
|
||||
|
||||
if (response?.data?.length > 0) {
|
||||
|
||||
if (paymentStore.currentStep === 1) {
|
||||
// Step 1: Find data by IP address (original logic)
|
||||
console.log('🔍 Step 1: Looking for IP:', localIpAddress.value);
|
||||
const relevantData = response.data.find(item => item.ip === localIpAddress.value);
|
||||
|
||||
watch(apiData, (newData) => {
|
||||
if (newData && newData.data && newData.data.length > 0) {
|
||||
const relevantData = newData.data[0];
|
||||
if (relevantData) {
|
||||
console.log('✅ Data found for IP:', relevantData);
|
||||
paymentStore.updatePayment({ data: [relevantData] });
|
||||
clearInterval(pollingInterval);
|
||||
console.log('Polling stopped. Data received from API.');
|
||||
paymentStore.currentStep = 2;
|
||||
} else {
|
||||
console.log('⏳ No data found for IP:', localIpAddress.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let pollingInterval = null;
|
||||
else if (paymentStore.currentStep === 2) {
|
||||
// Step 2: Monitor payment status for THE SAME PATIENT
|
||||
console.log('🔍 Step 2: Monitoring payment status...');
|
||||
|
||||
// Get patient identifiers from store (data yang sudah di-load di step 1)
|
||||
const currentPatientBill = paymentStore.qrData.display_nobill;
|
||||
const currentPatientName = paymentStore.qrData.display_name;
|
||||
|
||||
console.log('👤 Current patient:', {
|
||||
name: currentPatientName,
|
||||
bill: currentPatientBill
|
||||
});
|
||||
|
||||
if (!currentPatientBill || !currentPatientName) {
|
||||
console.warn('⚠️ Patient data incomplete in store');
|
||||
return;
|
||||
}
|
||||
|
||||
// Find ALL records for this same patient (same name + bill)
|
||||
const samePatientRecords = response.data.filter(item => {
|
||||
const sameBill = item.display_nobill === currentPatientBill;
|
||||
const sameName = item.display_name === currentPatientName;
|
||||
|
||||
console.log(`🔄 Checking record: ${item.display_name} (${item.display_nobill}) status=${item.status}`);
|
||||
console.log(` → Same patient? ${sameBill && sameName}`);
|
||||
|
||||
return sameBill && sameName;
|
||||
});
|
||||
|
||||
console.log(`📊 Found ${samePatientRecords.length} records for same patient:`,
|
||||
samePatientRecords.map(r => `status: ${r.status}`));
|
||||
|
||||
// Now look for final status (success or fail) among same patient records
|
||||
const successRecord = samePatientRecords.find(record => record.status === "2");
|
||||
const failRecord = samePatientRecords.find(record => record.status === "0");
|
||||
|
||||
if (successRecord) {
|
||||
console.log('🎉 SUCCESS STATUS FOUND!', successRecord);
|
||||
paymentStore.updatePayment({ data: [successRecord] });
|
||||
paymentStore.currentStep = 3;
|
||||
clearInterval(pollingInterval.value);
|
||||
|
||||
// Auto return to home after 5 seconds
|
||||
setTimeout(() => {
|
||||
console.log('🏠 Auto return to home');
|
||||
paymentStore.reset();
|
||||
startPolling();
|
||||
}, 10000);
|
||||
|
||||
} else if (failRecord) {
|
||||
console.log('❌ FAIL STATUS FOUND!', failRecord);
|
||||
paymentStore.updatePayment({ data: [failRecord] });
|
||||
paymentStore.currentStep = 4;
|
||||
clearInterval(pollingInterval.value);
|
||||
|
||||
// Auto return to home after 5 seconds
|
||||
setTimeout(() => {
|
||||
console.log('🏠 Auto return to home');
|
||||
paymentStore.reset();
|
||||
startPolling();
|
||||
}, 10000);
|
||||
|
||||
} else {
|
||||
console.log('⏳ Still waiting for final status...');
|
||||
console.log('Current statuses for this patient:',
|
||||
samePatientRecords.map(r => r.status));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('📭 No data in API response');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Polling error:", error);
|
||||
}
|
||||
}, 10000);
|
||||
|
||||
console.log(`🚀 Polling started - IP-based patient detection`);
|
||||
};
|
||||
|
||||
const checkAndRedirect = () => {
|
||||
const savedIp = localStorage.getItem('loketIp');
|
||||
if (!savedIp) {
|
||||
console.warn('IP Address belum diatur. Mengarahkan ke halaman setup.');
|
||||
router.push('/setup-ip');
|
||||
} else {
|
||||
localIpAddress.value = savedIp;
|
||||
console.log('IP Address ditemukan:', savedIp);
|
||||
startPolling();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (paymentStore.currentStep === 1) {
|
||||
pollingInterval = setInterval(() => {
|
||||
refresh();
|
||||
}, 500000);
|
||||
}
|
||||
console.log('Component mounted, step saat ini:', paymentStore.currentStep);
|
||||
checkAndRedirect();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollingInterval) {
|
||||
clearInterval(pollingInterval);
|
||||
console.log('Polling stopped on unmount.');
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => paymentStore.currentStep, (newStep, oldStep) => {
|
||||
if (newStep === 1 && oldStep !== 1) {
|
||||
pollingInterval = setInterval(() => {
|
||||
refresh();
|
||||
}, 5000);
|
||||
} else if (newStep !== 1 && pollingInterval) {
|
||||
clearInterval(pollingInterval);
|
||||
if (pollingInterval.value) {
|
||||
clearInterval(pollingInterval.value);
|
||||
console.log('Polling dihentikan saat unmount.');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.medical-payment-app {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #ffd7b5 20%, #ff9248 100%);
|
||||
background: linear-gradient(135deg, #ff9248 20%, #ff9248 100%);
|
||||
}
|
||||
|
||||
.contact-fullscreen {
|
||||
height: 100vh !important;
|
||||
max-width: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.payment-centered {
|
||||
max-width: 500px !important;
|
||||
margin-top: 2rem !important;
|
||||
margin-bottom: 2rem !important;
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
|
||||
.payment-card {
|
||||
background: white;
|
||||
background: rgb(224, 224, 224);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
37
payment1.ts
Normal file
37
payment1.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
// // src/stores/payment.js
|
||||
// import { defineStore } from 'pinia';
|
||||
|
||||
// export const usePaymentStore = defineStore('payment', {
|
||||
// state: () => ({
|
||||
// currentStep: 1,
|
||||
// patientInfo: {
|
||||
// name: '',
|
||||
// amount: '',
|
||||
// expiry: '',
|
||||
// },
|
||||
// paymentData: null, // Tambahkan state ini untuk menyimpan data dari backend
|
||||
// }),
|
||||
// actions: {
|
||||
// nextStep() {
|
||||
// this.currentStep++;
|
||||
// },
|
||||
// prevStep() {
|
||||
// this.currentStep--;
|
||||
// },
|
||||
// reset() {
|
||||
// this.currentStep = 1;
|
||||
// this.patientInfo = {};
|
||||
// this.paymentData = null; // Reset data pembayaran
|
||||
// },
|
||||
// // Tambahkan action baru untuk menerima data dari WebSocket
|
||||
// updatePayment(data: { patientName: any; amount: any; expiryDate: any; } | null) {
|
||||
// this.paymentData = data;
|
||||
// this.patientInfo = {
|
||||
// name: data.patientName,
|
||||
// amount: data.amount,
|
||||
// expiry: data.expiryDate,
|
||||
// };
|
||||
// this.currentStep = 2; // Pindah ke step 2 secara otomatis
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
@@ -9,19 +9,32 @@ export const usePaymentStore = defineStore('payment', {
|
||||
amount: '',
|
||||
expiry: '',
|
||||
},
|
||||
// Berikan default object instead of null
|
||||
qrData: {
|
||||
qrvalue: null,
|
||||
display_nobill: null,
|
||||
display_name: null,
|
||||
display_amount: null
|
||||
display_amount: null,
|
||||
status: null, // Tambahkan status untuk tracking
|
||||
ip: null, // Tambahkan IP untuk reference
|
||||
},
|
||||
}),
|
||||
|
||||
getters: {
|
||||
// Tambahkan getter untuk safe access
|
||||
hasQrData: (state) => state.qrData && state.qrData.qrvalue,
|
||||
safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com'
|
||||
safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com',
|
||||
|
||||
// Getter untuk cek apakah data siap untuk polling status
|
||||
isReadyForStatusCheck: (state) => {
|
||||
return state.qrData.display_nobill && state.qrData.display_name;
|
||||
},
|
||||
|
||||
// Getter untuk informasi debug
|
||||
debugInfo: (state) => ({
|
||||
step: state.currentStep,
|
||||
hasIdentifiers: !!(state.qrData.display_nobill && state.qrData.display_name),
|
||||
qrData: state.qrData,
|
||||
patientInfo: state.patientInfo,
|
||||
})
|
||||
},
|
||||
|
||||
actions: {
|
||||
@@ -31,22 +44,32 @@ export const usePaymentStore = defineStore('payment', {
|
||||
prevStep() {
|
||||
this.currentStep--;
|
||||
},
|
||||
|
||||
setStep(step) {
|
||||
console.log(`Setting step from ${this.currentStep} to ${step}`);
|
||||
this.currentStep = step;
|
||||
},
|
||||
|
||||
reset() {
|
||||
console.log('Resetting payment store');
|
||||
this.currentStep = 1;
|
||||
this.patientInfo = {
|
||||
name: '',
|
||||
amount: '',
|
||||
expiry: '',
|
||||
};
|
||||
// Reset ke default object, bukan null
|
||||
this.qrData = {
|
||||
qrvalue: null,
|
||||
display_nobill: null,
|
||||
display_name: null,
|
||||
display_amount: null
|
||||
display_amount: null,
|
||||
status: null,
|
||||
ip: null,
|
||||
};
|
||||
},
|
||||
|
||||
updatePayment(apiResponse) {
|
||||
console.log("=== UPDATE PAYMENT ===");
|
||||
console.log("API Response:", apiResponse);
|
||||
|
||||
// Validasi response
|
||||
@@ -58,27 +81,72 @@ export const usePaymentStore = defineStore('payment', {
|
||||
const apiData = apiResponse.data[0];
|
||||
console.log("API Data:", apiData);
|
||||
|
||||
// Update qrData dengan validasi
|
||||
// Simpan data lama untuk comparison
|
||||
const oldQrData = { ...this.qrData };
|
||||
|
||||
// Update qrData dengan semua properti dari API
|
||||
this.qrData = {
|
||||
qrvalue: apiData.qrvalue || null,
|
||||
display_nobill: apiData.display_nobill || null,
|
||||
display_name: apiData.display_name || null,
|
||||
display_amount: apiData.display_amount || null,
|
||||
...apiData // spread untuk properti lain yang mungkin ada
|
||||
qrvalue: apiData.qrvalue || apiData.qr_code || this.qrData.qrvalue,
|
||||
display_nobill: apiData.display_nobill || this.qrData.display_nobill,
|
||||
display_name: apiData.display_name || this.qrData.display_name,
|
||||
display_amount: apiData.display_amount || apiData.nominal || this.qrData.display_amount,
|
||||
status: apiData.status || this.qrData.status,
|
||||
ip: apiData.ip || this.qrData.ip,
|
||||
// Spread untuk properti lain yang mungkin ada
|
||||
...apiData
|
||||
};
|
||||
|
||||
// Update patientInfo
|
||||
this.patientInfo = {
|
||||
name: apiData.display_name || 'Unknown',
|
||||
amount: apiData.display_amount || '0',
|
||||
expiry: this.patientInfo.expiry, // keep existing value
|
||||
name: apiData.display_name || this.patientInfo.name || 'Unknown',
|
||||
amount: apiData.display_amount || apiData.nominal || this.patientInfo.amount || '0',
|
||||
expiry: this.patientInfo.expiry,
|
||||
};
|
||||
|
||||
// Log changes
|
||||
if (oldQrData.status !== this.qrData.status) {
|
||||
console.log(`Status changed: ${oldQrData.status} -> ${this.qrData.status}`);
|
||||
}
|
||||
|
||||
console.log("Updated qrData:", this.qrData);
|
||||
console.log("Updated patientInfo:", this.patientInfo);
|
||||
|
||||
// Ganti step
|
||||
this.currentStep = 2;
|
||||
console.log("===================");
|
||||
},
|
||||
|
||||
// Method untuk debug
|
||||
debugCurrentState() {
|
||||
console.log("=== PAYMENT STORE DEBUG ===");
|
||||
console.log("Current Step:", this.currentStep);
|
||||
console.log("Patient Info:", this.patientInfo);
|
||||
console.log("QR Data:", this.qrData);
|
||||
console.log("Has QR Data:", this.hasQrData);
|
||||
console.log("Ready for Status Check:", this.isReadyForStatusCheck);
|
||||
console.log("Safe QR Value:", this.safeQrValue);
|
||||
console.log("==========================");
|
||||
},
|
||||
|
||||
// Method untuk validasi data
|
||||
validateData() {
|
||||
const issues = [];
|
||||
|
||||
if (!this.qrData.display_nobill) {
|
||||
issues.push('display_nobill missing');
|
||||
}
|
||||
|
||||
if (!this.qrData.display_name) {
|
||||
issues.push('display_name missing');
|
||||
}
|
||||
|
||||
if (!this.qrData.qrvalue && !this.qrData.qr_code) {
|
||||
issues.push('QR code missing');
|
||||
}
|
||||
|
||||
if (issues.length > 0) {
|
||||
console.warn('Data validation issues:', issues);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -1,37 +0,0 @@
|
||||
// src/stores/payment.js
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const usePaymentStore = defineStore('payment', {
|
||||
state: () => ({
|
||||
currentStep: 1,
|
||||
patientInfo: {
|
||||
name: '',
|
||||
amount: '',
|
||||
expiry: '',
|
||||
},
|
||||
paymentData: null, // Tambahkan state ini untuk menyimpan data dari backend
|
||||
}),
|
||||
actions: {
|
||||
nextStep() {
|
||||
this.currentStep++;
|
||||
},
|
||||
prevStep() {
|
||||
this.currentStep--;
|
||||
},
|
||||
reset() {
|
||||
this.currentStep = 1;
|
||||
this.patientInfo = {};
|
||||
this.paymentData = null; // Reset data pembayaran
|
||||
},
|
||||
// Tambahkan action baru untuk menerima data dari WebSocket
|
||||
updatePayment(data: { patientName: any; amount: any; expiryDate: any; } | null) {
|
||||
this.paymentData = data;
|
||||
this.patientInfo = {
|
||||
name: data.patientName,
|
||||
amount: data.amount,
|
||||
expiry: data.expiryDate,
|
||||
};
|
||||
this.currentStep = 2; // Pindah ke step 2 secara otomatis
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user