fffff carmarkers

index.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import isEmpty from 'lodash/isEmpty';
import noop from 'lodash/noop';
import moment from 'moment';
import { INACTIVE_TIME_SEC, MOSCOW_TIMEZONE } from 'inner-constants';
import { dateTimeToUtcTimestamp } from 'helper';
import uiModel from 'models/ui';
import { getCarsFilter } from 'models/user/selectors';
import Car from '../Car';
import {getCarsList} from "../../../../models/cars/actions";

class CarMarkers extends Component {
  static propTypes = {
    activeCarId: PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.string,
    ]),
    allowedIds: PropTypes.arrayOf(PropTypes.string),
    carClasses: PropTypes.shape({}),
    carMarkers: PropTypes.shape({}),
    cars: PropTypes.shape({}),
    carsLoading: PropTypes.bool,
    carsPoints: PropTypes.shape({}),
    fade: PropTypes.bool,
    ids: PropTypes.arrayOf(PropTypes.string),
    infoFilters: PropTypes.arrayOf(PropTypes.shape({})),
    isMoving: PropTypes.bool,
    setActiveCar: PropTypes.func,
    showInactive: PropTypes.bool,
    showNames: PropTypes.bool,
    timeZone: PropTypes.string,
  };

  static defaultProps = {
    activeCarId: 0,
    allowedIds: [],
    carClasses: {},
    carMarkers: {},
    cars: {},
    carsLoading: false,
    carsPoints: {},
    fade: false,
    ids: [],
    infoFilters: [],
    isMoving: false,
    setActiveCar: noop,
    showInactive: true,
    showNames: true,
    timeZone: MOSCOW_TIMEZONE,
  };

  componentDidMount() {
    const {
      getCarsList,
      infoFilters,
      listFilter,
      listPage,
      listSort,
      carsLoading,
      ids,
    } = this.props;

    if (!ids.length && !carsLoading) {
      getCarsList(listFilter, listSort, listPage, infoFilters);
    }
  }

  componentWillReceiveProps(nextProps) {
    this.nowTime = dateTimeToUtcTimestamp(moment.utc(), nextProps.timeZone);
  }

  setActiveCar = (e) => {
    const { options } = e.target;

    if (options && options.id) {
      this.props.setActiveCar(options.id);
    }
  };

  nowTime = dateTimeToUtcTimestamp(moment.now(), this.props.timeZone);

  render() {
    const {
      activeCarId,
      allowedIds,
      carClasses,
      carMarkers,
      cars,
      carsPoints,
      fade,
      ids,
      infoFilters,
      isMoving,
      showInactive,
      showNames,
    } = this.props;

    return (
      <div>
        {ids.map((id) => {
          if (!carsPoints[id] || !cars[id]) {
            return null;
          }

          if (!isEmpty(infoFilters) && (allowedIds.indexOf(id) === -1)) {
            return null;
          }

          const isActive = this.nowTime - carsPoints[id].navtime < INACTIVE_TIME_SEC;

          if (!isActive && !showInactive && activeCarId !== id) {
            return null;
          }

          const carObjId = cars[id].obj_class_id ? cars[id].obj_class_id.id : false;
          const images = {};
          if (carObjId && carClasses[carObjId] && carMarkers[carClasses[carObjId].marker_id]) {
            images.iconDefault = carMarkers[carClasses[carObjId].marker_id].regular;
            images.iconActive = carMarkers[carClasses[carObjId].marker_id].selected;
            images.iconInactive = carMarkers[carClasses[carObjId].marker_id].inactive;
          }

          return (
            <Car
              key={id}
              id={id}
              isSelectedCar={activeCarId === id}
              isActive={isActive}
              point={carsPoints[id]}
              number={cars[id].name}
              disableMove={isMoving}
              direction={carsPoints[id].course}
              onClick={this.setActiveCar}
              hideNumber={!showNames}
              opacity={fade ? 0.4 : 1}
              {...images}
            />
          );
        })}
      </div>
    );
  }
}

const mapStateToProps = ({ cars, dictionaries, ui, user }) => ({
  activeCarId: uiModel.selectors.get(ui, `car.active`),
  allowedIds: cars.allowedIds,
  carClasses: dictionaries.objectClasses,
  carMarkers: dictionaries.objectMarkers,
  cars: cars.data,
  carsLoading: cars.loading,
  carsPoints: cars.points,
  ids: cars.ids,
  infoFilters: getCarsFilter(user),
  listFilter: uiModel.selectors.get(ui, `carList.filters`),
  listPage: uiModel.selectors.get(ui, `carList.pageNum`),
  listSort: uiModel.selectors.get(ui, `carList.sort`),
  showInactive: user.settings.showInactive,
  showNames: user.settings.showNames,
  timeZone: user.currentUser.timeZone,
});

const mapDispatchToProps = dispatch => ({
  setActiveCar: carId => dispatch(routerRedux.push(`/map/${carId}`)),
  getCarsList: (filter, sorting, page, infoFilters) => {
    dispatch(getCarsList({ filter, infoFilters, page, sorting }));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(CarMarkers);