66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
const longitude = defineModel<string>('longitude');
|
|
const latitude = defineModel<string>('latitude');
|
|
|
|
function getLocation() {
|
|
navigator.geolocation.getCurrentPosition((position) => {
|
|
longitude.value = position.coords.longitude.toString();
|
|
latitude.value = position.coords.latitude.toString();
|
|
});
|
|
}
|
|
|
|
defineProps<{
|
|
title?: string;
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly: boolean;
|
|
separator?: boolean;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
|
|
<div class="col-9 q-mt-lg bordered rounded row no-padding">
|
|
<div class="col-12 q-pl-md q-py-sm app-text-muted">location</div>
|
|
|
|
<div v-if="!!longitude && !!latitude" class="col-12 flex flex-center">
|
|
<iframe
|
|
:src="`https://maps.google.com/maps?q=${latitude}, ${longitude}&z=15&output=embed`"
|
|
width="100%"
|
|
frameborder="0"
|
|
style="border: 0"
|
|
></iframe>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="col-12 flex flex-center"
|
|
style="
|
|
height: 100px;
|
|
background-image: url(/map.png);
|
|
background-position: center center;
|
|
background-size: 1500px 850px;
|
|
"
|
|
>
|
|
<q-btn
|
|
:text-color="$q.dark.isActive ? 'black' : 'white'"
|
|
style="
|
|
background: var(--blue-5);
|
|
color: var(--blue-0);
|
|
font-size: 12px;
|
|
width: 150px;
|
|
"
|
|
unelevated
|
|
rounded
|
|
:label="$t('formDialogBtnLocation')"
|
|
@click="getLocation()"
|
|
id="btn-get-location"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<q-separator
|
|
v-if="separator"
|
|
class="col-12 q-mt-xl q-mb-md"
|
|
style="padding-block: 0.5px"
|
|
/>
|
|
</template>
|