44107c0734
Some checks failed
Build and publish / build (push) Failing after 19s
Source moved verbatim from mp/shop/ on 2026-04-29; mp was the first concrete adapter consuming the libreshop toolkit. Builds and publishes git.librete.ch/libreshop/shop on every main / v* push via the standard .gitea/workflows/build.yml shared across libreshop components.
60 lines
2.0 KiB
Vue
60 lines
2.0 KiB
Vue
<template>
|
|
<div class="space-y-6">
|
|
<!-- Address -->
|
|
<div v-if="showAddress" class="flex items-start gap-3">
|
|
<IconMapPin class="w-6 h-6 mt-1 text-gray-600 flex-shrink-0" />
|
|
<div>
|
|
<p class="font-semibold text-lg">{{ address.name }}</p>
|
|
<p>{{ address.street }}</p>
|
|
<p>{{ address.postalCode }} {{ address.city }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OpenStreetMap Embed -->
|
|
<div class="relative w-full aspect-video rounded-xl overflow-hidden shadow-lg">
|
|
<iframe
|
|
:src="mapUrl"
|
|
width="100%"
|
|
height="100%"
|
|
style="border: 0"
|
|
allowfullscreen=""
|
|
loading="lazy"
|
|
class="absolute inset-0"
|
|
></iframe>
|
|
</div>
|
|
|
|
<!-- Directions Link -->
|
|
<a :href="directionsUrl" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-gray-900 font-medium hover:underline">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Route planen
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import IconMapPin from "~/components/icons/IconMapPin.vue";
|
|
|
|
const props = defineProps<{
|
|
address: {
|
|
name: string;
|
|
street: string;
|
|
postalCode: string;
|
|
city: string;
|
|
};
|
|
showAddress?: boolean;
|
|
}>();
|
|
|
|
// OpenStreetMap embed — hardcoded coordinates for Rotenbergstraße 39, 70190 Stuttgart
|
|
const lat = 48.7862;
|
|
const lon = 9.2;
|
|
const bbox = `${lon - 0.005},${lat - 0.0025},${lon + 0.005},${lat + 0.0025}`;
|
|
|
|
const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat},${lon}`;
|
|
|
|
const encodedAddress = computed(() => encodeURIComponent(`${props.address.street}, ${props.address.postalCode} ${props.address.city}`));
|
|
const directionsUrl = computed(() => `https://www.openstreetmap.org/directions?to=${lat},${lon}#map=16/${lat}/${lon}`);
|
|
</script>
|