Angular wrapper

Add HyperTrack visualization in an angular web-app, or create a new dashboard, easily.

To build a new dashboard from scratch follow this tutorial or get the final code here

Modules

To use any of the provided module, it needs to be imported in the @NgModule class where the component will be used. Then add the corresponding html-tag of the component where it needs to be rendered.

Overview

The library ships with collection of smart container module and presentational modules. Container modules provides component which handles fetching and processing of data and passing them to presentational component. Presentational modules provide component which just renders the data.

Container Modules

PlacelineContainerModule

Exports PlacelineContainerComponent

PlacelineContainerComponent

html tag
<ht-placeline-container [userId]="userId"></ht-placeline-container>
inputs
Input default Function
userId: string NA userId of placeline
UsersContainerModule

Exports UsersContainerComponent

UsersContainerComponent

html tag
<ht-users-container [hasPlaceline]="true"></ht-users-container>
inputs
Input default Function
hasPlaceline: boolean(optional) true Show/hide placeline on user selection
PlacelineMapModule

Exports PlacelineMapContainerComponent

PlacelineMapContainerComponent

html tag
<ht-placeline-map-container></ht-placeline-map-container>
inputs
Input default Function
userId: string NA userId of placeline
showSidebar: string(optional) true Show/hide sidebar
UsersMapContainerModule

Exports UsersMapContainerComponent

UsersMapContainerComponent

html tag
<ht-users-map-container></ht-users-map-container>
inputs
Input default Function
hasPlaceline: boolean(optional) true Show/hide placeline on user selection
showFilter: boolean(optional) true Show/hide user filters tab
showSidebar: boolean(optional) true Show/hide sidebar
sidebarWidth: number(optional) 400 Width of the sidebar
key: string(optional) NA access key of users to be displayed. Set to group token to view users of only particular group

Presentation Modules

These modules contain dumb components which do not have any HyperTrack client login. The are presentation component helpful in rendering already available HyperTrack entities

Module html tag input
PlaclineModule ht-placeline userData: IUserData
UserCardModule ht-user-card user
UsersModule ht-users users
MapModule ht-map NA

Example

<!--test.component.html-->
<ht-users [users]="users"></ht-users>
//test.module.ts
import { TestComponent } from './test.component';
import {UsersContainerModule} from "ht-angular";

@NgModule({
  imports: [
    CommonModule,
    UsersContainerModule
  ],
  declarations: [TestComponent]
})
export class TestModule { }
//test.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ht-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less']
})
export class TestComponent implements OnInit {

  /**
  * this userId is passed as an input to users container
  */
  userId = "<USER_ID>";

  constructor() { }

  ngOnInit() {
  }
}
<ht-users-container [userId]="userId"></ht-users-container>

Service

The library provides injectable services which provides additional functionality.

HtMapService

extends HtMapClass from ht-js-map library

Properties
- map: google.maps.Map | L.Map

Map object may be null if the map is not yet created. Use map$ observable to reliably get map object.

- map$: Observable<google.maps.Map | L.Map>

this.map$.take(1).subscribe((map) => {
  map //map object available whenever ready
})
//remove .take(1) to get map object whenever map is rerendered
- usersCluster: UsersCluster
- usersCluster.options: HtMapItemsOptions<IUsers | IUsersAnalytics>
- usersCluster.options.getInfoContent: (user: IUser | IusersAnalytics) => string

To set infobox content text set this function like the following

...
import {htUser} from "ht-js-data";

@Component({
  ...
})
export class AppComponent {

  constructor(private htMapService: HtMapService) {
    this.setMarkerInfoContent()
  }
  setMarkerInfoContent() {
    this.htMapService.usersCluster.options.getInfoContent = (user) => {
      const position = htUser(user).getPosition();
      const string = `<div>
<strong>${user.name}</strong>
<div>${user.display.status_text}</div>
<div>${position.lat}, ${position.lng}</div>
<div>${user.display.sub_status_text}</div>
</div>`;
      return string
    }
  }

}
Methods
- initMap: (el: NativeElement, mapOptions?: object) => map
ngAfterViewInit() {
    const el = this.elRef.nativeElement;
    this.mapService.initMap(el, options);
  }
- resetBounds: (resetOptions?: object) => void

Set bounds of the map to get all entities in map view

- segmentTrace: (userData: IUserData, map) => void

Render placeline data on the map

HtUsersClientService

extend HtUsersClient from ht-js-client library

Properties
- statusQueryArray: QueryLabel[]

To customize the summary chart

import { Component } from '@angular/core';
import {HtUsersClientService} from "ht-angular-client";
import {QueryLabel} from "ht-js-client";
import {Color} from "ht-js-utils";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {

  constructor(private htUsersClientService: HtUsersClientService) {
    const queryMap: QueryLabel[] = [
      {
        label: 'Logged in',
        values: ['stopped', 'on_trip', 'network_offline'],
        color: Color.blue
      },
      {
        label: 'Logged off',
        values: ['logged_off'],
        color: '#a8a8a8',
      },
      {
        label: 'Location disabled',
        values: ['location_disabled'],
        color: Color.red
      },
    ];
    this.htUsersClientService.statusQueryArray = queryMap
  }


}

Note: The values array should all add up to contain every available statues ('stopped', 'on_trip', 'network_offline', 'logged_off', 'location_disabled'). Otherwise the total number of users will not match to individual numbers for each summary item

How to use a service

Inject any service in a component or other service in the constructor like following.

//test.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ht-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less']
})
export class TestComponent implements OnInit {

  constructor(private mapService: HtMapService) { 
    this.mapService //here is the service
  }

  ngOnInit() {

  }
}

results matching ""

    No results matching ""