Fix event map view

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-11-04 18:17:30 +01:00
parent ad9d9d33bc
commit b745f34356
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
2 changed files with 83 additions and 86 deletions

View File

@ -1,9 +1,11 @@
<template> <template>
<div class="modal-card"> <div class="">
<header class="modal-card-head"> <div class="text-end">
<button type="button" class="delete" @click="$emit('close')" /> <button @click="emit('close')">
</header> <Close />
<div class="modal-card-body"> <span class="sr-only">{{ t("Close map") }}</span>
</button>
</div>
<section class="map"> <section class="map">
<map-leaflet <map-leaflet
v-if="physicalAddress?.geom" v-if="physicalAddress?.geom"
@ -14,63 +16,73 @@
}" }"
/> />
</section> </section>
<section class="columns is-centered map-footer"> <section class="flex flex-col items-center mt-4">
<div class="column is-half has-text-centered"> <p v-if="physicalAddress?.fullName" class="flex gap-2 text-xl font-bold">
<p class="address" v-if="physicalAddress?.fullName"> <MapMarker />
<i class="mdi mdi-map-marker"></i>
{{ physicalAddress.fullName }} {{ physicalAddress.fullName }}
</p> </p>
<p class="getting-there">{{ $t("Getting there") }}</p> <p class="mt-4">{{ t("Getting there") }}</p>
<div <div
class="buttons" class="flex gap-2"
v-if=" v-if="
addressLinkToRouteByCar || addressLinkToRouteByCar ||
addressLinkToRouteByBike || addressLinkToRouteByBike ||
addressLinkToRouteByFeet addressLinkToRouteByFeet
" "
> >
<a <o-button
class="button" tag="a"
target="_blank" target="_blank"
v-if="addressLinkToRouteByFeet" v-if="addressLinkToRouteByFeet"
:href="addressLinkToRouteByFeet" :href="addressLinkToRouteByFeet"
> >
<i class="mdi mdi-walk"></i <Walk />
></a> <span class="sr-only">{{ t("On foot") }}</span>
<a </o-button>
class="button" <o-button
tag="a"
target="_blank" target="_blank"
v-if="addressLinkToRouteByBike" v-if="addressLinkToRouteByBike"
:href="addressLinkToRouteByBike" :href="addressLinkToRouteByBike"
> >
<i class="mdi mdi-bike"></i <Bike />
></a> <span class="sr-only">{{ t("By bike") }}</span>
<a </o-button>
class="button" <o-button
tag="a"
target="_blank" target="_blank"
v-if="addressLinkToRouteByTransit" v-if="addressLinkToRouteByTransit"
:href="addressLinkToRouteByTransit" :href="addressLinkToRouteByTransit"
> >
<i class="mdi mdi-bus"></i <Bus />
></a> <span class="sr-only">{{ t("By transit") }}</span>
<a </o-button>
class="button" <o-button
tag="a"
target="_blank" target="_blank"
v-if="addressLinkToRouteByCar" v-if="addressLinkToRouteByCar"
:href="addressLinkToRouteByCar" :href="addressLinkToRouteByCar"
> >
<i class="mdi mdi-car"></i> <Car />
</a> <span class="sr-only">{{ t("By car") }}</span>
</div> </o-button>
</div> </div>
</section> </section>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Address, IAddress } from "@/types/address.model"; import { Address, IAddress } from "@/types/address.model";
import { RoutingTransportationType, RoutingType } from "@/types/enums"; import { RoutingTransportationType, RoutingType } from "@/types/enums";
import { computed, defineAsyncComponent } from "vue"; import { computed, defineAsyncComponent } from "vue";
import { useI18n } from "vue-i18n";
import Car from "vue-material-design-icons/Car.vue";
import Bike from "vue-material-design-icons/Bike.vue";
import Bus from "vue-material-design-icons/Bus.vue";
import Walk from "vue-material-design-icons/Walk.vue";
import MapMarker from "vue-material-design-icons/MapMarker.vue";
import Close from "vue-material-design-icons/Close.vue";
const { t } = useI18n({ useScope: "global" });
const RoutingParamType = { const RoutingParamType = {
[RoutingType.OPENSTREETMAP]: { [RoutingType.OPENSTREETMAP]: {
@ -96,6 +108,8 @@ const props = defineProps<{
routingType: RoutingType; routingType: RoutingType;
}>(); }>();
const emit = defineEmits(["close"]);
const physicalAddress = computed((): Address | null => { const physicalAddress = computed((): Address | null => {
if (!props.address) return null; if (!props.address) return null;
@ -150,25 +164,8 @@ const addressLinkToRouteByTransit = computed((): undefined | string => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *;
.modal-card-head {
justify-content: flex-end;
// button.delete {
// @include margin-right(1rem);
// }
}
section.map { section.map {
height: calc(100% - 8rem); height: 75vh;
width: calc(100% - 20px); width: 100%;
}
section.map-footer {
p.address {
margin: 1rem auto;
}
div.buttons {
justify-content: center;
}
} }
</style> </style>

View File

@ -205,11 +205,11 @@
full-screen full-screen
:can-cancel="['escape', 'outside']" :can-cancel="['escape', 'outside']"
> >
<template #default="props"> <template #default>
<event-map <event-map
:routingType="routingType ?? RoutingType.OPENSTREETMAP" :routingType="routingType ?? RoutingType.OPENSTREETMAP"
:address="event.physicalAddress" :address="event.physicalAddress"
@close="props.close" @close="showMap = false"
/> />
</template> </template>
</o-modal> </o-modal>