Training Records View

URL: <base-url>/backend/hrc#/trainingcomparision
Directory: VaahCms/Modules/HRC/Vue/pages/trainingcomparision
Controller: VaahCms/Modules/HRC/Http/Controllers/Backend/TrainingRecordsController.php
Model: VaahCms/Modules/HRC/Models/EqTrainingRecord.php
Store: VaahCms/Modules/HRC/Vue/store/modules/store-trainingcomparision.js

Description

The training comparison view page displays the detailed view of the two selected training records, so that users can compare and analyze the performance of the two records. The main feature of the page is that it allows to load two records side by side and replay the records at the same time according to your selected timestamps.

Purpose

  • To load two different records at the same time
  • To display chart data of both records at the same time
  • To display both with their respective path trace
  • To let users update the start and end points for playback by zooming in or out of the chart.
  • To let users update the start and end points by selecting the pins on the map
  • Playback feature for both records at the same time

How it works?

Initial Load

  • onLoad method is called as soon as the page is loaded
  • onLoad performs the following
    1. gets the active map id from the route params
    2. calls getAssets method
    3. calls setInitialSpeedUnit method
    4. calls getComparisonItems method
  • The getComparisonItems method is then fetches both records, and in it's after call back method sets the map for both records and sets initial chart data with setInitialChartData and then calls getNotes

  • Selecting start and end from Map

  • The GoogleMapForHorse component handles the selection of start and end points. When a pin is selected on the map the component triggers a pinClicked event which is handled on the on this page with map1PinClicked and map2PinClicked methods respectively for first and second map.
  • The map1PinClicked and map2PinClicked methods update the record_start_index and record_end_index data variables which stores the player indexes for both the maps.
  • It then calls setInitialChartData method which detects the updated indexes and update the map accordingly.

  • Selecting start and end from Chart

  • When the player is not on, the chart on display is FusionChartsCompareZoomLineDy component.
  • When ever the charts zoom is changed it emits zoomed event which triggers pages chartZoomed method.
  • chartZoomed updates the record_start_index and record_end_index data variables which stores the player indexes for both the maps.
  • It then updates the selected_map1_pins and selected_map2_pins to update the GoogleMapForHorse component
  • In order to update in realtime the following code is added at the end of this method which updates the key for GoogleMapForHorse component.
    this.keys.map_1++;
this.keys.map_2++;

When player is started

  • When play button is pressed startTrainingRecord is called on click.
  • This basically clears any unwanted data and calls refreshPlayer()
  • This basically starts a loop from the index set for current index and calls playTrainingRecords method on each loop.
  • playTrainingRecords mimics live preview at a regular interval defined in data It takes an index as a parameter and plays training records by manipulating the data in the component's state.
    The function first checks if the index is greater than the ending index of the records, and if so, it stops playing the records. Then, it gets the data at the specified index and applies some transformations to it. If latitude and longitude values exist in the data, they are converted to decimal degrees. The function also updates distance variables using the new data.
    If the data contains parsed coordinates, it updates the map's center and initializes it. The data is then added to the training data array, and additional data fields are added using a helper function. The delay is calculated in seconds, and the new data is added to the chart.

Assumptions

  • Training records are synced

Acceptance Criteria

  • By default, it must show all ehm record for both records
  • Page should not take more than 2 seconds to load
  • All notes should be accessible
  • Ability to zoom from chart
  • When play button is pressed, it should mimic live preview
  • Player speed can be changed.
  • Start and end time can be modified directly from map or by zooming into the chart.
Table of Contents