TMSS-494: Anlge fields updated with Cleave.js component.

SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DegreeInputmask.js

 import React, { Component } from 'react';
 import { InputMask } from 'primereact/inputmask';
 import Validator from  '../../utils/validator';
+import Cleave from 'cleave.js/react';
 
 const BG_COLOR= '#f878788f';
 
@@ -16,29 +17,31 @@ export default class DegreeInputMask extends Component {
    */
   callbackUpdateAngle(e) {
     let isValid = false;
-    if(Validator.validateAngle(e.value)){
-      e.originalEvent.target.style.backgroundColor = '';
+    if (Validator.validateAngle(e.target.value)) {
+      e.target.style.backgroundColor = '';
       isValid = true;
-    }else{
-      e.originalEvent.target.style.backgroundColor = BG_COLOR;
+    } else  {
+      e.target.style.backgroundColor = BG_COLOR;
     }
     this.props.context.componentParent.updateAngle(
-      this.props.node.rowIndex,this.props.colDef.field,e.value,false,isValid
+      this.props.node.rowIndex,this.props.colDef.field,e.target.value,false,isValid
     );
   }
 
-  afterGuiAttached(){
-    this.input.input.focus();
+  afterGuiAttached() {
+    this.input.focus();
+    this.input.select();
   }
 
   render() {
     return (
-      <InputMask mask="99:99:99.9999" value={this.props.value}
-        placeholder="DD:mm:ss.ssss" 
-        className="inputmask"
-        onChange={this.callbackUpdateAngle}
-        autoFocus
-        ref={input =>{this.input = input}} />
+      <Cleave placeholder="DD:mm:ss.ssss" value={this.props.value}
+          options={{numericOnly: true, blocks: [2, 2, 2, 4],
+                    delimiters: [':', ':', '.'],
+                    delimiterLazyShow: false}}
+          className="inputmask" 
+          htmlRef={(ref) => this.input = ref }
+          onChange={this.callbackUpdateAngle} />
     );
   }
 }
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/TimeInputmask.js

 import React, { Component } from 'react';
 import { InputMask } from 'primereact/inputmask';
 import Validator from  '../../utils/validator';
+import Cleave from 'cleave.js/react';
 
 const BG_COLOR= '#f878788f';
 
@@ -12,33 +13,33 @@ export default class TimeInputMask extends Component {
 
   callbackUpdateAngle(e) {
     let isValid = false;
-    if(Validator.validateTime(e.value)){
-      e.originalEvent.target.style.backgroundColor = '';
+    if (Validator.validateTime(e.target.value)) {
+      e.target.style.backgroundColor = '';
       isValid = true;
-    }else{
-      e.originalEvent.target.style.backgroundColor = BG_COLOR;
+    } else {
+      e.target.style.backgroundColor = BG_COLOR;
     }
-    
+    e.target.style.border = "none";
     this.props.context.componentParent.updateAngle(
-      this.props.node.rowIndex,this.props.colDef.field,e.value,false,isValid
+      this.props.node.rowIndex,this.props.colDef.field,e.target.value,false,isValid
     );
     
   }
  
   afterGuiAttached(){
-    this.input.input.focus();
+    this.input.focus();
+    this.input.select();
   }
- 
+
   render() {
     return (
-        <InputMask 
-          value={this.props.value}
-          mask="99:99:99.9999"
-          placeholder="HH:mm:ss.ssss"
+      <Cleave placeholder="HH:mm:ss.ssss" value={this.props.value}
+          options={{numericOnly: true, blocks: [2, 2, 2, 4],
+                    delimiters: [':', ':', '.'],
+                    delimiterLazyShow: false}}
           className="inputmask" 
-          onChange={this.callbackUpdateAngle}
-          ref={input =>{this.input = input}}
-         />
+          htmlRef={(ref) => this.input = ref }
+          onChange={this.callbackUpdateAngle} />
     );
   }
 }
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/utils/unit.converter.js

@@ -92,7 +92,7 @@ const UnitConverter = {
     getAngleOutput(prpOutput, isDegree) {
         if(prpOutput){
             const splitOutput = prpOutput.split(':');
-            const seconds = splitOutput[2]?splitOutput[2].split('.')[0].split('.')[0]:splitOutput[2];
+            const seconds = splitOutput[2]?splitOutput[2].split('.')[0]:splitOutput[2];
             let milliSeconds = prpOutput.split('.')[1] || '0000';
             milliSeconds = milliSeconds.padEnd(4,0);
             if (isDegree) {

SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js

 const Validator = {
     validateTime(value) {
-    const splitOutput = value.split(':');
-    const seconds = splitOutput[2]?splitOutput[2].split('.')[0].split('.')[0]:splitOutput[2];
+        const splitOutput = value.split(':');
+        const seconds = splitOutput[2]?splitOutput[2].split('.')[0]:splitOutput[2];
         let milliSeconds = value.split('.')[1] || '0000';
         milliSeconds = milliSeconds.padEnd(4,0);
         if (splitOutput.length < 3) {
@@ -19,7 +19,7 @@ const Validator = {
     },
     validateAngle(value) {
         const splitOutput = value.split(':');
-        const seconds = splitOutput[2]?splitOutput[2].split('.')[0].split('.')[0]:splitOutput[2];
+        const seconds = splitOutput[2]?splitOutput[2].split('.')[0]:splitOutput[2];
         let milliSeconds = value.split('.')[1] || '0000';
         milliSeconds = milliSeconds.padEnd(4,0);
         if (splitOutput.length < 3) {