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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 238x 6x 4x 6x 78x 78x 78x 78x 78x 6x 6x 78x 6x 5x 4x 78x 78x | <template>
<div
aria-live="polite"
ref="summary"
>
<muc-callout
v-if="
selectedProvider &&
selectedDay &&
typeof selectedTimeslot === 'number' &&
selectedTimeslot > 0
"
type="info"
>
<template #content>
<div v-if="selectedProvider">
<h3>{{ t("location") }}</h3>
<p
:id="`provider-${selectedProvider.id}`"
class="m-teaser-contained-contact__summary"
>
{{ selectedProvider.name }}
<br />
<span v-if="detailIcon">
<br />
<svg
aria-hidden="true"
class="icon icon--before"
>
<use :xlink:href="`#${detailIcon}`"></use>
</svg>
{{ t(`appointmentTypes.${variantId}`) }}
</span>
<span v-else>
{{ selectedProvider.address.street }}
{{ selectedProvider.address.house_number }}
</span>
</p>
</div>
<div v-if="selectedDay">
<h3>{{ t("time") }}</h3>
<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
"
>
<h3>{{ t("hint") }}</h3>
<component
:is="infoForAppointmentContainsPTag ? 'div' : 'p'"
v-html="sanitizedInfoForAppointment"
/>
</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 { containsParagraphTag } from "@/utils/containsParagraphTag";
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
)
);
const variantId = computed<number | null>(() => {
const id = (props.selectedService as any)?.variantId;
return Number.isFinite(id) ? id : null;
});
const detailIcon = computed<string | null>(() => {
if (variantId.value === 2) return "icon-telephone";
if (variantId.value === 3) return "icon-video-camera";
return null;
});
const sanitizedInfoForAppointment = computed(() =>
sanitizeHtml(props.selectedProvider?.scope?.infoForAppointment)
);
const infoForAppointmentContainsPTag = computed(() =>
containsParagraphTag(sanitizedInfoForAppointment.value)
);
</script>
|