55 lines
1.9 KiB
Vue
55 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
checkInLat: number | null;
|
|
checkInLng: number | null;
|
|
checkOutLat: number | null;
|
|
checkOutLng: number | null;
|
|
}>();
|
|
|
|
const hasCoordinates = computed(() => props.checkInLat != null && props.checkInLng != null);
|
|
|
|
const checkInSrc = computed(() => {
|
|
if (props.checkInLat == null || props.checkInLng == null) {
|
|
return '';
|
|
}
|
|
|
|
return `https://www.google.com/maps?q=${props.checkInLat},${props.checkInLng}&z=18&t=k&output=embed`;
|
|
});
|
|
|
|
const checkOutSrc = computed(() => {
|
|
if (props.checkOutLat == null || props.checkOutLng == null) {
|
|
return '';
|
|
}
|
|
|
|
return `https://www.google.com/maps?q=${props.checkOutLat},${props.checkOutLng}&z=18&t=k&output=embed`;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="hasCoordinates" class="space-y-3">
|
|
<p class="text-muted-foreground text-sm">
|
|
Lokasi Presensi
|
|
</p>
|
|
|
|
<!-- Check-in map -->
|
|
<div class="space-y-1.5">
|
|
<p class="text-xs font-semibold text-emerald-600">Masuk</p>
|
|
<div class="relative w-full overflow-hidden rounded-lg" style="padding-top: 56.25%">
|
|
<iframe :src="checkInSrc" class="absolute inset-0 h-full w-full" style="border: 0" allowfullscreen
|
|
loading="lazy" referrerpolicy="no-referrer-when-downgrade" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check-out map -->
|
|
<div v-if="checkOutLat != null && checkOutLng != null" class="space-y-1.5">
|
|
<p class="text-xs font-semibold text-destructive">Pulang</p>
|
|
<div class="relative w-full overflow-hidden rounded-lg" style="padding-top: 56.25%">
|
|
<iframe :src="checkOutSrc" class="absolute inset-0 h-full w-full" style="border: 0" allowfullscreen
|
|
loading="lazy" referrerpolicy="no-referrer-when-downgrade" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|