added labels and flesh out step3

chgibb · Oct 3, 2019 · f7861eb · f7861eb
1 parent 917bd30
commit f7861eb
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/src/req/renderer/containers/forms/newCoverageTrackForm/newCoverageTrackForm.tsx b/src/req/renderer/containers/forms/newCoverageTrackForm/newCoverageTrackForm.tsx
@@ -6,6 +6,7 @@ import {Form, FullWidthStepperForm} from "../../fullWidthStepperForm";
 
 import {step1} from "./step1";
 import {step2} from "./step2";
+import { step3 } from './step3';
 
 export interface NewCoverageTrackFormProps
 {
@@ -42,6 +43,7 @@ export class NewCoverageTrackForm extends React.Component<NewCoverageTrackFormPr
 
     step1 = step1.bind(this);
     step2 = step2.bind(this);
+    step3 = step3.bind(this);
 
     public onAdvance(step : number) : Promise<boolean>
     {
@@ -69,7 +71,8 @@ export class NewCoverageTrackForm extends React.Component<NewCoverageTrackFormPr
                         setFormState={this.setState}
                         steps={[
                             this.step1(),
-                            this.step2()
+                            this.step2(),
+                            this.step3()
                         ]}
                         disableNavigation={false}
                     />

diff --git a/src/req/renderer/containers/forms/newCoverageTrackForm/step2.tsx b/src/req/renderer/containers/forms/newCoverageTrackForm/step2.tsx
@@ -10,7 +10,7 @@ import {NewCoverageTrackForm} from "./newCoverageTrackForm";
 export function step2(this : NewCoverageTrackForm) : FullWidthFormStep
 {
     return {
-        label : "",
+        label : "Select Colour",
         body : (
             <div>
                 <GridWrapper>

diff --git a/src/req/renderer/containers/forms/newCoverageTrackForm/step3.tsx b/src/req/renderer/containers/forms/newCoverageTrackForm/step3.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { NewCoverageTrackForm } from './newCoverageTrackForm';
+import { FullWidthFormStep } from '../../fullWidthStepperForm';
+import { GridWrapper } from '../../gridWrapper';
+import { Grid } from '../../../components/grid';
+import { Typography } from '../../../components/typography';
+import { ColorLensRounded } from '../../../components/icons/colorLensRounded';
+import { style } from 'typestyle';
+
+export function step3(this : NewCoverageTrackForm) : FullWidthFormStep
+{
+    return {
+        label: "Confirm and Begin",
+        body : (
+            <div>
+                <GridWrapper>
+                    <Grid container spacing={4} justify="center">
+                        <Grid item>
+
+                                <Typography>{this.state.log10Scale ? "Log10 Scale, " : ""}scale by {this.state.scaleFactor}</Typography>
+                                </Grid>
+                                <Grid item>
+                                <ColorLensRounded
+                                color="primary"
+                                classes={{colorPrimary: style({color: this.state.color})}}
+                                /></Grid>
+
+                        </Grid>
+
+                </GridWrapper>
+            </div>
+        )
+    };
+}