@adactive/adsum-wayfindingcontrols-asia

Carousel component

Getting started

• Install this component using yarn add @adactive/adsum-wayfindingcontrols-asia

• Setting Redux Reducers typically located on your_project_folder/src/rootReducer.js

  • import the reducer :

  import { WayFindingControlsReducers } from '@adactive/adsum-wayfindingcontrols-asia';
  

  • add WayFindingControlsReducers on your root reducer, for example:

  const appState: AppStateType = {
      routing: routerReducer,
      map,
      loadingScreen,
      WayFindingControls: WayFindingControlsReducers
  };
  

• Setting Redux Actions in your Apps First thing to do is to import the action to file which you need the actions, for example app.js

  import { WayFindingControlsActions } from '@adactive/adsum-wayfindingcontrols-asia';
  

  There is 2 redux prop actions that this component have:

  • Action to go to Shop

  (WayFindingControlsActions.tmtt(poi, poiPlace))
  

  • Action to reset map and Wayfinding)

  (resetMapAndWayFinding(true, true, true, true);)
  

  there are 4 parameter in resetMapAndWayFinding

  • reset: needed to activate the resetMapAndWayFinding itself
  • resetMap: needed if you want to resetMap
  • resetMapOption: option to make the resetMap animated or not
  • resetWayfinding: needed if you want to clear label and wayfinding path

  Put these to actions on the mapDispatchToProps
  For Example:

  const mapDispatchToProps = (dispatch: *): MappedDispatchPropsType => ({
      tmtt: (poi, poiPlace) => {
          WayFindingControlsActions.tmtt(poi, poiPlace));
      },
      resetMapAndWayFinding: (reset, resetMap, resetMapAnimatedOption, resetWayfinding) => {
      dispatch(WayFindingControlsActions.resetMapAndWayFinding(
          reset,
          resetMap,
          resetMapAnimatedOption, 
          resetWayfinding
          ));
      },
  });
  

• Attach Wayfinding Component inside your Map Component for example:

  <Map
          backgroundImage={MapBackground}
          store={store}
          awm={this.awm}
          isOpen={this.isMapOpen()}
          className="app-map-container"
          onClick={this.onMapClicked}
          userObjectLabel={this.userObjectLabel}
          getDrawPathSectionOptions={this.getDrawPathSectionOptions}
          zoom={{
              min: 20,
              max: 600,
          }}
      >
          <WayFindingControls
              awm={this.awm}
              kioskPlace={currentFloorFull}
          />
          <div id="adsum-web-map-container" ref={this.awmContainerRef}>
              <MapControls awm={this.awm} />
          </div>
  </Map>
  

###Props

    **This WayFinding Required TWO PROPS which are awm and kioskPlace**

    awm is AdsumWebMap

    kioskPlace is 

    ```javascript
        getCurrentFloorFull() {
            return this.awm.defaultFloor;
        }
    ```

    **If you want to take the POI destination or destination floor name u can get it on:**
    set connect and mapStateToProps
    ```javascript
        import { connect } from 'react-redux';
        const mapStateToProps = (state: AppStateType): MappedStatePropsType => ({
            wayFindingControlsState: state.wayFindingControls,
        });
    ```
    then call it on 
    ```javascript
        const { wayFindingControlsState } = this.props;
        {wayFindingControlsState
                && wayFindingControlsState.placeDestination 
                && wayFindingControlsState.placeDestination.name
                && `Your Destination is at 
                ${wayFindingControlsState.placeDestination.name.replace('_', ' ')}`}
    ```
    or get the POI destination
    ```javascript
        const { wayFindingControlsState } = this.props;
        wayFindingControlsState.destination[0]
    ```

# Props Detail
 
```javascript
    type OwnPropsType = {|
    //props needed when call this component
    awm: *,
    kioskPlace: object,
    //optional props
    destinationLabelText: string,
    icLabelText: string,
|};

static defaultProps = {
        destinationLabelText: "You reached ",
        icLabelText: "Head ",
    }

***You can Edit sentence to use

Copy component inside your project src folder

Less only

`npx @adactive/adsum-wayfindingcontrols copy --less-only`

Full copy

`npx @adactive/adsum-wayfindingcontrols copy`