initial commit
This commit is contained in:
Inshal
287
resources/js/views/pages/overview/LabKit.vue
Normal file
287
resources/js/views/pages/overview/LabKit.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
const panel = ref(0)
|
||||
const error = ref();
|
||||
const isMark = ref();
|
||||
const isShipped = ref(true);
|
||||
const isShippedColor = ref('secondary');
|
||||
const isDelivered = ref(true);
|
||||
const isDeliveredColor = ref('secondary');
|
||||
const isTransit = ref(true);
|
||||
const isTransitColor = ref('secondary');
|
||||
const isReceived = ref(true);
|
||||
const isReceivedColor = ref('secondary');
|
||||
const isResults = ref(true);
|
||||
const isResultsColor = ref('secondary');
|
||||
const props = defineProps({
|
||||
itemProps: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
const isthis = computed(async () => {
|
||||
if (props.itemProps == 'shipped') {
|
||||
isShipped.value = false;
|
||||
isShippedColor.value = "rgb(var(--v-theme-yellow))";
|
||||
}
|
||||
if (props.itemProps == 'delivered') {
|
||||
isShipped.value = false;
|
||||
isShippedColor.value = "rgb(var(--v-theme-yellow))";
|
||||
isDelivered.value = false;
|
||||
isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
|
||||
}
|
||||
if (props.itemProps == 'transit') {
|
||||
isShipped.value = false;
|
||||
isShippedColor.value = "rgb(var(--v-theme-yellow))";
|
||||
isDelivered.value = false;
|
||||
isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
|
||||
isTransit.value = false;
|
||||
isTransitColor.value = "rgb(var(--v-theme-yellow))";
|
||||
}
|
||||
if (props.itemProps == 'received') {
|
||||
isShipped.value = false;
|
||||
isShippedColor.value = "rgb(var(--v-theme-yellow))";
|
||||
isDelivered.value = false;
|
||||
isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
|
||||
isTransit.value = false;
|
||||
isTransitColor.value = "rgb(var(--v-theme-yellow))";
|
||||
isReceived.value = false;
|
||||
isReceivedColor.value = "rgb(var(--v-theme-yellow))";
|
||||
}
|
||||
if (props.itemProps == 'result') {
|
||||
isShipped.value = false;
|
||||
isShippedColor.value = "rgb(var(--v-theme-yellow))";
|
||||
isResults.value = false;
|
||||
isResultsColor.value = "rgb(var(--v-theme-yellow))";
|
||||
isReceived.value = false;
|
||||
isReceivedColor.value = "rgb(var(--v-theme-yellow))";
|
||||
isTransit.value = false;
|
||||
isTransitColor.value = "rgb(var(--v-theme-yellow))";
|
||||
isDelivered.value = false;
|
||||
isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<!-- <VCard class="text-center text-sm-start"> -->
|
||||
<VRow no-gutters v-if="isthis">
|
||||
<VCol>
|
||||
<VExpansionPanels v-model="panel">
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle variant="tonal">
|
||||
<span class="font-color"><b>Lab Kit </b> <br><br>
|
||||
<p> Status:{{ props.itemProps }}
|
||||
</p>
|
||||
<p>Test Kit Tracking : To you </p>
|
||||
</span>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
<h2 class="text-start">Results</h2>
|
||||
<VCardText>
|
||||
|
||||
<VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
|
||||
<!-- SECTION Timeline Item: Flight -->
|
||||
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" color="error" icon="tabler-check"
|
||||
size="small">
|
||||
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
||||
|
||||
<span class="app-timeline-title">
|
||||
<b>Ordered Hormone Test Kit</b><br><br>
|
||||
</span>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- !SECTION -->
|
||||
<VTimelineItem :dot-color="isShippedColor" :color="isShippedColor" icon="tabler-check"
|
||||
size="small">
|
||||
<template #icon v-if="isShipped">
|
||||
2
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Shipped Hormone Test Kit</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- SECTION Timeline Item: Interview Schedule -->
|
||||
<VTimelineItem :dot-color="isDeliveredColor" :color="isDeliveredColor"
|
||||
icon="tabler-check" size="small">
|
||||
<template #icon v-if="isDelivered">
|
||||
3
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Delivered Hormone Test Kit</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem :dot-color="isTransitColor" :color="isTransitColor" icon="tabler-check"
|
||||
size="small">
|
||||
<template #icon v-if="isTransit">
|
||||
4
|
||||
</template>
|
||||
<!-- <template #icon>
|
||||
<VIcon size="20" icon="tabler-circle-check" color="error" />
|
||||
</template> -->
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1 ">
|
||||
<div>
|
||||
<b>Hormone Test Kit in Transit</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem :dot-color="isReceivedColor" :color="isReceivedColor" icon="tabler-check"
|
||||
size="small">
|
||||
<template #icon v-if="isReceived">
|
||||
5
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Lab Received Hormone Test Kit</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem :dot-color="isResultsColor" :color="isResultsColor" icon="tabler-check"
|
||||
size="small">
|
||||
<template #icon v-if="isResults">
|
||||
6
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Provider Reviewed Test Results</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<!-- !SECTION -->
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
</VExpansionPanels>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<!-- </VCard> -->
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-timeline .v-timeline-divider__inner-dot {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.font-color {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title.bg-secondary {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title.v-expansion-panel-title--active {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span.v-expansion-panel-title__icon {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.v-expansion-panel {
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.v-expansion-panel:hover {
|
||||
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.v-expansion-panel-title {
|
||||
padding: 15px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.v-expansion-panel-title.pt-0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// .v-expansion-panel-title:hover {
|
||||
// background-color: #f9f9f9;
|
||||
// color: #222;
|
||||
// }
|
||||
|
||||
.v-expansion-panel-title .mdi {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
transition: transform 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.v-expansion-panel-title.v-expansion-panel-title--active .mdi {
|
||||
transform: rotate(180deg);
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text {
|
||||
padding: 10px 15px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text .d-flex {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text .d-flex>div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text p {
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
342
resources/js/views/pages/overview/overview.vue
Normal file
342
resources/js/views/pages/overview/overview.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<script setup>
|
||||
import { computed, defineProps, ref } from 'vue';
|
||||
const props = defineProps({
|
||||
date: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
time: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
timezone: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
timeDiff: {
|
||||
type: String,
|
||||
//required: true,
|
||||
},
|
||||
callEnd: {
|
||||
type: String,
|
||||
//required: true,
|
||||
}
|
||||
|
||||
})
|
||||
const isDisableMeeting = ref(true);
|
||||
const panel = ref(0)
|
||||
|
||||
|
||||
const isMeetingEnable = computed(() => {
|
||||
console.log("computed", props.timeDiff);
|
||||
isAgentCall();
|
||||
});
|
||||
|
||||
|
||||
const isAgentCall = () => {
|
||||
let meetingTime = props.timeDiff;
|
||||
console.log("onMounted", meetingTime);
|
||||
isDisableMeeting.value = true;
|
||||
if (meetingTime === "0 days 0 hours 0 minutes 0 seconds") {
|
||||
console.log("meetingTime", meetingTime);
|
||||
isDisableMeeting.value = true;
|
||||
// dsdsf
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="text-center text-sm-start">
|
||||
<VRow no-gutters>
|
||||
<VCol>
|
||||
|
||||
<VExpansionPanels v-model="panel">
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle variant="tonal" color="primary">
|
||||
<span><b>Lab Kit with a Virtual Provider Consultation. {{ isMeetingEnable }}</b> <br><br>
|
||||
<p>{{ date }} Status: InProcess <br>
|
||||
</p>
|
||||
<p>Test Kit Tracking : <Routerview to="/"> To you</Routerview> / <Routerview to="/trt">
|
||||
back
|
||||
to Lab
|
||||
</Routerview>
|
||||
</p>
|
||||
</span>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
<VCardText>
|
||||
<VTimeline side="end" align="start" line-inset="8" truncate-line="both"
|
||||
density="compact">
|
||||
<!-- SECTION Timeline Item: Flight -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check"
|
||||
size="small">
|
||||
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
||||
<span class="app-timeline-title">
|
||||
<b>Medical History Form Completed</b><br><br>
|
||||
</span>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- !SECTION -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check"
|
||||
size="small">
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Online Consultation Scheduled</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- SECTION Timeline Item: Interview Schedule -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check"
|
||||
size="small">
|
||||
<template #icon>
|
||||
3
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>eClinic Schedule is Confirmed for {{ date }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-space-between align-center flex-wrap">
|
||||
<!-- 👉 Avatar & Personal Info -->
|
||||
<div class="d-flex align-center mt-2">
|
||||
<div class="d-flex flex-column">
|
||||
<p class="text-sm font-weight-medium text-high-emphasis mb-0">
|
||||
Your virtual consultation with your HGH provider is set for
|
||||
<b>{{
|
||||
props.date }}, at {{ props.time }} , {{ props.timezone
|
||||
}}</b> On
|
||||
the appointment day, we will send you an
|
||||
email containing the link
|
||||
to join, along
|
||||
with useful tips for preparation. If you have any inquiries or
|
||||
need
|
||||
to reschedule, feel free
|
||||
to reach out via text at (223) 124-5533.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<RouterLink v-if="!isDisableMeeting" to="/queue">
|
||||
<VBtn class="mt-3" color="rgb(var(--v-theme-yellow))">
|
||||
Go to Meeting Test{{ callEnd }}
|
||||
</VBtn>
|
||||
</RouterLink>
|
||||
<span v-else>
|
||||
<VBtn class="mt-3" color="rgb(var(--v-theme-yellow))" disabled>Go to
|
||||
Meeting Disabled
|
||||
</VBtn>
|
||||
</span>
|
||||
<!-- <RouterLink to="/meeting">
|
||||
<VBtn class="mt-3" color="error" :disabled="isDisableMeeting">Go to Meeting
|
||||
</VBtn>
|
||||
</RouterLink> -->
|
||||
|
||||
<!-- Person Actions -->
|
||||
</div>
|
||||
|
||||
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))"
|
||||
color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
4
|
||||
</template>
|
||||
<!-- <template #icon>
|
||||
<VIcon size="20" icon="tabler-circle-check" color="error" />
|
||||
</template> -->
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>eClicnic Attented</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))"
|
||||
color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
5
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Medication Ordered</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))"
|
||||
color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
6
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Medication Shipped</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))"
|
||||
color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
7
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Medication Delivered</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<!-- !SECTION -->
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
</VExpansionPanels>
|
||||
<VCardTitle class="text-start">Latest Labs <RouterLink to="/">
|
||||
<span>(See all)</span>
|
||||
</RouterLink>
|
||||
</VCardTitle>
|
||||
<VExpansionPanels class="mt-2">
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle variant="tonal" color="rgb(var(--v-theme-yellow))">
|
||||
<span><b>Lab Kit </b> <br><br>
|
||||
<p>{{ date }} Status: Ordered <br>
|
||||
</p>
|
||||
<p>Test Kit Tracking : <Routerview to="/"> To you</Routerview> / <Routerview to="/trt">
|
||||
back
|
||||
to Lab
|
||||
</Routerview>
|
||||
</p>
|
||||
</span>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
<h2 class="text-start">Results</h2>
|
||||
<VCardText>
|
||||
|
||||
<VTimeline side="end" align="start" line-inset="8" truncate-line="both"
|
||||
density="compact">
|
||||
<!-- SECTION Timeline Item: Flight -->
|
||||
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check"
|
||||
size="small">
|
||||
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
||||
|
||||
<span class="app-timeline-title">
|
||||
<b>Ordered Hormone Test Kit</b><br><br>
|
||||
</span>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- !SECTION -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check"
|
||||
size="small">
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Shipped Hormone Test Kit</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- SECTION Timeline Item: Interview Schedule -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check"
|
||||
size="small">
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Delivered Hormone Test Kit</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" color="error"
|
||||
icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
4
|
||||
</template>
|
||||
<!-- <template #icon>
|
||||
<VIcon size="20" icon="tabler-circle-check" color="error" />
|
||||
</template> -->
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1 ">
|
||||
<div>
|
||||
<b>Hormone Test Kit in Transit</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="secondary" color="primary" icon="tabler-check"
|
||||
size="small">
|
||||
<template #icon>
|
||||
5
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Lab Received Hormone Test Kit</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="secondary" color="primary" icon="tabler-check"
|
||||
size="small">
|
||||
<template #icon>
|
||||
6
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div>
|
||||
<b>Provider Reviewed Test Results</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<!-- !SECTION -->
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
</VExpansionPanels>
|
||||
|
||||
|
||||
|
||||
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-timeline .v-timeline-divider__inner-dot {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title.bg-secondary {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span.v-expansion-panel-title__icon {
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
420
resources/js/views/pages/overview/treatment-plan.vue
Normal file
420
resources/js/views/pages/overview/treatment-plan.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<script setup>
|
||||
import { computed, defineProps, nextTick, ref } from 'vue';
|
||||
const isMeetingEnable = ref(false);
|
||||
const eClinicSchedule = ref(false);
|
||||
const eClicnicAttented = ref(true)
|
||||
const eClicnicAttentedColor = ref('secondary')
|
||||
const isMeetingEnd = ref(true);
|
||||
const meetingInFuture = ref(true);
|
||||
const props = defineProps({
|
||||
date: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
orderid: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
time: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
timezone: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
timeDiff: {
|
||||
type: String,
|
||||
//required: true,
|
||||
},
|
||||
showShipment: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
iscallEnd: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
})
|
||||
const panel = ref(0)
|
||||
const treatmentPlan = computed(() => {
|
||||
let appDate = formatDateToISO(props.date);
|
||||
let appTime = convertTo24Hour(props.time);
|
||||
console.log("PlanCallend", props.iscallEnd, props.timeDiff, props.date, props.time, appDate, appTime, isDateTimeInFuture(props.date, props.time));
|
||||
meetingInFuture.value = isDateTimeInFuture(props.date, props.time)
|
||||
iscallEnd();
|
||||
})
|
||||
const iscallEnd = async () => {
|
||||
if (props.iscallEnd && !meetingInFuture.value) {
|
||||
isMeetingEnable.value = false;
|
||||
eClinicSchedule.value = false;
|
||||
eClicnicAttentedColor.value = 'rgb(var(--v-theme-yellow))';
|
||||
isMeetingEnd.value = false;
|
||||
console.log('Bth Conditin');
|
||||
}
|
||||
else if (props.iscallEnd) { // Call has been end
|
||||
isMeetingEnable.value = false;
|
||||
eClinicSchedule.value = false;
|
||||
isMeetingEnd.value = false;
|
||||
eClicnicAttentedColor.value = 'rgb(var(--v-theme-yellow))';
|
||||
console.log('callEnd');
|
||||
} else if (!meetingInFuture.value) { // Patient can Join Meeting
|
||||
isMeetingEnable.value = true;
|
||||
console.log('timeDiff');
|
||||
} else { // Call has been end
|
||||
console.log('else');
|
||||
isMeetingEnable.value = false;
|
||||
eClinicSchedule.value = true;
|
||||
isMeetingEnd.value = true;
|
||||
}
|
||||
await nextTick();
|
||||
// isAgentCall();
|
||||
};
|
||||
const isDateTimeInFuture = (dateString, timeString) => {
|
||||
// Combine the date and time strings into a datetime string
|
||||
const dateTimeString = dateString + " " + timeString;
|
||||
|
||||
// Convert the datetime string into a Date object
|
||||
const eventDateTime = new Date(dateTimeString);
|
||||
|
||||
// Get the current date and time
|
||||
const now = new Date();
|
||||
|
||||
// Compare the eventDateTime with the current date and time
|
||||
return eventDateTime > now;
|
||||
};
|
||||
const formatDateToISO = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
const convertTo24Hour = (time12h) => {
|
||||
const [time, period] = time12h.split(' ');
|
||||
const [hours, minutes] = time.split(':');
|
||||
|
||||
let hours24;
|
||||
if (period === 'AM') {
|
||||
hours24 = hours === '12' ? '00' : hours.padStart(2, '0');
|
||||
} else {
|
||||
hours24 = hours === '12' ? '12' : String(parseInt(hours, 10) + 12).padStart(2, '0');
|
||||
}
|
||||
|
||||
return `${hours24}:${minutes}:00`;
|
||||
};
|
||||
// const isMeetingEnable = computed(() => {
|
||||
// console.log("computed", props.timeDiff);
|
||||
// });
|
||||
|
||||
// const isAgentCall = () => {
|
||||
// let meetingTime = props.timeDiff;
|
||||
// console.log("onMounted", meetingTime);
|
||||
// isDisableMeeting.value = true;
|
||||
// if (meetingTime == "0 days 0 hours 0 minutes 0 seconds") {
|
||||
// return false;
|
||||
// console.log("meetingTime", meetingTime);
|
||||
|
||||
// } else {
|
||||
// isDisableMeeting.value = false;
|
||||
// }
|
||||
// }
|
||||
const togglePanel = (index) => {
|
||||
return panel.value = 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <VCard class="text-center text-sm-start mb-2"> -->
|
||||
<VRow no-gutters>
|
||||
<VCol>
|
||||
<div v-if="treatmentPlan">
|
||||
</div>
|
||||
|
||||
<VExpansionPanels v-model="panel" bg="rgb(var(--v-theme-yellow))">
|
||||
<VExpansionPanel @click.native.stop="togglePanel(0)" :disabled="true">
|
||||
<VExpansionPanelTitle variant=" tonal" color="secondary">
|
||||
<span class="font-color"><b>Lab Kit with a Virtual Provider Consultation. </b> <br><br>
|
||||
<p>Order# {{ props.orderid }}</p>
|
||||
<p>Appiontment: {{ date }} {{ props.time }} <br>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
</VExpansionPanelTitle collapse-icon="mdi-chevron-right" expand-icon="mdi-chevron-down">
|
||||
<VExpansionPanelText class="px-0 py-0">
|
||||
<!-- <VCardText class="pt-0 px-0" variant=" tonal" color="white"
|
||||
style="background-color: rgb(var(--v-theme-yellow)); padding-left:0">
|
||||
<span class="font-color"><b>Lab Kit with a Virtual Provider Consultation. </b>
|
||||
<p>{{ date }} Status: InProcess <br>
|
||||
</p>
|
||||
<p>Test Kit Tracking : <Routerview to="/"> To you</Routerview>
|
||||
|
||||
</p>
|
||||
</span>
|
||||
</VCardText> -->
|
||||
<VCardText>
|
||||
|
||||
<VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
|
||||
<!-- SECTION Timeline Item: Flight -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
||||
<span class="app-timeline-title">
|
||||
<b>Medical History Form Completed</b><br><br>
|
||||
</span>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- !SECTION -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Online Consultation Scheduled</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<!-- SECTION Timeline Item: Interview Schedule -->
|
||||
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
||||
<template #icon v-if="eClinicSchedule">
|
||||
3
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>eClinic Schedule is Confirmed for {{ date }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="justify-space-between align-center flex-wrap" v-if="isMeetingEnd">
|
||||
<!-- 👉 Avatar & Personal Info -->
|
||||
<div class="align-center mt-2">
|
||||
<div class="d-flex flex-column">
|
||||
<p
|
||||
class="text-sm font-weight-medium text-high-emphasis mb-0 text-justify">
|
||||
Your virtual consultation with your HGH provider is set for
|
||||
<b>{{
|
||||
props.date }}, at {{ props.time }} , {{ props.timezone
|
||||
}}</b> On
|
||||
the appointment day, we will send you an
|
||||
email containing the link
|
||||
to join, along
|
||||
with useful tips for preparation. If you have any inquiries or
|
||||
need
|
||||
to reschedule, feel free
|
||||
to reach out via text at (223) 124-5533.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <RouterLink v-if="!isDisableMeeting" to="/queue">
|
||||
<VBtn class="mt-3" color="error">Go to Meeting
|
||||
</VBtn>
|
||||
</RouterLink> -->
|
||||
<RouterLink v-if="isMeetingEnable" to="/queue" target="_blank">
|
||||
<VBtn class="mt-3" color="rgb(var(--v-theme-yellow))">
|
||||
Go to Meeting
|
||||
</VBtn>
|
||||
</RouterLink>
|
||||
<span v-else>
|
||||
<VBtn class="mt-3" color="rgb(var(--v-theme-yellow))" disabled>Go to Meeting
|
||||
</VBtn>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem :dot-color="eClicnicAttentedColor" :color="eClicnicAttentedColor"
|
||||
icon="tabler-check" size="small">
|
||||
<template #icon v-if="eClicnicAttented">
|
||||
4
|
||||
</template>
|
||||
<!-- <template #icon>
|
||||
<VIcon size="20" icon="tabler-circle-check" color="error" />
|
||||
</template> -->
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>eClicnic Attented</b><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
5
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Medication Ordered</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
6
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Medication Shipped</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
||||
<template #icon>
|
||||
7
|
||||
</template>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
||||
<div class="app-timeline-title">
|
||||
<b>Medication Delivered</b>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
<!-- !SECTION -->
|
||||
</VTimeline>
|
||||
<VRow class="mt-4" v-if="props.showShipment">
|
||||
<VCol cols="12" md="8">
|
||||
<h3 class="mb-4">Treatment Plan</h3>
|
||||
<VDivider></VDivider>
|
||||
<h4 class="mt-4">Lab Kit</h4>
|
||||
</VCol>
|
||||
<VCol cols="12" md="4">
|
||||
<h3 class="mb-4">Shipment Address:</h3>
|
||||
<p>{{ props.showShipment }}</p>
|
||||
<RouterLink class="text-primary" to="/">
|
||||
Edit Address
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
</VExpansionPanels>
|
||||
|
||||
|
||||
|
||||
|
||||
</VCol>
|
||||
</VRow>
|
||||
<!-- </VCard> -->
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-timeline .v-timeline-divider__inner-dot {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
}
|
||||
|
||||
.font-color {
|
||||
color: rgb(var(--v-theme-yellow)) #32475cde;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title.bg-secondary {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text__wrapper {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title.v-expansion-panel-title--active {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span.v-expansion-panel-title__icon {
|
||||
color: rgb(var(--v-theme-yellow)) !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.v-expansion-panel {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.v-expansion-panel:hover {
|
||||
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.v-expansion-panel-title {
|
||||
padding: 15px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.v-expansion-panel-title.pt-0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// .v-expansion-panel-title:hover {
|
||||
// background-color: #f9f9f9;
|
||||
// color: #222;
|
||||
// }
|
||||
|
||||
.v-expansion-panel-title .mdi {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
transition: transform 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.v-expansion-panel-title.v-expansion-panel-title--active .mdi {
|
||||
transform: rotate(180deg);
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text {
|
||||
padding: 10px 15px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text .d-flex {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text .d-flex>div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text p {
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user