added format and number of frames validation for time range component…

…s - MR
thoughtworksarts · Mar 20, 2018 · 16f73fa · 16f73fa
1 parent d80a93d
commit 16f73fa
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 6 deletions.
diff --git a/app/components/branch.js b/app/components/branch.js
@@ -42,8 +42,13 @@ export default class Branch extends React.Component {
         if (branch.enabled) {
             return (
                 <div>
+<<<<<<< HEAD
                     <TimeRange name="range" range={[branch.start, branch.end]} onChange={this.handleTimeRangeChange}/>
                     &nbsp;Outcome:&nbsp;
+=======
+                    <TimeRange name="range" range={[branch.start, branch.end]} onChange={this.handleTimeRangeChange} numFrames={this.props.numFrames}/>
+                    Outcome:&nbsp;
+>>>>>>> added format and number of frames validation for time range components - MR
                     <select name="outcome" id="outcome" value={branch.outcome} onChange={this.handleBranchInputChange}>
                         <option value="0" selected="selected">Credits</option>
                         { otherLevelIndices.map((i) => <option value={i}> {this.processOutcomeListText(i)}</option>) }

diff --git a/app/components/container.js b/app/components/container.js
@@ -148,10 +148,16 @@ export default class Container extends React.Component {
                         { Object.keys(intros).map((timeRangeId,_) =>
                             <div id="deleteSlide1">
                                 <TimeRange name="intros" id={timeRangeId} range={[intros[timeRangeId].start,
+<<<<<<< HEAD
                                            intros[timeRangeId].end]} onChange={this.handleTimeRangeChange}/>
                                 <div id="deleteButton1">
                                     &nbsp;
                                     <Button name="intros" bsStyle="primary" id={timeRangeId}
+=======
+                                           intros[timeRangeId].end]} onChange={this.handleTimeRangeChange}
+                                           numFrames={this.props.numFrames}/>
+                                <Button name="intros" bsStyle="primary" id={timeRangeId}
+>>>>>>> added format and number of frames validation for time range components - MR
                                         onClick={this.deleteSlide}>
                                         X
                                     </Button>
@@ -165,7 +171,8 @@ export default class Container extends React.Component {
                             <Level levelIndex={levels[levelId].index} numLevels={this.props.numLevels}
                                    onChange={this.handleLevelChange}
                                    range={[levels[levelId].start, levels[levelId].end]}
-                                   branches={levels[levelId].branches}/>
+                                   branches={levels[levelId].branches}
+                                   numFrames={this.props.numFrames}/>
                         )}
                     </div>
                     <Collapsible trigger="Credits">
@@ -177,6 +184,7 @@ export default class Container extends React.Component {
                         { Object.keys(credits).map((timeRangeId,_) =>
                             <div id="deleteSlide2">
                                 <TimeRange name="credits" id={timeRangeId} range={[credits[timeRangeId].start,
+<<<<<<< HEAD
                                            credits[timeRangeId].end]} onChange={this.handleTimeRangeChange}/>
                                 <div id="deleteButton2">
                                     &nbsp;
@@ -185,6 +193,14 @@ export default class Container extends React.Component {
                                         X
                                     </Button>
                                 </div>
+=======
+                                           credits[timeRangeId].end]} onChange={this.handleTimeRangeChange}
+                                           numFrames={this.props.numFrames}/>
+                                <Button name="credits" bsStyle="primary" id={timeRangeId}
+                                    onClick={this.deleteSlide}>
+                                    Delete Slide
+                                </Button>
+>>>>>>> added format and number of frames validation for time range components - MR
                             </div>
                         )}
                     </div>

diff --git a/app/components/level.js b/app/components/level.js
@@ -43,11 +43,12 @@ export default class Level extends React.Component {
                 <div className="level" id={levelId}>
                     <Collapsible trigger={triggerName}>
                         <div className="content">
-                            <TimeRange name="range" range={this.props.range} onChange={this.handleTimeRangeChange} />
+                            <TimeRange name="range" range={this.props.range} onChange={this.handleTimeRangeChange} numFrames={this.props.numFrames}/>
 
                             { Object.keys(branches).map((key,_) =>
                                 <Branch emotion={key} value={branches[key]} parentIndex={levelIndex}
-                                        numLevels={this.props.numLevels} onChange={this.handleBranchChange}/>
+                                        numLevels={this.props.numLevels} onChange={this.handleBranchChange}
+                                        numFrames={this.props.numFrames}/>
                             )}
                         </div>
                     </Collapsible>

diff --git a/app/components/timeRange.js b/app/components/timeRange.js
@@ -1,13 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
-import { FormGroup, FormControl, HelpBlock, ControlLabel } from 'react-bootstrap';
+
+import { validateRangeInput } from '../utilities/validators.js';
+
 import styles from '../style/index.css';
 
 export default class TimeRange extends React.Component {
 	constructor(props, context) {
 		super(props, context);
 		this.handleInputChange = this.handleInputChange.bind(this);
+
+		// VALIDATION
+		this.validateInput = this.validateInput.bind(this);
 	}
 
 	handleInputChange(event) {
@@ -20,8 +25,11 @@ export default class TimeRange extends React.Component {
 		}
 	}
 
-	render() {
+	validateInput() {
+		return validateRangeInput(this.props.range, this.props.numFrames);
+	}
 
+	render() {
 		return (
 			<div id="timeRangeDiv">
 				<label> &nbsp; Start Time: &nbsp;</label>
@@ -31,6 +39,10 @@ export default class TimeRange extends React.Component {
                 <label> &nbsp; End Time: &nbsp;</label>
                 <input name="end" id="timeRange" type="text" placeholder="00:00.00" value={this.props.range[1]}
                        onChange={this.handleInputChange}/>
+
+                <span id="formatvalidFormatator" style={this.validateInput()}>  
+                	&nbsp; Input must be in this valid format: MM:SS.FF, and frame must between 1 and {this.props.numFrames} 
+                </span>
 			</div>
 		);
 	}

diff --git a/app/style/index.css b/app/style/index.css
@@ -38,7 +38,7 @@ h1 {
 
 #exportButton {
     margin-top: 1%;
-}
+} 
 
 #deleteSlide1 {
     text-align:left;

diff --git a/app/utilities/validators.js b/app/utilities/validators.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const validFormat = (range) => {
+	const regex = /^[0-9]{2,2}:[0-9]{2,2}.[0-9]{2,2}/;
+	return regex.test(range[0]) && regex.test(range[1]);
+}
+
+const validNumFrames = (range, numFrames) => {
+	const startFrames = Number(range[0].split(".")[1]);
+	const endFrames = Number(range[1].split(".")[1]);
+
+	return ((startFrames >=1 && endFrames >= 1) &&
+			(startFrames <= numFrames && endFrames <= numFrames));
+}
+
+export const validateRangeInput = (range, numFrames) => {
+	if (validFormat(range) && validNumFrames(range, numFrames)) {
+		return({display: "none"});
+	}
+	return({display: "inline",color: "red"});
+}