\r\n text = \r\n {icon}\r\n {text}\r\n
\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default TextSection;","import React from 'react'\r\n\r\n//WsWebServicePlatform/InteractionLog/Append\r\n//props:\r\n//authtoken\r\n//groupguid\r\n/* \"InteractionElement\": {\r\n \"ClassKeyName\": \"REPORT COMPONENT\",\r\n \"FamilyKeyName\": \"CLICKED\",\r\n \"TypeKeyName\": \"BUTTON\",\r\n \"ComponentGuid\": \"8982C56C-2965-4EF2-BFF2-82CE14827FA5\",\r\n \"Record\": \"1\"\r\n }\r\n */\r\nexport function InteractionHandler(props){\r\n const requestOptions = {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application/json'},\r\n body: JSON.stringify(\r\n {\"ParamData\": {\r\n \"OrganizationGuid\": props.groupguid,\r\n \"AuthToken\": props.authtoken,\r\n \"InteractionClassKeyName\": props.InteractionElement.ClassKeyName,\r\n \"InteractionFamilyKeyName\": props.InteractionElement.FamilyKeyName,\r\n \"InteractionTypeKeyName\": props.InteractionElement.TypeKeyName,\r\n \"ComponentGuid\": props.InteractionElement.ComponentGuid\r\n }}\r\n )\r\n }\r\n\r\n fetch('../../WsWebServicePlatform/InteractionLog/Append', requestOptions)\r\n}","import React, { Component } from 'react'\r\nimport Grid from '@material-ui/Core/Grid'\r\nimport Button from '@material-ui/Core/Button'\r\nimport {CardActions} from '@material-ui/core'\r\nimport Divider from '@material-ui/Core/Divider';\r\nimport {InteractionHandler} from '../InteractionHandler';\r\n\r\n\r\nclass ButtonGroup extends Component {\r\n constructor(props){\r\n super(props)\r\n this.onClick = this.onClick.bind(this)\r\n }\r\n\r\n onClick(e){\r\n console.log(e)\r\n if(e.InteractionElement && e.InteractionElement.Record == \"1\"){\r\n let props={\r\n \"groupguid\": this.props.groupguid,\r\n \"authtoken\": this.props.authtoken,\r\n \"InteractionElement\": e.InteractionElement\r\n }\r\n InteractionHandler(props)\r\n return true\r\n }\r\n }\r\n\r\n render() {\r\n var buttonArray = Object.keys(this.props.buttons).map((keyname, i) => (\r\n \r\n {this.props.buttons[keyname].Visible == \"1\" ? \r\n this.onClick(this.props.buttons[keyname])}\r\n href={(this.props.buttons[keyname].Link.indexOf('tel') == 0 || this.props.buttons[keyname].Link.indexOf('mail') == 0 || this.props.buttons[keyname].Link.indexOf('http') == 0) ? this.props.buttons[keyname].Link : '//' + this.props.buttons[keyname].Link} \r\n target=\"_blank\"\r\n style={{margin:'8px'}}>{this.props.buttons[keyname].Text} \r\n : null }\r\n \r\n ))\r\n var divider = this.props.showDivider ? \r\n {divider}\r\n \r\n {buttonArray}\r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ButtonGroup","import React, { Component } from 'react';\r\n\r\n\r\nclass Header extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n }\r\n render() {\r\n var valuegrade, text;\r\n if (this.props.gradeLabel){\r\n text = this.props.gradeLabel;\r\n } else {\r\n if(this.props.valuegrade == \"1\"){\r\n text = \"LOW\"\r\n }\r\n if(this.props.valuegrade == \"2\"){\r\n text = \"MODERATE\"\r\n }\r\n if(this.props.valuegrade == \"3\"){\r\n text = \"HIGH\"\r\n }\r\n }\r\n \r\n\r\n var risktext \r\n if(this.props.content.length){\r\n risktext = this.props.content;\r\n } else {\r\n risktext = 'Your risk is '\r\n }\r\n return(\r\n \r\n
{risktext} \r\n {text} \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Header\r\n\r\n","import React, { Component } from 'react';\r\nimport Grid from '@material-ui/core/Grid'\r\nimport Typography from '@material-ui/core/Typography'\r\n\r\nimport { withStyles } from '@material-ui/styles'\r\nimport { Divider } from '@material-ui/core';\r\n\r\nconst styles = theme => ({\r\n dividerHorizontal: {\r\n [theme.breakpoints.up('sm')]: {\r\n display: 'none'\r\n },\r\n [theme.breakpoints.only('xs')]: {\r\n display: 'flex',\r\n width: '100px',\r\n marginTop: '75px',\r\n width: '2px',\r\n backgroundColor: '#e4e1e1',\r\n border: 'none'\r\n }\r\n },\r\n dividerVertical: {\r\n [theme.breakpoints.up('sm')]: {\r\n display: 'flex',\r\n height: '100px',\r\n marginTop: '75px',\r\n width: '2px',\r\n backgroundColor: '#e4e1e1',\r\n border: 'none'\r\n },\r\n [theme.breakpoints.only('xs')]: {\r\n display: 'none'\r\n }\r\n },\r\n calloutContainer: {\r\n [theme.breakpoints.up('md')]: {\r\n marginLeft: \"25%\",\r\n marginRight: \"25%\"\r\n },\r\n [theme.breakpoints.only('sm')]: {\r\n marginLeft: \"5%\",\r\n marginRight: \"5%\"\r\n },\r\n [theme.breakpoints.only('xs')]: {\r\n marginLeft: \"0%\",\r\n marginRight: \"0%\"\r\n }\r\n },\r\n calloutText: {\r\n fontWeight:'bolder',\r\n fontSize: '47px',\r\n margin: '0px 0 10px 0'\r\n\r\n },\r\n calloutTextLongWord: {\r\n fontWeight:'bolder',\r\n fontSize: '41px',\r\n paddingBottom: '8px',\r\n margin: '0px 0 10px 0'\r\n\r\n },\r\n calloutSubtitle: {\r\n margin: '0 10px 0 10px',\r\n fontSize: '13px'\r\n },\r\n calloutTitle: {\r\n fontSize: '18px'\r\n }\r\n})\r\n\r\n\r\nclass Callout extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n }\r\n \r\n render() {\r\n \r\n const {classes} = this.props\r\n let color1 = this.props.content.CallOut01.CalloutColor.length ? this.props.content.CallOut01.CalloutColor : \"black\"\r\n let color2 = this.props.content.CallOut02.CalloutColor.length ? this.props.content.CallOut02.CalloutColor : \"black\"\r\n\r\n let components = {}\r\n\r\n\r\n if(this.props.content.CallOut02.Visible==\"0\"){\r\n return(\r\n \r\n \r\n {this.props.content.CallOut01.CalloutText} \r\n \r\n \r\n )\r\n } else {\r\n return(\r\n \r\n \r\n 5 ? classes.calloutTextLongWord : classes.calloutText} style={{color:color1}}>{this.props.content.CallOut01.CalloutText} \r\n \r\n \r\n \r\n \r\n 5 ? classes.calloutTextLongWord : classes.calloutText} style={{color:color2}}>{this.props.content.CallOut02.CalloutText} \r\n \r\n \r\n )\r\n }\r\n\r\n \r\n }\r\n}\r\n\r\nexport default withStyles(styles)(Callout)\r\n\r\n/*\r\n {\r\n \"ComponentClass\": \"TEXTAREA\",\r\n \"ComponentFamily\": \"VARIANT\",\r\n \"ComponentType\": \"CALLOUT\",\r\n \"ComponentVisible\": \"1\",\r\n \"ComponentContent\": {\r\n \"CallOuts\": {\r\n \"CallOut01\": {\r\n \"PrimaryText\": \"Top text\",\r\n \"CalloutText\": \"10%\",\r\n \"SecondaryText\": \"\",\r\n \"Visible\": \"1\"\r\n },\r\n \"CallOut02\": {\r\n \"PrimaryText\": \"Callout 2\",\r\n \"CalloutText\": \"50%\",\r\n \"SecondaryText\": \"\",\r\n \"Visible\": \"1\"\r\n }\r\n }\r\n }\r\n }\r\n*/","import React, { Component } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { Accordion, AccordionSummary, AccordionDetails, Box } from '@material-ui/core';\r\nimport { ExpandMore } from '@material-ui/icons';\r\n\r\nclass Paragraph extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n expanded: this.props.expand\r\n }\r\n }\r\n\r\n componentDidMount(){\r\n this.setState({\r\n expanded: this.props.content.IsCollapsed == \"1\" ? false : true\r\n })\r\n }\r\n componentDidUpdate(prevProps){\r\n if(this.props.expand !== prevProps.expand){\r\n this.setState({\r\n expanded: this.props.expand\r\n })\r\n }\r\n }\r\n handleChange = () => {\r\n this.setState({\r\n expanded: !this.state.expanded\r\n })\r\n }\r\n render() {\r\n let paragraph = []\r\n if(this.props.content.CanCollapse == \"1\"){\r\n paragraph = \r\n {this.props.content.Header} \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n } else {\r\n paragraph = \r\n {paragraph}\r\n \r\n )\r\n }\r\n}\r\n\r\n/* \r\n{\r\n \"ComponentClass\": \"TEXTAREA\",\r\n \"ComponentFamily\": \"VARIANT\",\r\n \"ComponentType\": \"PARAGRAPH\",\r\n \"ComponentContent\": {\r\n \"Content\": \"This report is based on an assessment you took. The assessment was intended to help you determine if you may be at risk for developing breast cancer to inform breast cancer screening, chemoprevention, and genetic testing. It was created using an evidence-based approach. The assessment uses the Breast Cancer Risk Assessment (Gail model) tool to estimate your 5-year and lifetime risk for breast cancer. Your 5-year or lifetime breast cancer risk, health, and other risk factors are used to determine your risk.
References:
Banegas MP, John EM, Slattery ML, et al. Projecting Individualized Absolute Invasive Breast Cancer Risk in US Hispanic Women. J Natl Cancer Inst. 2017;109(2). https://www.ncbi.nlm.nih.gov/pubmed/28003316 Gail MH, Costantino JP, Pee D, et al. Projecting individualized absolute invasive breast cancer risk in African American women. J Natl Cancer Inst. 2007;99(23):1782-1792. https://www.ncbi.nlm.nih.gov/pubmed/18042936 Matsuno RK, Costantino JP, Ziegler RG, et al. Projecting individualized absolute invasive breast cancer risk in Asian and Pacific Islander American women. J Natl Cancer Inst. 2011;103(12):951-961. https://www.ncbi.nlm.nih.gov/pubmed/21562243 Gail MH, Brinton LA, Byar DP, et al. Projecting individualized probabilities of developing breast cancer for white females who are being examined annually. J Natl Cancer Inst. 1989;81(24):1879-1886. https://www.ncbi.nlm.nih.gov/pubmed/2593165 {item.Content} \r\n }\r\n })\r\n .filter((item) => {\r\n if(item){\r\n return true\r\n } else return false\r\n })\r\n if(listItems.length>this.props.content.RiskFactorMaxItems){\r\n listItems = listItems.slice(0,this.props.content.RiskFactorMaxItems)\r\n }\r\n return(\r\n \r\n {this.props.content.RiskFactorText} \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default RiskList\r\n\r\n/* \r\n{\r\n \"ComponentClass\": \"RISKFACTOR\",\r\n \"ComponentFamily\": \"\",\r\n \"ComponentType\": \"LIST\",\r\n \"ComponentVisible\": \"\",\r\n \"ComponentContent\": {\r\n \"RiskFactorText\": \"Your risk level is based on things you reported. Some of your greatest risk factors are:\",\r\n \"RiskFactorMaxItems\": \"3\",\r\n \"RiskFactors\": [\r\n {\r\n \"Content\": \"Having a family history of breast cancer\",\r\n \"Visibility\": \"1\",\r\n \"Order\": \"1\"\r\n },\r\n {\r\n \"Content\": \"Having dense breasts\",\r\n \"Visibility\": \"1\",\r\n \"Order\": \"3\"\r\n },\r\n {\r\n \"Content\": \"Having your first child after you were 30 years old\",\r\n \"Visibility\": \"1\",\r\n \"Order\": \"1\"\r\n },\r\n {\r\n \"Content\": \"Je n'sai quoi\",\r\n \"Visibility\": \"1\",\r\n \"Order\": \"5\"\r\n },\r\n {\r\n \"Content\": \"\",\r\n \"Visibility\": \"\",\r\n \"Order\": \"\"\r\n },\r\n*/","import React, { Component } from 'react';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { withStyles } from '@material-ui/styles';\r\n\r\n\r\nconst styles = theme => ({\r\n barLabel: {\r\n fontSize: '7px'\r\n },\r\n barTitle: {\r\n width:'100%',\r\n textAlign:'left'\r\n },\r\n barNotch: {\r\n zIndex: '1000',\r\n position: 'relative',\r\n marginBottom: '-20px'\r\n },\r\n barDescription: {\r\n marginTop:'10px'\r\n }\r\n })\r\nclass RiskBar extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n }\r\n\r\n render() {\r\n let segments = []\r\n let selectedSegment = -1\r\n const {classes} = this.props;\r\n\r\n let marginOffset=0\r\n let barWidth = window.innerWidth > 436 ? 100 : 60\r\n let labelMargin = window.innerWidth > 436 ? '225px' : '105px'\r\n\r\n let value = this.props.content.IsInverted == \"1\" ? 100-parseInt(this.props.content.Value) : parseInt(this.props.content.Value)\r\n\r\n if(this.props.content.Segments.length){\r\n segments = this.props.content.Segments.map((segment, index) => {\r\n if(selectedSegment < 0 && value <= parseInt(segment.UpperBounds)){\r\n selectedSegment = index\r\n }\r\n return RiskSVG(segment.Color, barWidth) \r\n })\r\n if(selectedSegment == 0){\r\n if(barWidth==100){\r\n marginOffset = -300 + calcStep(0, parseInt(this.props.content.Segments[0].UpperBounds), value, 180)\r\n\r\n } else {\r\n marginOffset = -180 + calcStep(0, parseInt(this.props.content.Segments[0].UpperBounds), value, 100)\r\n\r\n }\r\n }\r\n if(selectedSegment == 1){\r\n if(barWidth==100){\r\n marginOffset = -90 + calcStep(parseInt(this.props.content.Segments[0].UpperBounds), parseInt(this.props.content.Segments[1].UpperBounds), value, 180)\r\n\r\n } else {\r\n marginOffset = -56 + calcStep(parseInt(this.props.content.Segments[0].UpperBounds), parseInt(this.props.content.Segments[1].UpperBounds), value, 106)\r\n\r\n }\r\n \r\n }\r\n if(selectedSegment == 2){\r\n if(barWidth==100){\r\n marginOffset = 110 + calcStep(parseInt(this.props.content.Segments[1].UpperBounds), parseInt(this.props.content.Segments[2].UpperBounds), value, 180)\r\n\r\n } else {\r\n marginOffset = 70 + calcStep(parseInt(this.props.content.Segments[1].UpperBounds), parseInt(this.props.content.Segments[2].UpperBounds), value, 70)\r\n\r\n }\r\n }\r\n }\r\n \r\n let notch = []\r\n if(1>0){\r\n notch = NotchSVG(this.props.content.Segments[selectedSegment].Label)\r\n }\r\n return(\r\n \r\n\r\n \r\n\r\n
\r\n {notch}\r\n
\r\n \r\n
\r\n {segments}\r\n
\r\n
\r\n \r\n {'< ' + this.props.content.UpperBoundLabel}\r\n \r\n \r\n {this.props.content.LowerBoundLabel + ' >'}\r\n \r\n
\r\n
\r\n {this.props.content.Label}\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(RiskBar)\r\n\r\nfunction calcStep(min, max, value, width){\r\n return Math.floor(((value-min)*width)/(max-min))\r\n}\r\n\r\nfunction RiskSVG(color, width){\r\n return (\r\n \r\n \r\n \r\n\r\n )\r\n}\r\n\r\nfunction NotchSVG(text){\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {text} \r\n \r\n )\r\n}\r\n\r\n/* \r\n{\r\n \"ComponentClass\": \"CHART\",\r\n \"ComponentFamily\": \"BAR\",\r\n \"ComponentType\": \"SEGMENTED\",\r\n \"ComponentContent\": {\r\n \"Value\": \"76\",\r\n \"SecondaryValue\": \"\",\r\n \"LowerBounds\": \"0\",\r\n \"UpperBounds\": \"100\",\r\n \"LowerBoundLabel\": \"Lower Risk\",\r\n \"UpperBoundLabel\": \"Higher Risk\",\r\n \"SegmentNumber\": \"3\",\r\n \"Segments\": [\r\n {\r\n \"Label\": \"High Risk\",\r\n \"Color\": \"#FE9350\",\r\n \"UpperBounds\": \"40\"\r\n },\r\n {\r\n \"Label\": \"Medium Risk\",\r\n \"Color\": \"#FEC957\",\r\n \"UpperBounds\": \"70\"\r\n },\r\n {\r\n \"Label\": \"Low Risk\",\r\n \"Color\": \"#6CDE6C\",\r\n \"UpperBounds\": \"100\"\r\n }\r\n ],\r\n \"Label\": \"You are at low risk for breast cancer.\"\r\n },\r\n \"ComponentVisible\": \"1\"\r\n}\r\n*/","import React, { Component } from 'react'\r\nimport Grid from '@material-ui/Core/Grid'\r\nimport Divider from '@material-ui/Core/Divider';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\nimport FlagIcon from '@material-ui/icons/Flag';\r\n\r\nimport { withStyles } from '@material-ui/styles';\r\n\r\nlet dividerColor = window.$secondaryColor\r\n\r\nconst styles = theme => ({\r\n dividerTitle: {\r\n overflow:'hidden',\r\n fontSize:'20pt',\r\n '&::after': {\r\n content:'\"\"',\r\n \r\n }\r\n },\r\n dividerContainer: {\r\n width:'100%',\r\n textAlign:'left'\r\n }\r\n })\r\n\r\nclass TextDivider extends Component {\r\n constructor(props){\r\n super(props)\r\n }\r\n\r\n render() {\r\n\r\n const {classes} = this.props\r\n\r\n //this should be a standalone component for icons\r\n let icon = []\r\n if(this.props.content.Icon.length){\r\n if(this.props.content.Icon == \"risk\"){\r\n icon = \r\n
\r\n \r\n {icon} {this.props.content.Title}
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n {icon} {this.props.content.Title}
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n\t\t\t\t\t\t\t\t\t{counter}. {questionSet.QuestionSet} \r\n\t\t\t\t\t\t\t\t\t )\r\n\t\t\t\treturnItem.push(questionSet.Questions.map(question => {\r\n\t\t\t\t\tif(question.Visibility == \"1\"){\r\n\t\t\t\t\t\talphaCounter = String.fromCharCode(alphaCounter.charCodeAt(0) + 1)\r\n\t\t\t\t\t\treturn \r\n\t\t\t\t\t\t\t {alphaCounter}. {question.Question} \r\n\t\t\t\t\t\t\t{question.Answer} \r\n\t\t\t\t\t\t \r\n\t\t\t\t\t}\r\n\t\t\t\t}))\r\n\t\t\t\treturn returnItem\r\n\t\t\t} else {\r\n\t\t\t\tif(questionSet.Visibility == \"1\"){\r\n\t\t\t\t\tcounter++;\r\n\t\t\t\t\treturn \r\n\t\t\t\t\t\t\t{counter}. {questionSet.Questions[0].Question} \r\n\t\t\t\t\t\t\t{questionSet.Questions[0].Answer} \r\n\t\t\t\t\t\t \r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\t\r\n })\r\n\r\n return(\r\n \r\n \r\n {this.props.content.Header} \r\n \r\n \r\n \r\n \r\n {this.props.content.Subheader} \r\n \r\n \r\n \r\n \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{questions}\r\n\t\t\t\t\t\t\t\t\t \r\n
\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default QuestionList\r\n\r\n/*\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n {this.props.content.Questions} \r\n {this.props.content.Answers} \r\n \t \r\n\t\t\t\t\t\t\t\t\t\t \r\n \r\n */\r\n/*\r\n{\r\n\t\"ComponentClass\": \"DATA\",\r\n\t\"ComponentFamily\": \"QUESTIONS\",\r\n\t\"ComponentType\": \"ACCORDION\",\r\n\t\"ComponentContent\": {\r\n\t\t\"Data\": [\r\n\t\t\t{\r\n\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\"QuestionSet\": \"TGT 27A0024 ADULT\",\r\n\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\"QuestionSets\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 DATE OF BIRTH\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"What is your birth date?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"6-12-1991\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 AGE\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"0\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 HEIGHT\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"What is your height?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"inches\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"69\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 WEIGHT\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"What is your weight?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"pounds\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"180\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 BODY MASS INDEX\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"0\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 AGE AT MENARCHE\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"How old were you when you had your first menstrual period?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"Under age 12 years\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 HAS GIVEN BIRTH\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"Have you given birth to a child?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"No\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 AGE FIRST LIVE BIRTH\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"0\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 DENSE BREASTS\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"Has a doctor ever told you that you have dense breasts?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"No\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 HISTORY OF BREAST CANCER\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"Has a doctor ever told you that you have breast cancer including carcinoma in situ?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"Yes\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 HAD BREAST BIOPSY\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"Have you ever had a breast biopsy?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"No\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 BENIGN BREAST BIOPSY\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"0\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 NUMBER OF BENIGN BREAST BIOPSIES\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"0\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 HISTORY OF ATYPICAL HYPERPLASIA\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"0\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 NUMBER OF BREAST CANCERS IN FAMILY\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"How many of your first-degree relatives (mother, sisters, daughters) have had breast cancer?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"One\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 BRCA GENE TEST\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"Have you ever been tested for BRCA1/2 gene mutation?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"Never tested\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 BRCA MUTATION IN FAMILY\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"Do you have a first degree relative with BRCA1/2 gene mutation?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"No\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 HAS OTHER GENETIC RISKS\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"Has a doctor ever told you that you have Li-Fraumeni syndrome, Cowden syndrome, or Ruvalcaba syndrome?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"No\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 OTHER GENETIC RISKS IN FAMILY\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"Do you have a first degree relative with Li-Fraumeni syndrome, Cowden syndrome, or Bannayan-Riley-Ruvalcaba syndrome?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"No\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 HAD RADIATION THERAPY TO CHEST\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"Did you ever have radiation therapy to the chest when you were between ages 10 and 30 years old?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"No\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"QuestionSet\": \"\",\r\n\t\t\t\t\t\t\"QuestionSetName\": \"TGT 27A0024 RACE GAIL MODEL\",\r\n\t\t\t\t\t\t\"ShowHeader\": \"0\",\r\n\t\t\t\t\t\t\"Visibility\": \"1\",\r\n\t\t\t\t\t\t\"Questions\": [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\"Question\": \"Which of the following best describes you?\",\r\n\t\t\t\t\t\t\t\t\"Prompt\": \"\",\r\n\t\t\t\t\t\t\t\t\"Answer\": \"White\",\r\n\t\t\t\t\t\t\t\t\"Visiblity\": \"1\"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t}\r\n\t\t],\r\n\t\t\"Header\": \"Your answers\",\r\n\t\t\"Subheader\": \"These results are based upon how you answered the following questions:\",\r\n\t\t\"IsCollapsed\": \"1\",\r\n \"CanCollapse\": \"1\",\r\n \"Questions\": \"Questions\",\r\n \"Answers\": \"Answers\"\r\n\t},\r\n\t\"ComponentVisible\": \"1\"\r\n}\r\n*/","import React, { Component } from 'react'\r\nimport ReactSpeedometer from 'react-d3-speedometer'\r\n\r\nimport Box, { CardActions } from '@material-ui/core'\r\nimport Card from '@material-ui/Core/Card'\r\nimport CardHeader from '@material-ui/Core/CardHeader'\r\nimport CardContent from '@material-ui/Core/CardContent'\r\nimport Button from '@material-ui/Core/Button'\r\nimport Container from '@material-ui/Core/Container'\r\nimport Grid from '@material-ui/Core/Grid'\r\n\r\nimport Speedometer from './results/Speedometer';\r\nimport TextSection from './results/TextSection';\r\nimport ButtonGroup from './results/ButtonGroup';\r\nimport Header from './results/Header';\r\nimport HeaderButtons from '../components/results/headerbuttons';\r\nimport Callout from './results/Callout';\r\nimport Paragraph from './results/paragraph';\r\nimport RiskList from './results/risklist';\r\nimport RiskBar from './results/riskbar';\r\nimport TextDivider from './results/divider';\r\nimport Section from './results/section'\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport QuestionList from './results/questionlist'\r\n\r\nimport './result.css'\r\n\r\nconst useStyles = {\r\n root: {\r\n\r\n }\r\n}\r\n\r\nclass QuizResults extends Component {\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n expandAccordions: false\r\n }\r\n }\r\n\r\n setExpandAccordions(val){\r\n this.setState({\r\n expandAccordions: val\r\n })\r\n }\r\n\r\n render() {\r\n const { classes } = this.props\r\n if (this.props.results[0]){\r\n var x=0;\r\n var resultItems = [];\r\n var component;\r\n let headerButtons;\r\n if(this.props.results.length > 6){\r\n headerButtons = \r\n }\r\n while(x)\r\n }\r\n if(component.ComponentType == \"HEADER\"){\r\n resultItems.push()\r\n }\r\n if(component.ComponentType == \"SUBHEADER\"){\r\n\r\n }\r\n if(component.ComponentType == \"TEXT\"){\r\n resultItems.push()\r\n }\r\n if (component.ComponentType == \"GRADIENT\"){\r\n resultItems.push()\r\n }\r\n }\r\n if (component.ComponentFamily == \"BAR\"){\r\n resultItems.push()\r\n }\r\n break;\r\n case \"CARD\":\r\n if(component.ComponentType == \"PARAGRAPH\"){\r\n //resultItems.push()\r\n }\r\n break;\r\n case \"DATA\":\r\n if (component.ComponentType == \"ACCORDION\"){\r\n resultItems.push(\r\n \r\n \r\n \r\n \r\n {headerButtons}\r\n \r\n {resultItems}\r\n \r\n \r\n \r\n )\r\n } else{\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n \r\n } \r\n}\r\n\r\nexport default withStyles(useStyles)(QuizResults);","import React, { Component } from 'react'\r\nimport Button from '@material-ui/core/Button'\r\nimport {FormControl, Input, TextField, InputLabel} from '@material-ui/core'\r\nimport NavigateNext from '@material-ui/icons/NavigateNext'\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n textAlign:'center',\r\n padding: '15px'\r\n },\r\n textfield: {\r\n maxWidth:'100px',\r\n [theme.breakpoints.down('xs')]: {\r\n margin:'8px'\r\n }\r\n },\r\n button: {\r\n height:'56px',\r\n [theme.breakpoints.down('xs')]: {\r\n width:'100px',\r\n marginTop:'8px'\r\n }\r\n }\r\n})\r\n\r\nclass InputAnswer extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n invalidAnswer: true, //on ComponenetDidMount, put logic in to update htis based on response\r\n answer: \"\",\r\n valMin: \"\",\r\n valMax: \"\",\r\n valPrecision: \"\",\r\n errorMessage: \"\",\r\n inputError: false,\r\n saving: false\r\n }\r\n }\r\n\r\n \r\n componentDidMount() {\r\n this.setState({\r\n answer: this.props.question.Responses[0].Response,\r\n invalidAnswer: true,\r\n valMin: this.props.question.ValueLimitationMin,\r\n valMax: this.props.question.ValueLimitationMax,\r\n valPrecision: this.props.question.ValueLimitationPrecision\r\n })\r\n }\r\n\r\n componentDidUpdate(prevProps){\r\n\r\n if(prevProps.question.QuestionId !== this.props.question.QuestionId){\r\n this.setState({\r\n answer: this.props.question.Responses[0].Response,\r\n invalidAnswer: this.props.question.Responses[0].Response.length ? false : true,\r\n saving: false\r\n\r\n })\r\n console.log(this.state)\r\n }\r\n }\r\n\r\n handleEnter = (event) => {\r\n if(event.key == \"Enter\" && !this.state.invalidAnswer){\r\n this.props.updateResponseValue(this.state.answer)\r\n }\r\n }\r\n\r\n onChange = (ev) =>{\r\n let value = ev.target.value\r\n let message = this.state.errorMessage\r\n let validation = this.props.validation\r\n //validation goes here\r\n //...\r\n //...\r\n\r\n //check for numeric\r\n if(isNaN(value)){\r\n message = validation.NotANumber\r\n }\r\n\r\n //check for range\r\n else if(this.state.valMin.length && this.state.valMax.length && (Number(value) < Number(this.state.valMin) || Number(value) > Number(this.state.valMax))){\r\n console.log(\"out of range\")\r\n message = validation.OutOfRange.replace('', this.state.valMin).replace('', this.state.valMax)\r\n }\r\n\r\n //check for precision\r\n else if(Math.floor(value) != value){\r\n if(this.state.valPrecision == \"0\" || this.state.valPrecision == \"\"){\r\n message = validation.WholeNumbers\r\n } else {\r\n message = value.split('.')[1].length > this.state.valPrecision ? validation.InvalidPrecision : \"\" \r\n }\r\n } \r\n\r\n else {\r\n message = ''\r\n }\r\n\r\n this.setState({\r\n errorMessage: message,\r\n inputError: message.length ? true : false,\r\n answer: value\r\n })\r\n\r\n //then update state\r\n if (value && !message.length){\r\n this.setState({\r\n invalidAnswer: false,\r\n answer: value\r\n })\r\n } else {\r\n this.setState({\r\n invalidAnswer: true\r\n })\r\n }\r\n console.log(\"value: \" + value + \" and message: \" + message)\r\n }\r\n\r\n onBlur = (ev) => {\r\n //console.log(ev)\r\n setTimeout((ev) => {\r\n if(!this.state.invalidAnswer && !this.props.helpOpen){\r\n \r\n this.setState({saving: true})\r\n this.props.updateResponseValue(this.state.answer)\r\n }\r\n }, 100)\r\n }\r\n\r\n handleClick = (ev) => {\r\n if(!this.state.invalidAnswer && !this.state.saving){\r\n this.props.updateResponseValue(this.state.answer)\r\n }\r\n }\r\n\r\n render(){\r\n const {classes} = this.props\r\n let prompt = this.props.question.QuestionPrompt.length ? this.props.question.QuestionPrompt : \"input\"\r\n return(\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(InputAnswer)","import React, { Component } from 'react'\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel'\r\nimport Radio from '@material-ui/core/Radio'\r\n\r\nclass Toggle extends Component{\r\n constructor(props){\r\n super(props)\r\n }\r\n render(){\r\n if(this.props){\r\n let answer = this.props.answer;\r\n return(\r\n //Answer \r\n nope
\r\n \r\n }\r\n}\r\n\r\nexport default Toggle;","\r\nimport React, { Component } from 'react';\r\nimport { FormControl, Select, MenuItem, InputLabel} from '@material-ui/core'\r\n\r\n\r\n\r\nclass Height extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n invalidAnswer: true, //on ComponenetDidMount, put logic in to update htis based on response\r\n answer: \"\",\r\n answerInches: -1,\r\n answerFeet: -1,\r\n valMin: \"\",\r\n valMax: \"\",\r\n valPrecision: \"\",\r\n errorMessage: \"\",\r\n inputError: false,\r\n Inches: [0,1,2,3,4,5,6,7,8,9,10,11],\r\n Feet: [0,1,2,3,4,5,6,7,8,9]\r\n }\r\n }\r\n\r\n \r\n componentDidMount() {\r\n //gotta convert to int for all the math stuff\r\n //important for comparisons ( >0 vs .length)\r\n var answer = parseInt(this.props.question.Responses[0].Response)\r\n this.createFeetArray()\r\n this.setState({\r\n answer: answer,\r\n invalidAnswer: true,\r\n valMin: this.props.question.ValueLimitationMin,\r\n valMax: this.props.question.ValueLimitationMax,\r\n valPrecision: this.props.question.ValueLimitationPrecision,\r\n errorMessage:\"\" \r\n })\r\n if(this.props.question.Responses[0].Response > 0 ){\r\n this.setInchesAndFeet(this.props.question.Responses[0].Response)\r\n }\r\n }\r\n\r\n createFeetArray(){\r\n let max = Math.floor(this.props.question.ValueLimitationMax/12)\r\n let min = Math.floor(this.props.question.ValueLimitationMin/12)\r\n\r\n let feet = []\r\n\r\n for(var x=min; x {\r\n this.setState({\r\n answerInches: ev.target.value\r\n }, () => {\r\n if(this.state.answerFeet >= 0 && this.state.answerInches >= 0){\r\n this.setSavableAnswer()\r\n }\r\n })\r\n }\r\n\r\n setFeet = ev => {\r\n this.setState({\r\n answerFeet: ev.target.value\r\n }, () => {\r\n if(this.state.answerFeet >= 0 && this.state.answerInches >= 0){\r\n this.setSavableAnswer()\r\n }\r\n } \r\n )\r\n }\r\n\r\n setSavableAnswer(){\r\n var inches = this.state.answerInches + this.state.answerFeet*12\r\n if(inches > this.state.valMax || inches 0){\r\n var inchString = inches.toString()\r\n this.props.updateResponseValue(inchString)\r\n }\r\n }\r\n }\r\n\r\n render(){\r\n if(this.props){\r\n let answer = this.props.question.Responses[0].Response;\r\n \r\n return(\r\n //Answer \r\n \r\n
\r\n {this.props.prompts.HeightPrimary} \r\n \r\n {this.state.Feet.map((item) => {item} )}\r\n \r\n \r\n
\r\n {this.props.prompts.HeightSecondary} \r\n \r\n {this.state.Inches.map((item) => {item} )}\r\n \r\n \r\n
{this.state.errorMessage}
\r\n
\",this.props.question.ValueLimitationMin)\r\n })\r\n } \r\n //if adult age range\r\n else if(age > this.props.question.ValueLimitationMax){\r\n this.setState({\r\n errorMessage: this.props.validation.InvalidAgeTooOld.replace(\"\",this.props.question.ValueLimitationMax)\r\n })\r\n }\r\n \r\n else {\r\n this.props.updateResponseValue(fullDate)\r\n }\r\n console.log(fullDate)\r\n\r\n }\r\n\r\n \r\n\r\n render(){\r\n if(this.props){\r\n let answer = this.props.question.Responses[0].Response;\r\n\r\n // Fetch the month content from the inbound JSON. Order the incoming list by MonthSequenceInYear. Ultimately map the resultant array to the MenuItem JSX object. \r\n let monthSQL = this.props.prompts.MonthSQL;\r\n monthSQL.sort((a, b) => parseInt(a.MonthSequenceInYear) - parseInt(b.MonthSequenceInYear));\r\n \r\n return(\r\n //Answer \r\n \r\n
\r\n {this.props.prompts.Month} \r\n \r\n {monthSQL.map(month => {month.StandardContent} )}\r\n \r\n \r\n
\r\n {this.props.prompts.Day} \r\n \r\n {this.state.daySelect}\r\n \r\n \r\n
\r\n {this.props.prompts.Year} \r\n \r\n {this.state.yearSelect}\r\n \r\n \r\n
{this.state.errorMessage}
\r\n
{start} )\r\n start++\r\n }\r\n } else{\r\n while (start >= end){\r\n options.push({start} )\r\n start--\r\n }\r\n }\r\n return options\r\n}\r\n\r\n\r\n\r\nexport default DateOfBirth;","import React, { Component } from 'react'\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport Select from \"@material-ui/core/Select\";\r\n\r\nclass DropdownIncremental extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n answer: \"\"\r\n }\r\n }\r\n\r\n componentDidMount(){\r\n if(this.props.question.Responses[0].Response.length){\r\n this.setState({\r\n answer: this.props.questions.Responses[0].Response\r\n })\r\n }\r\n }\r\n\r\n changeAnswer = (ev) => {\r\n console.log(\"dropdown answer: \", ev.target.value)\r\n this.setState({\r\n answer: ev.target.value\r\n })\r\n this.props.updateResponseValue(ev.target.value)\r\n }\r\n render(){\r\n if(this.props){\r\n let answer = this.props.question.Responses[0].Response;\r\n console.log(\"Dropdown answer: \" + answer)\r\n\r\n var answers = []\r\n var value;\r\n value = parseInt(this.props.question.ValueLimitationMin)\r\n while(value <= parseInt(this.props.question.ValueLimitationMax)){\r\n answers.push({value} )\r\n value += parseInt(this.props.question.ValueLimitationIncrement)\r\n }\r\n return(\r\n //Answer \r\n\r\n \r\n \r\n {answers}\r\n \r\n \r\n )\r\n } else return nope
\r\n \r\n }\r\n}\r\n\r\nexport default DropdownIncremental;","import Card from '@material-ui/core/Card';\r\nimport React, { Component } from 'react';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport CardActions from '@material-ui/core/CardActions'\r\nimport { FormControl, Select, MenuItem, InputLabel, Popover, IconButton, Typography, CardContent} from '@material-ui/core'\r\nimport HelpIcon from '@material-ui/icons/Help';\r\nimport PopupState, { bindTrigger, bindPopover} from 'material-ui-popup-state'\r\n\r\nimport InputAnswer from './answers/Input'\r\nimport Toggle from './answers/Toggle'\r\nimport Height from './answers/Height'\r\nimport DateOfBirth from './answers/DateOfBirth'\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport DropdownIncremental from './answers/DropdownIncremental';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n \r\n },\r\n header: {\r\n textAlign: 'center',\r\n marginBottom: '0px'\r\n },\r\n card: {\r\n padding: '0 1vw 1em 1vw'\r\n },\r\n center: {\r\n textAlign: 'center',\r\n justifyContent: 'center'\r\n },\r\n smallTitle: {\r\n fontSize: '1.3em'\r\n },\r\n regularTitle: {\r\n fontSize: '1.5em'\r\n }\r\n});\r\n\r\nclass Question extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n answer: props.question[0].Responses[0].Response,\r\n helpOpen: false\r\n }\r\n\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if(this.props.question[0].QuestionStandardContent !== prevProps.question[0].QuestionStandardContent){\r\n this.setState({answer: this.props.question[0].Responses[0].Response})\r\n }\r\n }\r\n\r\n changeAnswer = ev => {\r\n console.log(ev.target.value)\r\n this.setState({answer: ev.target.value})\r\n this.props.updateResponseValue(ev.target.value)\r\n }\r\n\r\n handleMouseDown = ev => {\r\n this.setState({\r\n helpOpen: !this.state.helpOpen\r\n })\r\n }\r\n\r\n handleClose = ev => {\r\n console.log(\"handleClose\")\r\n this.setState({\r\n helpOpen: false\r\n })\r\n return;\r\n }\r\n\r\n render() {\r\n const {classes} = this.props;\r\n let answertype = null;\r\n \r\n switch(this.props.question[0].QuestionTypeKeyName){\r\n case 'INTEGER INPUT':\r\n case 'DECIMAL INPUT':\r\n answertype = \r\n break\r\n case 'HEIGHT':\r\n if(this.props.uom == \"IMPERIAL\"){\r\n answertype = \r\n }\r\n else{\r\n answertype = \r\n break;\r\n case 'DROPDOWN':\r\n answertype = \r\n //\r\n \r\n \r\n {this.props.questionPrompts.Dropdown} \r\n \r\n {this.props.question[0].Answers.sort((a, b) => (parseInt(a.AnswerSequenceInQuestion) - parseInt(b.AnswerSequenceInQuestion))).map(item => {item.AnswerStandardContent} )}\r\n \r\n \r\n break\r\n default:\r\n answertype = \r\n {this.props.question[0].Answers.sort((a, b) => (parseInt(a.AnswerSequenceInQuestion) - parseInt(b.AnswerSequenceInQuestion))).map(item => )}\r\n \r\n break\r\n }\r\n //make the icon\r\n let helpIcon = null\r\n if(this.props.question[0].QuestionHelpText.length){\r\n helpIcon = \r\n {popupState => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n }\r\n\r\n //font size based on content length or help icon\r\n let fontsize = '1.5em'\r\n if (this.props.question[0].QuestionStandardContent.length >= 80 || this.props.question[0].QuestionHelpText.length){\r\n fontsize = '1.3em'\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n {helpIcon}\r\n \r\n {this.props.question[0].QuestionStandardContent}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {answertype}\r\n \r\n \r\n )\r\n }\r\n}\r\n// {this.props.saveRemaining()}}>\r\n \r\n }\r\n}\r\n\r\nexport default NextButton","import React, { Component } from 'react'\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel'\r\nimport Checkbox from '@material-ui/core/Checkbox'\r\nimport TableRow from '@material-ui/core/TableRow'\r\nimport TableCell from '@material-ui/core/TableCell'\r\n\r\nimport { Popover, IconButton, Typography, CardContent} from '@material-ui/core'\r\nimport HelpIcon from '@material-ui/icons/Help';\r\nimport PopupState, { bindTrigger, bindPopover} from 'material-ui-popup-state'\r\n\r\nclass TableCheckbox extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n yesID: '',\r\n noID: '', \r\n checked: false\r\n }\r\n }\r\n\r\n componentDidMount(){\r\n var yes, no;\r\n //Assuming always that two states, Checked and Unchecked, are the only ones that are available\r\n //this is neither flexible nor good\r\n //but here we are\r\n if(this.props.question.Answers[0].AnswerName == \"Yes\"){\r\n yes = this.props.question.Answers[0].AnswerId\r\n no = this.props.question.Answers[1].AnswerId\r\n } else {\r\n yes = this.props.question.Answers[1].AnswerId\r\n no = this.props.question.Answers[0].AnswerId\r\n }\r\n\r\n if(this.props.question.Responses[0].Response == yes){\r\n this.setState({\r\n checked:true\r\n })\r\n }\r\n\r\n this.setState({\r\n yesID: yes,\r\n noID: no\r\n })\r\n }\r\n\r\n handleChange = ev => {\r\n if(ev.target.checked){\r\n this.setState({\r\n checked:true\r\n })\r\n this.props.questionSetUpdateResponseValue(this.props.question.QuestionId, this.state.yesID)\r\n } else {\r\n this.setState({\r\n checked:false\r\n })\r\n this.props.questionSetUpdateResponseValue(this.props.question.QuestionId, this.state.noID)\r\n }\r\n }\r\n\r\n render(){\r\n if(this.props){\r\n var helpIcon = []\r\n if(this.props.question.QuestionHelpText.length){\r\n helpIcon = \r\n {popupState => (\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n }\r\n return(\r\n //Answer \r\n \r\n \r\n \r\n {helpIcon}\r\n {this.props.question.QuestionStandardContent}\r\n \r\n \r\n \r\n \r\n \r\n )\r\n } else return nope
\r\n \r\n }\r\n}\r\n\r\nexport default TableCheckbox;","import React, { Component } from 'react'\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel'\r\nimport Radio from '@material-ui/core/Radio'\r\nimport TableRow from '@material-ui/core/TableRow'\r\nimport TableCell from '@material-ui/core/TableCell'\r\nimport { Popover, IconButton, Typography, CardContent} from '@material-ui/core'\r\nimport HelpIcon from '@material-ui/icons/Help';\r\nimport PopupState, { bindTrigger, bindPopover} from 'material-ui-popup-state'\r\n\r\nclass Toggle extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n answer: ''\r\n }\r\n }\r\n \r\n componentDidMount(){\r\n if(this.props.question.Responses[0].Response != ''){\r\n this.setState({\r\n answer: this.props.question.Responses[0].Response,\r\n \r\n })\r\n }\r\n }\r\n\r\n handleChange = ev => {\r\n if(ev.target.value != this.state.answer){\r\n this.setState({\r\n answer:ev.target.value\r\n })\r\n this.props.questionSetUpdateResponseValue(this.props.question.QuestionId, ev.target.value)\r\n } \r\n }\r\n\r\n render(){\r\n if(this.props){\r\n var helpIcon = []\r\n if(this.props.question.QuestionHelpText.length){\r\n helpIcon = \r\n {popupState => (\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n }\r\n return(\r\n //Answer \r\n \r\n \r\n {helpIcon}\r\n \r\n \r\n {this.props.question.QuestionStandardContent}\r\n \r\n {this.props.question.Answers.map(answer => (\r\n \r\n )\r\n } else return nope
\r\n \r\n }\r\n}\r\n\r\nexport default Toggle;","import React, { Component } from 'react'\r\nimport Grid from '@material-ui/core/Grid'\r\nimport TableRow from '@material-ui/core/TableRow'\r\nimport TableCell from '@material-ui/core/TableCell'\r\nimport Slider from '@material-ui/core/Slider';\r\nimport { Popover, IconButton, Typography, CardContent} from '@material-ui/core'\r\nimport HelpIcon from '@material-ui/icons/Help';\r\nimport PopupState, { bindTrigger, bindPopover} from 'material-ui-popup-state'\r\n\r\n\r\nclass TableSlider extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n answer: 0,\r\n answertext:'',\r\n answerarray: []\r\n }\r\n }\r\n \r\n componentDidMount(){\r\n var answerArray = this.props.question.Answers.sort((a,b) => a.AnswerSequenceInQuestion - b.AnswerSequenceInQuestion)\r\n //answerArray.unshift({\"AnswerStandardContent\": \"Please select an answer\"})\r\n if(this.props.question.Responses[0].Response != ''){\r\n for(var x=0; x {\r\n // if(ev.target.value != this.state.answer){\r\n // this.setState({\r\n // answer:ev.target.value\r\n // })\r\n // this.props.questionSetUpdateResponseValue(this.props.question.QuestionId, ev.target.value)\r\n // } \r\n this.props.questionSetUpdateResponseValue(this.props.question.QuestionId, this.state.answerarray[value].AnswerId)\r\n }\r\n\r\n handleSliding = (ev, value) => {\r\n this.setState({\r\n answer: value,\r\n answertext: this.state.answerarray[value].AnswerStandardContent\r\n })\r\n }\r\n\r\n render(){\r\n if(this.props){\r\n let helpIcon = null\r\n if(this.props.question.QuestionHelpText.length){\r\n helpIcon = \r\n {popupState => (\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n }\r\n return(\r\n //Answer \r\n \r\n \r\n {helpIcon}\r\n \r\n \r\n {this.props.question.QuestionStandardContent}\r\n \r\n \r\n \r\n \r\n {this.state.answertext}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n )\r\n } else return nope
\r\n \r\n }\r\n}\r\n\r\nexport default TableSlider;","import React, { Component } from 'react'\r\nimport Button from '@material-ui/core/Button'\r\nimport {FormControl, Input, TextField, InputLabel} from '@material-ui/core'\r\nimport NavigateNext from '@material-ui/icons/NavigateNext'\r\nimport Radio from '@material-ui/core/Radio'\r\nimport TableRow from '@material-ui/core/TableRow'\r\nimport TableCell from '@material-ui/core/TableCell'\r\nimport { Popover, IconButton, Typography, CardContent} from '@material-ui/core'\r\nimport HelpIcon from '@material-ui/icons/Help';\r\nimport PopupState, { bindTrigger, bindPopover} from 'material-ui-popup-state'\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n textAlign:'center',\r\n padding: '15px'\r\n },\r\n textfield: {\r\n maxWidth:'100px',\r\n [theme.breakpoints.down('xs')]: {\r\n margin:'8px'\r\n }\r\n },\r\n button: {\r\n height:'56px',\r\n [theme.breakpoints.down('xs')]: {\r\n width:'100px',\r\n marginTop:'8px'\r\n }\r\n }\r\n})\r\n\r\nclass TableInput extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n invalidAnswer: true, //on ComponenetDidMount, put logic in to update htis based on response\r\n answer: \"\",\r\n valMin: \"\",\r\n valMax: \"\",\r\n valPrecision: \"\",\r\n errorMessage: \"\",\r\n inputError: false,\r\n saving: false\r\n }\r\n }\r\n\r\n \r\n componentDidMount() {\r\n this.setState({\r\n answer: this.props.question.Responses[0].Response,\r\n invalidAnswer: true,\r\n valMin: this.props.question.ValueLimitationMin,\r\n valMax: this.props.question.ValueLimitationMax,\r\n valPrecision: this.props.question.ValueLimitationPrecision\r\n })\r\n }\r\n\r\n componentDidUpdate(prevProps){\r\n\r\n if(prevProps.question.QuestionId !== this.props.question.QuestionId){\r\n this.setState({\r\n answer: this.props.question.Responses[0].Response,\r\n invalidAnswer: this.props.question.Responses[0].Response.length ? false : true,\r\n saving: false\r\n\r\n })\r\n console.log(this.state)\r\n }\r\n }\r\n\r\n handleEnter = (event) => {\r\n if(event.key == \"Enter\" && !this.state.invalidAnswer){\r\n this.props.questionSetUpdateResponseValue(this.props.question.QuestionId, this.state.answer)\r\n }\r\n }\r\n\r\n onChange = (ev) =>{\r\n console.log(ev)\r\n let value = ev.target.value\r\n let message = this.state.errorMessage\r\n let validation = this.props.validation\r\n console.log(value)\r\n //validation goes here\r\n //...\r\n //...\r\n\r\n //check for numeric\r\n if(isNaN(value)){\r\n message = validation.NotANumber\r\n }\r\n\r\n //check for range\r\n else if(this.state.valMin.length && this.state.valMax.length && (Number(value) < Number(this.state.valMin) || Number(value) > Number(this.state.valMax))){\r\n console.log(\"out of range\")\r\n message = validation.OutOfRange.replace('', this.state.valMin).replace('', this.state.valMax)\r\n }\r\n\r\n //check for precision\r\n else if(Math.floor(value) != value){\r\n if(this.state.valPrecision == \"0\" || this.state.valPrecision == \"\"){\r\n message = validation.WholeNumbers\r\n } else {\r\n message = value.split('.')[1].length > this.state.valPrecision ? validation.InvalidPrecision : \"\" \r\n }\r\n } \r\n\r\n else {\r\n message = ''\r\n }\r\n\r\n this.setState({\r\n errorMessage: message,\r\n inputError: message.length ? true : false,\r\n answer: value\r\n })\r\n\r\n //then update state\r\n if (value && !message.length){\r\n this.setState({\r\n invalidAnswer: false,\r\n answer: value\r\n })\r\n } else {\r\n this.setState({\r\n invalidAnswer: true\r\n })\r\n }\r\n console.log(\"value: \" + value + \" and message: \" + message)\r\n }\r\n\r\n onBlur = (ev) => {\r\n //console.log(ev)\r\n setTimeout((ev) => {\r\n if(!this.state.invalidAnswer && !this.props.helpOpen){\r\n \r\n this.setState({saving: true})\r\n this.props.questionSetUpdateResponseValue(this.props.question.QuestionId, this.state.answer)\r\n }\r\n }, 100)\r\n }\r\n\r\n handleClick = (ev) => {\r\n if(!this.state.invalidAnswer && !this.state.saving){\r\n this.props.questionSetUpdateResponseValue(this.props.question.QuestionId, this.state.answer)\r\n }\r\n }\r\n\r\n render(){\r\n const {classes} = this.props\r\n let prompt = this.props.question.QuestionPrompt.length ? this.props.question.QuestionPrompt : \"input\"\r\n var helpIcon = []\r\n if(this.props.question.QuestionHelpText.length){\r\n helpIcon = \r\n {popupState => (\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n }\r\n return(\r\n \r\n \r\n {helpIcon}\r\n \r\n \r\n {this.props.question.QuestionStandardContent}\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(TableInput)","\r\nimport Button from '@material-ui/core/Button'\r\nimport Card from '@material-ui/Core/Card';\r\nimport React, { Component } from 'react';\r\nimport CardActions from '@material-ui/core/CardActions'\r\nimport { Popover, IconButton, Typography, CardContent} from '@material-ui/core'\r\nimport HelpIcon from '@material-ui/icons/Help';\r\nimport PopupState, { bindTrigger, bindPopover} from 'material-ui-popup-state'\r\nimport NavigateNext from '@material-ui/icons/NavigateNext'\r\n\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\n\r\nimport NextButton from './nextButton'\r\nimport TableCheckbox from './answers/TableCheckbox'\r\nimport TableToggle from './answers/TableToggle'\r\nimport TableSlider from './answers/TableSlider'\r\nimport TableInput from './answers/TableInput'\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\n\r\nconst styles = theme => ({\r\n root: {\r\n \r\n },\r\n header: {\r\n textAlign: 'center',\r\n marginBottom: '0px'\r\n },\r\n card: {\r\n padding: '0 1vw 1em 1vw'\r\n },\r\n center: {\r\n textAlign: 'center',\r\n justifyContent: 'center'\r\n },\r\n smallTitle: {\r\n fontSize: '1.3em'\r\n },\r\n regularTitle: {\r\n fontSize: '1.5em'\r\n }\r\n});\r\n\r\nclass Clustered extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n setCount: props.question.QuestionSetQuestions.length\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n //if(this.props.question.QuestionSetQuestions[0].QuestionStandardContent !== prevProps.question.QuestionSetQuestions[0].QuestionStandardContent){\r\n // this.setState({answer: this.props.question.QuestionSetQuestions[0].Responses[0].Response})\r\n //}\r\n }\r\n\r\n changeAnswer = ev => {\r\n console.log(ev.target.value)\r\n //this.setState({answer: ev.target.value})\r\n //this.props.updateResponseValue(ev.target.value)\r\n }\r\n\r\n \r\n\r\n render() {\r\n const {classes} = this.props;\r\n let answertype = null;\r\n let nextbutton = null;\r\n //questions types word differently \r\n\r\n if(this.props.question.QuestionSetQuestions[0] && this.props.question.QuestionSetQuestions[0].QuestionTypeKeyName == \"CHECKBOX\"){\r\n answertype = \r\n \r\n {this.props.question.QuestionSetQuestions.map((question) => (\r\n \r\n
\r\n nextbutton = \r\n \r\n \r\n {answer.AnswerStandardContent} \r\n ))}\r\n \r\n \r\n \r\n \r\n {this.props.question.QuestionSetQuestions.map((question) => {\r\n return question.QuestionDisplayedFlag == \"1\" ? \r\n \r\n
\r\n }\r\n if(this.props.question.QuestionSetQuestions[0] && this.props.question.QuestionSetQuestions[0].QuestionTypeKeyName == \"SLIDER\"){\r\n console.log(\"slider\")\r\n answertype = \r\n \r\n \r\n {this.props.question.QuestionSetQuestions.map((question) => (\r\n \r\n
\r\n nextbutton = \r\n \r\n {this.props.question.QuestionSetQuestions.map((question) => {\r\n return question.QuestionTypeKeyName === \"DECIMAL INPUT\" ? \r\n \r\n {answer.AnswerStandardContent} \r\n ))}\r\n \r\n \r\n
\r\n nextbutton = \r\n {popupState => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n }\r\n\r\n //font size based on content length or help icon\r\n let fontsize = '1.5em'\r\n if (this.props.question.QuestionSetQuestions[0].QuestionStandardContent.length >= 80 || this.props.question.QuestionSetQuestions[0].QuestionHelpText.length){\r\n fontsize = '1.3em'\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n {helpIcon}\r\n \r\n {this.props.question.QuestionSetStandardContent}\r\n \r\n\r\n \r\n
\r\n \r\n \r\n {answertype}\r\n \r\n {nextbutton}\r\n \r\n \r\n )\r\n }\r\n}\r\n//\r\n {this.props.question.QuestionSetQuestions[this.props.question.QuestionSetQuestions.length-1].Answers.sort((a, b) => (parseInt(a.AnswerSequenceInQuestion) - parseInt(b.AnswerSequenceInQuestion))).map(item => \r\n }\r\n \r\n let helpIcon = null\r\n if(this.props.question.QuestionSetQuestions[0].QuestionHelpText.length){\r\n helpIcon = \r\n {popupState => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n }\r\n\r\n //font size based on content length or help icon\r\n let fontsize = '1.5em'\r\n if (this.props.question.QuestionSetQuestions[0].QuestionStandardContent.length >= 80 || this.props.question.QuestionSetQuestions[0].QuestionHelpText.length){\r\n fontsize = '1.3em'\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n {helpIcon}\r\n \r\n {this.props.question.QuestionSetQuestions[0].QuestionStandardContent}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {this.props.question.QuestionSetQuestions[this.props.question.QuestionSetQuestions.length-1].QuestionStandardContent}\r\n \r\n {answertype}\r\n \r\n {nextbutton}\r\n \r\n \r\n )\r\n }\r\n}\r\n// {\r\n this.moveToNext()\r\n this.setState({\r\n Saving:false\r\n })\r\n })\r\n \r\n }\r\n \r\n })\r\n }\r\n \r\n }\r\n\r\n questionSetUpdateResponseValue = (questionID, value) => {\r\n //since saving has to be done at a higher level for QSs, \r\n //this version of UpdateResponseValue does all the other stuff.\r\n //This is called once the QS is marked as complete\r\n //QS is marked as complete when\r\n\r\n //def: value - the answer being saved\r\n //def: questionID - the index of the question in the questionSet\r\n \r\n fetch('../../WsWebServiceHra/SaveAnswer/' + \r\n this.props.authtoken + '/' +\r\n this.props.responseguid + '/' +\r\n questionID + '/' +\r\n value.toString() + '/',\r\n {\r\n method: \"POST\",\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: {\r\n }\r\n })\r\n .then(response=>response.json())\r\n .then(response => {\r\n if(response.Success){\r\n //some branching logic BS goes in here too, I guess, eventually\r\n //please don't make me do it\r\n //please\r\n //OH WE DOIN IT BOYS\r\n let questions = this.state.Questions;\r\n if(response.Info[0] && response.Info[0].Changes){\r\n let change\r\n for(var x=0; x question done\r\n //Required questions answered\r\n var prevAnswer;\r\n\r\n var requiredQuestions = 0;\r\n var answeredQuestions = 0;\r\n var thisquestion;\r\n\r\n for(var x=0; x {\r\n //if(thisquestion.QuestionTypeKeyName != \"SLIDER\"){\r\n this.moveToNext();\r\n // }\r\n })\r\n }\r\n \r\n }\r\n \r\n }\r\n \r\n })\r\n \r\n \r\n \r\n\r\n }\r\n\r\n branchingLogic = (questions, change) => {\r\n for(var y=this.state.CurrentQuestionsIndex; y {\r\n \r\n if(this.state.QuestionsAnswered==this.state.QuestionCount){\r\n this.completeAssessment()\r\n } else {\r\n setTimeout(() => {\r\n this.nextQuestion()\r\n }, 200)\r\n \r\n }\r\n }\r\n\r\n completeAssessment = () => {\r\n //complete the mini assessment\r\n this.props.setCurrentIndex(this.state.Questions.length)\r\n this.props.showPersonalInfoCard()\r\n fetch('../../WsWebServiceHra/CompleteAssessment/' + this.props.authtoken + '/' + this.props.responseguid + '/', \r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: {\r\n\r\n }\r\n })\r\n .then(response=>response.json())\r\n .then(response=>{\r\n if(response.Success){\r\n console.log('hra completed', response)\r\n this.props.getResultsViewInstance()\r\n } else {\r\n console.log('hra not completed', response)\r\n }\r\n })\r\n }\r\n\r\n wrappernextQuestion = () => {\r\n if (this.state.CurrentQuestionsIndex == this.state.Questions.length-1){\r\n this.completeAssessment()\r\n } else {\r\n if(!this.state.Saving){\r\n this.setState({\r\n direction: 'right',\r\n CurrentQuestionNotAnswered: false\r\n })\r\n setTimeout(() => {\r\n this.nextQuestion()\r\n }, 200)\r\n }\r\n }\r\n \r\n }\r\n\r\n wrappernextQuestionForGroup = () => {\r\n if (this.state.CurrentQuestionsIndex == this.state.Questions.length-1){\r\n this.completeAssessment()\r\n } else {\r\n this.setState({\r\n direction: 'right',\r\n CurrentQuestionNotAnswered: false\r\n })\r\n setTimeout(() => {\r\n this.nextQuestion()\r\n }, 200)\r\n }\r\n \r\n }\r\n\r\n wrapperpreviousQuestion = () => {\r\n this.setState({\r\n direction: 'left',\r\n CurrentQuestionNotAnswered: false\r\n })\r\n setTimeout(() => {\r\n this.previousQuestion()\r\n }, 200)\r\n }\r\n\r\n async saveRemaining(){\r\n var currentQuestion\r\n if(this.state.Questions[this.state.CurrentQuestionsIndex].QuestionSetQuestions[0].QuestionTypeKeyName == \"CHECKBOX\"){\r\n var no = this.state.Questions[this.state.CurrentQuestionsIndex].QuestionSetQuestions[0].Answers[0].AnswerName == \"No\" ? this.state.Questions[this.state.CurrentQuestionsIndex].QuestionSetQuestions[0].Answers[0].AnswerId : this.state.Questions[this.state.CurrentQuestionsIndex].QuestionSetQuestions[0].Answers[1].AnswerId\r\n for(var x=0; x {\r\n\r\n if(numberSaved != 0){\r\n \r\n } else {\r\n \r\n }\r\n \r\n \r\n //}, numberSaved)\r\n }\r\n \r\n }\r\n//Question {this.state.CurrentRequiredQuestion+1} out of {this.state.QuestionCount} \r\n\r\n render() {\r\n //\r\n // \r\n const {classes} = this.props\r\n\r\n //Single question vs question set stuffffffff\r\n var question;\r\n if (this.state.Questions[this.state.CurrentQuestionsIndex] && this.state.Questions[this.state.CurrentQuestionsIndex].QuestionSetTypeKeyName == \"STANDARD\"){\r\n question = \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {question}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n )\r\n } else {\r\n return(\r\n EmptyCard \r\n )\r\n }\r\n }\r\n}\r\n\r\nfunction checkiPhone(){\r\n return true\r\n}\r\n\r\nexport default withStyles(styles)(Quiz);","import { statement } from \"@babel/template\";\r\nimport Card from '@material-ui/core/Card'\r\nimport React, { Component } from 'react'\r\nimport TextField from '@material-ui/core/TextField'\r\nimport Button from '@material-ui/Core/Button'\r\nimport Select from '@material-ui/Core/Select'\r\nimport { CardHeader, CardActionArea, CardActions, Grid } from \"@material-ui/Core\";\r\nimport NavigateNext from '@material-ui/icons/NavigateNext'\r\nimport NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'\r\nimport ButtonGroup from '@material-ui/Core/ButtonGroup'\r\n\r\nclass PersonalInfo extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n firstname: \"\",\r\n lastname: \"\",\r\n email: \"\",\r\n phone: \"\",\r\n mobilephone: \"\",\r\n emailError: false,\r\n lastnameError: false,\r\n firstnameError: false,\r\n phoneError: false,\r\n mobilephoneError: false,\r\n isLoading: false\r\n }\r\n this.handleFirstNameChange = this.handleFirstNameChange.bind(this);\r\n this.handleLastNameChange = this.handleLastNameChange.bind(this);\r\n this.handleEmailChange = this.handleEmailChange.bind(this);\r\n this.handlePhoneChange = this.handlePhoneChange.bind(this);\r\n this.handleMobilePhoneChange = this.handleMobilePhoneChange.bind(this);\r\n\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n }\r\n\r\n handleFirstNameChange(event) {\r\n if(!event.target.value.match(/[!@$%^&*()\\/\\\\,?\":{}|<>]/g)){\r\n this.setState({ firstname: event.target.value, firstnameError: false})\r\n } else {\r\n this.setState({firstname: event.target.value, firstnameError:true})\r\n }\r\n }\r\n\r\n handleLastNameChange(event) {\r\n if(!event.target.value.match(/[!@$%^&*()\\/\\\\,?\":{}|<>]/g)){\r\n this.setState({ lastname: event.target.value, lastnameError:false})\r\n } else {\r\n this.setState({lastnameError:true})\r\n }\r\n \r\n }\r\n\r\n handleEmailChange = (event) => {\r\n this.setState({ email: event.target.value})\r\n }\r\n\r\n handlePhoneChange = (event) => {\r\n \r\n console.log(\"phone change: \" + event.target.value)\r\n this.setState({ phone: event.target.value})\r\n }\r\n\r\n handleMobilePhoneChange = (event) => {\r\n this.setState({ mobilephone: event.target.value})\r\n }\r\n\r\n\r\n validateEmail = (event) => {\r\n var error = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/.test(event.target.value);\r\n this.setState({\r\n emailError: !error\r\n })\r\n }\r\n\r\n validateFirstName = (event) => {\r\n if(this.state.firstname.length && this.state.firstname.match(/^[^a-zA-Z0-9]+$/)){\r\n this.setState({\r\n firstnameError: true\r\n })\r\n }\r\n }\r\n\r\n validateLastName = (event) => {\r\n if(this.state.lastname.length && this.state.lastname.match(/^[^a-zA-Z0-9]+$/)){\r\n this.setState({\r\n lastnameError: true\r\n })\r\n }\r\n }\r\n\r\n handleSubmit(event){\r\n console.log(\"submit: \", this.state)\r\n let hasErrors=false\r\n if(!this.state.email.length || this.state.emailError){\r\n hasErrors = true\r\n this.setState({\r\n emailError: true\r\n })\r\n }\r\n if(this.state.firstnameError || (this.props.viewInstance.FirstNameVisible == \"1\" && (!this.state.firstname.length && this.props.viewInstance.FirstNameRequired == \"1\"))){\r\n hasErrors = true\r\n this.setState({\r\n firstnameError: true\r\n })\r\n }\r\n if(this.state.firstname.length && this.state.firstname.match(/^[^a-zA-Z0-9]+$/)){\r\n hasErrors = true\r\n this.setState({\r\n firstnameError: true\r\n })\r\n }\r\n if(this.state.lastnameError || (this.props.viewInstance.LastNameVisible == \"1\" && (!this.state.lastname.length && this.props.viewInstance.LastNameRequired == \"1\"))){\r\n hasErrors = true\r\n this.setState({\r\n lastnameError: true\r\n })\r\n }\r\n if(this.state.lastname.length && this.state.lastname.match(/^[^a-zA-Z0-9]+$/)){\r\n hasErrors = true\r\n this.setState({\r\n lastnameError: true\r\n })\r\n }\r\n if(this.props.viewInstance.HomePhoneVisible == \"1\" && (!this.state.phone.length && this.props.viewInstance.HomePhoneRequired == \"1\")){\r\n hasErrors = true\r\n this.setState({\r\n phoneError: true\r\n })\r\n }\r\n if(this.props.viewInstance.MobilePhoneVisible == \"1\" && !this.state.mobilephone.length && this.props.viewInstance.MobilePhoneRequired == \"1\"){\r\n hasErrors = true\r\n this.setState({\r\n mobilephoneError: true\r\n })\r\n }\r\n console.log(\"errors: \", this.state)\r\n\r\n \r\n if(!hasErrors){ \r\n this.props.updateUserEmail(this.state.email)\r\n this.setState({\r\n isLoading: true\r\n })\r\n var firstname = this.state.firstname.length ? this.state.firstname : \"~_~\";\r\n var lastname = this.state.lastname.length ? this.state.lastname : \"~_~\";\r\n \r\n fetch('../../WsWebServicePlatform/Participant/Update',\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: JSON.stringify({\r\n \"ParamData\": {\r\n \"AuthToken\": this.props.authtoken,\r\n \"ParticipantGuid\": this.props.participantguid,\r\n \"GroupGuid\": this.props.groupguid,\r\n \"FirstName\": firstname,\r\n \"LastName\": lastname,\r\n \"Email\": this.state.email\r\n }\r\n })\r\n })\r\n .then(results=>results.json())\r\n .then(results=>{\r\n //if(results.Success){\r\n if(this.props.skipAddress){\r\n this.props.showresults();\r\n } else {\r\n\r\n this.props.showAddressInfoCard();\r\n }\r\n if(this.state.phone.length){\r\n fetch('../../WsWebServicePlatform/Participant/Phone/Create/' +\r\n this.props.authtoken + '/' +\r\n this.props.participantguid + '/' +\r\n 'C05F6C51-5992-477C-BD94-7EE28E7CD4BD/' +\r\n '1' + '/' +\r\n this.state.phone\t+ '/',\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: {\r\n \r\n }\r\n })\r\n }\r\n if(this.state.mobilephone.length){\r\n fetch('../../WsWebServicePlatform/Participant/Phone/Create/' +\r\n this.props.authtoken + '/' +\r\n this.props.participantguid + '/' +\r\n '9232B9CA-5C20-40C2-9190-25E302FDC0BE/' +\r\n '2' + '/' +\r\n this.state.mobilephone + '/',\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: {\r\n \r\n }\r\n })\r\n }\r\n \r\n //}\r\n })\r\n }\r\n \r\n \r\n }\r\n\r\n render() {\r\n var icon = \r\n \r\n }\r\n if (this.props.viewInstance.MobilePhoneVisible == \"1\") {\r\n mobilephone = \r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n {firstname}\r\n {lastname}\r\n \r\n \r\n \r\n {this.props.viewInstance.ButtonLabel} {icon} \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default PersonalInfo;","import { statement } from \"@babel/template\";\r\nimport Card from '@material-ui/Core/Card'\r\nimport React, { Component } from 'react'\r\nimport TextField from '@material-ui/Core/TextField'\r\nimport Button from '@material-ui/Core/Button'\r\nimport FormControl from '@material-ui/Core/FormControl'\r\nimport InputLabel from '@material-ui/Core/InputLabel'\r\nimport Select from '@material-ui/Core/Select'\r\nimport MenuItem from '@material-ui/Core/MenuItem'\r\nimport { CardActions, CardHeader, Grid } from \"@material-ui/Core\";\r\n\r\nimport NavigateNextIcon from \"@material-ui/icons/NavigateNext\";\r\n\r\n\r\nimport Script from 'react-load-script';\r\n\r\nclass AddressInfo extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n address1: '',\r\n address2: '',\r\n city: '',\r\n state: '',\r\n zip: '',\r\n address1Error: false,\r\n address2Error: false,\r\n cityError: false,\r\n stateError: false,\r\n zipError: false,\r\n isLoading: false,\r\n canSubmit: false,\r\n address: '',\r\n query: '',\r\n disabledForTyping: false\r\n }\r\n\r\n this.handleAddressLine1Change = this.handleAddressLine1Change.bind(this)\r\n this.handleAddressLine2Change = this.handleAddressLine2Change.bind(this)\r\n this.handleCityChange = this.handleCityChange.bind(this)\r\n this.handleStateChange = this.handleStateChange.bind(this)\r\n this.handleZipChange = this.handleZipChange.bind(this)\r\n\r\n this.handleSubmit = this.handleSubmit.bind(this)\r\n this.onKeyDown = this.onKeyDown.bind(this)\r\n \r\n this.validateZip = this.validateZip.bind(this)\r\n }\r\n\r\n handleScriptLoad = () => {\r\n // Declare Options For Autocomplete\r\n let type = ''\r\n let autocomplete = ''\r\n if(this.props.requirements.AddressStreetVisible == \"1\"){\r\n type = 'address'\r\n autocomplete = 'address1'\r\n }else if(this.props.requirements.AddressCityVisible == \"1\"){\r\n type = '(regions)'\r\n autocomplete = 'city'\r\n }else if(this.props.requirements.AddressStateVisible == \"1\"){\r\n type = '(regions)'\r\n autocomplete = 'state'\r\n } else {\r\n type = '(regions)'\r\n autocomplete = 'postal-code'\r\n }\r\n \r\n\r\n const options = {\r\n types: type,\r\n };\r\n \r\n // Initialize Google Autocomplete\r\n /*global google*/ // To disable any eslint 'google not defined' errors\r\n this.autocomplete = new google.maps.places.Autocomplete(\r\n document.getElementById(autocomplete),\r\n options,\r\n );\r\n \r\n // Avoid paying for data that you don't need by restricting the set of\r\n // place fields that are returned to just the address components and formatted\r\n // address.\r\n this.autocomplete.setFields(['address_components', 'formatted_address']);\r\n \r\n //set country codes\r\n this.autocomplete.setComponentRestrictions({\r\n country: this.props.countryList.length ? this.props.countryList.split(',') : [\"us\", \"pr\", \"vi\", \"gu\", \"mp\"],\r\n });\r\n \r\n // Fire Event when a suggested name is selected\r\n this.autocomplete.addListener('place_changed', this.handlePlaceSelect);\r\n }\r\n \r\n handlePlaceSelect = () => {\r\n \r\n // Extract City From Address Object\r\n const addressObject = this.autocomplete.getPlace();\r\n const address = addressObject.address_components;\r\n\r\n // Reset the state on new place select.\r\n\r\n this.setState({\r\n address1: '',\r\n address2: '',\r\n city: '',\r\n state: '',\r\n zip: ''\r\n })\r\n\r\n // Some addresses do not have a city attached to them- but instead a township, county, parish, etc. In these instances, we first check\r\n // if the given address does have a city- if it does not, we insert the 'administrative_area_level_3' into the city field- \r\n // these values such as 'Wayne Township', 'Bruce Township', 'Kitsap County', etc essentially function as the city in these addresses. \r\n let addressHasCity = false;\r\n\r\n // Check if address is valid\r\n let streetnumber, route; \r\n if (address) {\r\n //cycle through the returned adddress components and set those needed\r\n address.forEach(address => {\r\n switch(address.types[0]){\r\n case 'locality':\r\n this.setState({\r\n city: address.long_name\r\n })\r\n addressHasCity = true;\r\n break;\r\n case 'administrative_area_level_1':\r\n this.setState({\r\n state:address.short_name\r\n })\r\n break;\r\n case 'administrative_area_level_3':\r\n if (!addressHasCity) {\r\n this.setState({\r\n city: address.long_name\r\n })\r\n }\r\n break;\r\n case 'street_number':\r\n streetnumber = address.long_name\r\n break;\r\n case 'route':\r\n route = address.short_name\r\n break;\r\n case 'postal_code':\r\n this.setState({\r\n zip: address.long_name\r\n })\r\n break;\r\n default:\r\n break;\r\n }\r\n })\r\n if(streetnumber && route && streetnumber.length && route.length){\r\n this.setState({\r\n address1: streetnumber + ' ' + route\r\n })\r\n }\r\n\r\n this.setState({disabledForTyping: true})\r\n\r\n // Set State\r\n /*this.setState(\r\n {\r\n address: address,\r\n query: addressObject.formatted_address,\r\n address1:address[0].long_name + \" \" + address[1].long_name,\r\n city: address[3].long_name,\r\n state: address[5].short_name,\r\n zip: address[7].long_name\r\n }\r\n ); */\r\n }\r\n }\r\n\r\n handleAddressLine1Change(event) {\r\n if(!event.target.value.match(/[!@$%^&*(),?\":{}|<>]/g)){\r\n this.setState({ address1: event.target.value, address1Error: false})\r\n //this.checkSubmit(true)\r\n }\r\n else if(!event.target.value.length){\r\n this.setState({ address1: \"\", address1Error: false})\r\n }\r\n else{\r\n this.setState({ address1Error: true})\r\n //this.checkSubmit(true)\r\n }\r\n\r\n }\r\n handleAddressLine2Change(event) {\r\n if(!event.target.value.match(/[!@$%^&*(),?\":{}|<>]/g)){\r\n this.setState({ address2: event.target.value, address2Error: false})\r\n }\r\n else if(!event.target.value.length){\r\n this.setState({ address2: \"\", address2Error: false})\r\n }\r\n else{\r\n this.setState({address2Error: true})\r\n }\r\n }\r\n handleCityChange(event) {\r\n if(!event.target.value.length || !event.target.value.match(/[0-9!@$%^&*(),?\":{}|<>]/g)){\r\n this.setState({ city: event.target.value, cityError: false})\r\n }\r\n else if(!event.target.value.length){\r\n this.setState({ city: \"\", cityError: false})\r\n }\r\n else{\r\n this.setState({cityError: true})\r\n }\r\n }\r\n handleStateChange(event) {\r\n if(!event.target.value.match(/[0-9!@$%^&*(),?\":{}|<>]/g)){\r\n this.setState({ state: event.target.value, stateError: false})\r\n } \r\n else if(!event.target.value.length){\r\n this.setState({ state: \"\", stateError: false})\r\n }\r\n else{\r\n this.setState({stateError: true})\r\n }\r\n }\r\n handleZipChange(event) {\r\n if(event.target.value){\r\n this.setState({ zip: event.target.value, zipError: false})\r\n }\r\n else if(!event.target.value.length){\r\n this.setState({ zip: \"\", zipError: false})\r\n }\r\n else{\r\n this.setState({zipError: true})\r\n }\r\n \r\n }\r\n\r\n validateZip(){\r\n if(this.state.zip.length && !this.state.zip.match(/^\\d{5}(?:[-\\s]\\d{4})?$/g)){\r\n this.setState({\r\n zipError: true\r\n })\r\n }\r\n }\r\n\r\n //checkSubmit(hasErrors){\r\n // //if the last update has errors\r\n // //and can currently submit\r\n // if(hasErrors && !this.state.canSubmit){\r\n // this.setState({\r\n // canSubmit: false\r\n // })\r\n // }\r\n // //if all required fields are valid\r\n // //currently all fields except address2 are required\r\n // if(){\r\n//\r\n // }\r\n//\r\n //}\r\n\r\n handleSubmit() {\r\n let hasErrors = false;\r\n\r\n if(this.state.address1Error || this.state.cityError || this.state.stateError || this.state.zipError){\r\n hasErrors = true\r\n }\r\n\r\n if((!this.state.address1.length || this.state.address1 =='~~') && this.props.requirements.AddressStreetRequired == \"1\"){\r\n hasErrors = true\r\n \r\n this.setState({\r\n address1Error:true\r\n })\r\n }\r\n\r\n if((!this.state.city.length || this.state.city =='~~') && this.props.requirements.AddressCityRequired == \"1\"){\r\n hasErrors = true\r\n \r\n if(!this.state.city.length){\r\n this.setState({city: \"~~\"})\r\n }\r\n this.setState({\r\n cityError:true\r\n })\r\n }\r\n\r\n if((!this.state.state.length || this.state.state =='~~') && this.props.requirements.AddressStateRequired == \"1\"){\r\n hasErrors = true\r\n this.setState({\r\n stateError:true\r\n })\r\n }\r\n\r\n if((!this.state.zip.length || this.state.zip =='~~') && this.props.requirements.ZipRequired == \"1\"){\r\n hasErrors = true\r\n this.setState({\r\n zipError:true\r\n })\r\n }\r\n\r\n if(!hasErrors){\r\n this.setState({\r\n isLoading:true\r\n })\r\n\r\n let address = this.state.address1.length ? encodeURIComponent(this.state.address1) : \"~~\"\r\n let address2 = this.state.address2.length ? encodeURIComponent(this.state.address2) : \"~~\"\r\n let city = this.state.city.length ? encodeURIComponent(this.state.city) : \"~~\"\r\n let state = this.state.state.length ? encodeURIComponent(this.state.state) : \"~~\"\r\n let zip = this.state.zip.length ? encodeURIComponent(this.state.zip) : \"~~\"\r\n\r\n fetch('../../WsWebServicePlatform/Participant/Address/Create/' +\r\n this.props.authtoken + '/' +\r\n this.props.participantguid + '/' +\r\n '90899741-5728-4F9C-A489-691131304962/1/' +\r\n address + '/' + \r\n address2 + '/' +\r\n '~~' + '/' +\r\n city + '/' +\r\n state + '/' +\r\n zip + '/' +\r\n 'USA/',\r\n {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: {\r\n \r\n }\r\n })\r\n .then(results=>results.json())\r\n .then(results=>{\r\n console.log(\"show results\")\r\n this.props.showresults();\r\n \r\n })\r\n .catch((error) => {\r\n console.log(\"Failed to save address\")\r\n this.props.showresults();\r\n })\r\n }\r\n }\r\n\r\n onKeyDown(e) {\r\n //if an address has been selected, prevent typing\r\n if(this.state.disabledForTyping){\r\n console.log(\"prevented\", e)\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n render() {\r\n // Set the language ISO key in the URL. This allows Google's API to return values in the appropriate language.\r\n var languageISO2 = this.props.languageISO2\r\n var url = \"https://maps.googleapis.com/maps/api/js?key=AIzaSyBt491P6Oq_NBxC0mexUlLxuh5dEpryDA4&libraries=places&language=\"+languageISO2;\r\n\r\n let icon = null;\r\n if(this.state.isLoading){\r\n icon = \r\n \r\n \r\n {address1}\r\n {address2}\r\n {city}\r\n {state}\r\n {zip}\r\n {this.props.viewInstance.ButtonLabel} {icon} \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n// Import React Scrit Libraray to load Google object\r\n\r\nclass Search extends Component {\r\n // Define Constructor\r\n constructor(props) {\r\n super(props);\r\n\r\n // Declare State\r\n this.state = {\r\n city: '',\r\n query: ''\r\n };\r\n\r\n }\r\n\r\n\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default AddressInfo;","import React, { Component } from 'react';\r\n\r\n\r\nclass Header extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n }\r\n render() {\r\n var valuegrade, text;\r\n if (this.props.gradeLabel){\r\n text = this.props.gradeLabel;\r\n } else {\r\n if(this.props.valuegrade == \"1\"){\r\n text = \"LOW\"\r\n }\r\n if(this.props.valuegrade == \"2\"){\r\n text = \"MODERATE\"\r\n }\r\n if(this.props.valuegrade == \"3\"){\r\n text = \"HIGH\"\r\n }\r\n }\r\n \r\n\r\n var risktext \r\n if(this.props.content.length){\r\n risktext = this.props.content;\r\n } else {\r\n risktext = 'Your risk is '\r\n }\r\n return(\r\n \r\n
{risktext} \r\n {text} \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Header\r\n\r\n","import React, { Component } from 'react'\r\nimport Grid from '@material-ui/Core/Grid'\r\nimport Button from '@material-ui/Core/Button'\r\nimport {CardActions} from '@material-ui/core'\r\nimport Divider from '@material-ui/Core/Divider';\r\nimport {InteractionHandler} from '../InteractionHandler';\r\n\r\n\r\nclass ButtonGroup extends Component {\r\n constructor(props){\r\n super(props)\r\n this.onClick = this.onClick.bind(this)\r\n }\r\n\r\n onClick(e){\r\n console.log(e)\r\n if(e.InteractionElement && e.InteractionElement.Record == \"1\"){\r\n let props={\r\n \"groupguid\": this.props.groupguid,\r\n \"authtoken\": this.props.authtoken,\r\n \"InteractionElement\": e.InteractionElement\r\n }\r\n InteractionHandler(props)\r\n return true\r\n }\r\n }\r\n\r\n render() {\r\n var buttonArray = Object.keys(this.props.buttons).map((keyname, i) => (\r\n \r\n {this.props.buttons[keyname].Visible == \"1\" ? \r\n this.onClick(this.props.buttons[keyname])}\r\n href={(this.props.buttons[keyname].Link.indexOf('tel') == 0 || this.props.buttons[keyname].Link.indexOf('mail') == 0 || this.props.buttons[keyname].Link.indexOf('http') == 0) ? this.props.buttons[keyname].Link : '//' + this.props.buttons[keyname].Link} \r\n target=\"_blank\"\r\n style={{margin:'8px'}}>{this.props.buttons[keyname].Text} \r\n : null }\r\n \r\n ))\r\n var divider = this.props.showDivider ? \r\n {divider}\r\n \r\n {buttonArray}\r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ButtonGroup","import React, { Component } from 'react';\r\n\r\n\r\nclass Subheader extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n }\r\n render() {\r\n var risktext\r\n if(this.props.content.length){\r\n risktext = this.props.content;\r\n }\r\n return(\r\n \r\n
{risktext} \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Subheader","import React, { Component } from 'react';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport Button from '@material-ui/core/Button';\r\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener'\r\nimport Zoom from '@material-ui/core/Zoom'\r\nimport {Checkbox, FormControlLabel} from '@material-ui/core'\r\nimport WarningIcon from '@material-ui/icons/Warning';\r\n\r\nimport Header from './results/header'\r\nimport ButtonGroup from './results/buttongroup'\r\nimport Subheader from './results/subheader'\r\n\r\n\r\n\r\nimport { withStyles } from '@material-ui/core/styles';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n \r\n },\r\n header: {\r\n textAlign: 'center',\r\n marginBottom: '0px'\r\n },\r\n card: {\r\n padding: '0 1vw 1em 1vw',\r\n marginTop: '5em',\r\n textAlign: 'center'\r\n },\r\n center: {\r\n textAlign: 'center',\r\n justifyContent: 'center'\r\n },\r\n errorIcon: {\r\n color: 'red',\r\n fontSize: '150px',\r\n marginTop: '10px',\r\n marginBottom: '-20px'\r\n }\r\n});\r\n\r\nclass Error extends Component {\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n showTsCs:false,\r\n acceptsTCs:false,\r\n\r\n segmentLabels:[],\r\n segmentBreakpoints:[]\r\n }\r\n console.log(props)\r\n }\r\n\r\n render(){\r\n const {classes} = this.props\r\n let resultItems = []\r\n let component, x;\r\n x=0;\r\n while(x)\r\n }\r\n if(component.ComponentType == \"SUBHEADER\"){\r\n resultItems.push()\r\n }\r\n break;\r\n case \"CONTROLS\":\r\n if (component.ComponentType == \"BUTTON GROUP\"){\r\n resultItems.push(\r\n \r\n {resultItems}\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(Error);","import React, { Component } from 'react';\r\n\r\nimport Landing from './landing';\r\nimport QuizResults from './QuizResults';\r\nimport Quiz from './Quiz';\r\nimport PersonalInfo from './PersonalInfo';\r\nimport AddressInfo from './AddressInfo';\r\nimport Error from './Error';\r\nimport PDF from './PDF'\r\n\r\nimport Card from '@material-ui/core/Card';\r\nimport { Container } from '@material-ui/core';\r\nimport { log } from 'util';\r\nimport Box from '@material-ui/core/Box';\r\nimport Button from '@material-ui/core/Button';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Slide from '@material-ui/core/Slide'\r\nimport Grid from '@material-ui/core/Grid'\r\nimport { Progress } from 'react-sweet-progress';\r\nimport IdleTimer from 'react-idle-timer'\r\n\r\nimport { createMuiTheme } from '@material-ui/core/styles'\r\nimport { ThemeProvider } from '@material-ui/styles';\r\nimport \"react-sweet-progress/lib/style.css\";\r\n\r\n\r\n// This holds the page content for the assessments\r\n// In the future, this could be what we embed in other websites\r\n\r\n\r\n\r\n\r\nconst org_guid = new URLSearchParams(window.location.search).get('org')\r\nconst assmnt_guid = new URLSearchParams(window.location.search).get('assmt')\r\n\r\nlet theme = null\r\n\r\nclass QuizContainer extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n TCAccepted: false,\r\n ShowQuiz: false,\r\n ShowPersonalInfo: false,\r\n ShowAddress: false,\r\n Questions: [],\r\n Username: '',\r\n AuthToken: '',\r\n ParticipantGuid: '',\r\n ResponseGuid: '',\r\n RequirePersonInfo: true,\r\n RequireAddress: true,\r\n ResultsViewInstance: '',\r\n ShowResults: false,\r\n TCsDirection:'left',\r\n QuizsDirection:'left',\r\n PersonalDirection:'left',\r\n AddressDirection:'left',\r\n StartFromBeginning: true, \r\n ResultsLoaded: false,\r\n QuestionsAnswered: 0,\r\n QuestionTotal: 1,\r\n UnitOfMeasure:'IMPERIAL',\r\n LoadingError: false,\r\n ErrorViewInstance: [],\r\n isTimedOut: false,\r\n timeout:1000*5*60,\r\n skipAddress: false,\r\n userEmail: \"\",\r\n CurrentIndex: 0\r\n }\r\n theme = createMuiTheme({\r\n palette: {\r\n primary: {\r\n main: this.props.clientColor\r\n },\r\n secondary: {\r\n main: this.props.clientColorSecondary\r\n }\r\n }\r\n })\r\n\r\n this.timer = null;\r\n this.handleOnAction = this.handleOnAction.bind(this)\r\n this.handleOnActive = this.handleOnActive.bind(this)\r\n this.handleOnIdle = this.handleOnIdle.bind(this)\r\n \r\n }\r\n\r\n componentDidMount(){\r\n this.setState({\r\n timeout: this.props.timeout\r\n })\r\n //this.setClientColor(this.props.clientColor)\r\n }\r\n // ********************\r\n //These are the timeout functions: \r\n\r\n redirectToLanding(){\r\n this.setState({\r\n TCAccepted: false,\r\n ShowQuiz: false,\r\n ShowPersonalInfo: false,\r\n ShowAddress: false,\r\n ShowResults: false,\r\n QuestionsAnswered: 0,\r\n userEmail: \"\",\r\n CurrentIndex: 0\r\n })\r\n }\r\n\r\n handleOnAction(e) {\r\n this.setState({\r\n isTimedOut: false\r\n })\r\n }\r\n\r\n handleOnActive(e) {\r\n this.setState({\r\n isTimedOut: false\r\n })\r\n }\r\n\r\n handleOnIdle(e) {\r\n const isTimedOut = this.state.isTimedOut\r\n if(isTimedOut){\r\n this.redirectToLanding()\r\n } else {\r\n this.idleTimer.reset();\r\n this.setState({\r\n isTimedOut: true\r\n })\r\n }\r\n \r\n }\r\n\r\n //************************* */\r\n\r\n acceptTCs() {\r\n console.log(\"acceptTCs\")\r\n //do the anon login, start assessment, get questions, then set TCAccepted to true? I guess? \r\n \r\n fetch('../../WsWebServicePlatform/LoginAnonymous',\r\n {method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json', \r\n }\r\n ,\r\n body: JSON.stringify({\r\n \"ParamData\":{\r\n \"GroupGuid\":org_guid\r\n }\r\n })})\r\n .then(response=>response.json())\r\n .then(response=>{\r\n \r\n if(response.Success){\r\n //startAssessment\r\n let vars = response.Info[0]\r\n fetch('../../WsWebServicePlatform/Participant/Setting/Set/' + vars.AuthToken + '/' + vars.ParticipantGuid + '/ASSMT%20PRODUCT%20GUID/' + assmnt_guid + '/',{\r\n method:'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: {}\r\n }\r\n )\r\n .then(response=>response.json())\r\n .then(response=>{\r\n console.log(\"Post setting set: \", response)\r\n if(true){\r\n fetch('../../WsWebServiceHra/StartAssessment/' + vars.AuthToken + '/' + assmnt_guid + '/',\r\n {\r\n method:'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: {\r\n\r\n }\r\n })\r\n .then(response=>response.json())\r\n .then(response=>{\r\n if(response.Success){\r\n this.setState({\r\n Username: vars.UserName,\r\n AuthToken: vars.AuthToken,\r\n ParticipantGuid: vars.ParticipantGuid,\r\n ResponseGuid: response.Info[0].AssmtGuid\r\n }, () => {\r\n\r\n fetch('../../WsWebServiceWellSuite/GetViewInstance/' + this.state.AuthToken + '/8C292A8F-C14E-470B-A164-015F1CB2E2DD/',\r\n {\r\n method:'GET',\r\n headers:{\r\n 'Accept': 'application/json'\r\n }\r\n })\r\n .then(response=>response.json())\r\n .then(response=>{\r\n this.setState({\r\n Questions: response.Info[0].ViewInstanceData[0].SurveyPage,\r\n StartFromBeginning: true,\r\n UnitOfMeasure: response.Info[0].ViewInstanceData[1].SessionVariableValues[\"UNIT OF MEASURE\"]\r\n }, () =>{\r\n this.setState({\r\n TCAccepted: true,\r\n \r\n TCsDirection: 'right'\r\n\r\n }, ()=>{\r\n this.checkForAddress()\r\n setTimeout(() => {\r\n this.setState({\r\n //ShowResults: true\r\n ShowQuiz: true\r\n //ShowPersonalInfo: true\r\n //ShowAddress: true\r\n })\r\n }, 300)\r\n })\r\n })\r\n })\r\n })\r\n }\r\n })\r\n }\r\n })\r\n .catch(err => {\r\n console.log(err)\r\n })\r\n \r\n \r\n //this.updateValues(vars)\r\n \r\n }\r\n else {\r\n this.setState({\r\n LoadingError: true\r\n })\r\n if(response.Status[0].ViewInstanceData){\r\n this.setState({ErrorViewInstance: response.Status[0].ViewInstanceData[0].ErrorViewInstance})\r\n } else {\r\n var errorJSON = [{\r\n \"ComponentClass\": \"TEXTAREA\",\r\n \"ComponentFamily\": \"VARIANT\",\r\n \"ComponentType\": \"HEADER\",\r\n \"ComponentContent\": {\r\n \"Title\": \"Error\",\r\n \"GradeLabel\": \"\"\r\n }\r\n },\r\n {\r\n \"ComponentClass\": \"TEXTAREA\",\r\n \"ComponentFamily\": \"VARIANT\",\r\n \"ComponentType\": \"SUBHEADER\",\r\n \"ComponentContent\": {\r\n \"Content\": response.Status[0].ErrorMessage,\r\n \"ContentType\": \"\"\r\n }\r\n }]\r\n this.setState({\r\n ErrorViewInstance: errorJSON\r\n })\r\n }\r\n }\r\n console.log(\"response: \", response)\r\n })\r\n \r\n //this.setState(() => {\r\n // console.log(this.state)\r\n // return { TCAccepted:true }\r\n //})\r\n }\r\n\r\n setClientColor(clientColor){\r\n theme = createMuiTheme({\r\n palette: {\r\n primary: {\r\n main: clientColor\r\n }\r\n }\r\n })}\r\n\r\n updateValues(vars){\r\n this.setState({\r\n Username: vars.UserName,\r\n AuthToken: vars.AuthToken,\r\n ParticipantGuid: vars.ParticipantGuid\r\n })\r\n }\r\n\r\n startAssessment(assmtProps){\r\n console.log(\"assmtProps\", assmtProps)\r\n }\r\n\r\n backToQuiz = () => {\r\n this.setState({\r\n ShowPersonalInfo: false,\r\n StartFromBeginning: false\r\n }, ()=>{\r\n setTimeout(() => {\r\n this.setState({\r\n //ShowQuiz: true\r\n ShowQuiz: true\r\n //ShowPersonalInfo: true\r\n //ShowAddress: true\r\n })\r\n }, 300)\r\n })\r\n }\r\n\r\n showPersonalInfoCard = () => {\r\n this.setState({\r\n QuizsDirection: 'right',\r\n ShowAddress: false,\r\n ShowQuiz: false\r\n })\r\n setTimeout(() => {\r\n this.setState({\r\n ShowPersonalInfo: true\r\n })\r\n }, 300)\r\n }\r\n \r\n showAddressInfoCard = () => {\r\n this.setState({\r\n PersonalDirection: 'right',\r\n ShowPersonalInfo: false,\r\n ShowQuiz: false\r\n })\r\n setTimeout(() => {\r\n this.setState({\r\n ShowAddress: true\r\n })\r\n }, 300)\r\n }\r\n\r\n showResultsCard = () => {\r\n if(!this.state.ResultsLoaded){\r\n setTimeout(() => {\r\n this.showResultsCard()\r\n }, 200)\r\n } else {\r\n if(this.state.skipAddress){\r\n this.setState({\r\n PersonalDirection: 'right',\r\n ShowPersonalInfo: false,\r\n ShowQuiz: false,\r\n ShowAddress: false\r\n })\r\n }\r\n else {\r\n this.setState({\r\n AddressDirection: 'right',\r\n ShowPersonalInfo: false,\r\n ShowQuiz: false,\r\n ShowAddress: false\r\n })\r\n }\r\n setTimeout(() => {\r\n this.setState({\r\n ShowResults: true\r\n })\r\n }, 300)\r\n }\r\n \r\n }\r\n\r\n getResultsViewInstance = () => {\r\n fetch('../../WsWebServiceWellSuite/GetViewInstance/' + this.state.AuthToken + '/2c29a5b8-fe78-446c-8979-a87733232d66/', \r\n {\r\n method:'GET',\r\n headers:{\r\n 'Accept': 'application/json'\r\n }\r\n })\r\n .then(response=>response.json())\r\n .then(response=>{\r\n console.log(response)\r\n if(response.Success){\r\n this.setState({\r\n ResultsLoaded: true,\r\n ResultsViewInstance: response.Info[0].ViewInstanceData[0].ReportViewInstance.ReportPage[0].ReportFrame\r\n })\r\n }\r\n })\r\n .then(response=>{\r\n console.log(\"State is set\")\r\n console.log(this.state)\r\n })\r\n }\r\n\r\n setCurrentIndex = (index) => {\r\n this.setState({\r\n CurrentIndex: index\r\n })\r\n }\r\n\r\n updateQuestionsAnswered = (num, currentIndex) => {\r\n this.setState({\r\n QuestionsAnswered: num\r\n })\r\n }\r\n\r\n updateQuestionTotal = (num) => {\r\n this.setState({\r\n QuestionTotal: num\r\n })\r\n }\r\n\r\n checkForAddress() {\r\n var values = this.props.NameFrame;\r\n if(values.AddressCityVisible == \"0\" && values.AddressStateVisible == \"0\" && values.AddressStreetVisible == \"0\" && values.ZipVisible == \"0\"){\r\n this.setState({\r\n skipAddress: true\r\n })\r\n }\r\n }\r\n\r\n updateUserEmail(email) {\r\n this.setState({\r\n userEmail: email\r\n })\r\n }\r\n\r\n\r\n render(){\r\n let progressBar \r\n let status='active'\r\n\r\n if(!this.state.TCAccepted || this.state.ShowResults){\r\n progressBar = \r\n \r\n }\r\n if(!this.state.LoadingError){\r\n return(\r\n \r\n { this.idleTimer = ref }}\r\n element={document}\r\n onActive={this.handleOnActive}\r\n onIdle={this.handleOnIdle}\r\n onAction={this.handleOnAction}\r\n debounce={250}\r\n timeout={this.props.timeout} /> \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n } else {\r\n return \r\n// \r\n \r\n//\r\n// {content}\r\n// \r\nexport default QuizContainer;","import React, { Component } from 'react';\r\nimport ClientHeader from './clientheader';\r\nimport QuizContainer from './QuizContainer'\r\nimport Container from '@material-ui/core/Container';\r\nimport { Box } from '@material-ui/core';\r\nimport Error from './Error';\r\n\r\n//import theme from './theme.js'\r\n//these will need to go elsewhere when we build out a menu and\r\n//allow users to take multiple assessments within our site\r\n//At least the assmnt_guid will, as the assessment will change. \r\n//But Perhaps at this layer it is a constant, and App.js will need to be\r\n//moved to a new component (which it should anyway, honestly)\r\nconst org_guid = new URLSearchParams(window.location.search).get('org')\r\nconst assmnt_guid = new URLSearchParams(window.location.search).get('assmt')\r\n\r\nwindow.onbeforeunload = (e) => {\r\n console.log(\"warning!\")\r\n e.preventDefault()\r\n e.returnValue = \"Are you sure you want to lose your progress?\"\r\n}\r\n\r\nwindow.addEventListener(\"pageshow\", function(){\r\n return \"null\"\r\n})\r\n\r\nclass Assessment extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n isLoaded: false,\r\n viewInstance: [],\r\n clientColor: '#158f98',\r\n clientColorSecondary: '#158f98',\r\n languageISO2:'',\r\n backgroundColor: 'rgba(19,142,152,0.3)',\r\n loadingError: false,\r\n timeout: 1000 * 5 * 60,\r\n countryList: ''\r\n }\r\n }\r\n \r\n//orgguid=896e7ab9-a3f3-43e0-88a3-6d6db08fa824\r\n//assmntguid=C3725D0B-ED29-4B9A-B943-EF9299C1B0FF\r\n\r\n\r\n\r\n componentDidMount() {\r\n \r\n if(org_guid && assmnt_guid){\r\n fetch('../../WsWebServiceWellSuite/GetViewInstancePublic/' + org_guid + '/-1/' + assmnt_guid + '/', \r\n {\r\n headers:{'Accept': 'application/json', 'Access-Control-Allow-Origin': '*'}\r\n })\r\n .then(response => response.json())\r\n .then(response => {\r\n if(response.Success){\r\n var color = response.Info[0].ViewInstanceData[1].OrganizationSettingValues[0].List['THEME COLOR'].replace('#', '')\r\n var secondaryColor = response.Info[0].ViewInstanceData[1].OrganizationSettingValues[0].List['THEME COLOR SECONDARY'].length ? \r\n response.Info[0].ViewInstanceData[1].OrganizationSettingValues[0].List['THEME COLOR SECONDARY'].replace('#', '') :\r\n response.Info[0].ViewInstanceData[1].OrganizationSettingValues[0].List['THEME COLOR'].replace('#', '')\r\n var countryList = response.Info[0].ViewInstanceData[1].OrganizationSettingValues[0].List['COUNTRY AUTOCOMPLETE LIST']\r\n\r\n\r\n // Language ISO2 is needed to send the correct URL to Google's Place API. First check the session variable. If it's empty, fallback to the organization setting.\r\n var languageISO2 = '';\r\n languageISO2 = response.Info[0].ViewInstanceData[1].SessionVariableValues[0].List['LANGUAGEISO2'];\r\n if (languageISO2 == ''){\r\n var languageISO2 = response.Info[0].ViewInstanceData[1].OrganizationSettingValues[0].List['LANGUAGEISO2'];\r\n } \r\n\r\n //easiest way to set global variables are setting windows variables\r\n window.$primaryColor = '#' + color;\r\n window.$secondaryColor = '#' + secondaryColor;\r\n //since we removed Name for a reason, and now it's back, commenting this out\r\n //Wellactivate should always be the tab name... I think \r\n //document.title = response.Info[0].ViewInstanceData[0].LandingPage.HeaderFrame.Name.length ? response.Info[0].ViewInstanceData[0].LandingPage.HeaderFrame.Name : \"WellActivate\"\r\n \r\n this.setState({viewInstance: response.Info[0].ViewInstanceData[0].LandingPage,\r\n clientColor: color,\r\n clientColorSecondary: '#' + secondaryColor,\r\n languageISO2:languageISO2,\r\n timeout: response.Info[0].ViewInstanceData[1].OrganizationSettingValues[0].List['SESSION TIMEOUT SECONDS'] * 1000,\r\n countryList: countryList})\r\n } else {\r\n \r\n if(response.Status[0].ViewInstanceData){\r\n var color = response.Status[0].ViewInstanceData[1].OrganizationSettingValues[0].List['THEME COLOR'].replace('#', '')\r\n var secondaryColor = response.Status[0].ViewInstanceData[1].OrganizationSettingValues[0].List['THEME COLOR SECONDARY'] ? response.Status[0].ViewInstanceData[1].OrganizationSettingValues[0].List['THEME COLOR SECONDARY'].replace('#', '') : color\r\n window.$primaryColor = color;\r\n window.$secondaryColor = secondaryColor\r\n this.setState({viewInstance: response.Status[0].ViewInstanceData[0].ErrorViewInstance,\r\n clientColor: color,\r\n loadingError: true})\r\n \r\n } else {\r\n var errorJSON = {\"Error\" : [{\r\n \"ComponentClass\": \"TEXTAREA\",\r\n \"ComponentFamily\": \"VARIANT\",\r\n \"ComponentType\": \"HEADER\",\r\n \"ComponentContent\": {\r\n \"Title\": \"Error\",\r\n \"GradeLabel\": \"\"\r\n }\r\n },\r\n {\r\n \"ComponentClass\": \"TEXTAREA\",\r\n \"ComponentFamily\": \"VARIANT\",\r\n \"ComponentType\": \"SUBHEADER\",\r\n \"ComponentContent\": {\r\n \"Content\": response.Status[0].ErrorMessage,\r\n \"ContentType\": \"\"\r\n }\r\n }]}\r\n this.setState({\r\n viewInstance: errorJSON,\r\n clientColor: \"158F98\",\r\n loadingError: true\r\n })\r\n }\r\n \r\n }\r\n \r\n })\r\n .then(response => {\r\n this.getClientColor()\r\n })\r\n .then(()=>{\r\n this.setState({isLoaded: true})\r\n })\r\n .catch(console.log)\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n \r\n }\r\n\r\n getClientColor(){\r\n //if default just skip\r\n if(this.state.clientColor != '#158f98'){\r\n let hex = this.state.clientColor.replace('#', '')\r\n let r = parseInt(hex.substring(0,2), 16);\r\n let g = parseInt(hex.substring(2,4), 16);\r\n let b = parseInt(hex.substring(4,6), 16);\r\n\r\n //we use rgba for IE and Edge compatibility\r\n let result = 'rgba(' + r + ',' + g + ',' + b + ',0.3)'\r\n\r\n this.setState({\r\n backgroundColor: result,\r\n clientColor: \"#\" + hex\r\n })\r\n }\r\n }\r\n\r\n render() {\r\n var header\r\n if(this.state.viewInstance.ClientLogo){\r\n header = \r\n \r\n {header}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n )\r\n } if(this.state.isLoaded && this.state.loadingError){\r\n return (\r\n \r\n \r\n {header}\r\n \r\n \r\n \r\n
\r\n \r\n )\r\n } else {\r\n return Loading
\r\n }\r\n }\r\n}\r\nexport default Assessment;\r\n","import 'react-app-polyfill/ie9';\r\nimport 'react-app-polyfill/stable';\r\n\r\nimport React, { Component } from 'react';\r\nimport Assessment from './components/Assessment';\r\n\r\nimport './components/result.css'\r\n\r\nclass App extends Component {\r\n constructor(props){\r\n super(props);\r\n \r\n }\r\n\r\n render() {\r\n return 
\r\n 
\r\n\r\nexport default withStyles(styles)(ClientHeader);\r\n/*\r\nconst ClientHeader = ({ clientheader }) => {\r\n\tconsole.log(\"clientHeader: \", clientheader)\r\n return (\r\n ![](\"loading.gif\")
\r\n } else {\r\n icon = ![](\"speedometer2.png\")
\r\n