import Vue from "vue" ; import { Component , Prop , Watch } from "vue-property-decorator" ; import WithRender from "./route-mode.vue" ; import { RouteMode as RouteModeType } from "facilmap-types" ; import { DecodedRouteMode , decodeRouteMode , encodeRouteMode } from "facilmap-utils" ; import Icon from "../icon/icon" ; import "./route-mode.scss" ; type Mode = Exclude < DecodedRouteMode [ 'mode' ] , 'track' > ; type Type = DecodedRouteMode [ 'type' ] ; const constants = { modes : [ "car" , "bicycle" , "pedestrian" , "" ] , modeIcon : { car : "car-alt" , bicycle : "biking" , pedestrian : "walking" , "" : "slash" } , modeAlt : { car : "Car" , bicycle : "Bicycle" , pedestrian : "Foot" , "" : "Straight" } , modeTitle : { car : "by car" , bicycle : "by bicycle" , pedestrian : "on foot" , "" : "in a straight line" } , types : { car : [ "" , "hgv" ] , bicycle : [ "" , "road" , "mountain" , "electric" ] , pedestrian : [ "" , "hiking" , "wheelchair" ] , "" : [ "" ] } , typeText : { car : { "" : "Car" , "hgv" : "HGV" } , bicycle : { "" : "Bicycle" , road : "Road bike" , mountain : "Mountain bike" , electric : "Electric bike" } , pedestrian : { "" : "Walking" , hiking : "Hiking" , wheelchair : "Wheelchair" } , "" : { "" : "Straight line" } } , preferences : [ "fastest" , "shortest" ] , preferenceText : { fastest : "Fastest" , shortest : "Shortest" } , avoid : [ "highways" , "tollways" , "ferries" , "fords" , "steps" ] , avoidAllowed : { highways : ( mode ) => ( mode == "car" ) , tollways : ( mode ) => ( mode == "car" ) , ferries : ( mode ) => ( ! ! mode ) , fords : ( mode , type ) => ( mode == "bicycle" || ( mode == "pedestrian" && type != "wheelchair" ) ) , steps : ( mode ) => ( mode == "bicycle" || mode == "pedestrian" ) } , avoidText : { highways : "highways" , tollways : "toll roads" , ferries : "ferries" , fords : "fords" , steps : "steps" } } ; @ WithRender @ Component ( { components : { Icon } } ) export default class RouteMode extends Vue { constants = constants ; @ Prop ( { type : String } ) value ? : RouteModeType ; @ Prop ( { type : Number } ) tabindex ? : number ; @ Prop ( { type : Boolean } ) disabled ? : boolean ; @ Prop ( { type : String , default : "top" } ) tooltipPlacement ! : string ; decodedMode : DecodedRouteMode = null as any ; created ( ) { this . decodedMode = decodeRouteMode ( this . value ?? "" ) ; } @ Watch ( "value" ) handleValueChange ( newMode ) { this . decodedMode = decodeRouteMode ( newMode ?? "" ) ; } @ Watch ( "decodedMode" , { deep : true } ) handleModeChange ( newMode , oldMode ) { if ( oldMode != null ) this . $emit ( "input" , encodeRouteMode ( newMode ) ) ; } get types ( ) : Array < [ Mode , Type ] > { return ( Object . keys ( constants . types ) as Mode [ ] ) . map ( ( mode ) => constants . types [ mode ] . map ( ( type ) => ( [ mode , type ] as [ Mode , Type ] ) ) ) . flat ( ) ; } isTypeActive ( mode , type ) { return ( ! mode && ! this . decodedMode . mode || mode == this . decodedMode . mode ) && ( ! type && ! this . decodedMode . type || type == this . decodedMode . type ) ; } setMode ( mode , type ) { this . decodedMode . mode = mode as any ; this . decodedMode . type = type as any ; if ( this . decodedMode . avoid ) { for ( let i = 0 ; i < this . decodedMode . avoid . length ; i ++ ) { if ( ! constants . avoidAllowed [ this . decodedMode . avoid [ i ] ] ( this . decodedMode . mode , this . decodedMode . type ) ) this . decodedMode . avoid . splice ( i -- , 1 ) ; } } } toggleAvoid ( avoid ) { if ( ! this . decodedMode . avoid ) this . decodedMode . avoid = [ ] ; let idx = this . decodedMode . avoid . indexOf ( avoid ) ; if ( idx == - 1 ) this . decodedMode . avoid . push ( avoid ) ; else this . decodedMode . avoid . splice ( idx , 1 ) ; } }