","import React, { Component } from 'react';\r\n\r\nexport class TrayAndStringer extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n value: null,\r\n };\r\n };\r\n\r\n handleInputChange(e) {\r\n //console.log(e.target.name, e.target.value);\r\n this.props.handleInputChange(e);\r\n } \r\n\r\n focus(e) {\r\n e.target.select();\r\n };\r\n\r\n render() {\r\n return (\r\n
\r\n
3 Tray and Stringer\r\n Tray:
\r\n
\r\n Fortress Evolution Tray \r\n
\r\n
\r\n No Tray \r\n
\r\n
\r\n Stringer:
\r\n
\r\n Evolution 2\" x 6\" Joist as Stringer \r\n
\r\n
\r\n Evolution 2\" x 11\" Beam as Stringer \r\n
\r\n
\r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\n\r\nexport class StepSelect extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n value: null,\r\n };\r\n };\r\n\r\n handleStepOptionSelect(e) {\r\n //const target = e.target;\r\n //const value = target.value;\r\n //const name = target.name;\r\n\r\n this.props.handleStepOptionSelect(e);\r\n }\r\n\r\n render() {\r\n return (\r\n
0) ? 'hide' : ''}>\r\n
4 Select a Step Configuration\r\n
{this.props.stepCount} step options are available for the values provided. Select an option below to view the results.
\r\n
0 ? 'hide' : ''}>Sorry, no step options are available for the values provided.
\r\n\r\n
this.handleStepOptionSelect(e)}>\r\n Please Select... \r\n {this.props.stepOptions.map((opt) => {opt.steps} Steps - {opt.totalRun}\" Total Run )}\r\n \r\n
\r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faFileDownload } from '@fortawesome/free-solid-svg-icons'; //faShareAlt\r\nimport jsPDF from 'jspdf';\r\n\r\nDate.prototype.yyyymmdd = function () {\r\n var mm = this.getMonth() + 1; // getMonth() is zero-based\r\n var dd = this.getDate();\r\n\r\n return [this.getFullYear(),\r\n (mm > 9 ? '' : '0') + mm,\r\n (dd > 9 ? '' : '0') + dd\r\n ].join('');\r\n};\r\n\r\n//const evolutionLogo = require('../images/evolution-logo.png');\r\n//const framingLogo = require('../images/framing-logo.png');\r\n//const landingDiagrams = require('../images/landing-diagrams.png');\r\n//const gradeDiagrams = require('../images/grade-diagrams.png');\r\nlet pdfImages = [\r\n { name: 'evolutionLogo', src: require('../images/evolution-logo.png') },\r\n { name: 'framingLogo', src: require('../images/framing-logo.png') },\r\n { name: 'landingDiagrams', src: require('../images/landing-diagrams.png') }, //811x226\r\n { name: 'p2diagram2', src: require('../images/p2diagram2.png') }, //988x202 //\r\n //p3\r\n { name: 'bracketHoleLocations', src: require('../images/bracket-hole-locations.png') }, //919x582\r\n //p4\r\n { name: 'p4diagram1', src: require('../images/p4diagram1.png') }, //397x356\r\n { name: 'p4diagram2', src: require('../images/p4diagram2.png') }, //991x367\r\n { name: 'p4diagram3', src: require('../images/p4diagram3.png') }, //315x199\r\n { name: 'p4diagram4', src: require('../images/p4diagram4.png') }, //256x253\r\n //p5\r\n { name: 'p5diagram1', src: require('../images/p5diagram1.png') }, //397x328\r\n { name: 'p5diagram2', src: require('../images/p5diagram2.png') }, //924x627\r\n //p6\r\n { name: 'gradeDiagrams', src: require('../images/grade-diagrams.png') }, //990x274\r\n { name: 'p6diagram2', src: require('../images/p6diagram2.png') }, //1149x252\r\n //p7 - repeat of 4\r\n //p8 - repeat of 5\r\n { name: 'p8diagram1', src: require('../images/p8diagram1.png') }, //536x349\r\n\r\n\r\n //p9\r\n { name: 'p9diagram1', src: require('../images/p9diagram1.png') }, //655x370\r\n { name: 'p9diagram2', src: require('../images/p9diagram2.png') }, //1072x761\r\n //p10\r\n { name: 'p10diagram1', src: require('../images/p10diagram1.png') }, //624x403\r\n { name: 'p10diagram2', src: require('../images/p10diagram2.png') }, //682x732\r\n { name: 'p10diagram3', src: require('../images/p10diagram3.png') }, //327x193\r\n { name: 'p10diagram4', src: require('../images/p10diagram4.png') }, //325x205\r\n //p11\r\n { name: 'p11diagram1', src: require('../images/p11diagram1.png') }, //541x1269\r\n //p12\r\n { name: 'p12diagram', src: require('../images/p12diagram.png') }, //680x1405\r\n //p13\r\n { name: 'p13diagram1', src: require('../images/p13diagram1.png') }, //745x411\r\n { name: 'p13diagram2', src: require('../images/p13diagram2.png') }, //1032x364\r\n { name: 'p13diagram3', src: require('../images/p13diagram3.png') }, //690x491\r\n //p14\r\n { name: 'p14diagram', src: require('../images/p14diagram.png') }, //687x1338\r\n];\r\n\r\nlet pageNum = 1;\r\n\r\nexport class StairCalcResults extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n pdfButtonText: 'Download PDF'\r\n };\r\n\r\n this.init();\r\n };\r\n\r\n init() {\r\n let that = this;\r\n pdfImages.forEach(function (o, i) {\r\n that.toDataURL(o.src, function (dataUrl) {\r\n o.data = dataUrl;\r\n });\r\n });\r\n }\r\n\r\n getImageData(name) {\r\n let o = pdfImages.find(function (obj) { return obj.name === name; });\r\n if (o) return o.data;\r\n else return;\r\n }\r\n\r\n addImage(doc, imageName, x, y) {\r\n\r\n }\r\n\r\n handlePdfClick(e) {\r\n this.setState({ pdfButtonText: 'Building PDF...' });\r\n\r\n let that = this;\r\n setTimeout(function () {\r\n that.generatePDF();\r\n }, 500);\r\n }\r\n\r\n handleFixedRiseRunPdfClick(e) {\r\n //this.setState({ pdfButtonText: 'Building PDF...' });\r\n\r\n let that = this;\r\n setTimeout(function () {\r\n that.generatePDF();\r\n }, 500);\r\n }\r\n\r\n handleShareClick(e) {\r\n this.props.handleShareClick(e); \r\n }\r\n\r\n toDataURL(url, callback) {\r\n var xhr = new XMLHttpRequest();\r\n xhr.onload = function () {\r\n var reader = new FileReader();\r\n reader.onloadend = function () {\r\n callback(reader.result);\r\n }\r\n reader.readAsDataURL(xhr.response);\r\n };\r\n xhr.open('GET', url);\r\n xhr.responseType = 'blob';\r\n xhr.send();\r\n }\r\n\r\n centerPos(pageWidth, objectWidth) {\r\n //console.log(pageWidth, objectWidth)\r\n return ((pageWidth - objectWidth) / 2);\r\n };\r\n\r\n getFraction(val) {\r\n //console.log('getFraction', val);\r\n if (val) {\r\n var dec,\r\n rem,\r\n parts = val.toString().split('.');\r\n\r\n if (parts.length === 2) {\r\n dec = (val % 1).toFixed(2);\r\n rem = parseFloat(dec) * 32;\r\n if (Math.round(rem) > 0) {\r\n let reduced = this.reduce(Math.round(rem), 32)\r\n\r\n if (reduced[0] === reduced[1]) //sometimes x 1/1 was being returned.\r\n return parts[0] + 1;\r\n\r\n return (parts[0] + ' ' + reduced[0] + '/' + reduced[1]);\r\n }\r\n else\r\n return parts[0];\r\n }\r\n else\r\n return val.toString();\r\n }\r\n\r\n return '';\r\n };\r\n\r\n reduce(numerator, denominator) {\r\n return [numerator, denominator]; //bypass reducing for now! Client wants all fractions as 32nds.\r\n\r\n //var gcd = function gcd(a, b) {\r\n // return b ? gcd(b, a % b) : a;\r\n //};\r\n //gcd = gcd(numerator, denominator);\r\n //return [numerator / gcd, denominator / gcd];\r\n };\r\n\r\n generatePDF = () => {\r\n let data = this.props.pdfData;\r\n let date = new Date();\r\n let doc = new jsPDF('p', 'pt');\r\n let settings = {\r\n width: doc.internal.pageSize.getWidth(),\r\n height: doc.internal.pageSize.getHeight()\r\n };\r\n\r\n //console.log(doc.getFontList());\r\n //console.log('PDF DATA: ', this.props.pdfData);\r\n\r\n doc.setFontSize(18);\r\n\r\n //this.introPage(doc, settings); //client requested that this page be removed.\r\n this.page1(doc, settings);\r\n\r\n //Landing vs Grade pages in PDF\r\n if ([1, 3].includes(data.configuration)) // landing: pages 2-5\r\n {\r\n this.page2(doc, settings);\r\n this.page3(doc, settings);\r\n this.page4(doc, settings);\r\n this.page5(doc, settings);\r\n }\r\n else if ([0, 2].includes(data.configuration)) // grade: pages 6-9\r\n {\r\n this.page6(doc, settings); //pg 2\r\n this.page7(doc, settings); //pg 3\r\n this.page8(doc, settings); //pg 4\r\n this.page9(doc, settings); //pg 5\r\n this.page10(doc, settings); //pg 6\r\n }\r\n\r\n // pages 7-9\r\n \r\n //this.page11(doc, settings); // fixed rise/run (not needed with calc according to Rob)\r\n this.page12(doc, settings); // 10,12-14 are for all configs\r\n this.page13(doc, settings);\r\n this.page14(doc, settings);\r\n\r\n\r\n doc.setFont('helvetica');\r\n doc.save('fortress-stair-calc_' + date.yyyymmdd() + '.pdf');\r\n\r\n let that = this; // and a wiffle ball bat!\r\n this.setState({\r\n pdfButtonText: 'Complete!'\r\n }, () => {\r\n setTimeout(function () {\r\n that.setState({\r\n pdfButtonText: 'Download PDF'\r\n });\r\n }, 2000);\r\n });\r\n\r\n pageNum = 1;\r\n };\r\n\r\n generateFixedRiseRunPDF = () => {\r\n let data = this.props.pdfData;\r\n let date = new Date();\r\n let doc = new jsPDF('p', 'pt');\r\n let settings = {\r\n width: doc.internal.pageSize.getWidth(),\r\n height: doc.internal.pageSize.getHeight()\r\n };\r\n\r\n //console.log(doc.getFontList());\r\n //console.log('PDF DATA: ', this.props.pdfData);\r\n\r\n doc.setFontSize(18);\r\n\r\n this.page11(doc, settings); // 11,13-15 are for all configs\r\n //this.page12(doc, settings); // fixed rise/run (not needed with calc according to Rob)\r\n this.page13(doc, settings);\r\n this.page14(doc, settings);\r\n this.page15(doc, settings);\r\n\r\n\r\n doc.setFont('helvetica');\r\n doc.save('fortress-stair-calc_' + date.yyyymmdd() + '.pdf');\r\n\r\n let that = this; // and a wiffle ball bat!\r\n this.setState({\r\n pdfButtonText: 'Complete!'\r\n }, () => {\r\n setTimeout(function () {\r\n that.setState({\r\n pdfButtonText: 'Download PDF'\r\n });\r\n }, 2000);\r\n });\r\n\r\n pageNum = 1;\r\n };\r\n\r\n //****************************************\r\n // Intro Page Content\r\n //****************************************\r\n introPage = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n this.addOutline(doc);\r\n \r\n //images\r\n doc.addImage(this.getImageData('evolutionLogo'), 'PNG', this.centerPos(width, 414), 80, 414, 108)\r\n doc.addImage(this.getImageData('framingLogo'), 'PNG', this.centerPos(width, 220), 220, 220, 87)\r\n\r\n // title\r\n let titleY = 400;\r\n let title = 'Installation Instructions for Fortress Framing Evolution Steel Stair System';\r\n let lines = doc.setFontSize(22)\r\n .setFontType('bold')\r\n .splitTextToSize(title, 400)\r\n doc.text(width / 2, titleY, lines, { align: 'center', lineHeightFactor: 2 })\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 1\r\n //****************************************\r\n page1 = (doc, settings) => {\r\n let data = this.props.pdfData;\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n //doc.addPage();\r\n\r\n this.addOutline(doc);\r\n\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Stair Calculator Summary', { align: 'center', lineHeightFactor: 2 })\r\n\r\n // configuration\r\n doc.setFontSize(16).setFontType('bold');\r\n let configY = 100;\r\n doc.text(55, configY, \"Configuration\");\r\n doc.setFontSize(14).setFontType('normal');\r\n\r\n let config = 'Flush to Grade'\r\n if (data.configuration === 1) config = 'Flush to Landing';\r\n else if (data.configuration === 2) config = 'Drop to Grade';\r\n else if (data.configuration === 3) config = 'Drop to Landing';\r\n\r\n doc.text(55, configY + 20, config);\r\n\r\n // input data\r\n doc.setFontSize(16).setFontType('bold');\r\n let inputY = configY + 60;\r\n doc.text(55, inputY, \"Input\");\r\n\r\n // col 1\r\n doc.setFontSize(14).setFontType('normal');\r\n doc.text(55, inputY + 20, 'Total Rise: ' + data.totalRiseFt + \"' \" + (data.totalRiseIn > 0 ? (data.totalRiseIn + '\"') : ''));\r\n doc.text(55, inputY + 40, 'Tread Depth: ' + data.treadDepthIn + '\"');\r\n if (data.configuration === 0 || data.configuration === 2)\r\n doc.text(55, inputY + 60, 'Tread Thickness: ' + data.treadThicknessIn + '\"');\r\n\r\n // col 2\r\n doc.text(250, inputY + 20, 'Tray: ' + (data.tray === 0 ? 'None' : 'Fortress Tray'));\r\n doc.text(250, inputY + 40, 'Stringer: ' + (data.stringer === 0 ? '2\" x 6\" Joist as Stringer' : '2\" x 11\" Beam as Stringer'));\r\n doc.text(250, inputY + 60, 'Steps: ' + data.stepText);\r\n\r\n // ****************************************\r\n // results\r\n doc.setFontSize(16).setFontType('bold');\r\n let resultsY = 260;\r\n doc.text(55, resultsY, \"Results\");\r\n \r\n //col 1\r\n doc.setFontSize(14).setFontType('normal');\r\n doc.text(55, resultsY + 20, 'Step Rise: ' + this.getFraction(data.stepRise) + '\"');\r\n doc.text(55, resultsY + 40, 'Bottom Step Rise: ' + this.getFraction(data.bottomStepRise) + '\"');\r\n doc.text(55, resultsY + 60, 'Angle: ' + data.angle);\r\n\r\n //col 2\r\n doc.text(250, resultsY + 20, 'Bracket Spacing: ' + this.getFraction(data.bracketSpacing) + '\"');\r\n doc.text(250, resultsY + 40, 'Stringer Length: ' + this.getFraction(data.stringerLength) + '\"');\r\n doc.text(250, resultsY + 60, 'Pin Hole Locations: ' + data.pinhole1 + ', ' + data.pinhole2);\r\n\r\n // angles\r\n doc.setFont('symbol').text(55, resultsY + 100, 'q');\r\n doc.setFont('helvetica').text(63, resultsY + 100, '1: ' + data.thetaData.theta1.toFixed(2));\r\n doc.text(55, resultsY + 120, 'X1: ' + this.getFraction(data.thetaData.x1.toFixed(2)) + '\"');\r\n \r\n if (data.thetaData.theta2) {\r\n doc.setFont('symbol').text(250, resultsY + 100, 'q');\r\n doc.setFont('helvetica').text(258, resultsY + 100, '2: ' + data.thetaData.theta2.toFixed(2));\r\n doc.text(250, resultsY + 120, 'X2: ' + this.getFraction(data.thetaData.x2.toFixed(2)) + '\"');\r\n if (data.stringerLengthDec)\r\n doc.text(250, resultsY + 140, 'X3: ' + this.getFraction(data.stringerLengthDec.toFixed(2)) + '\"');\r\n } else {\r\n if (data.stringerLengthDec)\r\n doc.text(250, resultsY + 100, 'X3: ' + this.getFraction(data.stringerLengthDec.toFixed(2)) + '\"');\r\n }\r\n\r\n if (data.configuration === 1 || data.configuration === 3)\r\n doc.addImage(this.getImageData('p2diagram2'), 'PNG', this.centerPos(width, 494), resultsY + 170, 494, 101)\r\n else\r\n doc.addImage(this.getImageData('p6diagram2'), 'PNG', this.centerPos(width, 495), resultsY + 150, 495, 126)\r\n\r\n doc.addImage(this.getImageData('bracketHoleLocations'), 'PNG', this.centerPos(width, 300), height-300, 300, 190)\r\n\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 2\r\n //****************************************\r\n page2 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage().setFont('helvetica')\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Cutting the Stringer', { align: 'center', lineHeightFactor: 2 });\r\n\r\n // diagram 3 copy\r\n let p3CopyLines = doc.setFontSize(12).setFontType('normal')\r\n .splitTextToSize('The stringer can be cut and assembled using the Evolution 2x6 Joist or the Evolution 2x11 beam. The instructions below will work with either option. This instruction is for the Flush to Landing and Drop to Landing installations.', 500)\r\n doc.text(50, 85, p3CopyLines, { align: 'left', lineHeightFactor: 2 })\r\n\r\n // landing diagrams\r\n doc.addImage(this.getImageData('landingDiagrams'), 'PNG', this.centerPos(width, 405.5), 160, 405.5, 113)\r\n\r\n // callout\r\n doc.setDrawColor(255, 7, 7)\r\n .setLineWidth(2)\r\n .rect((width / 2) - 150, 310, 300, 75);\r\n\r\n doc.setDrawColor(255, 7, 7)\r\n .setLineWidth(1)\r\n .rect((width / 2) - 147, 313, 294, 69)\r\n\r\n // callout copy\r\n let p3calloutCopy = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('INSTALLATION ALERT: This installation step is ONLY for the Flush to Landing and Drop to Landing configuration (see above)', 280)\r\n doc.text((width / 2) - 140, 330, p3calloutCopy, { align: 'left', lineHeightFactor: 2 })\r\n\r\n // stringer diagram\r\n doc.addImage(this.getImageData('p2diagram2'), 'PNG', this.centerPos(width, 494), 420, 494, 101)\r\n\r\n // diagram copy\r\n let p2diagramCopy1 = doc.setFontSize(12).setFontType('normal')\r\n .splitTextToSize('First, measure X3 for overall length and make the cut. Second, cut the angles using 1 OR by measuring X1 lengths.', 350)\r\n doc.text((width/2)-174, 560, p2diagramCopy1, { align: 'left', lineHeightFactor: 2 })\r\n\r\n let p2diagramCopy2 = doc.setFontSize(12).setFontType('normal')\r\n .splitTextToSize(' 1, 2, X1, and X3 are all calculated using the Fortress Adjustable Bracket Stair Calculator.', 350)\r\n doc.text((width/2)-173, 620, p2diagramCopy2, { align: 'left', lineHeightFactor: 2 })\r\n\r\n // theta symbols in copy\r\n doc.setFont('symbol')\r\n .text((width / 2) - 63, 584, 'q')\r\n .text((width / 2) - 172, 620, 'q')\r\n .text((width / 2) - 156, 620, 'q');\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 3\r\n //****************************************\r\n page3 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage().setFont('helvetica')\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Adjustable Stair Bracket Hole Locations', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.setFontSize(12).setFontType('normal')\r\n .text(width / 2, 80, 'Flush to Landing & Drop to Landing', { align: 'center', lineHeightFactor: 2 });\r\n\r\n // hole bracket locations diagram\r\n doc.addImage(this.getImageData('bracketHoleLocations'), 'PNG', this.centerPos(width, 505), 120, 505, 320)\r\n\r\n // copy\r\n let p3copyLines1 = doc.setFontSize(12)\r\n .splitTextToSize('The Adjustable Bracket hole locations are determined using the Fortress Adjustable Bracket Stair Calculator.', 500)\r\n doc.text(50, height - 260, p3copyLines1, { align: 'left', lineHeightFactor: 2 })\r\n\r\n\r\n let p3copyLines2 = doc.setFontSize(12)\r\n .splitTextToSize('Once the hole locations are known, insert the nylon pins thru the holes. 2 nylon pins come with each adjustable stair bracket.', 500)\r\n doc.text(50, height - 200, p3copyLines2, { align: 'left', lineHeightFactor: 2 })\r\n\r\n\r\n let p3copyLines3 = doc.setFontSize(12)\r\n .splitTextToSize('The pins in the holes will hold the bracket at the correct angle until it is fastened securely to the stringer. Once the bracket is fastened the pins should be removed and discarded.', 500)\r\n doc.text(50, height - 140, p3copyLines3, { align: 'left', lineHeightFactor: 2 })\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 4\r\n //****************************************\r\n page4 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Installing the Adjustable Stair Brackets', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.setFontSize(12).setFontType('normal')\r\n .text(width / 2, 80, 'Flush to Landing & Drop to Landing', { align: 'center', lineHeightFactor: 2 });\r\n\r\n // diagram 1\r\n doc.addImage(this.getImageData('p4diagram1'), 'PNG', this.centerPos(width, 198.5), 105, 198.5, 178)\r\n\r\n // diagram 1 copy\r\n let p4diagram1CopyLines = doc.setFontSize(8)\r\n .splitTextToSize('Start on the left side (top step) of the stringer. This is the side that in most cases will attach to the deck structure.', 140)\r\n doc.text(width - 235, 135, p4diagram1CopyLines, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n // diagram 2 copy\r\n let p4diagram2CopyLines = doc.setFontSize(8)\r\n .splitTextToSize('Measure exactly as shown below paying close attention to the starting and ending measuring points. The distance measured comes from the Fortress Adjustable Bracket Stair Calculator.', 240)\r\n doc.text((width / 2) - 100, 310, p4diagram2CopyLines, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n // diagram 2\r\n doc.addImage(this.getImageData('p4diagram2'), 'PNG', this.centerPos(width, 495.5), 360, 495.5, 183.5)\r\n\r\n\r\n // diagram 3\r\n doc.addImage(this.getImageData('p4diagram3'), 'PNG', this.centerPos(width, 157.5) - 175, 585, 157.5, 99.5)\r\n\r\n // diagram 3 copy\r\n let p3diagram3CopyLines = doc.setFontSize(8)\r\n .splitTextToSize('Once the bracket is located clamp it down tightly. Not doing so will allow for move-ment as you fasten it in place.', 170)\r\n doc.text(50, height - 145, p3diagram3CopyLines, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n // diagram 4\r\n doc.addImage(this.getImageData('p4diagram4'), 'PNG', this.centerPos(width, 128) + 120, 555, 128, 126.5)\r\n\r\n // diagram 4 copy\r\n let p3diagram4CopyLines = doc.setFontSize(8)\r\n .splitTextToSize('With the bracket clamped, use the Evolution Self-Drilling screw to fasten the bracket using the (4) holes shown above. This needs to be repeated on the oppo-site side. Remove the 2 Pins and discard.', 190)\r\n doc.text(width - 265, height - 155, p3diagram4CopyLines, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 5\r\n //****************************************\r\n page5 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n\r\n // page title/subtitle/intro\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Installing the Adjustable Stair Brackets', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.setFontSize(12).setFontType('normal')\r\n .text(width / 2, 80, 'Flush to Landing & Drop to Landing', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.setFontSize(12).setFontType('normal')\r\n .text(width / 2, 105, 'You’ll follow this process for the remaining bracket installations.', { align: 'center', lineHeightFactor: 2 });\r\n\r\n // step diagram\r\n doc.addImage(this.getImageData('p5diagram1'), 'PNG', this.centerPos(width, 198.5), 130, 198.5, 164)\r\n\r\n // diagram copy\r\n let p5diagram1copy = doc.setFontSize(9)\r\n .splitTextToSize('Measure exactly as shown below paying close attention to the starting and ending measuring points. The distance measured come from the Fortress Adjustable Bracket Stair Calculator.', 250)\r\n doc.text((width / 2) - 125, 310, p5diagram1copy, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n // three circle diagram\r\n doc.addImage(this.getImageData('p5diagram2'), 'PNG', this.centerPos(width, 462), 380, 462, 313.5)\r\n\r\n // three circle diagram copy\r\n let p5diagram2copy = doc.setFontSize(9)\r\n .splitTextToSize('Clamp the bracket to hold it in place and use the Evolution Self-Drilling Screws to fasten the bracket (Qty (4) on each side of bracket for a total of (8))', 350)\r\n doc.text((width / 2) - 175, height - 120, p5diagram2copy, { align: 'left', lineHeightFactor: 2 })\r\n\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 6\r\n //****************************************\r\n page6 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Cutting the Stringer', { align: 'center', lineHeightFactor: 2 });\r\n\r\n // diagram 3 copy\r\n let p3CopyLines = doc.setFontSize(12).setFontType('normal')\r\n .splitTextToSize('The stringer can be cut and assembled using the Evolution 2x6 Joist or the Evolution 2x11 beam. The instructions below will work with either option. This instruction is for the Flush to Grade and Drop to Grade installations.', 500)\r\n doc.text(50, 85, p3CopyLines, { align: 'left', lineHeightFactor: 2 })\r\n\r\n // landing diagrams\r\n doc.addImage(this.getImageData('gradeDiagrams'), 'PNG', this.centerPos(width, 405.5), 160, 405.5, 113)\r\n\r\n // callout\r\n doc.setDrawColor(255, 7, 7)\r\n .setLineWidth(2)\r\n .rect((width / 2) - 150, 290, 300, 75);\r\n\r\n doc.setDrawColor(255, 7, 7)\r\n .setLineWidth(1)\r\n .rect((width / 2) - 147, 293, 294, 69)\r\n\r\n\r\n let p7calloutCopy = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('INSTALLATION ALERT: This installation step is ONLY for the Flush to Grade and Drop to Grade configuration (see above)', 280)\r\n doc.text((width / 2) - 140, 320, p7calloutCopy, { align: 'left', lineHeightFactor: 2 })\r\n\r\n\r\n // stringer diagram\r\n doc.addImage(this.getImageData('p6diagram2'), 'PNG', this.centerPos(width, 494), 390, 484, 101)\r\n\r\n let p6diagramCopy1 = doc.setFontSize(12).setFontType('normal')\r\n .splitTextToSize(' 1, 2, X1, X2, and X3 are all calculated using the Fortress Adjustable Bracket Stair Calculator.', 500)\r\n doc.text((width / 2) - 250, 525, p6diagramCopy1, { align: 'left', lineHeightFactor: 2 })\r\n\r\n let p6diagramCopy2 = doc.setFontSize(12).setFontType('normal')\r\n .splitTextToSize('Cut stringer as shown. First, measure X3 for overall length and make the cut. Second, cut the angles using 1 OR by measuring X1 lengths.', 500)\r\n doc.text((width / 2) - 250, 575, p6diagramCopy2, { align: 'left', lineHeightFactor: 2 })\r\n\r\n let p6diagramCopy3 = doc.setFontSize(12).setFontType('normal')\r\n .splitTextToSize('Mark the 2 angle using a silver permanent marker but DO NOT cut the 2 angle during this step.', 500)\r\n doc.text((width / 2) - 250, 635, p6diagramCopy3, { align: 'left', lineHeightFactor: 2 })\r\n\r\n \r\n doc.setFont('symbol')\r\n .text(48, 525, 'q')\r\n .text(64, 525, 'q')\r\n .text(119, 599, 'q')\r\n .text(98, 635, 'q')\r\n .text((width / 2) + 134, 635, 'q');\r\n\r\n //text underline\r\n doc.setLineWidth(1)\r\n .setDrawColor(0, 0, 0)\r\n .line((width / 2)+44, 638, (width / 2) + 90, 638)\r\n\r\n\r\n // callout2\r\n doc.setDrawColor(255, 7, 7)\r\n .setLineWidth(2)\r\n .rect((width / 2) - 150, height-180, 300, 75);\r\n\r\n doc.setDrawColor(255, 7, 7)\r\n .setLineWidth(1)\r\n .rect((width / 2) - 147, height-177, 294, 69)\r\n\r\n\r\n let p3calloutCopy = doc.setFont('helvetica').setFontSize(10).setFontType('normal')\r\n .splitTextToSize('INSTALLATION ALERT: DO NOT cut the 2 during this step. 2 will be cut during a later step.', 280)\r\n doc.text((width / 2) - 140, height-150, p3calloutCopy, { align: 'left', lineHeightFactor: 2 })\r\n\r\n\r\n doc.setFont('symbol')\r\n .text((width / 2) + 46, height-150, 'q')\r\n .text((width / 2) + 131, height-150, 'q');\r\n\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 7\r\n //****************************************\r\n page7 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Adjustable Stair Bracket Hole Locations', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.setFontSize(12).setFontType('normal')\r\n .text(width / 2, 80, 'Flush to Grade & Drop to Grade', { align: 'center', lineHeightFactor: 2 });\r\n\r\n // hole bracket locations diagram\r\n doc.addImage(this.getImageData('bracketHoleLocations'), 'PNG', this.centerPos(width, 505), 120, 505, 320)\r\n\r\n // copy\r\n let p4copyLines1 = doc.setFontSize(12)\r\n .splitTextToSize('The Adjustable Bracket hole locations are determined using the Fortress Adjustable Bracket Stair Calculator.', 500)\r\n doc.text(50, height - 260, p4copyLines1, { align: 'left', lineHeightFactor: 2 })\r\n\r\n\r\n let p4copyLines2 = doc.setFontSize(12)\r\n .splitTextToSize('Once the hole locations are known, insert the nylon pins thru the holes. 2 nylon pins come with each adjustable stair bracket.', 500)\r\n doc.text(50, height - 200, p4copyLines2, { align: 'left', lineHeightFactor: 2 })\r\n\r\n\r\n let p4copyLines3 = doc.setFontSize(12)\r\n .splitTextToSize('The pins in the holes will hold the bracket at the correct angle until it is fastened securely to the stringer. Once the bracket is fastened the pins should be removed and discarded.', 500)\r\n doc.text(50, height - 140, p4copyLines3, { align: 'left', lineHeightFactor: 2 })\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 8\r\n //****************************************\r\n page8 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Installing the Adjustable Stair Brackets', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.setFontSize(12).setFontType('normal')\r\n .text(width / 2, 80, 'Flush to Grade & Drop to Grade', { align: 'center', lineHeightFactor: 2 });\r\n\r\n // diagram 1\r\n doc.addImage(this.getImageData('p8diagram1'), 'PNG', this.centerPos(width, 268), 105, 268, 174.5)\r\n\r\n // diagram 1 copy\r\n let p8diagram1CopyLines = doc.setFontSize(9)\r\n .splitTextToSize('Start on the left side (top step) of the stringer. This is the side that in most cases will attach to the deck structure.', 140)\r\n doc.text(width - 240, 135, p8diagram1CopyLines, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n // diagram 2 copy\r\n let p8diagram2CopyLines = doc.setFontSize(9)\r\n .splitTextToSize('Measure exactly as shown below paying close attention to the starting and ending measuring points. The distance measured comes from the Fortress Adjustable Bracket Stair Calculator.', 240)\r\n doc.text((width / 2) - 100, 310, p8diagram2CopyLines, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n // diagram 2\r\n doc.addImage(this.getImageData('p4diagram2'), 'PNG', this.centerPos(width, 495.5), 360, 495.5, 183.5)\r\n\r\n\r\n // diagram 3\r\n doc.addImage(this.getImageData('p4diagram3'), 'PNG', this.centerPos(width, 157.5) - 175, 585, 157.5, 99.5)\r\n\r\n // diagram 3 copy\r\n let p8diagram3CopyLines = doc.setFontSize(9)\r\n .splitTextToSize('Once the bracket is located clamp it down tightly. Not doing so will allow for move-ment as you fasten it in place.', 170)\r\n doc.text(50, height - 145, p8diagram3CopyLines, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n // diagram 4\r\n doc.addImage(this.getImageData('p4diagram4'), 'PNG', this.centerPos(width, 128) + 120, 555, 128, 126.5)\r\n\r\n // diagram 4 copy\r\n let p8diagram4CopyLines = doc.setFontSize(9)\r\n .splitTextToSize('With the bracket clamped, use the Evolution Self-Drilling screw to fasten the bracket using the (4) holes shown above. This needs to be repeated on the opposite side. Remove the 2 Pins and discard.', 190)\r\n doc.text(width - 265, height - 155, p8diagram4CopyLines, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 9\r\n //****************************************\r\n page9 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Installing the Adjustable Stair Brackets', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.setFontSize(12).setFontType('normal')\r\n .text(width / 2, 80, 'Flush to Grade & Drop to Grade', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.text(width / 2, 105, 'You’ll follow this process for the remaining bracket installations except the last step.', { align: 'center', lineHeightFactor: 2 })\r\n\r\n // diagram 1\r\n doc.addImage(this.getImageData('p9diagram1'), 'PNG', this.centerPos(width, 327.5), 115, 327.5, 185);\r\n\r\n // diagram1 copy\r\n let p9diagram1Copy = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('DO NOT fasten the bottom step yet', 100);\r\n doc.text(width-120, 240, p9diagram1Copy, { align: 'left', lineHeightFactor: 2 });\r\n\r\n // diagram2 copy\r\n let p9diagram2Copy = doc.splitTextToSize('Measure exactly as shown below paying close attention to the starting and ending measuring points. The distance measured comes from the Fortress Adjustable Bracket Stair Calculator.', 300);\r\n doc.text((width / 2) - 150, 320, p9diagram2Copy, { align: 'left', lineHeightFactor: 2 });\r\n\r\n // diagram 2\r\n doc.addImage(this.getImageData('p9diagram2'), 'PNG', this.centerPos(width, 536), 370, 498.6, 304.4);\r\n\r\n // diagram2 copy\r\n let p9diagram2BottomCopy = doc.splitTextToSize('Clamp the bracket to hold it in place and use the Evolution Self-Drilling Screws to fasten the bracket (Qty (4) on each side of bracket for a total of (8))', 500);\r\n doc.text((width / 2) - 250, height-140, p9diagram2BottomCopy, { align: 'left', lineHeightFactor: 2 });\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 10\r\n //****************************************\r\n page10 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Installing the Adjustable Stair Brackets', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.setFontSize(12).setFontType('normal')\r\n .text(width / 2, 80, 'Flush to Grade & Drop to Grade', { align: 'center', lineHeightFactor: 2 });\r\n\r\n // diagram 1\r\n doc.addImage(this.getImageData('p10diagram1'), 'PNG', this.centerPos(width, 327.5), 105, 327.5, 185);\r\n\r\n // diagram1 copy\r\n let p10diagram1Copy = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('The last bracket (bottom step) will overhang the stringer and will require some trimming.', 200);\r\n doc.text(width - 230, 130, p10diagram1Copy, { align: 'left', lineHeightFactor: 2 });\r\n\r\n // diagram 2\r\n doc.addImage(this.getImageData('p10diagram2'), 'PNG', 25, 305, 307, 329.4);\r\n\r\n // diagram 2 copy\r\n let p10diagram2Copy1 = doc.splitTextToSize('Simultaneously measure the bracket spacing AND make sure the bracket is square.', 200);\r\n doc.text(width - 240, 320, p10diagram2Copy1, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p10diagram2Copy2 = doc.splitTextToSize('Once the bracket is in position use a clamp to secure it.', 200);\r\n doc.text(width - 240, 370, p10diagram2Copy2, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p10diagram2Copy3 = doc.splitTextToSize('Fasten the bracket using the Evolution Self-Drilling screws.', 200);\r\n doc.text(width - 240, 430, p10diagram2Copy3, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p10diagram2Copy4 = doc.splitTextToSize('You’ll see the line you drew earlier when you cut the stringer.', 200);\r\n doc.text(width - 240, 490, p10diagram2Copy4, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p10diagram2Copy5 = doc.splitTextToSize('Note that the pin will not touch the stringer on the bottom but the top pin should still be used.', 200);\r\n doc.text(width - 240, 550, p10diagram2Copy5, { align: 'left', lineHeightFactor: 2 });\r\n\r\n // diagram 3\r\n doc.addImage(this.getImageData('p10diagram3'), 'PNG', (width/2)-150, height-190, 163.5, 96.5);\r\n\r\n // diagram 3 copy\r\n let p10diagram3Copy = doc.setFontSize(9).setFontType('normal').splitTextToSize('Use a straight edge and permanent marker to draw that line straight across the length of the bracket.', 120);\r\n doc.text(30, height - 160, p10diagram3Copy, { align: 'left', lineHeightFactor: 2 });\r\n\r\n // diagram 4\r\n doc.addImage(this.getImageData('p10diagram4'), 'PNG', width-190, height - 208, 162.5, 102.5);\r\n\r\n // diagram 4 copy\r\n let p10diagram4Copy = doc.splitTextToSize('Make a cut across the line to finish out the stringer', 100);\r\n doc.text((width/2)+25, height - 165, p10diagram4Copy, { align: 'left', lineHeightFactor: 2 });\r\n\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 11\r\n //****************************************\r\n page11 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Installing the Fixed Rise Run Stair Brackets', { align: 'center', lineHeightFactor: 2 });\r\n\r\n let p12introCopy = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('The fixed Rise Run brackets are non - adjustable, and are to be used for stair rise / run of either 7”/11” or 7.75”/11”.', 560)\r\n doc.text((width / 2), 80, p12introCopy, { align: 'center', lineHeightFactor: 2 })\r\n\r\n doc.addImage(this.getImageData('p11diagram1'), 'PNG', 50, 90, 270.5, 669)\r\n\r\n // diagram 2 copy\r\n let p11diagramCopy1 = doc.splitTextToSize('Install the brackets on either an Evolution 2”x6” Joist or 2” x11” Beam.', 200);\r\n doc.text(width - 240, 120, p11diagramCopy1, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy2 = doc.splitTextToSize('Butt the brackets together; they should be touching when they’re fastened.', 200);\r\n doc.text(width - 240, 180, p11diagramCopy2, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy3 = doc.splitTextToSize('Fasten the brackets to the joists using the Evolution 3/4” Self-Drilling Screw.', 200);\r\n doc.text(width - 240, 240, p11diagramCopy3, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy4 = doc.splitTextToSize('Once all the brackets are installed use a silver permanent marker to mark the angles.', 200);\r\n doc.text(width - 240, 350, p11diagramCopy4, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy5 = doc.splitTextToSize('The angle does not have to be measured. Use a straight edge to continue angles on either side of the bracket.', 200);\r\n doc.text(width - 240, 410, p11diagramCopy5, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy6 = doc.splitTextToSize('Use a metal cutting saw and blade to make the marked cuts.', 200);\r\n doc.text(width - 240, 600, p11diagramCopy6, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy7 = doc.splitTextToSize('Install the assembled stringers using the Evolution Stair Strap and Evolution Anchor Bracket.', 200);\r\n doc.text(width - 240, 660, p11diagramCopy7, { align: 'left', lineHeightFactor: 2 });\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 12\r\n //****************************************\r\n page12 = (doc, settings) => {\r\n let width = settings.width;\r\n //let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 65, 'Stair Strap', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.addImage(this.getImageData('p12diagram'), 'PNG', 40, 90, 272, 562)\r\n\r\n let p12diagramCopy1 = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('Position the stair strap and fasten to the deck using the Evolution 3/4” Self-Drilling Screws', 170)\r\n doc.text(width - 250, 130, p12diagramCopy1, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p12diagramCopy2 = doc.splitTextToSize('Install the Stringer by positioning it on the stair strap and fastening it using the holes on the side of the bracket and Evolution 3/4” Self-Drilling Screw (Not Pictured).', 170)\r\n doc.text(width - 250, 190, p12diagramCopy2, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p12diagramCopy3 = doc.splitTextToSize('Once the Stringer is installed, use a rubber mallet to bend the bottom portion of the stair strap along the bottom side of the stringer.', 170)\r\n doc.text(width - 250, 310, p12diagramCopy3, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p12diagramCopy4 = doc.splitTextToSize('Fill in all the holes on the bracket with the Evolution 3/4” Self-Drilling Screw.', 170)\r\n doc.text(width - 250, 390, p12diagramCopy4, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p12diagramCopy5 = doc.splitTextToSize('Stair Strap fully installed.', 170)\r\n doc.text(width - 250, 560, p12diagramCopy5, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 13\r\n //****************************************\r\n page13 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 65, 'Anchor Bracket', { align: 'center', lineHeightFactor: 2 });\r\n\r\n let p14introCopy = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('The Evolution Anchor Bracket attaches the stringer to the concrete footing pad or the deck landing (typical installation).', 560)\r\n doc.text(width / 2, 80, p14introCopy, { align: 'center', lineHeightFactor: 2 })\r\n\r\n // diagram 1\r\n doc.addImage(this.getImageData('p13diagram1'), 'PNG', 40, 120, 372.5, 205.5)\r\n\r\n let p13diagram1Copy = doc.splitTextToSize('Attached the anchor bracket to the bottom of the stringer using the Evolution 3/4” Self-Drilling Screws.', 150)\r\n doc.text(width - 175, 190, p13diagram1Copy, { align: 'left', lineHeightFactor: 1.5 })\r\n \r\n // diagram 2\r\n doc.addImage(this.getImageData('p13diagram2'), 'PNG', this.centerPos(width, 516), 325, 516, 182)\r\n\r\n let p13diagram2Copy = doc.splitTextToSize('Use a 3/8” concrete wedge anchor to securely fasten the anchor bracket to the concrete.', 150)\r\n doc.text((width/2)-140, 390, p13diagram2Copy, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n // diagram 3\r\n doc.addImage(this.getImageData('p13diagram3'), 'PNG', 40, 500, 345, 245.5)\r\n\r\n let p13diagram3Copy = doc.splitTextToSize('If anchoring to a landing, install blocking and attach the anchor bracket thru the blocking using 3/8” bolts, nuts, and washers.', 150)\r\n doc.text(width - 195, 600, p13diagram3Copy, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 14\r\n //****************************************\r\n page14 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 65, 'Stair Tray', { align: 'center', lineHeightFactor: 2 });\r\n\r\n let p15introCopy = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('The stair trays are 48” wide with blocking spaced every 10” On-Center. The tray can span 48” between stringers in residential applications.', 500)\r\n doc.text((width/2) - 250, 80, p15introCopy, { align: 'left', lineHeightFactor: 2 })\r\n\r\n doc.addImage(this.getImageData('p14diagram'), 'PNG', 50, 115, 274.8, 535.2)\r\n\r\n let p14diagramCopy1 = doc.splitTextToSize('Stringers full assembled and anchored to the deck with the Evolution Stair Strap and anchored to the concrete with the Evolution Anchor Bracket.', 150)\r\n doc.text(width - 250, 175, p14diagramCopy1, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p14diagramCopy2 = doc.splitTextToSize('Once the stringers are attached lay the Stair Tray on top of the stair brackets and center it.', 150)\r\n doc.text(width - 250, 340, p14diagramCopy2, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p14diagramCopy3 = doc.splitTextToSize('Fasten the tray using (2) Evolution 3/4” Self Drilling Screws at each stringer.', 150)\r\n doc.text(width - 250, 420, p14diagramCopy3, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p14diagramCopy4 = doc.splitTextToSize('The blocking every 10” On-Center can be used for railing post attach-ment and stair tread attachment.', 150)\r\n doc.text(width - 250, 540, p14diagramCopy4, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n // Page Outline\r\n addOutline = (doc) => {\r\n doc.setDrawColor(0, 102, 153) //dark blue\r\n .setLineWidth(2)\r\n .rect(10, 11, 583, 750);\r\n\r\n doc.setDrawColor(153, 194, 214) //light blue\r\n .setLineWidth(1)\r\n .rect(20, 20, 564, 730)\r\n };\r\n\r\n // Page Footer\r\n addFooter = (doc) => {\r\n doc.setFont('helvetica')\r\n\r\n let date = new Date();\r\n let copyright = '© 2019 Fortress Framing, LLC';\r\n let revision = 'Rev-' + date.yyyymmdd();\r\n\r\n // footer\r\n doc.setFontSize(10);\r\n doc.setFontType('normal')\r\n doc.text(20, 775, pageNum.toString());\r\n\r\n doc.text(220, 775, copyright);\r\n doc.text(510, 775, revision);\r\n\r\n //console.log('Page ' + pageNum.toString() + ' built!');\r\n };\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n
Results \r\n
\r\n
\r\n
\r\n
\r\n
\r\n Step Rise: \r\n {this.props.stepRise}\" \r\n
\r\n
\r\n Bottom Step Rise: \r\n {this.props.bottomStepRise}\" \r\n
\r\n
\r\n Angle: \r\n {this.props.angle} \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n θ1: \r\n {this.props.theta1} \r\n
\r\n
\r\n X1: \r\n {this.props.x1}\" \r\n
\r\n
\r\n
\r\n
\r\n Bracket Spacing: \r\n {this.props.bracketSpacing}\" \r\n
\r\n
\r\n Stringer Length: \r\n {this.props.stringerLength}\" \r\n
\r\n
\r\n Pin Hole Locations: \r\n {this.props.pinholeLocations} \r\n
\r\n
\r\n θ2: \r\n {this.props.theta2} \r\n
\r\n
\r\n X2: \r\n {this.props.x2}\" \r\n
\r\n
\r\n X3: \r\n {this.props.stringerLength}\" \r\n
\r\n
\r\n
\r\n this.handlePdfClick(e)} disabled={this.state.pdfButtonText !== 'Download PDF'}> \r\n
\r\n
\r\n\r\n
\r\n * Subject to local code restrictions and/or engineering span tables. \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faFileDownload } from '@fortawesome/free-solid-svg-icons'; //faShareAlt\r\nimport jsPDF from 'jspdf';\r\n\r\nDate.prototype.yyyymmdd = function () {\r\n var mm = this.getMonth() + 1; // getMonth() is zero-based\r\n var dd = this.getDate();\r\n\r\n return [this.getFullYear(),\r\n (mm > 9 ? '' : '0') + mm,\r\n (dd > 9 ? '' : '0') + dd\r\n ].join('');\r\n};\r\n\r\n//const evolutionLogo = require('../images/evolution-logo.png');\r\n//const framingLogo = require('../images/framing-logo.png');\r\n//const landingDiagrams = require('../images/landing-diagrams.png');\r\n//const gradeDiagrams = require('../images/grade-diagrams.png');\r\nlet pdfImages = [\r\n //p11\r\n { name: 'p11diagram1', src: require('../images/p11diagram1.png') }, //541x1269\r\n //p12\r\n { name: 'p12diagram', src: require('../images/p12diagram.png') }, //680x1405\r\n //p13\r\n { name: 'p13diagram1', src: require('../images/p13diagram1.png') }, //745x411\r\n { name: 'p13diagram2', src: require('../images/p13diagram2.png') }, //1032x364\r\n { name: 'p13diagram3', src: require('../images/p13diagram3.png') }, //690x491\r\n //p14\r\n { name: 'p14diagram', src: require('../images/p14diagram.png') }, //687x1338\r\n];\r\n\r\nlet pageNum = 1;\r\n\r\nexport class FixedRiseRunPDF extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n pdfButtonText: 'Download PDF'\r\n };\r\n\r\n this.init();\r\n };\r\n\r\n init() {\r\n let that = this;\r\n pdfImages.forEach(function (o, i) {\r\n that.toDataURL(o.src, function (dataUrl) {\r\n o.data = dataUrl;\r\n });\r\n });\r\n }\r\n\r\n getImageData(name) {\r\n let o = pdfImages.find(function (obj) { return obj.name === name; });\r\n if (o) return o.data;\r\n else return;\r\n }\r\n\r\n handleFixedRiseRunPdfClick(e) {\r\n let that = this;\r\n setTimeout(function () {\r\n that.generateFixedRiseRunPDF();\r\n }, 500);\r\n\r\n e.preventDefault();\r\n }\r\n\r\n toDataURL(url, callback) {\r\n var xhr = new XMLHttpRequest();\r\n xhr.onload = function () {\r\n var reader = new FileReader();\r\n reader.onloadend = function () {\r\n callback(reader.result);\r\n }\r\n reader.readAsDataURL(xhr.response);\r\n };\r\n xhr.open('GET', url);\r\n xhr.responseType = 'blob';\r\n xhr.send();\r\n }\r\n\r\n centerPos(pageWidth, objectWidth) {\r\n return ((pageWidth - objectWidth) / 2);\r\n };\r\n\r\n\r\n generateFixedRiseRunPDF = () => {\r\n let data = this.props.pdfData;\r\n let date = new Date();\r\n let doc = new jsPDF('p', 'pt');\r\n let settings = {\r\n width: doc.internal.pageSize.getWidth(),\r\n height: doc.internal.pageSize.getHeight()\r\n };\r\n\r\n doc.setFontSize(18);\r\n\r\n this.page11(doc, settings); // fixed rise/run (not needed in calc pdf)\r\n this.page12(doc, settings);\r\n this.page13(doc, settings);\r\n this.page14(doc, settings);\r\n\r\n\r\n doc.setFont('helvetica');\r\n doc.save('fortress-fixed-riserun-brackets_' + date.yyyymmdd() + '.pdf');\r\n\r\n let that = this; // and a wiffle ball bat!\r\n this.setState({\r\n pdfButtonText: 'Complete!'\r\n }, () => {\r\n setTimeout(function () {\r\n that.setState({\r\n pdfButtonText: 'Download PDF'\r\n });\r\n }, 2000);\r\n });\r\n\r\n pageNum = 1;\r\n };\r\n\r\n\r\n //****************************************\r\n // Page 11\r\n //****************************************\r\n page11 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n //doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 55, 'Installing the Fixed Rise Run Stair Brackets', { align: 'center', lineHeightFactor: 2 });\r\n\r\n let p12introCopy = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('The fixed Rise Run brackets are non - adjustable, and are to be used for stair rise / run of either 7”/11” or 7.75”/11”.', 560)\r\n doc.text((width / 2), 80, p12introCopy, { align: 'center', lineHeightFactor: 2 })\r\n\r\n doc.addImage(this.getImageData('p11diagram1'), 'PNG', 50, 120, 243.45, 571)\r\n\r\n // diagram 2 copy\r\n let p11diagramCopy1 = doc.splitTextToSize('Install the brackets on either an Evolution 2”x6” Joist or 2” x11” Beam.', 200);\r\n doc.text(width - 240, 120, p11diagramCopy1, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy2 = doc.splitTextToSize('Butt the brackets together; they should be touching when they’re fastened.', 200);\r\n doc.text(width - 240, 180, p11diagramCopy2, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy3 = doc.splitTextToSize('Fasten the brackets to the joists using the Evolution 3/4” Self-Drilling Screw.', 200);\r\n doc.text(width - 240, 240, p11diagramCopy3, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy4 = doc.splitTextToSize('Once all the brackets are installed use a silver permanent marker to mark the angles.', 200);\r\n doc.text(width - 240, 350, p11diagramCopy4, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy5 = doc.splitTextToSize('The angle does not have to be measured. Use a straight edge to continue angles on either side of the bracket.', 200);\r\n doc.text(width - 240, 410, p11diagramCopy5, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy6 = doc.splitTextToSize('Use a metal cutting saw and blade to make the marked cuts.', 200);\r\n doc.text(width - 240, 560, p11diagramCopy6, { align: 'left', lineHeightFactor: 2 });\r\n\r\n let p11diagramCopy7 = doc.splitTextToSize('Install the assembled stringers using the Evolution Stair Strap and Evolution Anchor Bracket.', 200);\r\n doc.text(width - 240, 620, p11diagramCopy7, { align: 'left', lineHeightFactor: 2 });\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 12\r\n //****************************************\r\n page12 = (doc, settings) => {\r\n let width = settings.width;\r\n //let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 65, 'Stair Strap', { align: 'center', lineHeightFactor: 2 });\r\n\r\n doc.addImage(this.getImageData('p12diagram'), 'PNG', 40, 90, 272, 562)\r\n\r\n let p12diagramCopy1 = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('Position the stair strap and fasten to the deck using the Evolution 3/4” Self-Drilling Screws', 170)\r\n doc.text(width - 250, 130, p12diagramCopy1, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p12diagramCopy2 = doc.splitTextToSize('Install the Stringer by positioning it on the stair strap and fastening it using the holes on the side of the bracket and Evolution 3/4” Self-Drilling Screw (Not Pictured).', 170)\r\n doc.text(width - 250, 190, p12diagramCopy2, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p12diagramCopy3 = doc.splitTextToSize('Once the Stringer is installed, use a rubber mallet to bend the bottom portion of the stair strap along the bottom side of the stringer.', 170)\r\n doc.text(width - 250, 310, p12diagramCopy3, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p12diagramCopy4 = doc.splitTextToSize('Fill in all the holes on the bracket with the Evolution 3/4” Self-Drilling Screw.', 170)\r\n doc.text(width - 250, 390, p12diagramCopy4, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p12diagramCopy5 = doc.splitTextToSize('Stair Strap fully installed.', 170)\r\n doc.text(width - 250, 560, p12diagramCopy5, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 13\r\n //****************************************\r\n page13 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 65, 'Anchor Bracket', { align: 'center', lineHeightFactor: 2 });\r\n\r\n let p14introCopy = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('The Evolution Anchor Bracket attaches the stringer to the concrete footing pad or the deck landing (typical installation).', 560)\r\n doc.text(width / 2, 80, p14introCopy, { align: 'center', lineHeightFactor: 2 })\r\n\r\n // diagram 1\r\n doc.addImage(this.getImageData('p13diagram1'), 'PNG', 40, 120, 372.5, 205.5)\r\n\r\n let p13diagram1Copy = doc.splitTextToSize('Attached the anchor bracket to the bottom of the stringer using the Evolution 3/4” Self-Drilling Screws.', 150)\r\n doc.text(width - 175, 190, p13diagram1Copy, { align: 'left', lineHeightFactor: 1.5 })\r\n \r\n // diagram 2\r\n doc.addImage(this.getImageData('p13diagram2'), 'PNG', this.centerPos(width, 516), 325, 516, 182)\r\n\r\n let p13diagram2Copy = doc.splitTextToSize('Use a 3/8” concrete wedge anchor to securely fasten the anchor bracket to the concrete.', 150)\r\n doc.text((width/2)-140, 390, p13diagram2Copy, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n // diagram 3\r\n doc.addImage(this.getImageData('p13diagram3'), 'PNG', 40, 500, 345, 245.5)\r\n\r\n let p13diagram3Copy = doc.splitTextToSize('If anchoring to a landing, install blocking and attach the anchor bracket thru the blocking using 3/8” bolts, nuts, and washers.', 150)\r\n doc.text(width - 195, 600, p13diagram3Copy, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n //****************************************\r\n // Page 14\r\n //****************************************\r\n page14 = (doc, settings) => {\r\n let width = settings.width;\r\n let height = settings.height;\r\n\r\n doc.addPage()\r\n\r\n this.addOutline(doc);\r\n\r\n // page title\r\n doc.setFontSize(22).setFontType('bold')\r\n .text(width / 2, 65, 'Stair Tray', { align: 'center', lineHeightFactor: 2 });\r\n\r\n let p15introCopy = doc.setFontSize(10).setFontType('normal')\r\n .splitTextToSize('The stair trays are 48” wide with blocking spaced every 10” On-Center. The tray can span 48” between stringers in residential applications.', 500)\r\n doc.text((width/2) - 250, 80, p15introCopy, { align: 'left', lineHeightFactor: 2 })\r\n\r\n doc.addImage(this.getImageData('p14diagram'), 'PNG', 50, 115, 274.8, 535.2)\r\n\r\n let p14diagramCopy1 = doc.splitTextToSize('Stringers full assembled and anchored to the deck with the Evolution Stair Strap and anchored to the concrete with the Evolution Anchor Bracket.', 150)\r\n doc.text(width - 250, 175, p14diagramCopy1, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p14diagramCopy2 = doc.splitTextToSize('Once the stringers are attached lay the Stair Tray on top of the stair brackets and center it.', 150)\r\n doc.text(width - 250, 340, p14diagramCopy2, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p14diagramCopy3 = doc.splitTextToSize('Fasten the tray using (2) Evolution 3/4” Self Drilling Screws at each stringer.', 150)\r\n doc.text(width - 250, 420, p14diagramCopy3, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n let p14diagramCopy4 = doc.splitTextToSize('The blocking every 10” On-Center can be used for railing post attach-ment and stair tread attachment.', 150)\r\n doc.text(width - 250, 540, p14diagramCopy4, { align: 'left', lineHeightFactor: 1.5 })\r\n\r\n this.addFooter(doc);\r\n pageNum++;\r\n };\r\n\r\n // Page Outline\r\n addOutline = (doc) => {\r\n doc.setDrawColor(0, 102, 153) //dark blue\r\n .setLineWidth(2)\r\n .rect(10, 11, 583, 750);\r\n\r\n doc.setDrawColor(153, 194, 214) //light blue\r\n .setLineWidth(1)\r\n .rect(20, 20, 564, 730)\r\n };\r\n\r\n // Page Footer\r\n addFooter = (doc) => {\r\n doc.setFont('helvetica')\r\n\r\n let date = new Date();\r\n let copyright = '© 2019 Fortress Framing, LLC';\r\n let revision = 'Rev-' + date.yyyymmdd();\r\n\r\n // footer\r\n doc.setFontSize(10);\r\n doc.setFontType('normal')\r\n doc.text(20, 775, pageNum.toString());\r\n\r\n doc.text(220, 775, copyright);\r\n doc.text(510, 775, revision);\r\n\r\n //console.log('Page ' + pageNum.toString() + ' built!');\r\n };\r\n\r\n render() {\r\n return (\r\n
\r\n this.handleFixedRiseRunPdfClick(e)}>download and view instructions \r\n \r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\n\r\nexport class Errors extends Component {\r\n constructor(props) {\r\n super(props);\r\n };\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n {this.props.errors.map(err => (\r\n {err.msg} \r\n ))}\r\n \r\n
\r\n )\r\n }\r\n}","import React, { useState } from 'react';\r\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\n\r\nconst mainDiagram = require('../../images/master-diagram_2022.7.15.png');\r\n\r\nconst HelpModal = (props) => {\r\n const {\r\n className,\r\n title\r\n } = props;\r\n\r\n const [modal, setModal] = useState(false);\r\n\r\n const toggle = () => setModal(!modal);\r\n\r\n return (\r\n <>\r\n
? Help\r\n
\r\n {title} \r\n \r\n
\r\n\r\n Definitions \r\n\r\n Total Rise \r\n Distance from the top of the landing to the top of the deck surface.
\r\n\r\n Tread Depth \r\n The width of the stair tread. This dimension includes any gap between the boards that exists.
\r\n\r\n Tread Thickness \r\n The thickness of the tread surface.
\r\n\r\n Step Rise \r\n The distance from the top of one stair tread to the top of the next stair tread.
\r\n\r\n Step Run \r\n The distance from the back of the step to the front edge of the stair tread.
\r\n\r\n Stair Tread \r\n The material used to go over the Evolution Stair Tray that becomes the surface of the step.This is the surface that is walked on.
\r\n\r\n Bracket Spacing \r\n The distance between two Evolution Adjustable Stair Brackets.Reference the installation guide for further information on this measurement.
\r\n\r\n Angle \r\n The angle of the Evolution Stringer relative to the mounting surface.Reference the installation guide for further information on this measurement.
\r\n\r\n Stringer Length \r\n To total length the Evolution Stringer is cut to.Reference the installation guide for further information on this measurement.
\r\n\r\n Pin Hole Locations \r\n The hole locations on the Evolution Adjustable Stair Bracket. Nylon pins mark the locations of the holes and corresponds to a different rise / run setting on the bracket. Reference the installation guide for further information on the hole locations.
\r\n\r\n Evolution 7”/11” Stair Bracket: \r\n The Evolution Preset 7\"/11\" Stair Bracket is engineered to slide over the top of an Evolution Joist or Evolution Beam and provide a perfect 7\" rise and 11\" run for the stringer. These brackets align directly with one another resulting in a rapid, worry-free stringer installation.
\r\n\r\n Evolution 7.75”/11” Stair Bracket \r\n The Evolution Preset 7.75\"/11\" Stair Bracket is engineered to slide over the top of an Evolution Joist or Evolution Beam and provide a perfect 7.75\" rise and 11\" run for the stringer. These brackets align directly with one another resulting in a rapid, worry-free stringer installation.
\r\n\r\n Evolution Adjustable Stair Bracket \r\n The Evolution Adjustable Stair Bracket allows you to quickly and easily customize the stair’s rise and run using the two provided set pins. Place the set pins in the desired holes and slide the stair brackets over an Evolution Joist or Beam to complete the stinger installation. The Fortress Stair Calculator is required to complete installation using this bracket.
\r\n\r\n Evolution Stringer \r\n The Evolution Stringer is assembled using an Evolution Joist or Evolution Beam and the Evolution Stair Brackets. There are 3 separate brackets options and the brackets set on top of the Beam or Joist to create a stringer. The Evolution Stringer is the main structural member of the stairs that the Evolution Stair Tray and Stair Tread material mount to.
\r\n\r\n Evolution 48” Stair Tray \r\n The Evolution Stair tray sits on top of the Stringer and is the surface that the stair tread will attach to. The lateral supports are spaced to work with any kind of deck board and provides blocking for surface mounted posts.
\r\n\r\n Evolution Stair Anchor Bracket \r\n The Evolution Stair Stringer Anchor Bracket is reversible, allowing a secure, connection from the stringer to the footing, slab or pier under the last tread.
\r\n\r\n Evolution Stair Strap \r\n The Evolution Stair Strap allows flexibility when connecting the top of the stair stringer to the deck, landing or structure, while securely holding the stringers in place.
\r\n\r\n \r\n \r\n Got it! \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default HelpModal;","import React, { useState } from 'react';\r\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\n\r\nconst mainDiagram = require('../../images/master-diagram.png');\r\nconst flushToGrade = require('../../images/flushToGrade.png');\r\nconst flushToLanding = require('../../images/flushToLanding.png');\r\nconst dropToGrade = require('../../images/dropToGrade.png');\r\nconst dropToLanding = require('../../images/dropToLanding.png');\r\n\r\nconst ConfigurationModal = (props) => {\r\n const {\r\n className,\r\n title\r\n } = props;\r\n\r\n const [modal, setModal] = useState(false);\r\n\r\n const toggle = () => setModal(!modal);\r\n\r\n return (\r\n <>\r\n
i View configuration definitions\r\n
\r\n {title} \r\n \r\n
\r\n\r\n Configurations \r\n Flush To Grade \r\n The top step is even with the surface of the deck. The bottom step sits on TOP of a surface; typically a concrete slab or the top of a landing.
\r\n \r\n
\r\n\r\n Flush to Landing \r\n The top step is even with the surface of a deck. The bottom step attaches to the side of another structure; typically a landing.
\r\n \r\n
\r\n\r\n Drop to Grade \r\n The top step drops down from the surface of the deck. The bottom step sits on TOP of a surface; typically a concrete slab or the top of a landing.
\r\n \r\n
\r\n\r\n Drop to Landing \r\n The top step drops down from the surface of the deck. The bottom step attaches to the side of another structure; typically a landing.
\r\n \r\n
\r\n\r\n \r\n \r\n Got it! \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default ConfigurationModal;","import React, { Component } from 'react';\r\nimport { ListGroup } from 'reactstrap';\r\nimport { StairConfigurationItem } from './StairConfigurationItem';\r\nimport { RiseAndTread } from './RiseAndTread';\r\nimport { TrayAndStringer } from './TrayAndStringer';\r\nimport { StepSelect } from './StepSelect';\r\nimport { StairCalcResults } from './StairCalcResults';\r\nimport { FixedRiseRunPDF } from './FixedRiseRunPDF';\r\nimport { Errors } from './Errors';\r\nimport HelpModal from './modals/HelpModal';\r\nimport ConfigurationModal from './modals/ConfigurationModal';\r\n\r\nexport class StairCalc extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.arrSteps = [];\r\n this.stepOptionCount = 0;\r\n this.stepOpts = [];\r\n this.arrAngles = [\r\n [24.32188418, 28.69308748, 32.56331048, 36.40406521, 39.58787357],\r\n [18.30635063, 23.08261229, 27.36417415, 31.64138205, 35.21629680],\r\n [11.53637788, 16.66754860, 21.34546996, 26.07172173, 30.06917653],\r\n [4.69633962, 10.06151376, 15.05053783, 20.16930165, 24.56446035]\r\n ];\r\n this.arrMaxRuns = this.populateMaxRuns();\r\n console.log('arrMaxRuns', this.arrMaxRuns);\r\n //this.arrTotalRunOpts = [];\r\n this.arrStringerLengths = []; //only populated for f2l\r\n this.selectedStepOptionId = 0;\r\n\r\n this.state = { \r\n configuration: 0,\r\n totalRiseFt: 9,\r\n totalRiseIn: 0,\r\n treadDepthIn: 11,\r\n treadThicknessIn: 1,\r\n //results\r\n stepRise: 0,\r\n bottomStepRise: 0,\r\n angle: 0,\r\n bracketSpacing: 0,\r\n stringerLength: 0,\r\n stepOpts: [],\r\n tray: 0,\r\n stringer: 0,\r\n errors: []\r\n };\r\n\r\n this.updateSteps(this.state);\r\n this.state.stepOptionCount = this.stepOptionCount;\r\n this.state.stepOpts = this.stepOpts;\r\n\r\n this.debug = true;\r\n }\r\n\r\n radians(degrees) {\r\n return degrees * (Math.PI / 180);\r\n };\r\n\r\n populateMaxRuns(){\r\n return [\r\n [\r\n this.getMaxRunCalc(4.92750764, this.arrAngles[0][0]),\r\n this.getMaxRunCalc(5.70875764, this.arrAngles[0][1]),\r\n this.getMaxRunCalc(6.49000764, this.arrAngles[0][2]),\r\n this.getMaxRunCalc(7.26567311, this.arrAngles[0][3]),\r\n this.getMaxRunCalc(8.04133858, this.arrAngles[0][4])\r\n ],\r\n [\r\n this.getMaxRunCalc(4.92750764, this.arrAngles[1][0]),\r\n this.getMaxRunCalc(5.70875764, this.arrAngles[1][1]),\r\n this.getMaxRunCalc(6.49000764, this.arrAngles[1][2]),\r\n this.getMaxRunCalc(7.26567311, this.arrAngles[1][3]),\r\n this.getMaxRunCalc(8.04133858, this.arrAngles[1][4])\r\n ],\r\n [\r\n this.getMaxRunCalc(4.92750764, this.arrAngles[2][0]),\r\n this.getMaxRunCalc(5.70875764, this.arrAngles[2][1]),\r\n this.getMaxRunCalc(6.49000764, this.arrAngles[2][2]),\r\n this.getMaxRunCalc(7.26567311, this.arrAngles[2][3]),\r\n this.getMaxRunCalc(8.04133858, this.arrAngles[2][4])\r\n ],\r\n [\r\n this.getMaxRunCalc(4.92750764, this.arrAngles[3][0]),\r\n this.getMaxRunCalc(5.70875764, this.arrAngles[3][1]),\r\n this.getMaxRunCalc(6.49000764, this.arrAngles[3][2]),\r\n this.getMaxRunCalc(7.26567311, this.arrAngles[3][3]),\r\n this.getMaxRunCalc(8.04133858, this.arrAngles[3][4])\r\n ]\r\n ];\r\n }\r\n\r\n getMaxRunCalc(dec, angle) {\r\n //=(4.92750764+(0.127952755*TAN(RADIANS(J6/2))+0.9187478)*TAN(RADIANS(J6)))/TAN(RADIANS(J6))\r\n\r\n return parseFloat(((dec + (0.127952755 * Math.tan(this.radians(angle / 2)) + 0.9187478) * Math.tan(this.radians(angle))) / Math.tan(this.radians(angle))).toFixed(4));\r\n //return this.roundToTwo((dec + (0.127952755 * Math.tan(this.radians(angle / 2)) + 0.9187478) * Math.tan(this.radians(angle))) / Math.tan(this.radians(angle)));\r\n //return this.toFixedTrunc((dec + (0.127952755 * Math.tan(this.radians(angle / 2)) + 0.9187478) * Math.tan(this.radians(angle))) / Math.tan(this.radians(angle)), 4);\r\n //return parseFloat((dec + (0.127952755 * Math.tan(this.radians(angle / 2)) + 0.9187478) * Math.tan(this.radians(angle))) / Math.tan(this.radians(angle)));\r\n };\r\n\r\n roundToTwo(num) {\r\n return +(Math.round(num + \"e+2\") + \"e-2\");\r\n };\r\n\r\n //toFixedTrunc(num, fixed) {\r\n // return num.toFixed(fixed);\r\n // var re = new RegExp('^-?\\\\d+(?:\\.\\\\d{0,' + (fixed || -1) + '})?');\r\n // return num.toString().match(re)[0];\r\n //};\r\n\r\n populateTotalRunOptions() {\r\n var opts = [];\r\n var row = [];\r\n\r\n var totalRise = ((this.state.totalRiseFt * 12) + this.state.totalRiseIn);\r\n\r\n //loop through angles for calc.\r\n for (var i = 0; i < 4; i++) {\r\n for (var j = 0; j < 5; j++) {\r\n row.push(totalRise / Math.tan(this.radians(this.arrAngles[i][j]))); //removed this.roundToTwo()\r\n }\r\n opts.push(row);\r\n row = []; //reset.\r\n }\r\n\r\n return opts;\r\n };\r\n\r\n ///setup = tray, beams, both, or default\r\n isSetup(kind) {\r\n if (this.state.tray === 1 && this.state.stringer === 0) {\r\n if (kind === 'tray') return true;\r\n } else if (this.state.tray === 1 && this.state.stringer === 1) {\r\n if (kind === 'both') return true;\r\n } else if (this.state.tray === 0 && this.state.stringer === 1) {\r\n if (kind === 'beams') return true;\r\n } else {\r\n if (kind === 'default') return true;\r\n }\r\n\r\n return false;\r\n };\r\n\r\n getTotalRun(stepRise, angle) {\r\n let totalRise = ((this.state.totalRiseFt * 12) + this.state.totalRiseIn);\r\n\r\n console.log('getTotalRun', totalRise, stepRise, angle);\r\n\r\n //f2l - =($C$2*12+$E$2)/TAN(RADIANS(M4))\r\n //d2g - =IF(E12 = 0, \"0\", (($C$2 * 12 + $E$2) - $E$5) / TAN(RADIANS(M6)))\r\n\r\n if (this.state.configuration === 0 || this.state.configuration === 1) //flush to landing (1) or grade (0)\r\n {\r\n return (totalRise / Math.tan(this.radians(angle)));\r\n }\r\n else if (this.state.configuration === 2 || this.state.configuration === 3) //drop to grade (2) or landing (3)\r\n {\r\n return ((totalRise - stepRise) / Math.tan(this.radians(angle)));\r\n }\r\n\r\n return 0;\r\n };\r\n\r\n getStringerLength(stepVal, stepRise, angle, maxRun) {\r\n\r\n let totalRise = ((this.state.totalRiseFt * 12) + this.state.totalRiseIn);\r\n\r\n console.group('Setup:')\r\n console.log('Default? ', this.isSetup('default'));\r\n console.log('Tray? ', this.isSetup('tray'));\r\n console.log('Beams? ', this.isSetup('beams'));\r\n console.log('Both? ', this.isSetup('both'));\r\n console.groupEnd();\r\n\r\n\r\n //console.log('getStringerLength', totalRise, stepVal, stepRise, angle, maxRun);\r\n\r\n if (this.state.configuration === 0) {//flush to grade (0)\r\n //there don't seem to be differences between setups for this calc.\r\n return ((totalRise / Math.sin(this.radians(angle))) - ((maxRun - stepVal) / Math.cos(this.radians(angle))) - (this.state.treadThicknessIn / Math.sin(this.radians(angle))));\r\n }\r\n else if (this.state.configuration === 1) //flush to landing (1)\r\n {\r\n if (this.isSetup('tray') ||\r\n this.isSetup('default')) {\r\n return ((totalRise / Math.sin(this.radians(angle))) + (5.905511811 * Math.tan(this.radians(angle))));\r\n }\r\n else if (this.isSetup('both') ||\r\n this.isSetup('beams')) {\r\n return ((totalRise / Math.sin(this.radians(angle))) + (11.02362205 * Math.tan(this.radians(angle))));\r\n }\r\n }\r\n else if (this.state.configuration === 2) { //drop to grade (2)\r\n return (((totalRise - stepRise) / Math.sin(this.radians(angle))) - ((maxRun - stepVal) / Math.cos(this.radians(angle))) - (this.state.treadThicknessIn/Math.sin(this.radians(angle))));\r\n }\r\n else if(this.state.configuration === 3) //drop to landing (3)\r\n {\r\n if (this.isSetup('tray') ||\r\n this.isSetup('default')) {\r\n return ((totalRise - stepRise) / Math.sin(this.radians(angle)) + (5.905511811 * Math.tan(this.radians(angle))));\r\n }\r\n else {\r\n return (((totalRise - stepRise) / Math.sin(this.radians(angle))) - ((maxRun - stepVal) / Math.cos(this.radians(angle))) - (this.state.treadThicknessIn / Math.sin(this.radians(angle))));\r\n }\r\n }\r\n\r\n //console.error('INVALID SETUP');\r\n return 0;\r\n };\r\n\r\n getFraction(val) {\r\n //console.log('getFraction', val);\r\n if (val) {\r\n var dec,\r\n rem,\r\n parts = val.toString().split('.');\r\n\r\n if (parts.length === 2) {\r\n dec = (val % 1).toFixed(2);\r\n rem = parseFloat(dec) * 32;\r\n if (Math.round(rem) > 0) {\r\n let reduced = this.reduce(Math.round(rem), 32)\r\n\r\n if (reduced[0] === reduced[1]) //sometimes x 1/1 was being returned.\r\n return (parseFloat(parts[0]) + 1).toString();\r\n\r\n return (parts[0] + ' ' + reduced[0] + '/' + reduced[1]);\r\n }\r\n else\r\n return parts[0];\r\n }\r\n else\r\n return val.toString();\r\n }\r\n\r\n return '';\r\n };\r\n\r\n reduce(numerator, denominator) {\r\n return [numerator, denominator]; //bypass reducing for now! Client wants all fractions as 32nds.\r\n\r\n var gcd = function gcd(a, b) {\r\n return b ? gcd(b, a % b) : a;\r\n };\r\n gcd = gcd(numerator, denominator);\r\n return [numerator / gcd, denominator / gcd];\r\n };\r\n\r\n getStepOptions(rise) {\r\n //console.log(rise);\r\n\r\n var opts = [];\r\n var row = [];\r\n var i, j = 0;\r\n\r\n //loop through angles for calc.\r\n if (this.state.tray === 1 && this.state.stringer === 0) {\r\n //console.info('STAIR TRAY CALC');\r\n\r\n for (i = 0; i < 4; i++) {\r\n for (j = 0; j < 5; j++) {\r\n if (this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))) < this.state.treadDepthIn &&\r\n this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))) > (this.state.treadDepthIn - 1.25) &&\r\n this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))) <= 11) { //11 instead of max run number\r\n row.push(this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))));\r\n }\r\n else\r\n row.push(0);\r\n }\r\n opts.push(row);\r\n row = []; //reset.\r\n }\r\n } else if (this.state.tray === 1 && this.state.stringer === 1) {\r\n //console.info('BEAMS WITH TRAYS CALC');\r\n\r\n for (i = 0; i < 4; i++) {\r\n for (j = 0; j < 5; j++) {\r\n if (this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))) < this.state.treadDepthIn &&\r\n this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))) > (this.state.treadDepthIn - 1.25) &&\r\n this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))) <= 11) { //11 instead of max run number\r\n row.push(this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))));\r\n }\r\n else\r\n row.push(0);\r\n }\r\n opts.push(row);\r\n row = []; //reset.\r\n }\r\n } else {\r\n console.log('getStepOptions', this.state.configuration);\r\n\r\n if (this.state.tray === 0 && this.state.stringer === 1) {\r\n //console.info('BEAMS CALC');\r\n } else {\r\n //console.info('DEFAULT CALC');\r\n }\r\n\r\n for (i = 0; i < 4; i++) {\r\n for (j = 0; j < 5; j++) {\r\n\r\n //d2g - =IF(ROUND($E$4/TAN(RADIANS(J5)),2)<$C$3,IF(ROUND($E$4/TAN(RADIANS(J5)),2)>$C$3-1.25,IF(ROUND($E$4/TAN(RADIANS(J5)),2)<=Q5,ROUND($E$4/TAN(RADIANS(J5)),2),0),0),0)\r\n\r\n //f2l - =IF(ROUND($E$4/TAN(RADIANS(J4)),2)<$C$3,IF(ROUND($E$4/TAN(RADIANS(J4)),2)>$C$3-1.25,IF(ROUND($E$4/TAN(RADIANS(J4)),2)<=J11,ROUND($E$4/TAN(RADIANS(J4)),2),0),0),0)\r\n\r\n\r\n if (this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))) < this.state.treadDepthIn &&\r\n this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))) > (this.state.treadDepthIn - 1.25) &&\r\n this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))) <= (this.arrMaxRuns[i][j])) {\r\n row.push(this.roundToTwo(rise / Math.tan(this.radians(this.arrAngles[i][j]))));\r\n }\r\n else\r\n row.push(0);\r\n }\r\n opts.push(row);\r\n row = []; //reset.\r\n }\r\n }\r\n\r\n //console.log('stepOpts', opts);\r\n\r\n return opts;\r\n };\r\n\r\n getThetaData(angle) {\r\n\r\n if (this.state.configuration === 1 || this.state.configuration === 3) {//flush or drop to landing\r\n return {\r\n 'theta1': angle,\r\n 'x1': this.state.stringer === 0 ? (Math.tan(this.radians(angle)) * 150 / 25.4) : (Math.tan(this.radians(angle)) * 278.4 / 25.4), //changes depending on stringer type\r\n 'x2': null,\r\n 'x3': this.state.stringerLengthDec\r\n };\r\n }\r\n else if (this.state.configuration === 0 || this.state.configuration === 2) //flush or drop to grade\r\n {\r\n return {\r\n 'theta1': angle,\r\n 'theta2': 90 - angle,\r\n 'x1': this.state.stringer === 0 ? (Math.tan(this.radians(angle)) * 150 / 25.4) : (Math.tan(this.radians(angle)) * 278.4 / 25.4), //changes depending on stringer type\r\n 'x2': this.state.stringer === 0 ? (Math.tan(this.radians(90 - angle)) * 150 / 25.4) : (Math.tan(this.radians(90 - angle)) * 278.4 / 25.4), //changes depending on stringer type\r\n //'x3': this.state.stringerLengthDec\r\n };\r\n }\r\n\r\n //console.error('INVALID SETUP');\r\n return 0;\r\n };\r\n\r\n //Select Configuration Event\r\n setConfiguration(config) {\r\n this.reset();\r\n\r\n this.setState({\r\n configuration: config,\r\n selectedStepOptionId: 0\r\n }, () => {\r\n this.updateSteps(this.state);\r\n\r\n this.setState({\r\n stepOptionCount: this.stepOptionCount,\r\n stepOpts: this.stepOpts\r\n }, () => {\r\n //this.output(this.state);\r\n });\r\n });\r\n }\r\n\r\n //Inputs Changed\r\n onInputChange(event) {\r\n //event.target.checkValidity();\r\n\r\n const target = event.target; \r\n const value = target.type === 'checkbox' ? target.checked : ((event.target.type === 'number' || target.type === 'radio') ? parseFloat(target.value) : target.value);\r\n const name = target.name;\r\n\r\n //reset step select and hide results\r\n this.setState({\r\n selectedStepOptionId: 0\r\n }, () => { });\r\n\r\n if (name !== '' && value !== null) {\r\n this.reset();\r\n\r\n let arrErr = this.state.errors;\r\n\r\n console.log('input change - errors: ', this.state.errors);\r\n\r\n //clear errors as necessary\r\n if (name === 'totalRiseFt' && this.hasKey(arrErr, 'totalRiseFt'))\r\n arrErr.splice(arrErr.findIndex(v => v.key === \"totalRiseFt\"), 1);\r\n\r\n if (name === 'totalRiseIn' && this.hasKey(arrErr, 'totalRiseIn'))\r\n arrErr.splice(arrErr.findIndex(v => v.key === \"totalRiseIn\"), 1);\r\n\r\n if (name === 'treadDepthIn' && this.hasKey(arrErr, 'treadDepth'))\r\n arrErr.splice(arrErr.findIndex(v => v.key === \"treadDepth\"), 1);\r\n\r\n if (name === 'treadThicknessIn' && this.hasKey(arrErr, 'treadThickness'))\r\n arrErr.splice(arrErr.findIndex(v => v.key === \"treadThickness\"), 1);\r\n\r\n //rise\r\n if (!this.validateTotalRiseFt((name === 'totalRiseFt') ? value : this.state.totalRiseFt))\r\n arrErr.push({ key: 'totalRiseFt', msg: \"Total rise must be less than 12'\" });\r\n\r\n if (!this.validateTotalRiseIn((name === 'totalRiseIn') ? value : this.state.totalRiseIn))\r\n arrErr = this.addError(arrErr, 'totalRiseIn', \"Total rise must be less than 12'\");\r\n\r\n //tread depth\r\n let treadDepthResult = this.validateTreadDepth((name === 'treadDepthIn') ? value : this.state.treadDepthIn);\r\n\r\n if (!treadDepthResult.result) {\r\n if (treadDepthResult.min)\r\n arrErr = this.addError(arrErr, 'treadDepth', 'The tread minimum is ' + treadDepthResult.min + '\"');\r\n else if (treadDepthResult.max)\r\n arrErr = this.addError(arrErr, 'treadDepth', 'The tread maximum is ' + treadDepthResult.max + '\"');\r\n }\r\n\r\n //tread thickness\r\n if (!this.validateTreadThickness((name === 'treadThicknessIn') ? value : this.state.treadThicknessIn))\r\n arrErr = this.addError(arrErr, 'treadThickness', 'Tread thickness must be between 0 and 1.5\"');\r\n\r\n console.log(arrErr);\r\n\r\n if (arrErr.length > 0)\r\n this.setState({ errors: arrErr });\r\n else {\r\n\r\n this.setState({\r\n [name]: value,\r\n //errors: []\r\n }, () => {\r\n this.updateSteps(this.state);\r\n\r\n this.setState({\r\n stepOptionCount: this.stepOptionCount,\r\n stepOpts: this.stepOpts\r\n }, () => {\r\n //this.output(this.state);\r\n });\r\n });\r\n\r\n }\r\n }\r\n //else\r\n //console.error('input name undefined.');\r\n };\r\n\r\n validateTotalRiseFt(val) {\r\n if (((val * 12) + this.state.totalRiseIn) > 144)\r\n return false;\r\n else\r\n return true;\r\n };\r\n\r\n validateTotalRiseIn(val) {\r\n if (((this.state.totalRiseFt * 12) + val) > 144)\r\n return false;\r\n else\r\n return true;\r\n };\r\n\r\n validateTreadDepth(val) {\r\n console.log('this.state.tray', this.state.tray);\r\n\r\n if (this.state.tray === 0) { //no tray\r\n if (val < 10)\r\n return { result: false, min: '10' };\r\n //this.trayDepthErr.push({ 'key': 'treadDepth', 'msg': 'The tread minimum is 10\"' });\r\n } else if (this.state.tray === 1) { //fortress tray\r\n if (val < 11)\r\n return { result: false, min: '11' };\r\n //this.trayDepthErr.push({ 'key': 'treadDepth', 'msg': 'The tread minimum is 11\"' });\r\n else if (val > 12.25)\r\n return { result: false, max: '12.25' };\r\n //this.trayDepthErr.push({ 'key': 'treadDepth', 'msg': 'The tread minimum is 12.25\"' });\r\n }\r\n\r\n return { result: true }; \r\n };\r\n\r\n validateTreadThickness(val) {\r\n console.log('validateTreadThickness', (val < 0 || val > 1.5));\r\n if (val < 0 || val > 1.5)\r\n return false;\r\n else\r\n return true;\r\n };\r\n\r\n hasKey(arr, key) {\r\n return (arr.findIndex(v => v.key === key) > -1);\r\n };\r\n\r\n addError(arr, key, msg) {\r\n if(!this.hasKey(arr, key))\r\n arr.push({ 'key': key, 'msg': msg });\r\n\r\n return arr;\r\n };\r\n\r\n onStepOptionSelect(event) {\r\n const target = event.target;\r\n\r\n //reset step select and hide results\r\n this.setState({\r\n selectedStepOptionId: 0\r\n }, () => { });\r\n\r\n if (target.value) {\r\n \r\n const value = JSON.parse(target.value);\r\n //const name = target.name;\r\n\r\n //console.log('selectedStepOptionId', value.id);\r\n \r\n this.setState({\r\n stepRise: value.stepRise,\r\n bottomStepRise: value.bottomStepRise,\r\n angle: value.angle,\r\n bracketSpacing: this.getFraction(value.val),\r\n stringerLength: value.stringerLength,\r\n stringerLengthDec: value.stringerLengthDec,\r\n selectedStepOptionId: value.id,\r\n stepText: value.steps + ' Steps - ' + value.totalRun + '\" Total Run',\r\n thetaData: value.thetaData,\r\n pinhole1: value.pinhole1,\r\n pinhole2: value.pinhole2\r\n }, () => {\r\n this.ouput(this.state);\r\n });\r\n\r\n } else {\r\n\r\n this.setState({\r\n stepRise: 0,\r\n bottomStepRise: 0,\r\n angle: 0,\r\n bracketSpacing: 0,\r\n stringerLength: 0,\r\n stringerLengthDec: 0\r\n }, () => {\r\n this.reset();\r\n });\r\n }\r\n };\r\n\r\n //handlePdfClick(e) {\r\n // console.log('PDF clicked!');\r\n // //ReactPDF.render(
, '${__dirname}/example.pdf');\r\n //};\r\n\r\n handleShareClick(e) {\r\n //console.log('Share clicked!');\r\n };\r\n\r\n reset() {\r\n this.arrSteps = [];\r\n //this.arrTotalRunOpts = [];\r\n this.arrStringerLengths = [];\r\n\r\n //this.stepOptionCount = 0;\r\n //this.stepOpts = [];\r\n };\r\n\r\n //updateSteps!\r\n updateSteps = (state) => {\r\n //console.log('Updated State:', state);\r\n\r\n //Num Steps Option 1\r\n let totalRise = ((state.totalRiseFt * 12) + state.totalRiseIn);\r\n let stepOpt1Calc = (totalRise / 7.75);\r\n let stepOpt1 = 0;\r\n\r\n //f2l -> =IF((($C$2*12+$E$2)/7.75)-TRUNC(($C$2*12+$E$2)/7.75)=0,($C$2*12+$E$2)/7.75,TRUNC(($C$2*12+$E$2)/7.75)+1)\r\n //f2g -> =IF((($C$2*12+$E$2)/7.75)-TRUNC(($C$2*12+$E$2)/7.75)=0,($C$2*12+$E$2)/7.75,TRUNC(($C$2*12+$E$2)/7.75)+1)\r\n //d2l -> =IF((($C$2*12+$E$2)/7.75)-TRUNC(($C$2*12+$E$2)/7.75)=0,(($C$2*12+$E$2)/7.75)-1,TRUNC(($C$2*12+$E$2)/7.75))\r\n //d2g -> =IF((($C$2*12+$E$2)/7.75)-TRUNC(($C$2*12+$E$2)/7.75)=0,(($C$2*12+$E$2)/7.75)-1,TRUNC(($C$2*12+$E$2)/7.75))\r\n\r\n if (this.state.configuration <= 1) { //f2g, f2l\r\n stepOpt1 = (stepOpt1Calc - Math.trunc(stepOpt1Calc) === 0) ? stepOpt1Calc : Math.trunc(stepOpt1Calc + 1);\r\n\r\n this.arrSteps.push({\r\n 'steps': stepOpt1,\r\n 'rise': this.roundToTwo(totalRise / stepOpt1),\r\n 'options': this.getStepOptions((totalRise / stepOpt1).toFixed(5)),\r\n });\r\n //Num Steps Option 2\r\n this.arrSteps.push({\r\n 'steps': stepOpt1 + 1,\r\n 'rise': this.roundToTwo(totalRise / (stepOpt1 + 1)),\r\n 'options': this.getStepOptions((totalRise / (stepOpt1 + 1)).toFixed(5)),\r\n });\r\n //Num Steps Option 3\r\n this.arrSteps.push({\r\n 'steps': stepOpt1 + 2,\r\n 'rise': this.roundToTwo(totalRise / (stepOpt1 + 2)),\r\n 'options': this.getStepOptions((totalRise / (stepOpt1 + 2)).toFixed(5)),\r\n });\r\n //Num Steps Option 4\r\n this.arrSteps.push({\r\n 'steps': stepOpt1 + 3,\r\n 'rise': this.roundToTwo(totalRise / (stepOpt1 + 3)),\r\n 'options': this.getStepOptions((totalRise / (stepOpt1 + 3)).toFixed(5)),\r\n });\r\n\r\n } else if (this.state.configuration >= 2) { //d2g, d2l\r\n console.log('drop calc');\r\n stepOpt1 = (stepOpt1Calc - Math.trunc(stepOpt1Calc) === 0) ? (stepOpt1Calc - 1) : Math.trunc(stepOpt1Calc);\r\n\r\n this.arrSteps.push({\r\n 'steps': stepOpt1,\r\n 'rise': this.roundToTwo(totalRise / (stepOpt1 + 1)),\r\n 'options': this.getStepOptions((totalRise / (stepOpt1 + 1)).toFixed(5)),\r\n });\r\n //Num Steps Option 2\r\n this.arrSteps.push({\r\n 'steps': stepOpt1 + 1,\r\n 'rise': this.roundToTwo(totalRise / (stepOpt1 + 2)),\r\n 'options': this.getStepOptions((totalRise / (stepOpt1 + 2)).toFixed(5)),\r\n });\r\n //Num Steps Option 3\r\n this.arrSteps.push({\r\n 'steps': stepOpt1 + 2,\r\n 'rise': this.roundToTwo(totalRise / (stepOpt1 + 3)),\r\n 'options': this.getStepOptions((totalRise / (stepOpt1 + 3)).toFixed(5)),\r\n });\r\n //Num Steps Option 4\r\n this.arrSteps.push({\r\n 'steps': stepOpt1 + 3,\r\n 'rise': this.roundToTwo(totalRise / (stepOpt1 + 4)),\r\n 'options': this.getStepOptions((totalRise / (stepOpt1 + 4)).toFixed(5)),\r\n });\r\n }\r\n\r\n this.populateStepOptions();\r\n };\r\n\r\n //Populates the select options for the user to choose from.\r\n populateStepOptions = () => {\r\n let steps = this.arrSteps.slice(0);\r\n\r\n let itemCount = 1;\r\n let self = this;\r\n self.stepOpts = [];\r\n\r\n //loop through angles to add step options to the array.\r\n steps.forEach(function (o, i) {\r\n steps[i].options.forEach(function (p, j) {\r\n steps[i].options[j].forEach(function (q, k) {\r\n if (q === 0) return;\r\n\r\n self.stepOpts.push({\r\n 'id': itemCount,\r\n 'row': j,\r\n 'col': k,\r\n 'val': q,\r\n 'steps': o.steps,\r\n 'totalRun': self.getFraction(self.getTotalRun(o.rise, self.arrAngles[j][k])),\r\n 'maxRun': self.arrMaxRuns[j][k],\r\n 'stepRise': o.rise,\r\n 'bottomStepRise': (o.rise - self.state.treadThicknessIn).toFixed(2),\r\n 'angle': (self.arrAngles[j][k]).toFixed(2) + '°',\r\n 'stringerLength': self.getFraction(self.getStringerLength(q, o.rise, self.arrAngles[j][k], self.arrMaxRuns[j][k])),\r\n 'stringerLengthDec': self.getStringerLength(q, o.rise, self.arrAngles[j][k], self.arrMaxRuns[j][k]),\r\n 'thetaData': self.getThetaData(self.arrAngles[j][k]),\r\n 'pinhole1': (j + 1) + 'L',\r\n 'pinhole2': (k + 1) + 'R'\r\n });\r\n\r\n itemCount++;\r\n });\r\n });\r\n });\r\n\r\n this.stepOptionCount = self.stepOpts.length;\r\n\r\n console.log('this.props.stepOpts -> ', this.stepOpts);\r\n };\r\n\r\n ouput = (state) => {\r\n console.log('OUTPUTE state:', this.state);\r\n };\r\n\r\n render() {\r\n return (\r\n
\r\n
The Fortress Stair Calculator is a tool required when using Fortress’ Adjustable Stair Bracket. After entering a few parameters, the calculator will walk you thru all the steps required to assemble a stair stringer using Fortress’ Evolution Steel Stair System.
\r\n
If you’re using Fortress’ 7”/11” or 7.75”/11” Fixed Rise/Run Brackets,
\r\n
\r\n\r\n
\r\n
1 Choose a Configuration\r\n\r\n
\r\n this.setConfiguration(0)}\r\n />\r\n this.setConfiguration(1)}\r\n />\r\n this.setConfiguration(2)}\r\n />\r\n this.setConfiguration(3)}\r\n />\r\n \r\n
\r\n\r\n
\r\n\r\n {this.state.errors.length > 0 ?\r\n
\r\n : ''}\r\n
\r\n
\r\n this.onInputChange(e)}\r\n />\r\n
\r\n
\r\n this.onInputChange(e)}\r\n />\r\n
\r\n
\r\n this.onStepOptionSelect(e)}\r\n stepCount={this.state.stepOptionCount}\r\n stepOptions={this.state.stepOpts}\r\n hasErrors={this.state.errors.length > 0}\r\n />\r\n
\r\n
\r\n\r\n
\r\n \r\n
this.handlePdfClick(e)}\r\n handleFixedRiseRunPdfClick={(e) => this.handleFixedRiseRunPdfClick(e)}\r\n handleShareClick={(e) => this.handleShareClick(e)}\r\n visible={this.state.selectedStepOptionId > 0}\r\n pdfData={this.state}\r\n configuration={this.state.configuration}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n//key = { this.stepSelectKey }","import './App.css';\r\nimport React, { Component } from 'react';\r\nimport { Route } from 'react-router';\r\nimport { Layout } from './components/Layout';\r\nimport { StairCalc } from './components/StairCalc';\r\n\r\nexport default class App extends Component {\r\n static displayName = App.name;\r\n\r\n render() {\r\n return (\r\n
\r\n \r\n );\r\n }\r\n}","// In production, we register a service worker to serve assets from local cache.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\r\n// cached resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\r\n// This link also includes instructions on opting out of this behavior.\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.1/8 is considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport default function register () {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Lets check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl);\r\n } else {\r\n // Is not local host. Just register service worker\r\n registerValidSW(swUrl);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW (swUrl) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the old content will have been purged and\r\n // the fresh content will have been added to the cache.\r\n // It's the perfect time to display a \"New content is\r\n // available; please refresh.\" message in your web app.\r\n console.log('New content is available; please refresh.');\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker (swUrl) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl)\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n if (\r\n response.status === 404 ||\r\n response.headers.get('content-type').indexOf('javascript') === -1\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister () {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import 'react-app-polyfill/ie11';\r\nimport 'react-app-polyfill/stable';\r\n\r\n//import 'bootstrap/dist/css/bootstrap.css';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\n//import 'https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport App from './App';\r\nimport registerServiceWorker from './registerServiceWorker';\r\n\r\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\r\nconst rootElement = document.getElementById('root');\r\n\r\nReactDOM.render(\r\n
\r\n ,\r\n rootElement);\r\n\r\nregisterServiceWorker();\r\n"],"sourceRoot":""}