FSM FSTPO UI

In FSTP, we are trying to decouple the vehicle dispose from the FSM application. Whether vehicle is attached to any FSM application or not, we allow the vehicle to dispose in the FSTP plant.

FSTP Home UI:

After logging as a FSTP user, we have now the home button option:

Technical Implementation Details:

Code changes path are:

DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/components/FsmCard.js

FSTP Operations UI:

After moving into “home” option, an FSTP user can choose from the following options:

• FSTP can choose Add Vehicle Log option if he/she wants to check whether a vehicle is linked to any application and dispose.

• FSTP can choose Inbox if he/she wants to check all the applications that are is ready to dispose.

Technical Implementation Details:

The path for code:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpOperations.js

The code snippet for populating the options:

The code snippet for rendering the icon:

ULBHomeCard.js is the common component used to populate options in the screen.

The paths:

frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/ULBHomeCard.js

FSTP Add Vehicle Log UI:

FSTP can add vehicle log using vehicle number (in proper format with spaces, e.g. AB 00 CD 1234). An improper format will throw an error.

Techincal Implementation Details:

The path for the code:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpAddVehicle.js

The code snippet for populating the add vehicle log field and its validation:

The code snippet for rendering the screen:

FSTP Service Request Screen:

After entering the vehicle number in the add vehicle log screen, we are fetching the FSM application, which is linked to that specific vehicle number. The data is rendered as shown below:

Technical Implementation Details:

The path for the code:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpServiceRequest.js

The code snippets for fetching the FSM application linked to vehicle number:

Fetching the vehicle Id using vehicle number

Fetching the vehicle log using vehicle Id

Extracting out the FSM application number from vehicle log:

Fetching the FSM application details using FSM application number

The code snippets to render the data:

Mobile view

Desktop view

Vehicle Log screen:

After selecting the application, FSTPO can dispose the vehicle log in the vehicle log screen.

Additional details and attachment fields are introduced in new updates in FSM v1.2.1 .

The screen for the existing vehicle log:

The screen for new vehicle log if no application is found for vehicle is shown below. FSTPO can dispose the new vehicle log by providing all the details below.

Technical Implementation Details:

The path for the code:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpOperatorDetails.js

The code snippet for additional details and attachments field:

For new vehicle log:

The code snippets to render input field for new vehicle log: