79 lines
2.5 KiB
Vue
79 lines
2.5 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;
|
|
checkInLocationTag: string | null;
|
|
checkOutLocationTag: string | null;
|
|
checkInAtFormatted: string;
|
|
checkOutAtFormatted: string | null;
|
|
attendanceDateFormatted: string;
|
|
employeeName: string | 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`;
|
|
});
|
|
|
|
function escapeHtml(value: string): string {
|
|
return value
|
|
.replaceAll('&', '&')
|
|
.replaceAll('<', '<')
|
|
.replaceAll('>', '>')
|
|
.replaceAll('"', '"')
|
|
.replaceAll("'", ''');
|
|
}
|
|
|
|
function buildLabel(
|
|
title: string,
|
|
color: string,
|
|
locationTag: string | null,
|
|
): string {
|
|
const lines: string[] = [];
|
|
lines.push(`<strong style="color:${color}">${title}</strong>`);
|
|
|
|
lines.push(`<span>Lokasi: ${escapeHtml(locationTag ?? '-')}</span>`);
|
|
|
|
return lines.join('<br>');
|
|
}
|
|
</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">
|
|
<div class="text-xs font-medium" v-html="buildLabel('Masuk', '#16a34a', checkInLocationTag)" />
|
|
<iframe :src="checkInSrc" class="h-56 w-full overflow-hidden rounded-lg" style="border: 0" allowfullscreen
|
|
loading="lazy" referrerpolicy="no-referrer-when-downgrade" />
|
|
</div>
|
|
|
|
<!-- Check-out map -->
|
|
<div v-if="checkOutLat != null && checkOutLng != null" class="space-y-1.5">
|
|
<div class="text-xs font-medium" v-html="buildLabel('Pulang', '#dc2626', checkOutLocationTag)" />
|
|
<iframe :src="checkOutSrc" class="h-56 w-full overflow-hidden rounded-lg" style="border: 0" allowfullscreen
|
|
loading="lazy" referrerpolicy="no-referrer-when-downgrade" />
|
|
</div>
|
|
</div>
|
|
</template>
|