269 lines
11 KiB
Vue
269 lines
11 KiB
Vue
<script setup>
|
|
import axios from '@axios';
|
|
// import { VideoPlayer } from '@videojs-player/vue';
|
|
// import 'video.js/dist/video-js.css';
|
|
const appiontmentDetail = ref();
|
|
const patientAddress = ref();
|
|
const labAddress = ref();
|
|
const labName = ref();
|
|
const labDistance = ref();
|
|
const labContact = ref();
|
|
const labBookDate = ref();
|
|
const labBookTime = ref();
|
|
const video_url = ref();
|
|
const selectedLab = ref();
|
|
const labDetail = ref();
|
|
const questionAnswer = ref([]);
|
|
const appiontmentDate = ref();
|
|
onMounted(() => {
|
|
const userRole = localStorage.getItem('user_role');
|
|
const patient_id = localStorage.getItem('patient_id');
|
|
const access_token = localStorage.getItem('access_token');
|
|
const appiontment_id = localStorage.getItem('appiontment-id');
|
|
if (userRole == 'patient') {
|
|
console.log('patient');
|
|
axios.post('/api/appointment-detail/' + appiontment_id, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${access_token}`
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log(response.data);
|
|
video_url.value = response.data.video_url;
|
|
appiontmentDetail.value = response.data;
|
|
let patientData = response.data.patient
|
|
patientAddress.value = (patientData.address ? patientData.address + ', ' : '') +
|
|
(patientData.city ? patientData.city + ', ' : '') +
|
|
(patientData.state ? patientData.state + ' ' : '') +
|
|
(patientData.zip_code ? patientData.zip_code + ', ' : '') +
|
|
(patientData.country ? patientData.country : '');
|
|
|
|
// Remove trailing comma and space if present
|
|
patientAddress.value = patientAddress.value.replace(/,\s*$/, '');
|
|
console.log(patientAddress.value)
|
|
selectedLab.value = appiontmentDetail.value.lab;
|
|
// labName.value = appiontmentDetail.value.lab.lab_name;
|
|
// labAddress.value = appiontmentDetail.value.lab.lab_address;
|
|
// labDistance.value = appiontmentDetail.value.lab.lab_distance;
|
|
// labContact.value = appiontmentDetail.value.lab.lab_contact_no;
|
|
appiontmentDate.value = appiontmentDetail.value.doctor_appointment.appointment_date + ' ' + appiontmentDetail.value.doctor_appointment.appointment_time;
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
appiontmentDetail.value = [];
|
|
questionAnswer.value = [];
|
|
patientAddress.value = '';
|
|
});
|
|
|
|
axios.get('/api/patient-book-lab/get/' + appiontment_id, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${access_token}`
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log("patient lab detail", response.data);
|
|
let data = response.data;
|
|
selectedLab.value = appiontmentDetail.value.lab;
|
|
labName.value = data.lab_name;
|
|
labAddress.value = data.lab_address;
|
|
labDistance.value = data.lab_distance;
|
|
labContact.value = data.lab_contact_no;
|
|
labBookDate.value = data.slot_date;
|
|
labBookTime.value = data.slot_time;
|
|
// localStorage.setItem('patient_id', response.data);
|
|
})
|
|
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
|
|
|
|
} else {
|
|
axios.post('/agent/api/appointment-detail/' + appiontment_id, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${access_token}`
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log(response.data);
|
|
localStorage.setItem('patient_id', response.data.patient.id);
|
|
video_url.value = response.data.video_url;
|
|
appiontmentDetail.value = response.data;
|
|
let patientData = response.data.patient
|
|
patientAddress.value = (patientData.address ? patientData.address + ', ' : '') +
|
|
(patientData.city ? patientData.city + ', ' : '') +
|
|
(patientData.state ? patientData.state + ' ' : '') +
|
|
(patientData.zip_code ? patientData.zip_code + ', ' : '') +
|
|
(patientData.country ? patientData.country : '');
|
|
|
|
// Remove trailing comma and space if present
|
|
patientAddress.value = patientAddress.value.replace(/,\s*$/, '');
|
|
console.log(patientAddress.value)
|
|
selectedLab.value = appiontmentDetail.value.lab;
|
|
// labName.value = appiontmentDetail.value.lab.lab_name;
|
|
// labAddress.value = appiontmentDetail.value.lab.lab_address;
|
|
// labDistance.value = appiontmentDetail.value.lab.lab_distance;
|
|
// labContact.value = appiontmentDetail.value.lab.lab_contact_no;
|
|
appiontmentDate.value = appiontmentDetail.value.doctor_appointment.appointment_date + ' ' + appiontmentDetail.value.doctor_appointment.appointment_time;
|
|
})
|
|
|
|
.catch(error => {
|
|
console.error(error);
|
|
appiontmentDetail.value = [];
|
|
patientAddress.value = '';
|
|
});
|
|
|
|
axios.post('/agent/api/patient-book-lab/get/' + appiontment_id, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${access_token}`
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log("lab detail", response.data);
|
|
let data = response.data;
|
|
selectedLab.value = appiontmentDetail.value.lab;
|
|
labName.value = data.lab_name;
|
|
labAddress.value = data.lab_address;
|
|
labDistance.value = data.lab_distance;
|
|
labContact.value = data.lab_contact_no;
|
|
labBookDate.value = data.slot_date;
|
|
labBookTime.value = data.slot_time;
|
|
// localStorage.setItem('patient_id', response.data);
|
|
})
|
|
|
|
.catch(error => {
|
|
console.error(error);
|
|
labDetail.value = [];
|
|
});
|
|
|
|
|
|
axios.post('/agent/api/get-question-answer/' + patient_id + '/' + appiontment_id, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${access_token}`
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log(response.data);
|
|
questionAnswer.value = response.data.questions;
|
|
})
|
|
|
|
.catch(error => {
|
|
console.error(error);
|
|
questionAnswer.value = [];
|
|
patientAddress.value = '';
|
|
});
|
|
|
|
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<v-row>
|
|
<!-- First Column -->
|
|
<v-col cols="12" md="8">
|
|
<video-player :src="video_url" controls :loop="true" :volume="0.6" responsive="true" width="820"
|
|
height="400" aspectRatio="16:9" />
|
|
</v-col>
|
|
|
|
<!-- Second Column -->
|
|
<v-col cols="12" md="4">
|
|
|
|
<v-list style="height:auto">
|
|
<v-list-item-group v-if="labName || labDistance || labAddress || labContact">
|
|
<v-list-item>
|
|
<v-list-item-content class="lab_address">
|
|
<v-list-item-title style="font-size: 20px;" v-if="labName">{{ labName }}</v-list-item-title>
|
|
<v-list-item-title class="text-wrap lab-icon-detail" v-if="labDistance">
|
|
<v-icon icon="mdi-map-marker" style="font-size: 25px; margin-top: 5px;"></v-icon>
|
|
<span class="lab-detail">{{
|
|
labDistance }} away from your location </span>
|
|
</v-list-item-title>
|
|
<v-list-item-title class="text-wrap lab-icon-detail" v-if="labAddress">
|
|
<v-icon icon="mdi-home" style="font-size: 25px; margin-top: 5px;"></v-icon>
|
|
<span class="lab-detail">
|
|
{{ labAddress }} </span>
|
|
</v-list-item-title>
|
|
<v-list-item-title class="text-wrap lab-icon-detail" v-if="labContact">
|
|
<v-icon icon="mdi-phone" style="font-size: 25px; margin-top: 5px;"></v-icon>
|
|
<span class="lab-detail">
|
|
{{ labContact }} </span>
|
|
</v-list-item-title>
|
|
|
|
<!-- <v-list-item-subtitle v-if="labContact"><v-icon icon="mdi-phone"
|
|
style="font-size: 25px; margin:5px 5px" /> {{
|
|
labContact }}</v-list-item-subtitle> -->
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list-item-group>
|
|
<v-list-item-group>
|
|
<v-list-item v-if="labBookDate || labBookTime">
|
|
<v-list-item-content class="pt-2 lab_address">
|
|
<v-list-item-subtitle>
|
|
<b>Lab Appiontment:</b>
|
|
</v-list-item-subtitle>
|
|
<v-list-item-subtitle>
|
|
{{ labBookDate }} {{ labBookTime }}
|
|
</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-content class="pt-2 lab_address">
|
|
<v-list-item-subtitle>
|
|
<b>Doctor Appiontment:</b>
|
|
</v-list-item-subtitle>
|
|
<v-list-item-subtitle>
|
|
{{ appiontmentDate }}
|
|
</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list-item-group>
|
|
<v-list-item-group v-if="patientAddress">
|
|
<v-list-item>
|
|
<v-list-item-subtitle><b>Address</b></v-list-item-subtitle>
|
|
<v-list-item-title class="text-wrap" style="font-size: 13px;color:#939393">
|
|
{{ patientAddress }}
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list-item-group>
|
|
</v-list>
|
|
|
|
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<br><br>
|
|
<VCardTitle v-if="questionAnswer.length > 0">Questionaries</VCardTitle>
|
|
<VRow class="mt-5 mb-5 px-3 ps-4" v-if="questionAnswer.length > 0">
|
|
<VCol cols="6 " v-for="(ans, index) in questionAnswer">
|
|
<VLabel>{{ ans.question }}</VLabel>
|
|
<VTextField :type="ans.type" :value="ans.answer" size="500" disabled="" :style="{ color: 'black' }" />
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
<style>
|
|
.lab_address div {
|
|
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.lab-detail {
|
|
margin-left: 10px;
|
|
margin-top: 3px;
|
|
font-size: 14px;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.lab-icon-detail {
|
|
color: #939393;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
</style>
|