TMSS-494

Changes updated based on review comments

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

@@ -33,10 +33,10 @@ export default class DegreeInputMask extends Component {
 
   render() {
     return (
-        <InputMask mask="99:99:99" value={this.props.value}
-        placeholder="DD:mm:ss" 
+      <InputMask mask="99:99:99.9999" value={this.props.value}
+        placeholder="DD:mm:ss.ssss" 
         className="inputmask"
-        onComplete={this.callbackUpdateAngle}
+        onChange={this.callbackUpdateAngle}
         autoFocus
         ref={input =>{this.input = input}} />
     );

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

@@ -33,10 +33,10 @@ export default class TimeInputMask extends Component {
     return (
         <InputMask 
           value={this.props.value}
-          mask="99:99:99" 
-          placeholder="HH:mm:ss" 
+          mask="99:99:99.9999"
+          placeholder="HH:mm:ss.ssss"
           className="inputmask" 
-          onComplete={this.callbackUpdateAngle}
+          onChange={this.callbackUpdateAngle}
           ref={input =>{this.input = input}}
          />
     );

SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss

@@ -235,3 +235,9 @@ In Excel View the for Accordion  background color override
 .p-grid {
     width: -webkit-fill-available;
 }
+.inputmask {
+    height: 35px;
+    width: 100px;
+    text-align: left;
+    border-color: transparent !important;
+}
\ No newline at end of file

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];
+        let milliSeconds = value.split('.')[1] || '0000';
+        milliSeconds = milliSeconds.padEnd(4,0);
         if (splitOutput.length < 3) {
             return false;
         }   else {
             if (parseInt(splitOutput[0]) > 23 || parseInt(splitOutput[1])>59 || parseInt(splitOutput[2])>59) {
                 return false;
             }
-            const timeValue = parseInt(splitOutput[0]*60*60) + parseInt(splitOutput[1]*60) + parseInt(splitOutput[2]);
+            const timeValue = parseInt(splitOutput[0]*60*60) + parseInt(splitOutput[1]*60) + parseInt(seconds) + milliSeconds/10000;
             if (timeValue >= 86400) {
                 return false;
             }
@@ -16,13 +19,16 @@ const Validator = {
     },
     validateAngle(value) {
         const splitOutput = value.split(':');
+        const seconds = splitOutput[2]?splitOutput[2].split('.')[0].split('.')[0]:splitOutput[2];
+        let milliSeconds = value.split('.')[1] || '0000';
+        milliSeconds = milliSeconds.padEnd(4,0);
         if (splitOutput.length < 3) {
             return false;
         }   else {
             if (parseInt(splitOutput[0]) > 90 || parseInt(splitOutput[1])>59 || parseInt(splitOutput[2])>59) {
                 return false;
             }
-            const timeValue = parseInt(splitOutput[0]*60*60) + parseInt(splitOutput[1]*60) + parseInt(splitOutput[2]);
+            const timeValue = parseInt(splitOutput[0]*60*60) + parseInt(splitOutput[1]*60) + parseInt(seconds) + milliSeconds/10000;
             if (timeValue > 324000) {
                 return false;
             }