Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 1x | <template>
<div
ref="summary"
tabindex="0"
>
<muc-callout
v-if="
selectedProvider &&
selectedDay &&
typeof selectedTimeslot === 'number' &&
selectedTimeslot > 0
"
type="info"
>
<template #content>
<div v-if="selectedProvider">
<b>{{ t("location") }}</b>
<p class="m-teaser-contained-contact__summary">
{{ selectedProvider.name }}
<br />
{{ selectedProvider.address.street }}
{{ selectedProvider.address.house_number }}
</p>
</div>
<div v-if="selectedDay">
<b>{{ t("time") }}</b>
<br />
<p class="m-teaser-contained-contact__detail">
{{ formatDayFromDate(selectedDay) }},
{{ formatTimeFromUnix(selectedTimeslot) }}
{{ t("clock") }}
<br />
{{ t("estimatedDuration") }} {{ localEstimatedDuration }}
{{ t("minutes") }}
</p>
</div>
<div
v-if="
selectedProvider.scope && selectedProvider.scope.infoForAppointment
"
>
<b>{{ t("hint") }}</b>
<br />
<div
v-html="sanitizeHtml(selectedProvider.scope.infoForAppointment)"
></div>
</div>
</template>
<template #header>{{ t("selectedAppointment") }}</template>
</muc-callout>
</div>
</template>
<script setup lang="ts">
import type { OfficeImpl } from "@/types/OfficeImpl";
import { MucCallout } from "@muenchen/muc-patternlab-vue";
import { computed, ref } from "vue";
// Calculate duration locally
import { calculateEstimatedDuration } from "@/utils/calculateEstimatedDuration";
import {
formatDayFromDate,
formatTimeFromUnix,
} from "@/utils/formatAppointmentDateTime";
import { sanitizeHtml } from "@/utils/sanitizeHtml";
const props = defineProps<{
t: (key: string) => string;
selectedProvider: OfficeImpl | null | undefined;
selectedDay: Date | undefined;
selectedTimeslot: number;
selectedService: any;
}>();
const summary = ref<HTMLElement | null>(null);
defineExpose({
summary,
});
const localEstimatedDuration = computed(() =>
calculateEstimatedDuration(
props.selectedService,
(props.selectedProvider ?? undefined) as OfficeImpl | undefined
)
);
</script>
|