<template>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h5 class="title">
<em class="fas fa-map-marker-alt mr-3" />
{{ $t('location.details.vehicle_tab.position') }}
<em
class="fa fa-search search_icon"
@click="flyToBounds(item.lat, item.lng)"
/>
</h5>
<div class="row content_style">
<div
v-show="(isSearchByDriver || isSearchByCircuit) && item.vehicleName"
class="col-12"
>
<div>
<strong class="">{{
$t('location.details.vehicle_tab.vehicle')
}}</strong>
<div class="">
<p>{{ item.vehicleName }}</p>
</div>
</div>
</div>
<div class="col-12">
<strong class="">{{
$t('location.details.vehicle_tab.position')
}}</strong>
<p class="">
<span
v-show="
item.streetNumber ||
(item.address && item.address.streetAddress)
"
>
{{ item.address && item.address.streetNumber }}
{{ item.address && item.address.streetAddress }} <br
/></span>
{{ item.address && item.address.zipCode }}
{{ item.address && item.address.city }}
</p>
</div>
<div class="col-12">
<strong class="">{{
$t('location.details.vehicle_tab.speed')
}}</strong>
<p class="">{{ item.speed }} km/h</p>
</div>
<div class="col-12 d-flex align-items-end">
<div>
<strong class="">{{
$t('location.details.vehicle_tab.datetime')
}}</strong>
<p class="">
{{ item.date | datetime }}
</p>
</div>
</div>
</div>
</div>
</div>
<div v-show="item.driverId" class="row">
<div class="col-12">
<h5 class="title pt-2">
<em class="fas fa-user mr-3" />
{{ $t('location.details.vehicle_tab.driver_title') }}
</h5>
<div class="row content_style">
<div class="col-6">
<strong class="">{{
$t('location.details.vehicle_tab.driver_name')
}}</strong>
<p>{{ item.driverName }}</p>
<div v-show="item.driverCardNumber">
<strong class="">{{
$t('location.details.vehicle_tab.driver_card_number')
}}</strong>
<div class="">
<p>{{ item.driverCardNumber }}</p>
</div>
</div>
</div>
<div v-show="item.driverPhone" class="col-6">
<strong class="">{{
$t('location.details.vehicle_tab.driver_phone')
}}</strong>
<div class="">
<p>{{ item.driverPhone }}</p>
</div>
</div>
<div v-show="item.driverDate" class="col-12">
<strong class="">{{
$t('location.details.vehicle_tab.last_identification_date')
}}</strong>
<div class="">
<p>{{ item.driverDate | datetime }}</p>
</div>
</div>
</div>
</div>
</div>
<div v-show="item.driverChronoEnabled" class="row">
<div class="col-12">
<h5 class="title pt-2">
<em class="fas fa-leaf mr-3" />
{{ $t('location.details.vehicle_tab.chorno_title') }}
</h5>
<div class="row content_style">
<div class="col-6">
<strong class="">{{
$t('location.details.vehicle_tab.chorno_status')
}}</strong>
<div v-if="item.driverChronoStatus" class="">
<p>
<img v-if="false" src="./assets/chrono_work.svg" />
<ChronoIcon
v-if="item.driverChronoStatus"
:status="item.driverChronoStatus"
/>
<span
v-if="item.driverChronoStatus"
v-text="
$t(`location_module.chrono.${item.driverChronoStatus}`)
"
/>
</p>
</div>
<!--
<strong class="">Temps de pause restant</strong>
<div class="">
<p>{{ item.remainingPauseTime }}</p>
</div>
-->
</div>
<!--
<div class="col-6">
<strong class="">Temps de conduite</strong>
<div class="">
<p>{{ item.drivingTime }}</p>
</div>
</div>
-->
<div v-show="item.driverChronoDate" class="col-12">
<strong class="">{{
$t('location.details.vehicle_tab.chorno_datetime')
}}</strong>
<p>{{ item.driverChronoDate | datetime }}</p>
</div>
</div>
</div>
</div>
<div v-show="item.hasSensors" class="row">
<div class="col-12">
<!-- Infos to recover -->
<h5 class="title pt-2">
<em class="fas fa-signal mr-3" />
{{ $t('location.details.vehicle_tab.sensors_title') }}
</h5>
<SensorsInfos :item="item" />
</div>
</div>
</div>
</template>
<script>
import ChronoIcon from '@c/shared/ChronoIcon/ChronoIcon.vue'
import SensorsInfos from './SensorsInfos.vue'
/**
* Detailed item infos (Real-time)
*
* @TODO: Refactor/Rename to RealtimeDetails
*/
export default {
name: 'SubMenuVehicle',
components: {
ChronoIcon,
SensorsInfos,
},
props: {
item: {
type: Object,
default: () => ({}),
},
},
computed: {
isSearchByDriver() {
return this.item.type === 'driver'
},
isSearchByCircuit() {
return this.item.type === 'circuit'
},
},
mounted() {
this.$store.dispatch('app/changeLayout', {
right_menu: false,
})
},
methods: {
flyToBounds(lat, lng, zoom = 18) {
this.$mitt.emit('SIMPLICITI_MAP_FIT_TO_BOUNDS', [[lat, lng]])
},
},
}
</script>
<style lang="scss" scoped>
.search_icon {
position: absolute;
right: 15px;
cursor: pointer;
}
strong {
font: normal normal bold 11px/18px Open Sans;
letter-spacing: 0px;
color: var(--color-tundora);
}
p {
font: normal normal normal 12px/18px Open Sans;
letter-spacing: 0px;
color: var(--color-tundora);
margin-bottom: 5px;
}
</style>
Source