import WithRender from "./marker-info.vue" ; import Vue from "vue" ; import { Component , Prop } from "vue-property-decorator" ; import { FindOnMapResult , ID , Marker } from "facilmap-types" ; import { IdType } from "../../utils/utils" ; import { moveMarker } from "../../utils/draw" ; import { Client , InjectClient , InjectContext , InjectMapComponents , InjectMapContext } from "../../utils/decorators" ; import { showErrorToast } from "../../utils/toasts" ; import EditMarker from "../edit-marker/edit-marker" ; import { MapComponents , MapContext } from "../leaflet-map/leaflet-map" ; import "./marker-info.scss" ; import { flyTo , getZoomDestinationForMarker } from "../../utils/zoom" ; import Icon from "../ui/icon/icon" ; import StringMap from "../../utils/string-map" ; import { Context } from "../facilmap/facilmap" ; import Coordinates from "../ui/coordinates/coordinates" ; @ WithRender @ Component ( { components : { Coordinates , EditMarker , Icon } } ) export default class MarkerInfo extends Vue { @ InjectContext ( ) context ! : Context ; @ InjectClient ( ) client ! : Client ; @ InjectMapContext ( ) mapContext ! : MapContext ; @ InjectMapComponents ( ) mapComponents ! : MapComponents ; @ Prop ( { type : IdType , required : true } ) markerId ! : ID ; @ Prop ( { type : Boolean , default : false } ) showBackButton ! : boolean ; isDeleting = false ; get marker ( ) : Marker < StringMap > | undefined { return this . client . markers [ this . markerId ] ; } move ( ) { moveMarker ( this . markerId , this , this . client , this . mapComponents ) ; } async deleteMarker ( ) { this . $bvToast . hide ( `fm${ this . context . id }-marker-info-delete` ) ; if ( ! this . marker || ! await this . $bvModal . msgBoxConfirm ( `Do you really want to remove the marker “${ this . marker . name }”?` ) ) return ; this . isDeleting = true ; try { await this . client . deleteMarker ( { id : this . markerId } ) ; } catch ( err ) { showErrorToast ( this , `fm${ this . context . id }-marker-info-delete` , "Error deleting marker" , err ) ; } finally { this . isDeleting = false ; } } zoomToMarker ( ) { if ( this . marker ) flyTo ( this . mapComponents . map , getZoomDestinationForMarker ( this . marker ) ) ; } useAs ( event ) { if ( ! this . marker ) return ; const markerSuggestion = { ... this . marker , kind : "marker" , similarity : 1 } ; this . mapContext . $emit ( event , this . marker . name , [ ] , [ markerSuggestion ] , markerSuggestion ) ; this . mapContext . $emit ( "fm-search-box-show-tab" , `fm${ this . context . id }-route-form-tab` ) ; } useAsFrom ( ) { this . useAs ( "fm-route-set-from" ) ; } useAsVia ( ) { this . useAs ( "fm-route-add-via" ) ; } useAsTo ( ) { this . useAs ( "fm-route-set-to" ) ; } }