effendy/qris_bank_jatim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update komponen

Browse Source
This commit is contained in:
bagus-arie05
2025-10-17 15:12:20 +07:00
parent f3a5e8935e
commit fa2d439ea4
15 changed files with 747 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/SetupIP.vue
View File

@@ -30,7 +30,7 @@
</v-card-text>
<v-card-actions class="justify-center">
<v-btn
color="primary"
color="white"
@click="saveIpAddress"
:disabled="!isValidIp"
variant="flat"

273
pages/index.vue
View File

@@ -8,13 +8,25 @@
elevation="0"
:class="{
'contact-fullscreen': paymentStore.currentStep === 1,
'payment-centered': paymentStore.currentStep !== 1,
'payment-centered': paymentStore.currentStep === 2,
'status-centered':
paymentStore.currentStep === 3 ||
paymentStore.currentStep === 4,
}"
>
<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>
<v-progress-circular
indeterminate
color="primary"
></v-progress-circular>
<p class="mt-4">Memeriksa konfigurasi dan koneksi data...</p>
<p v-if="hasIpAddress && wsIsConnected" class="mt-2 text-success">
Koneksi WS: **Terhubung** (Siap menerima data 30s)
</p>
<p v-else-if="hasIpAddress" class="mt-2 text-warning">
Koneksi WS: Menunggu/Terputus...
</p>
</div>
</v-card>
</v-col>
@@ -22,22 +34,33 @@
</v-container>
</div>
</template>
<script setup>
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';
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";
import { useRouter } from "vue-router";
import { useWebSocket } from "~/composables/useWebSocket";
const paymentStore = usePaymentStore();
const router = useRouter();
const localIpAddress = ref(null);
const pollingInterval = ref(null);
// **WEB SOCKET CONFIGURATION**
const WS_URL_BASE = "ws://10.10.150.45:8084/api/v1/ws";
const WS_QUERY = "user_id=QRIS&room=BANKJATIM";
const fullWsUrl = `${WS_URL_BASE}?${WS_QUERY}`;
const {
wsData,
isConnected: wsIsConnected,
connect: wsConnect,
disconnect: wsDisconnect,
} = useWebSocket(fullWsUrl);
const hasIpAddress = computed(() => !!localIpAddress.value);
const apiURL = 'http://10.10.150.67:8084/api/v1/qris/allstatus';
const paymentSteps = {
1: Home,
@@ -50,147 +73,92 @@ const activeComponent = computed(() => {
return paymentSteps[paymentStore.currentStep] || Home;
});
// Watch untuk debugging perubahan step
watch(() => paymentStore.currentStep, (newStep, oldStep) => {
console.log(`Step berubah dari ${oldStep} ke ${newStep}`);
}, { immediate: true });
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');
}
watch(
wsData,
(newStatus) => {
const payloadData = newStatus?.data?.data; // Ambil array data transaksi
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);
if (relevantData) {
console.log('✅ Data found for IP:', relevantData);
paymentStore.updatePayment({ data: [relevantData] });
paymentStore.currentStep = 2;
} else {
console.log('⏳ No data found for IP:', localIpAddress.value);
}
}
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}`));
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);
setTimeout(() => {
console.log('🏠 Auto return to home');
paymentStore.reset();
startPolling();
}, 20000);
} else if (failRecord) {
console.log('❌ FAIL STATUS FOUND!', failRecord);
paymentStore.updatePayment({ data: [failRecord] });
paymentStore.currentStep = 4;
clearInterval(pollingInterval.value);
setTimeout(() => {
console.log('🏠 Auto return to home');
paymentStore.reset();
startPolling();
}, 20000);
} 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);
if (!newStatus || !payloadData || payloadData.length === 0) {
console.log(
"📭 WS: No valid payload data (newStatus.data.data) in message. Skipping state change."
);
return;
}
}, 20000);
console.log(`🚀 Polling started - IP-based patient detection`);
};
console.log(
`[WS] Menerima update data di Step ${paymentStore.currentStep}. Total records: ${payloadData.length}`
);
const allRecords = payloadData;
if (paymentStore.currentStep === 1) {
console.log("🔍 Step 1 (WS): Looking for IP:", localIpAddress.value);
const relevantData = allRecords.find(
(item) => item.ip === localIpAddress.value && item.status === "1"
);
if (relevantData) {
console.log(
"✅ WS Data found for IP (New Transaction). Moving to Step 2."
);
paymentStore.updatePayment({ data: [relevantData] });
paymentStore.setStep(2);
} else {
console.log(
`⏳ No relevant data found for IP ${localIpAddress.value} in this broadcast.`
);
}
} else if (paymentStore.currentStep === 2) {
const relevantData = allRecords.find(
(item) =>
item.ip === localIpAddress.value &&
item.display_nobill === paymentStore.qrData.display_nobill
);
if (relevantData) {
console.log(
"🔄 WS Update received for current patient in Step 2. Updating store..."
);
paymentStore.updatePayment({ data: [relevantData] });
}
}
},
{ deep: true }
);
const checkAndRedirect = () => {
const savedIp = localStorage.getItem('loketIp');
const savedIp = localStorage.getItem("loketIp");
if (!savedIp) {
console.warn('IP Address belum diatur. Mengarahkan ke halaman setup.');
router.push('/setupip');
router.push("/setupip");
} else {
localIpAddress.value = savedIp;
console.log('IP Address ditemukan:', savedIp);
startPolling();
wsConnect();
}
};
onMounted(() => {
console.log('Component mounted, step saat ini:', paymentStore.currentStep);
checkAndRedirect();
});
onUnmounted(() => {
if (pollingInterval.value) {
clearInterval(pollingInterval.value);
console.log('Polling dihentikan saat unmount.');
}
wsDisconnect();
});
</script>
>
<style scoped>
.medical-payment-app {
background: linear-gradient(135deg, #ff9248 20%, #ff9248 100%);
background: #ff9248;
min-height: 100vh;
height: auto;
height: fit-content;
}
.full-height {
@@ -206,18 +174,35 @@ onUnmounted(() => {
}
.payment-centered {
background: #ff9248 !important;
max-width: 1200px !important;
width: 100% !important;
width: fit-content !important;
margin: 1rem auto !important;
border-radius: 16px !important;
height: auto !important;
height: fit-content !important;
min-height: calc(100vh - 2rem);
}
.payment-card {
background: rgb(224, 224, 224);
background: #ff9248;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
height: auto !important;
height: fit-content !important;
min-height: inherit;
}
.status-centered {
max-width: 1200px !important;
width: 100% !important;
margin: 1rem auto !important;
border-radius: 16px !important;
height: fit-content !important;
min-height: calc(100vh - 2rem);
}
.status-card {
background: #ff9248;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
height: fit-content !important;
min-height: inherit;
}
@@ -227,6 +212,11 @@ onUnmounted(() => {
max-width: 500px !important;
margin: 1rem !important;
}
.status-centered {
max-width: 800px !important;
margin: 1rem !important;
}
}
@media (orientation: landscape) and (min-width: 768px) {
@@ -235,16 +225,23 @@ onUnmounted(() => {
margin: 0.5rem auto !important;
min-height: calc(100vh - 1rem);
}
.status-centered {
max-width: 700px !important;
margin: 0.5rem auto !important;
min-height: calc(100vh - 1rem);
}
}
@media (orientation: landscape) and (max-height: 600px) {
.medical-payment-app {
min-height: 600px;
}
.contact-fullscreen,
.payment-centered {
.payment-centered,
.status-centered {
min-height: 600px;
}
}
</style>
</style>