components/shared/MapToolbox/MapToolboxContent.vue

<template lang="pug">
.map-toolbox-panel-content
    .map-toolbox-panel-header
        .map-toolbox-panel-item-title {{$t(featureTitleI18nCode)}}


        .icon-wrapper(@click="toggleCircuitReferenceFixedWindow")
          Icon(
            v-if="selectedItem==='circuit_reference'"
            
            :icon="!isCircuitRefMouseInOutDelayPaused ? 'material-symbols:push-pin-outline':'material-symbols:push-pin'"  
            
            color="var(--color-main)" 
            v-b-tooltip.hover.viewport="$t(`reference_circuit.${isCircuitRefMouseInOutDelayPaused?'un':''}fixed_window`)"
            style="cursor:pointer"
            
            )

    .map-toolbox-panel-body
        NearbyVehiclesResult(v-if="isNearbyVehiclesResultActive")
        LocateAddressFormFeature(v-if="selectedItem==='forward'"
          v-show="!isNearbyVehiclesResultActive"
        )
        LocateAddressNatural(v-if="selectedItem==='forwardNatural'"
          v-show="!isNearbyVehiclesResultActive"
        )
        LocateAddressLatLng(v-if="selectedItem==='reverse'"
          v-show="!isNearbyVehiclesResultActive"
        )
        RoutingFeature(v-if="selectedItem==='routing'")
        ReferenceCircuitFeature(v-if="selectedItem==='circuit_reference'")
        MapPredefinedViewsFeature(v-if="selectedItem==='predefined_views'")
</template>
<script>
import LocateAddressFormFeature from '@c/shared/geocoding/LocateAddressFormFeature/LocateAddressFeature.vue'
import LocateAddressNatural from '@c/shared/geocoding/LocateAddressNatural.vue'
import LocateAddressLatLng from '@c/shared/geocoding/LocateAddressLatLng.vue'
import RoutingFeature from '@c/shared/geocoding/RoutingFeature/RoutingFeature.vue'
import colors from '@/styles/colors'
import ReferenceCircuitFeature from '@/components/reference-circuit/ReferenceCircuitFeature.vue'
import { Icon } from '@iconify/vue2'
import MapPredefinedViewsFeature from '@/components/map_predefined_views/MapPredefinedViewsFeature.vue'
import NearbyVehiclesResult from '@/components/nearby_vehicles/NearbyVehiclesResult.vue'
import { useNearbyVehicles } from '@/components/nearby_vehicles/NearbyVehiclesFeature.vue'

const { isMapRequired: isNearbyVehiclesResultActive } = useNearbyVehicles()

/**
 *  Content pane for map toolbox
 */
export default {
  name: 'MapToolboxContent',
  components: {
    LocateAddressFormFeature,
    LocateAddressNatural,
    LocateAddressLatLng,
    RoutingFeature,
    ReferenceCircuitFeature,
    Icon,
    MapPredefinedViewsFeature,
    NearbyVehiclesResult,
  },
  provide() {
    let vm = this
    return {
      setMapToolboxContentMaxWidth(value) {
        vm.contentMaxWidth = value
      },
    }
  },
  inject: ['mapToolboxContext'],
  props: {
    selectedItem: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      contentMaxWidth: '465px',
      isCircuitRefMouseInOutDelayPaused:
        this.mapToolboxContext.isMouseInOutDelayPaused,
    }
  },
  computed: {
    isNearbyVehiclesResultActive: () => isNearbyVehiclesResultActive.value,
    colors: () => colors,
    featureTitleI18nCode() {
      let i18nCodes = {
        forward: 'geocoding.tool_title.locate_address',
        forwardNatural: 'geocoding.tool_title.locate_address_natural',
        reverse: 'geocoding.tool_title.locate_address_latlng',
        routing: 'geocoding.tool_title.routing',
        predefined_views: 'geocoding.tool_title.predefined_views',
        circuit_reference: 'reference_circuit.title',
      }
      return (
        i18nCodes[this.selectedItem] ||
        `i18n_code_for_${(this.selectedItem || '').toLowerCase()}`
      )
      /*isCircuitRefMouseInOutDelayPaused() {
      return this.mapToolboxContext.isMouseInOutDelayPaused
    },*/
    },
  },
  methods: {
    /**
     * Pause/Resume the behaviour of reducing the window automatically
     */
    toggleCircuitReferenceFixedWindow() {
      this.mapToolboxContext.toogleMouseInOutDelayPauseResume()
      this.isCircuitRefMouseInOutDelayPaused =
        this.mapToolboxContext.isMouseInOutDelayPaused
    },
  },
}
</script>
<style lang="scss" scoped>
.map-toolbox-panel-content {
  width: 100%;
  max-width: v-bind(contentMaxWidth);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 999;
  box-shadow: 0px 2px 3px #0000005c;
  border-radius: 0px 0px 10px 10px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
  overflow-y: auto;
  max-height: calc(70vh);
}
.map-toolbox-panel-close {
  cursor: pointer;
  padding: 5px;
  color: var(--color-denim);
}
.map-toolbox-panel-item-title {
  font: normal normal bold 1rem Open Sans;
  letter-spacing: 0px;
  color: var(--color-main);
  padding-right: 50px;
}
.map-toolbox-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
}
.map-toolbox-panel-body {
  width: 100%;
}
</style>