Thomas Citharel
124
js/src/components/Address/AddressInfo.vue
Normal file
124
js/src/components/Address/AddressInfo.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<address>
|
||||
<b-icon
|
||||
v-if="showIcon"
|
||||
:icon="address.poiInfos.poiIcon.icon"
|
||||
size="is-medium"
|
||||
class="icon"
|
||||
/>
|
||||
<p>
|
||||
<span
|
||||
class="addressDescription"
|
||||
:title="address.poiInfos.name"
|
||||
v-if="address.poiInfos.name"
|
||||
>
|
||||
{{ address.poiInfos.name }}
|
||||
</span>
|
||||
<br v-if="address.poiInfos.name" />
|
||||
<span class="has-text-grey-dark">
|
||||
{{ address.poiInfos.alternativeName }}
|
||||
</span>
|
||||
<br />
|
||||
<small
|
||||
v-if="
|
||||
userTimezoneDifferent &&
|
||||
longShortTimezoneNamesDifferent &&
|
||||
timezoneLongNameValid
|
||||
"
|
||||
class="has-text-grey-dark"
|
||||
>
|
||||
🌐
|
||||
{{
|
||||
$t("{timezoneLongName} ({timezoneShortName})", {
|
||||
timezoneLongName,
|
||||
timezoneShortName,
|
||||
})
|
||||
}}
|
||||
</small>
|
||||
<small v-else-if="userTimezoneDifferent" class="has-text-grey-dark">
|
||||
🌐 {{ timezoneShortName }}
|
||||
</small>
|
||||
</p>
|
||||
</address>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { IAddress } from "@/types/address.model";
|
||||
import { PropType } from "vue";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class AddressInfo extends Vue {
|
||||
@Prop({ required: true, type: Object as PropType<IAddress> })
|
||||
address!: IAddress;
|
||||
|
||||
@Prop({ required: false, default: false, type: Boolean }) showIcon!: boolean;
|
||||
@Prop({ required: false, default: false, type: Boolean })
|
||||
showTimezone!: boolean;
|
||||
@Prop({ required: false, type: String }) userTimezone!: string;
|
||||
|
||||
get userTimezoneDifferent(): boolean {
|
||||
return (
|
||||
this.userTimezone != undefined &&
|
||||
this.address.timezone != undefined &&
|
||||
this.userTimezone !== this.address.timezone
|
||||
);
|
||||
}
|
||||
|
||||
get longShortTimezoneNamesDifferent(): boolean {
|
||||
return (
|
||||
this.timezoneLongName != undefined &&
|
||||
this.timezoneShortName != undefined &&
|
||||
this.timezoneLongName !== this.timezoneShortName
|
||||
);
|
||||
}
|
||||
|
||||
get timezoneLongName(): string | undefined {
|
||||
return this.timezoneName("long");
|
||||
}
|
||||
|
||||
get timezoneShortName(): string | undefined {
|
||||
return this.timezoneName("short");
|
||||
}
|
||||
|
||||
get timezoneLongNameValid(): boolean {
|
||||
return (
|
||||
this.timezoneLongName != undefined && !this.timezoneLongName.match(/UTC/)
|
||||
);
|
||||
}
|
||||
|
||||
private timezoneName(format: "long" | "short"): string | undefined {
|
||||
return this.extractTimezone(
|
||||
new Intl.DateTimeFormat(undefined, {
|
||||
timeZoneName: format,
|
||||
timeZone: this.address.timezone,
|
||||
}).formatToParts()
|
||||
);
|
||||
}
|
||||
|
||||
private extractTimezone(
|
||||
parts: Intl.DateTimeFormatPart[]
|
||||
): string | undefined {
|
||||
return parts.find((part) => part.type === "timeZoneName")?.value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
address {
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
span.addressDescription {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1 0 auto;
|
||||
min-width: 100%;
|
||||
max-width: 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span.icon {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -18,64 +18,97 @@
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<span v-if="!endsOn">{{
|
||||
beginsOn | formatDateTimeString(showStartTime)
|
||||
}}</span>
|
||||
<span v-else-if="isSameDay() && showStartTime && showEndTime">
|
||||
{{
|
||||
<p v-if="!endsOn">
|
||||
<span>{{
|
||||
formatDateTimeString(beginsOn, timezoneToShow, showStartTime)
|
||||
}}</span>
|
||||
<br />
|
||||
<b-switch
|
||||
size="is-small"
|
||||
v-model="showLocalTimezone"
|
||||
v-if="differentFromUserTimezone"
|
||||
>
|
||||
{{ singleTimeZone }}
|
||||
</b-switch>
|
||||
</p>
|
||||
<p v-else-if="isSameDay() && showStartTime && showEndTime">
|
||||
<span>{{
|
||||
$t("On {date} from {startTime} to {endTime}", {
|
||||
date: formatDate(beginsOn),
|
||||
startTime: formatTime(beginsOn),
|
||||
endTime: formatTime(endsOn),
|
||||
startTime: formatTime(beginsOn, timezoneToShow),
|
||||
endTime: formatTime(endsOn, timezoneToShow),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<span v-else-if="isSameDay() && !showStartTime && showEndTime">
|
||||
{{
|
||||
$t("On {date} ending at {endTime}", {
|
||||
date: formatDate(beginsOn),
|
||||
endTime: formatTime(endsOn),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<span v-else-if="isSameDay() && showStartTime && !showEndTime">
|
||||
}}</span>
|
||||
<br />
|
||||
<b-switch
|
||||
size="is-small"
|
||||
v-model="showLocalTimezone"
|
||||
v-if="differentFromUserTimezone"
|
||||
>
|
||||
{{ singleTimeZone }}
|
||||
</b-switch>
|
||||
</p>
|
||||
<p v-else-if="isSameDay() && showStartTime && !showEndTime">
|
||||
{{
|
||||
$t("On {date} starting at {startTime}", {
|
||||
date: formatDate(beginsOn),
|
||||
startTime: formatTime(beginsOn),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<span v-else-if="isSameDay()">{{
|
||||
$t("On {date}", { date: formatDate(beginsOn) })
|
||||
}}</span>
|
||||
<span v-else-if="endsOn && showStartTime && showEndTime">
|
||||
{{
|
||||
$t("From the {startDate} at {startTime} to the {endDate} at {endTime}", {
|
||||
startDate: formatDate(beginsOn),
|
||||
startTime: formatTime(beginsOn),
|
||||
endDate: formatDate(endsOn),
|
||||
endTime: formatTime(endsOn),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<span v-else-if="endsOn && showStartTime">
|
||||
{{
|
||||
$t("From the {startDate} at {startTime} to the {endDate}", {
|
||||
startDate: formatDate(beginsOn),
|
||||
startTime: formatTime(beginsOn),
|
||||
endDate: formatDate(endsOn),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<span v-else-if="endsOn">
|
||||
</p>
|
||||
<p v-else-if="isSameDay()">
|
||||
{{ $t("On {date}", { date: formatDate(beginsOn) }) }}
|
||||
</p>
|
||||
<p v-else-if="endsOn && showStartTime && showEndTime">
|
||||
<span>
|
||||
{{
|
||||
$t(
|
||||
"From the {startDate} at {startTime} to the {endDate} at {endTime}",
|
||||
{
|
||||
startDate: formatDate(beginsOn),
|
||||
startTime: formatTime(beginsOn, timezoneToShow),
|
||||
endDate: formatDate(endsOn),
|
||||
endTime: formatTime(endsOn, timezoneToShow),
|
||||
}
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<br />
|
||||
<b-switch
|
||||
size="is-small"
|
||||
v-model="showLocalTimezone"
|
||||
v-if="differentFromUserTimezone"
|
||||
>
|
||||
{{ multipleTimeZones }}
|
||||
</b-switch>
|
||||
</p>
|
||||
<p v-else-if="endsOn && showStartTime">
|
||||
<span>
|
||||
{{
|
||||
$t("From the {startDate} at {startTime} to the {endDate}", {
|
||||
startDate: formatDate(beginsOn),
|
||||
startTime: formatTime(beginsOn, timezoneToShow),
|
||||
endDate: formatDate(endsOn),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<br />
|
||||
<b-switch
|
||||
size="is-small"
|
||||
v-model="showLocalTimezone"
|
||||
v-if="differentFromUserTimezone"
|
||||
>
|
||||
{{ singleTimeZone }}
|
||||
</b-switch>
|
||||
</p>
|
||||
<p v-else-if="endsOn">
|
||||
{{
|
||||
$t("From the {startDate} to the {endDate}", {
|
||||
startDate: formatDate(beginsOn),
|
||||
endDate: formatDate(endsOn),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</p>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
@@ -90,14 +123,47 @@ export default class EventFullDate extends Vue {
|
||||
|
||||
@Prop({ required: false, default: true }) showEndTime!: boolean;
|
||||
|
||||
@Prop({ required: false }) timezone!: string;
|
||||
|
||||
@Prop({ required: false }) userTimezone!: string;
|
||||
|
||||
showLocalTimezone = true;
|
||||
|
||||
get timezoneToShow(): string {
|
||||
if (this.showLocalTimezone) {
|
||||
return this.timezone;
|
||||
}
|
||||
return this.userActualTimezone;
|
||||
}
|
||||
|
||||
get userActualTimezone(): string {
|
||||
if (this.userTimezone) {
|
||||
return this.userTimezone;
|
||||
}
|
||||
return Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
}
|
||||
|
||||
formatDate(value: Date): string | undefined {
|
||||
if (!this.$options.filters) return undefined;
|
||||
return this.$options.filters.formatDateString(value);
|
||||
}
|
||||
|
||||
formatTime(value: Date): string | undefined {
|
||||
formatTime(value: Date, timezone: string): string | undefined {
|
||||
if (!this.$options.filters) return undefined;
|
||||
return this.$options.filters.formatTimeString(value);
|
||||
return this.$options.filters.formatTimeString(value, timezone || undefined);
|
||||
}
|
||||
|
||||
formatDateTimeString(
|
||||
value: Date,
|
||||
timezone: string,
|
||||
showTime: boolean
|
||||
): string | undefined {
|
||||
if (!this.$options.filters) return undefined;
|
||||
return this.$options.filters.formatDateTimeString(
|
||||
value,
|
||||
timezone,
|
||||
showTime
|
||||
);
|
||||
}
|
||||
|
||||
isSameDay(): boolean {
|
||||
@@ -106,5 +172,35 @@ export default class EventFullDate extends Vue {
|
||||
new Date(this.endsOn).toDateString();
|
||||
return this.endsOn !== undefined && sameDay;
|
||||
}
|
||||
|
||||
get differentFromUserTimezone(): boolean {
|
||||
return (
|
||||
!!this.timezone &&
|
||||
!!this.userActualTimezone &&
|
||||
this.timezone !== this.userActualTimezone
|
||||
);
|
||||
}
|
||||
|
||||
get singleTimeZone(): string {
|
||||
if (this.showLocalTimezone) {
|
||||
return this.$t("Local time ({timezone})", {
|
||||
timezone: this.timezoneToShow,
|
||||
}) as string;
|
||||
}
|
||||
return this.$t("Time in your timezone ({timezone})", {
|
||||
timezone: this.timezoneToShow,
|
||||
}) as string;
|
||||
}
|
||||
|
||||
get multipleTimeZones(): string {
|
||||
if (this.showLocalTimezone) {
|
||||
return this.$t("Local time ({timezone})", {
|
||||
timezone: this.timezoneToShow,
|
||||
}) as string;
|
||||
}
|
||||
return this.$t("Times in your timezone ({timezone})", {
|
||||
timezone: this.timezoneToShow,
|
||||
}) as string;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
175
js/src/components/Event/EventMap.vue
Normal file
175
js/src/components/Event/EventMap.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<button type="button" class="delete" @click="$emit('close')" />
|
||||
</header>
|
||||
<div class="modal-card-body">
|
||||
<section class="map">
|
||||
<map-leaflet
|
||||
:coords="physicalAddress.geom"
|
||||
:marker="{
|
||||
text: physicalAddress.fullName,
|
||||
icon: physicalAddress.poiInfos.poiIcon.icon,
|
||||
}"
|
||||
/>
|
||||
</section>
|
||||
<section class="columns is-centered map-footer">
|
||||
<div class="column is-half has-text-centered">
|
||||
<p class="address">
|
||||
<i class="mdi mdi-map-marker"></i>
|
||||
{{ physicalAddress.fullName }}
|
||||
</p>
|
||||
<p class="getting-there">{{ $t("Getting there") }}</p>
|
||||
<div
|
||||
class="buttons"
|
||||
v-if="
|
||||
addressLinkToRouteByCar ||
|
||||
addressLinkToRouteByBike ||
|
||||
addressLinkToRouteByFeet
|
||||
"
|
||||
>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByFeet"
|
||||
:href="addressLinkToRouteByFeet"
|
||||
>
|
||||
<i class="mdi mdi-walk"></i
|
||||
></a>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByBike"
|
||||
:href="addressLinkToRouteByBike"
|
||||
>
|
||||
<i class="mdi mdi-bike"></i
|
||||
></a>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByTransit"
|
||||
:href="addressLinkToRouteByTransit"
|
||||
>
|
||||
<i class="mdi mdi-bus"></i
|
||||
></a>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByCar"
|
||||
:href="addressLinkToRouteByCar"
|
||||
>
|
||||
<i class="mdi mdi-car"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Address, IAddress } from "@/types/address.model";
|
||||
import { RoutingTransportationType, RoutingType } from "@/types/enums";
|
||||
import { PropType } from "vue";
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
const RoutingParamType = {
|
||||
[RoutingType.OPENSTREETMAP]: {
|
||||
[RoutingTransportationType.FOOT]: "engine=fossgis_osrm_foot",
|
||||
[RoutingTransportationType.BIKE]: "engine=fossgis_osrm_bike",
|
||||
[RoutingTransportationType.TRANSIT]: null,
|
||||
[RoutingTransportationType.CAR]: "engine=fossgis_osrm_car",
|
||||
},
|
||||
[RoutingType.GOOGLE_MAPS]: {
|
||||
[RoutingTransportationType.FOOT]: "dirflg=w",
|
||||
[RoutingTransportationType.BIKE]: "dirflg=b",
|
||||
[RoutingTransportationType.TRANSIT]: "dirflg=r",
|
||||
[RoutingTransportationType.CAR]: "driving",
|
||||
},
|
||||
};
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
"map-leaflet": () =>
|
||||
import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
|
||||
},
|
||||
})
|
||||
export default class EventMap extends Vue {
|
||||
@Prop({ type: Object as PropType<IAddress> }) address!: IAddress;
|
||||
@Prop({ type: String }) routingType!: RoutingType;
|
||||
|
||||
get physicalAddress(): Address | null {
|
||||
if (!this.address) return null;
|
||||
|
||||
return new Address(this.address);
|
||||
}
|
||||
|
||||
makeNavigationPath(
|
||||
transportationType: RoutingTransportationType
|
||||
): string | undefined {
|
||||
const geometry = this.physicalAddress?.geom;
|
||||
if (geometry) {
|
||||
/**
|
||||
* build urls to routing map
|
||||
*/
|
||||
if (!RoutingParamType[this.routingType][transportationType]) {
|
||||
return;
|
||||
}
|
||||
|
||||
const urlGeometry = geometry.split(";").reverse().join(",");
|
||||
|
||||
switch (this.routingType) {
|
||||
case RoutingType.GOOGLE_MAPS:
|
||||
return `https://maps.google.com/?saddr=Current+Location&daddr=${urlGeometry}&${
|
||||
RoutingParamType[this.routingType][transportationType]
|
||||
}`;
|
||||
case RoutingType.OPENSTREETMAP:
|
||||
default: {
|
||||
const bboxX = geometry.split(";").reverse()[0];
|
||||
const bboxY = geometry.split(";").reverse()[1];
|
||||
return `https://www.openstreetmap.org/directions?from=&to=${urlGeometry}&${
|
||||
RoutingParamType[this.routingType][transportationType]
|
||||
}#map=14/${bboxX}/${bboxY}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get addressLinkToRouteByCar(): undefined | string {
|
||||
return this.makeNavigationPath(RoutingTransportationType.CAR);
|
||||
}
|
||||
|
||||
get addressLinkToRouteByBike(): undefined | string {
|
||||
return this.makeNavigationPath(RoutingTransportationType.BIKE);
|
||||
}
|
||||
|
||||
get addressLinkToRouteByFeet(): undefined | string {
|
||||
return this.makeNavigationPath(RoutingTransportationType.FOOT);
|
||||
}
|
||||
|
||||
get addressLinkToRouteByTransit(): undefined | string {
|
||||
return this.makeNavigationPath(RoutingTransportationType.TRANSIT);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.modal-card-head {
|
||||
justify-content: flex-end;
|
||||
button.delete {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
section.map {
|
||||
height: calc(100% - 8rem);
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
section.map-footer {
|
||||
p.address {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
div.buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -11,7 +11,7 @@
|
||||
<b-button
|
||||
type="is-text"
|
||||
class="map-show-button"
|
||||
@click="showMap = !showMap"
|
||||
@click="$emit('showMapModal', true)"
|
||||
v-if="physicalAddress.geom"
|
||||
>
|
||||
{{ $t("Show map") }}
|
||||
@@ -24,6 +24,8 @@
|
||||
:beginsOn="event.beginsOn"
|
||||
:show-start-time="event.options.showStartTime"
|
||||
:show-end-time="event.options.showEndTime"
|
||||
:timezone="event.options.timezone"
|
||||
:userTimezone="userTimezone"
|
||||
:endsOn="event.endsOn"
|
||||
/>
|
||||
</event-metadata-block>
|
||||
@@ -130,91 +132,12 @@
|
||||
>
|
||||
<span v-else>{{ extra.value }}</span>
|
||||
</event-metadata-block>
|
||||
<b-modal
|
||||
class="map-modal"
|
||||
v-if="physicalAddress && physicalAddress.geom"
|
||||
:active.sync="showMap"
|
||||
has-modal-card
|
||||
full-screen
|
||||
>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<button type="button" class="delete" @click="showMap = false" />
|
||||
</header>
|
||||
<div class="modal-card-body">
|
||||
<section class="map">
|
||||
<map-leaflet
|
||||
:coords="physicalAddress.geom"
|
||||
:marker="{
|
||||
text: physicalAddress.fullName,
|
||||
icon: physicalAddress.poiInfos.poiIcon.icon,
|
||||
}"
|
||||
/>
|
||||
</section>
|
||||
<section class="columns is-centered map-footer">
|
||||
<div class="column is-half has-text-centered">
|
||||
<p class="address">
|
||||
<i class="mdi mdi-map-marker"></i>
|
||||
{{ physicalAddress.fullName }}
|
||||
</p>
|
||||
<p class="getting-there">{{ $t("Getting there") }}</p>
|
||||
<div
|
||||
class="buttons"
|
||||
v-if="
|
||||
addressLinkToRouteByCar ||
|
||||
addressLinkToRouteByBike ||
|
||||
addressLinkToRouteByFeet
|
||||
"
|
||||
>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByFeet"
|
||||
:href="addressLinkToRouteByFeet"
|
||||
>
|
||||
<i class="mdi mdi-walk"></i
|
||||
></a>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByBike"
|
||||
:href="addressLinkToRouteByBike"
|
||||
>
|
||||
<i class="mdi mdi-bike"></i
|
||||
></a>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByTransit"
|
||||
:href="addressLinkToRouteByTransit"
|
||||
>
|
||||
<i class="mdi mdi-bus"></i
|
||||
></a>
|
||||
<a
|
||||
class="button"
|
||||
target="_blank"
|
||||
v-if="addressLinkToRouteByCar"
|
||||
:href="addressLinkToRouteByCar"
|
||||
>
|
||||
<i class="mdi mdi-car"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Address } from "@/types/address.model";
|
||||
import { IConfig } from "@/types/config.model";
|
||||
import {
|
||||
EventMetadataKeyType,
|
||||
EventMetadataType,
|
||||
RoutingTransportationType,
|
||||
RoutingType,
|
||||
} from "@/types/enums";
|
||||
import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
|
||||
import { IEvent } from "@/types/event.model";
|
||||
import { PropType } from "vue";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
@@ -224,11 +147,13 @@ import EventMetadataBlock from "./EventMetadataBlock.vue";
|
||||
import EventFullDate from "./EventFullDate.vue";
|
||||
import PopoverActorCard from "../Account/PopoverActorCard.vue";
|
||||
import ActorCard from "../../components/Account/ActorCard.vue";
|
||||
import AddressInfo from "../../components/Address/AddressInfo.vue";
|
||||
import {
|
||||
IEventMetadata,
|
||||
IEventMetadataDescription,
|
||||
} from "@/types/event-metadata";
|
||||
import { eventMetaDataList } from "../../services/EventMetadata";
|
||||
import { IUser } from "@/types/current-user.model";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
@@ -236,15 +161,14 @@ import { eventMetaDataList } from "../../services/EventMetadata";
|
||||
EventFullDate,
|
||||
PopoverActorCard,
|
||||
ActorCard,
|
||||
"map-leaflet": () =>
|
||||
import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
|
||||
AddressInfo,
|
||||
},
|
||||
})
|
||||
export default class EventMetadataSidebar extends Vue {
|
||||
@Prop({ type: Object as PropType<IEvent>, required: true }) event!: IEvent;
|
||||
@Prop({ type: Object as PropType<IConfig>, required: true }) config!: IConfig;
|
||||
|
||||
showMap = false;
|
||||
@Prop({ required: true }) user!: IUser | undefined;
|
||||
@Prop({ required: false, default: false }) showMap!: boolean;
|
||||
|
||||
RouteName = RouteName;
|
||||
|
||||
@@ -255,21 +179,6 @@ export default class EventMetadataSidebar extends Vue {
|
||||
EventMetadataType = EventMetadataType;
|
||||
EventMetadataKeyType = EventMetadataKeyType;
|
||||
|
||||
RoutingParamType = {
|
||||
[RoutingType.OPENSTREETMAP]: {
|
||||
[RoutingTransportationType.FOOT]: "engine=fossgis_osrm_foot",
|
||||
[RoutingTransportationType.BIKE]: "engine=fossgis_osrm_bike",
|
||||
[RoutingTransportationType.TRANSIT]: null,
|
||||
[RoutingTransportationType.CAR]: "engine=fossgis_osrm_car",
|
||||
},
|
||||
[RoutingType.GOOGLE_MAPS]: {
|
||||
[RoutingTransportationType.FOOT]: "dirflg=w",
|
||||
[RoutingTransportationType.BIKE]: "dirflg=b",
|
||||
[RoutingTransportationType.TRANSIT]: "dirflg=r",
|
||||
[RoutingTransportationType.CAR]: "driving",
|
||||
},
|
||||
};
|
||||
|
||||
get physicalAddress(): Address | null {
|
||||
if (!this.event.physicalAddress) return null;
|
||||
|
||||
@@ -286,50 +195,6 @@ export default class EventMetadataSidebar extends Vue {
|
||||
});
|
||||
}
|
||||
|
||||
makeNavigationPath(
|
||||
transportationType: RoutingTransportationType
|
||||
): string | undefined {
|
||||
const geometry = this.physicalAddress?.geom;
|
||||
if (geometry) {
|
||||
const routingType = this.config.maps.routing.type;
|
||||
/**
|
||||
* build urls to routing map
|
||||
*/
|
||||
if (!this.RoutingParamType[routingType][transportationType]) {
|
||||
return;
|
||||
}
|
||||
|
||||
const urlGeometry = geometry.split(";").reverse().join(",");
|
||||
|
||||
switch (routingType) {
|
||||
case RoutingType.GOOGLE_MAPS:
|
||||
return `https://maps.google.com/?saddr=Current+Location&daddr=${urlGeometry}&${this.RoutingParamType[routingType][transportationType]}`;
|
||||
case RoutingType.OPENSTREETMAP:
|
||||
default: {
|
||||
const bboxX = geometry.split(";").reverse()[0];
|
||||
const bboxY = geometry.split(";").reverse()[1];
|
||||
return `https://www.openstreetmap.org/directions?from=&to=${urlGeometry}&${this.RoutingParamType[routingType][transportationType]}#map=14/${bboxX}/${bboxY}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get addressLinkToRouteByCar(): undefined | string {
|
||||
return this.makeNavigationPath(RoutingTransportationType.CAR);
|
||||
}
|
||||
|
||||
get addressLinkToRouteByBike(): undefined | string {
|
||||
return this.makeNavigationPath(RoutingTransportationType.BIKE);
|
||||
}
|
||||
|
||||
get addressLinkToRouteByFeet(): undefined | string {
|
||||
return this.makeNavigationPath(RoutingTransportationType.FOOT);
|
||||
}
|
||||
|
||||
get addressLinkToRouteByTransit(): undefined | string {
|
||||
return this.makeNavigationPath(RoutingTransportationType.TRANSIT);
|
||||
}
|
||||
|
||||
urlToHostname(url: string): string | null {
|
||||
try {
|
||||
return new URL(url).hostname;
|
||||
@@ -362,6 +227,10 @@ export default class EventMetadataSidebar extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get userTimezone(): string | undefined {
|
||||
return this.user?.settings?.timezone;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@@ -391,50 +260,6 @@ div.address-wrapper {
|
||||
.map-show-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
span.addressDescription {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1 0 auto;
|
||||
min-width: 100%;
|
||||
max-width: 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:not(.addressDescription) {
|
||||
flex: 1;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-modal {
|
||||
.modal-card-head {
|
||||
justify-content: flex-end;
|
||||
button.delete {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
section.map {
|
||||
height: calc(100% - 8rem);
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
section.map-footer {
|
||||
p.address {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
div.buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,72 +1,89 @@
|
||||
<template>
|
||||
<div class="address-autocomplete">
|
||||
<b-field
|
||||
:label-for="id"
|
||||
expanded
|
||||
:message="fieldErrors"
|
||||
:type="{ 'is-danger': fieldErrors.length }"
|
||||
>
|
||||
<template slot="label">
|
||||
{{ actualLabel }}
|
||||
<b-button
|
||||
v-if="canShowLocateMeButton && !gettingLocation"
|
||||
size="is-small"
|
||||
icon-right="map-marker"
|
||||
@click="locateMe"
|
||||
:title="$t('Use my location')"
|
||||
/>
|
||||
<span
|
||||
class="is-size-6 has-text-weight-normal"
|
||||
v-else-if="gettingLocation"
|
||||
>{{ $t("Getting location") }}</span
|
||||
>
|
||||
</template>
|
||||
<b-autocomplete
|
||||
:data="addressData"
|
||||
v-model="queryText"
|
||||
:placeholder="$t('e.g. 10 Rue Jangot')"
|
||||
field="fullName"
|
||||
:loading="isFetching"
|
||||
@typing="fetchAsyncData"
|
||||
icon="map-marker"
|
||||
<div class="address-autocomplete columns is-desktop">
|
||||
<div class="column">
|
||||
<b-field
|
||||
:label-for="id"
|
||||
expanded
|
||||
@select="updateSelected"
|
||||
v-bind="$attrs"
|
||||
:id="id"
|
||||
:message="fieldErrors"
|
||||
:type="{ 'is-danger': fieldErrors.length }"
|
||||
>
|
||||
<template #default="{ option }">
|
||||
<b-icon :icon="option.poiInfos.poiIcon.icon" />
|
||||
<b>{{ option.poiInfos.name }}</b
|
||||
><br />
|
||||
<small>{{ option.poiInfos.alternativeName }}</small>
|
||||
<template slot="label">
|
||||
{{ actualLabel }}
|
||||
<b-button
|
||||
v-if="canShowLocateMeButton && !gettingLocation"
|
||||
size="is-small"
|
||||
icon-right="map-marker"
|
||||
@click="locateMe"
|
||||
:title="$t('Use my location')"
|
||||
/>
|
||||
<span
|
||||
class="is-size-6 has-text-weight-normal"
|
||||
v-else-if="gettingLocation"
|
||||
>{{ $t("Getting location") }}</span
|
||||
>
|
||||
</template>
|
||||
<template slot="empty">
|
||||
<span v-if="isFetching">{{ $t("Searching…") }}</span>
|
||||
<div v-else-if="queryText.length >= 3" class="is-enabled">
|
||||
<span>{{ $t('No results for "{queryText}"', { queryText }) }}</span>
|
||||
<span>{{
|
||||
$t(
|
||||
"You can try another search term or drag and drop the marker on the map",
|
||||
{
|
||||
queryText,
|
||||
}
|
||||
)
|
||||
}}</span>
|
||||
<!-- <p class="control" @click="openNewAddressModal">-->
|
||||
<!-- <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
|
||||
<!-- </p>-->
|
||||
</div>
|
||||
</template>
|
||||
</b-autocomplete>
|
||||
<b-button
|
||||
:disabled="!queryText"
|
||||
@click="resetAddress"
|
||||
class="reset-area"
|
||||
icon-left="close"
|
||||
:title="$t('Clear address field')"
|
||||
/>
|
||||
</b-field>
|
||||
<div class="map" v-if="selected && selected.geom && selected.poiInfos">
|
||||
<b-autocomplete
|
||||
:data="addressData"
|
||||
v-model="queryText"
|
||||
:placeholder="$t('e.g. 10 Rue Jangot')"
|
||||
field="fullName"
|
||||
:loading="isFetching"
|
||||
@typing="fetchAsyncData"
|
||||
icon="map-marker"
|
||||
expanded
|
||||
@select="updateSelected"
|
||||
v-bind="$attrs"
|
||||
:id="id"
|
||||
>
|
||||
<template #default="{ option }">
|
||||
<b-icon :icon="option.poiInfos.poiIcon.icon" />
|
||||
<b>{{ option.poiInfos.name }}</b
|
||||
><br />
|
||||
<small>{{ option.poiInfos.alternativeName }}</small>
|
||||
</template>
|
||||
<template slot="empty">
|
||||
<span v-if="isFetching">{{ $t("Searching…") }}</span>
|
||||
<div v-else-if="queryText.length >= 3" class="is-enabled">
|
||||
<span>{{
|
||||
$t('No results for "{queryText}"', { queryText })
|
||||
}}</span>
|
||||
<span>{{
|
||||
$t(
|
||||
"You can try another search term or drag and drop the marker on the map",
|
||||
{
|
||||
queryText,
|
||||
}
|
||||
)
|
||||
}}</span>
|
||||
<!-- <p class="control" @click="openNewAddressModal">-->
|
||||
<!-- <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
|
||||
<!-- </p>-->
|
||||
</div>
|
||||
</template>
|
||||
</b-autocomplete>
|
||||
<b-button
|
||||
:disabled="!queryText"
|
||||
@click="resetAddress"
|
||||
class="reset-area"
|
||||
icon-left="close"
|
||||
:title="$t('Clear address field')"
|
||||
/>
|
||||
</b-field>
|
||||
<div class="card" v-if="selected.originId || selected.url">
|
||||
<div class="card-content">
|
||||
<address-info
|
||||
:address="selected"
|
||||
:show-icon="true"
|
||||
:show-timezone="true"
|
||||
:user-timezone="userTimezone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="map column"
|
||||
v-if="selected && selected.geom && selected.poiInfos"
|
||||
>
|
||||
<map-leaflet
|
||||
:coords="selected.geom"
|
||||
:marker="{
|
||||
@@ -126,14 +143,19 @@ import { Component, Prop, Watch, Mixins } from "vue-property-decorator";
|
||||
import { LatLng } from "leaflet";
|
||||
import { Address, IAddress } from "../../types/address.model";
|
||||
import AddressAutoCompleteMixin from "../../mixins/AddressAutoCompleteMixin";
|
||||
import AddressInfo from "../../components/Address/AddressInfo.vue";
|
||||
|
||||
@Component({
|
||||
inheritAttrs: false,
|
||||
components: {
|
||||
AddressInfo,
|
||||
},
|
||||
})
|
||||
export default class FullAddressAutoComplete extends Mixins(
|
||||
AddressAutoCompleteMixin
|
||||
) {
|
||||
@Prop({ required: false, default: "" }) label!: string;
|
||||
@Prop({ required: false }) userTimezone!: string;
|
||||
|
||||
addressModalActive = false;
|
||||
|
||||
|
||||
@@ -187,7 +187,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Watch } from "vue-property-decorator";
|
||||
import { Component, Ref, Vue, Watch } from "vue-property-decorator";
|
||||
import Logo from "@/components/Logo.vue";
|
||||
import { GraphQLError } from "graphql";
|
||||
import { loadLanguageAsync } from "@/utils/i18n";
|
||||
@@ -259,6 +259,13 @@ export default class NavBar extends Vue {
|
||||
|
||||
displayName = displayName;
|
||||
|
||||
@Ref("user-dropdown") userDropDown!: any;
|
||||
|
||||
toggleMenu(): void {
|
||||
console.debug("called toggleMenu");
|
||||
this.userDropDown.showMenu();
|
||||
}
|
||||
|
||||
@Watch("currentActor")
|
||||
async initializeListOfIdentities(): Promise<void> {
|
||||
if (!this.currentUser.isLoggedIn) return;
|
||||
|
||||
Reference in New Issue
Block a user