How to use currentScenario method in stryker-parent

Best JavaScript code snippet using stryker-parent

ViewScenario.js

Source:ViewScenario.js

1import React from 'react';2import {3    Container,4    Segment,5    Header,6    Label,7    Grid,8    Loader,9    Tab,10    Table,11} from 'semantic-ui-react';12import { getCompetitor, getSizeChoice, getLocationChoice, getOwnershipChoice, getTargetGroupChoice, getProductChoice, getMarketing, getEmployee, getProductDetail, getSelectBuProductAcceptByTarget, getSelectAllDecorationBuDec, getSelectDecorationBuDec, getAllBusinessSizeLocationOwnership } from '../../Provider/GetData/GetData';13import { calculateTotalQuantity, getProductAcceptionById, getDecorationRelationById, getStoreRelationById } from '../../Provider/CreateProvider/CreateProvider';14export default class ViewScenario extends React.Component {15    state = { currentScenario: undefined }16    componentWillReceiveProps = async (nextProps) => {17        let currentScenario = {}18        if (nextProps.selectedScenario) {19            currentScenario = nextProps.selectedScenario20            const dataComp = await getCompetitor(currentScenario.BusinessID)21            const dataSize = await getSizeChoice(currentScenario.BusinessID)22            const dataLo = await getLocationChoice(currentScenario.BusinessID)23            const dataOwn = await getOwnershipChoice(currentScenario.BusinessID)24            const dataTarget = await getTargetGroupChoice(currentScenario.BusinessID)25            const dataMarketing = await getMarketing(currentScenario.BusinessID)26            const dataFullTime = await getEmployee(currentScenario.BusinessID, 1)27            const dataPartTime = await getEmployee(currentScenario.BusinessID, 0)28            const dataTargetAccept = await getSelectBuProductAcceptByTarget(currentScenario.BusinessID)29            const dataDec = await getSelectDecorationBuDec(currentScenario.BusinessID)30            const dataDecRelate = await getSelectAllDecorationBuDec(currentScenario.BusinessID)31            const dataStoreRelate = await getAllBusinessSizeLocationOwnership(currentScenario.BusinessID)32            const dataPro = await getProductChoice(currentScenario.BusinessID)33            const productChoice = dataPro.data.map(async (e) => {34                return await getProductDetail({ BusinessID: currentScenario.BusinessID, ProductID: e.ProductID })35            })36            await Promise.all(productChoice).then((choices) => {37                currentScenario = { ...currentScenario, competitor: dataComp.data, size: dataSize.data, location: dataLo.data, owner: dataOwn.data, target: dataTarget.data, market: dataMarketing.data, fulltime: dataFullTime.data, parttime: dataPartTime.data, product: dataPro.data, productQuality: choices.map(e => { return e.data }), productAccept: dataTargetAccept, decoration: dataDec, decRelated: dataDecRelate, macroRelate: dataStoreRelate }38                this.setState({ currentScenario: currentScenario })39            })40        } else {41            this.setState({ currentScenario: undefined })42        }43    }44    render() {45        const panes1 = [46            {47                menuItem: 'Macro', render: () =>48                    <div>49                        <Segment>50                            <Label color='teal' size='large' attached='top'>51                                Scenario Detail52                            </Label>53                            <Table size='small'>54                                <Table.Header>55                                    <Table.Row>56                                        <Table.HeaderCell>Scenario Description</Table.HeaderCell>57                                        <Table.HeaderCell>Store Operation Description</Table.HeaderCell>58                                    </Table.Row>59                                </Table.Header>60                                <Table.Body>61                                    <Table.Row>62                                        <Table.Cell>{this.state.currentScenario.BusinessScenarioDescription}</Table.Cell>63                                        <Table.Cell>{this.state.currentScenario.BusinessStoreOperationDescription}</Table.Cell>64                                    </Table.Row>65                                </Table.Body>66                            </Table>67                            <Table size='small'>68                                <Table.Header>69                                    <Table.Row>70                                        <Table.HeaderCell>Target Group Description</Table.HeaderCell>71                                        <Table.HeaderCell>Decoration Description</Table.HeaderCell>72                                        <Table.HeaderCell>Operating Time Description</Table.HeaderCell>73                                    </Table.Row>74                                </Table.Header>75                                <Table.Body>76                                    <Table.Row>77                                        <Table.Cell>{this.state.currentScenario.BusinessTargetGroupDescription}</Table.Cell>78                                        <Table.Cell>{this.state.currentScenario.BusinessStoreOperationDescription}</Table.Cell>79                                        <Table.Cell>{this.state.currentScenario.BusinessOperatingTimeDescription}</Table.Cell>80                                    </Table.Row>81                                </Table.Body>82                            </Table>83                            <Table size='small'>84                                <Table.Header>85                                    <Table.Row>86                                        <Table.HeaderCell>Merchandising Description</Table.HeaderCell>87                                        <Table.HeaderCell>Human Resource Description</Table.HeaderCell>88                                        <Table.HeaderCell>Marketing Description</Table.HeaderCell>89                                    </Table.Row>90                                </Table.Header>91                                <Table.Body>92                                    <Table.Row>93                                        <Table.Cell>{this.state.currentScenario.BusinessProductDescription}</Table.Cell>94                                        <Table.Cell>{this.state.currentScenario.BusinessEmployeeDescription}</Table.Cell>95                                        <Table.Cell>{this.state.currentScenario.BusinessPromotionDescription}</Table.Cell>96                                    </Table.Row>97                                </Table.Body>98                            </Table>99                        </Segment>100                        <Segment>101                            <Label color='teal' size='large' attached='top'>102                                Macro Economics Detail103                            </Label>104                            <Grid stackable centered columns={2}>105                                <Grid.Column>106                                    <Table basic='very' celled collapsing size="small">107                                        <Table.Body>108                                            <Table.Row>109                                                <Table.Cell>110                                                    <Header as='h5'>111                                                        <Header.Content>112                                                            Start money113                                                        </Header.Content>114                                                    </Header>115                                                </Table.Cell>116                                                <Table.Cell>{this.state.currentScenario.BusinessStartMoney.toLocaleString('EN') + ' à¸¿'}</Table.Cell>117                                            </Table.Row>118                                            <Table.Row>119                                                <Table.Cell>120                                                    <Header as='h5'>121                                                        <Header.Content>122                                                            Economic event123                                                        </Header.Content>124                                                    </Header>125                                                </Table.Cell>126                                                <Table.Cell>{this.state.currentScenario.BusinessEconomicEvent.toLocaleString('EN') + ' %'}</Table.Cell>127                                            </Table.Row>128                                            <Table.Row>129                                                <Table.Cell>130                                                    <Header as='h5'>131                                                        <Header.Content>132                                                            Gross demand133                                                        </Header.Content>134                                                    </Header>135                                                </Table.Cell>136                                                <Table.Cell>{this.state.currentScenario.BusinessGrossDemand.toLocaleString('EN') + ' %'}</Table.Cell>137                                            </Table.Row>138                                            <Table.Row>139                                                <Table.Cell>140                                                    <Header as='h5'>141                                                        <Header.Content>142                                                            Gross grow up rate143                                                        </Header.Content>144                                                    </Header>145                                                </Table.Cell>146                                                <Table.Cell>{this.state.currentScenario.BusinessGrossDemandGrowUpRate.toLocaleString('EN') + ' %'}</Table.Cell>147                                            </Table.Row>148                                        </Table.Body>149                                    </Table>150                                </Grid.Column>151                                <Grid.Column>152                                    <Table basic='very' celled collapsing size="small">153                                        <Table.Body>154                                            <Table.Row>155                                                <Table.Cell>156                                                    <Header as='h5'>157                                                        <Header.Content>158                                                            LicenseCost159                                                        </Header.Content>160                                                    </Header>161                                                </Table.Cell>162                                                <Table.Cell>{this.state.currentScenario.BusinessLicenseCost.toLocaleString('EN') + ' à¸¿'}</Table.Cell>163                                            </Table.Row>164                                            <Table.Row>165                                                <Table.Cell>166                                                    <Header as='h5'>167                                                        <Header.Content>168                                                            Loan interest rate169                                                        </Header.Content>170                                                    </Header>171                                                </Table.Cell>172                                                <Table.Cell>{this.state.currentScenario.BusinessLoanInterestRate.toLocaleString('EN') + ' %'}</Table.Cell>173                                            </Table.Row>174                                            <Table.Row>175                                                <Table.Cell>176                                                    <Header as='h5'>177                                                        <Header.Content>178                                                            Inflation179                                                        </Header.Content>180                                                    </Header>181                                                </Table.Cell>182                                                <Table.Cell>{this.state.currentScenario.BusinessInflation.toLocaleString('EN') + ' %'}</Table.Cell>183                                            </Table.Row>184                                            <Table.Row>185                                                <Table.Cell>186                                                    <Header as='h5'>187                                                        <Header.Content>188                                                            Price growth rate189                                                        </Header.Content>190                                                    </Header>191                                                </Table.Cell>192                                                <Table.Cell>{this.state.currentScenario.BusinessPriceGrowthPolicy.toLocaleString('EN') + ' %'}</Table.Cell>193                                            </Table.Row>194                                        </Table.Body>195                                    </Table>196                                </Grid.Column>197                            </Grid>198                        </Segment>199                    </div>200            },201            {202                menuItem: 'Store', render: () =>203                    <div>204                        <Segment>205                            <Label color='teal' size='large' attached='top'>206                                Location Detail207                            </Label>208                            <Table basic='very' size="small">209                                <Table.Body>210                                    <Table.Row>211                                        <Table.Cell>212                                            <Header as='h5'>Location</Header>213                                        </Table.Cell>214                                        <Table.Cell>215                                            <Header as='h5'>Total population</Header>216                                        </Table.Cell>217                                        <Table.Cell>218                                            <Header as='h5'>Trading population ratio</Header>219                                        </Table.Cell>220                                        <Table.Cell>221                                            <Header as='h5'>Total population grow up rate</Header>222                                        </Table.Cell>223                                    </Table.Row>224                                </Table.Body>225                                <Table.Body>226                                    {this.state.currentScenario.location.map((e, index) => {227                                        return (228                                            <Table.Row key={index}>229                                                <Table.Cell>{e.LocationName}</Table.Cell>230                                                <Table.Cell>{e.TotalPopulation.toLocaleString('EN') + ' pers.'}</Table.Cell>231                                                <Table.Cell>{e.TradingPopulationRatio.toLocaleString('EN') + ' %'}</Table.Cell>232                                                <Table.Cell>{e.TotalPopulationGrowUpRate.toLocaleString('EN') + ' %'}</Table.Cell>233                                            </Table.Row>234                                        )235                                    })}236                                </Table.Body>237                            </Table>238                        </Segment>239                        <Segment>240                            <Label color='teal' size='large' attached='top'>241                                Size Detail242                            </Label>243                            <Table basic='very' size="small">244                                <Table.Body>245                                    <Table.Row>246                                        <Table.Cell>247                                            <Header as='h5'>Size</Header>248                                        </Table.Cell>249                                        <Table.Cell>250                                            <Header as='h5'>Storage</Header>251                                        </Table.Cell>252                                        <Table.Cell>253                                            <Header as='h5'>Base electricity unit on size</Header>254                                        </Table.Cell>255                                        <Table.Cell>256                                            <Header as='h5'>Market share score</Header>257                                        </Table.Cell>258                                    </Table.Row>259                                </Table.Body>260                                <Table.Body>261                                    {this.state.currentScenario.size.map((e, index) => {262                                        return (263                                            <Table.Row key={index}>264                                                <Table.Cell>{e.Size}</Table.Cell>265                                                <Table.Cell>{e.Storage.toLocaleString('EN') + ' ps'}</Table.Cell>266                                                <Table.Cell>{e.BaseElectricityUnitOnSize.toLocaleString('EN') + 'unit'}</Table.Cell>267                                                <Table.Cell>{e.MarketSharedScore.toLocaleString('EN')}</Table.Cell>268                                            </Table.Row>269                                        )270                                    })}271                                </Table.Body>272                            </Table>273                        </Segment>274                        <Segment>275                            <Label color='teal' size='large' attached='top'>276                                Ownership Detail277                            </Label>278                            <Table basic='very' size="small">279                                <Table.Body>280                                    <Table.Row>281                                        <Table.Cell>282                                            <Header as='h5'>Ownership</Header>283                                        </Table.Cell>284                                        <Table.Cell>285                                            <Header as='h5'>Maintain cost</Header>286                                        </Table.Cell>287                                        <Table.Cell>288                                            <Header as='h5'>Land tax cost</Header>289                                        </Table.Cell>290                                        <Table.Cell>291                                            <Header as='h5'>Other cost</Header>292                                        </Table.Cell>293                                        <Table.Cell>294                                            <Header as='h5'>Ownership base electricity/unit</Header>295                                        </Table.Cell>296                                        <Table.Cell>297                                            <Header as='h5'>Ownership depreciation aging</Header>298                                        </Table.Cell>299                                    </Table.Row>300                                </Table.Body>301                                <Table.Body>302                                    {this.state.currentScenario.owner.map((e, index) => {303                                        return (304                                            <Table.Row key={index}>305                                                <Table.Cell>{e.OwnershipName}</Table.Cell>306                                                <Table.Cell>{e.MaintainCost.toLocaleString('EN') + ' %'}</Table.Cell>307                                                <Table.Cell>{e.OwnershipName === 'Buy' ? e.LandTaxCost.toLocaleString('EN') + ' %' : e.LandTaxCost.toLocaleString('EN') + ' à¸¿'}</Table.Cell>308                                                <Table.Cell>{e.OtherCost.toLocaleString('EN') + ' %'}</Table.Cell>309                                                <Table.Cell>{e.OwnerBaseElectricityPerUnit.toLocaleString('EN') + ' à¸¿'}</Table.Cell>310                                                <Table.Cell>{e.OwnerDepreciationAging.toLocaleString('EN') + ' yr.'}</Table.Cell>311                                            </Table.Row>312                                        )313                                    })}314                                </Table.Body>315                            </Table>316                        </Segment>317                    </div>318            },319            {320                menuItem: 'Cost', render: () =>321                    <Segment>322                        <Label color='teal' size='large' attached='top'>323                            Cost Detail324                        </Label>325                        <Table basic='very' size="small">326                            <Table.Body>327                                <Table.Row>328                                    <Table.Cell>329                                        <Header as='h5'>Ownership</Header>330                                    </Table.Cell>331                                    <Table.Cell>332                                        <Header as='h5'>Location</Header>333                                    </Table.Cell>334                                    <Table.Cell>335                                        <Header as='h5'>Size</Header>336                                    </Table.Cell>337                                    <Table.Cell>338                                        <Header as='h5'>Privillage Cost</Header>339                                    </Table.Cell>340                                    <Table.Cell>341                                        <Header as='h5'>Rental Cost</Header>342                                    </Table.Cell>343                                    <Table.Cell>344                                        <Header as='h5'>Accounting Fee</Header>345                                    </Table.Cell>346                                </Table.Row>347                                {this.state.currentScenario.owner.map((owner, indexDec) => {348                                    return this.state.currentScenario.location.map((lo, indexLo) => {349                                        return this.state.currentScenario.size.map((size, indexSize) => {350                                            let found = getStoreRelationById({ ...owner, ...lo, ...size }, this.state.currentScenario.macroRelate)351                                            return (352                                                <Table.Row key={indexDec + '' + indexLo + '' + indexSize}>353                                                    <Table.Cell>{indexLo === 0 && indexSize === 0 ? owner.OwnershipName : ''}</Table.Cell>354                                                    <Table.Cell>{indexSize === 0 ? lo.LocationName : ''}</Table.Cell>355                                                    <Table.Cell>{size.Size}</Table.Cell>356                                                    <Table.Cell>{found.PrivillageCost.toLocaleString('EN') + ' à¸¿'}</Table.Cell>357                                                    <Table.Cell>{found.RentalCost.toLocaleString('EN') + ' à¸¿'}</Table.Cell>358                                                    <Table.Cell>{found.AccountingFee.toLocaleString('EN') + ' à¸¿'}</Table.Cell>359                                                </Table.Row>360                                            )361                                        })362                                    })363                                })}364                            </Table.Body>365                        </Table>366                    </Segment>367            },368            {369                menuItem: 'Target', render: () =>370                    <Segment>371                        <Label color='teal' size='large' attached='top'>372                            Target group Detail373                        </Label>374                        <Table celled size="small">375                            <Table.Header>376                                <Table.Row>377                                    <Table.HeaderCell>Target Group</Table.HeaderCell>378                                    <Table.HeaderCell>Grow up rate</Table.HeaderCell>379                                    <Table.HeaderCell>Quantity of people</Table.HeaderCell>380                                </Table.Row>381                            </Table.Header>382                            <Table.Body>383                                {this.state.currentScenario.target.map((e, index) => {384                                    return (385                                        <Table.Row key={index}>386                                            <Table.Cell>{e.TargetGroupName}</Table.Cell>387                                            <Table.Cell>{e.TargetGroupGrowUpRatio.toLocaleString('EN') + ' %'}</Table.Cell>388                                            <Table.Cell>{e.TargetGroupQuantityRatio.toLocaleString('EN') + ' %'}</Table.Cell>389                                        </Table.Row>390                                    )391                                })}392                            </Table.Body>393                            <Table.Footer>394                                <Table.Row>395                                    <Table.Cell />396                                    <Table.Cell textAlign='right'>397                                        <Header as='h5'>Total quantity</Header>398                                    </Table.Cell>399                                    <Table.Cell>400                                        <Header as='h5'>{calculateTotalQuantity(this.state.currentScenario.target, 'TargetGroupQuantityRatio').toLocaleString('EN') + ' %'}</Header>401                                    </Table.Cell>402                                </Table.Row>403                            </Table.Footer>404                        </Table>405                    </Segment>406            },407            {408                menuItem: 'Decoration', render: () =>409                    <Segment>410                        <Label color='teal' size='large' attached='top'>411                            Decoration Detail412                        </Label>413                        <Table basic='very' size="small">414                            <Table.Body>415                                <Table.Row>416                                    <Table.Cell>417                                        <Header as='h5'>Item</Header>418                                    </Table.Cell>419                                    <Table.Cell>420                                        <Header as='h5'>Location</Header>421                                    </Table.Cell>422                                    <Table.Cell>423                                        <Header as='h5'>Size</Header>424                                    </Table.Cell>425                                    <Table.Cell>426                                        <Header as='h5'>Price</Header>427                                    </Table.Cell>428                                    <Table.Cell>429                                        <Header as='h5'>Electricity Unit / Hr.</Header>430                                    </Table.Cell>431                                </Table.Row>432                                {this.state.currentScenario.decoration.map((dec, indexDec) => {433                                    return this.state.currentScenario.location.map((lo, indexLo) => {434                                        return this.state.currentScenario.size.map((size, indexSize) => {435                                            let found = getDecorationRelationById({ ...dec, ...lo, ...size }, this.state.currentScenario.decRelated)436                                            return (437                                                <Table.Row key={indexDec + '' + indexLo + '' + indexSize}>438                                                    <Table.Cell>{indexLo === 0 && indexSize === 0 ? found.DecorationItem : ''}</Table.Cell>439                                                    <Table.Cell>{indexSize === 0 ? lo.LocationName : ''}</Table.Cell>440                                                    <Table.Cell>{size.Size}</Table.Cell>441                                                    <Table.Cell>{found.Price.toLocaleString('EN') + ' à¸¿'}</Table.Cell>442                                                    <Table.Cell>{found.ElectricityUnitPerHour.toLocaleString('EN') + ' Unit'}</Table.Cell>443                                                </Table.Row>444                                            )445                                        })446                                    })447                                })}448                            </Table.Body>449                        </Table>450                    </Segment>451            },452            {453                menuItem: 'Merchandising', render: () =>454                    <div>455                        <Segment>456                            <Label color='teal' size='large' attached='top'>457                                Merchandising Detail458                        </Label>459                            <Table basic='very' size="small">460                                <Table.Body>461                                    <Table.Row>462                                        <Table.Cell>463                                            <Header as='h5'>Product</Header>464                                        </Table.Cell>465                                        <Table.Cell>466                                            <Header as='h5'>Quality</Header>467                                        </Table.Cell>468                                        <Table.Cell>469                                            <Header as='h5'>Depreciation Ratio</Header>470                                        </Table.Cell>471                                        <Table.Cell>472                                            <Header as='h5'>Price / Unit</Header>473                                        </Table.Cell>474                                    </Table.Row>475                                    {this.state.currentScenario.product.map((e, indexA) => {476                                        return this.state.currentScenario.productQuality[indexA].map((element, index) => {477                                            return (478                                                <Table.Row key={indexA}>479                                                    <Table.Cell>{index === 0 ? e.ProductName : ''}</Table.Cell>480                                                    <Table.Cell>{element.QualityName}</Table.Cell>481                                                    <Table.Cell>{element.ProductDepreciationRatio.toLocaleString('EN') + ' %'}</Table.Cell>482                                                    <Table.Cell>{element.BasePricePerUnit.toLocaleString('EN') + ' à¸¿'}</Table.Cell>483                                                </Table.Row>484                                            )485                                        })486                                    })487                                    }488                                </Table.Body>489                            </Table>490                        </Segment>491                        <Segment>492                            <Label color='teal' size='large' attached='top'>493                                Acception Detail494                        </Label>495                            <Table basic='very' size="small">496                                <Table.Body>497                                    <Table.Row>498                                        <Table.Cell>499                                            <Header as='h5'>Target Group</Header>500                                        </Table.Cell>501                                        <Table.Cell>502                                            <Header as='h5'>Product Name</Header>503                                        </Table.Cell>504                                        <Table.Cell>505                                            <Header as='h5'>Accept Ratio</Header>506                                        </Table.Cell>507                                        <Table.Cell>508                                            <Header as='h5'>Acception Ratio Grow Up</Header>509                                        </Table.Cell>510                                        <Table.Cell>511                                            <Header as='h5'>Maximum Price Rate</Header>512                                        </Table.Cell>513                                    </Table.Row>514                                    {this.state.currentScenario.target.map((element, index) => {515                                        return this.state.currentScenario.product.map((e, indexA) => {516                                            let found = getProductAcceptionById({ ...element, ...e }, this.state.currentScenario.productAccept)517                                            return (518                                                <Table.Row key={index}>519                                                    <Table.Cell>{indexA === 0 ? found.TargetGroupName : ''}</Table.Cell>520                                                    <Table.Cell>{found.ProductName}</Table.Cell>521                                                    <Table.Cell>{found.AcceptRatio.toLocaleString('EN') + ' %'}</Table.Cell>522                                                    <Table.Cell>{found.AcceptRatioGrowUpRate.toLocaleString('EN') + ' %'}</Table.Cell>523                                                    <Table.Cell>{found.MaximumPriceRate.toLocaleString('EN') + ' %'}</Table.Cell>524                                                </Table.Row>525                                            )526                                        })527                                    })528                                    }529                                </Table.Body>530                            </Table>531                        </Segment>532                    </div>533            },534            {535                menuItem: 'HR', render: () =>536                    <div>537                        <Segment>538                            <Label color='teal' size='large' attached='top'>539                                Full-time employees Detail540                            </Label>541                            <Table basic='very' size="small">542                                <Table.Body>543                                    <Table.Row>544                                        <Table.Cell>545                                            <Header as='h5'>Job</Header>546                                        </Table.Cell>547                                        <Table.Cell>548                                            <Header as='h5'>Status</Header>549                                        </Table.Cell>550                                        <Table.Cell>551                                            <Header as='h5'>Base salary(Monthly)</Header>552                                        </Table.Cell>553                                        <Table.Cell>554                                            <Header as='h5'>Base salary grow up rate</Header>555                                        </Table.Cell>556                                        <Table.Cell>557                                            <Header as='h5'>Addition pay(EXP)</Header>558                                        </Table.Cell>559                                    </Table.Row>560                                </Table.Body>561                                <Table.Body>562                                    {this.state.currentScenario.fulltime.map((e, index) => {563                                        return (564                                            <Table.Row key={index}>565                                                <Table.Cell>{e.Job}</Table.Cell>566                                                <Table.Cell>{e.Status}</Table.Cell>567                                                <Table.Cell>{e.Status === 'Owner' ? <i>Input from user</i> : e.BaseSalaryPerMonth.toLocaleString('EN') + ' à¸¿'}</Table.Cell>568                                                <Table.Cell>{e.BaseSalaryGrowUpRate.toLocaleString('EN') + ' %'}</Table.Cell>569                                                <Table.Cell>{e.AdditionPayPerExp.toLocaleString('EN') + ' à¸¿'}</Table.Cell>570                                            </Table.Row>571                                        )572                                    })}573                                </Table.Body>574                            </Table>575                        </Segment>576                        <Segment>577                            <Label color='teal' size='large' attached='top'>578                                Part-time employees Detail579                            </Label>580                            <Table basic='very' size="small">581                                <Table.Body>582                                    <Table.Row>583                                        <Table.Cell>584                                            <Header as='h5'>Job</Header>585                                        </Table.Cell>586                                        <Table.Cell>587                                            <Header as='h5'>Status</Header>588                                        </Table.Cell>589                                        <Table.Cell>590                                            <Header as='h5'>Base pay(Hourly)</Header>591                                        </Table.Cell>592                                        <Table.Cell>593                                            <Header as='h5'>Base salary grow up rate</Header>594                                        </Table.Cell>595                                        <Table.Cell>596                                            <Header as='h5'>Addition pay(EXP)</Header>597                                        </Table.Cell>598                                    </Table.Row>599                                </Table.Body>600                                <Table.Body>601                                    {this.state.currentScenario.parttime.map((e, index) => {602                                        return (603                                            <Table.Row key={index}>604                                                <Table.Cell>{e.Job}</Table.Cell>605                                                <Table.Cell>{e.Status}</Table.Cell>606                                                <Table.Cell>{e.BasePayPerHour.toLocaleString('EN') + ' à¸¿'}</Table.Cell>607                                                <Table.Cell>{e.BaseSalaryGrowUpRate.toLocaleString('EN') + ' %'}</Table.Cell>608                                                <Table.Cell>{e.AdditionPayPerExp.toLocaleString('EN') + ' à¸¿'}</Table.Cell>609                                            </Table.Row>610                                        )611                                    })}612                                </Table.Body>613                            </Table>614                        </Segment>615                    </div>616            },617            {618                menuItem: 'Promotion', render: () =>619                    <div>620                        <Segment>621                            <Label color='teal' size='large' attached='top'>622                                Promotion Detail623                </Label>624                            <Table basic='very' size="small">625                                <Table.Body>626                                    <Table.Row>627                                        <Table.Cell>628                                            <Header as='h5'>Channel</Header>629                                        </Table.Cell>630                                        <Table.Cell>631                                            <Header as='h5'>Price Per Time</Header>632                                        </Table.Cell>633                                    </Table.Row>634                                </Table.Body>635                                <Table.Body>636                                    {this.state.currentScenario.market.map((e, index) => {637                                        return (638                                            <Table.Row key={index}>639                                                <Table.Cell>{e.Channel}</Table.Cell>640                                                <Table.Cell>{e.PricePerTime.toLocaleString('EN') + ' à¸¿'}</Table.Cell>641                                            </Table.Row>642                                        )643                                    })}644                                </Table.Body>645                            </Table>646                        </Segment>647                    </div>648            },649            {650                menuItem: 'Competitor', render: () =>651                    <div>652                        {this.state.currentScenario.competitor.length > 0 ?653                            <Segment>654                                <Label color='teal' size='large' attached='top'>655                                    Competitor Detail656                            </Label>657                                {this.state.currentScenario.competitor.map((e, index) => {658                                    return (659                                        <Table celled size="small" key={index}>660                                            <Table.Header>661                                                <Table.Row>662                                                    <Table.HeaderCell>Competitor Name : {e.CompetitorName}</Table.HeaderCell>663                                                    <Table.HeaderCell>Score</Table.HeaderCell>664                                                </Table.Row>665                                            </Table.Header>666                                            <Table.Body>667                                                <Table.Row>668                                                    <Table.Cell>669                                                        Decoration Score670                                                    </Table.Cell>671                                                    <Table.Cell>672                                                        {e.DecorationScore}673                                                    </Table.Cell>674                                                </Table.Row>675                                                <Table.Row>676                                                    <Table.Cell>677                                                        ProductVariety Score678                                                    </Table.Cell>679                                                    <Table.Cell>680                                                        {e.ProductVarietyScore}681                                                    </Table.Cell>682                                                </Table.Row>683                                                <Table.Row>684                                                    <Table.Cell>685                                                        ProductQuality Score686                                                    </Table.Cell>687                                                    <Table.Cell>688                                                        {e.ProductQualityScore}689                                                    </Table.Cell>690                                                </Table.Row>691                                                <Table.Row>692                                                    <Table.Cell>693                                                        Size Score694                                                    </Table.Cell>695                                                    <Table.Cell>696                                                        {e.SizeScore}697                                                    </Table.Cell>698                                                </Table.Row>699                                                <Table.Row>700                                                    <Table.Cell>701                                                        Day Score702                                                    </Table.Cell>703                                                    <Table.Cell>704                                                        {e.DayScore}705                                                    </Table.Cell>706                                                </Table.Row>707                                                <Table.Row>708                                                    <Table.Cell>709                                                        Time Score710                                                    </Table.Cell>711                                                    <Table.Cell>712                                                        {e.TimeScore}713                                                    </Table.Cell>714                                                </Table.Row>715                                                <Table.Row>716                                                    <Table.Cell>717                                                        NumberOfEmployee Score718                                                    </Table.Cell>719                                                    <Table.Cell>720                                                        {e.NumberOfEmployeeScore}721                                                    </Table.Cell>722                                                </Table.Row>723                                                <Table.Row>724                                                    <Table.Cell>725                                                        NumberOfAssistance Score726                                                    </Table.Cell>727                                                    <Table.Cell>728                                                        {e.NumberOfAssistanceScore}729                                                    </Table.Cell>730                                                </Table.Row>731                                                <Table.Row>732                                                    <Table.Cell>733                                                        MarketingVariety Score734                                                    </Table.Cell>735                                                    <Table.Cell>736                                                        {e.MarketingVarietyScore}737                                                    </Table.Cell>738                                                </Table.Row>739                                                <Table.Row>740                                                    <Table.Cell>741                                                        MarketingFrequency Score742                                                    </Table.Cell>743                                                    <Table.Cell>744                                                        {e.MarketingFrequencyScore}745                                                    </Table.Cell>746                                                </Table.Row>747                                            </Table.Body>748                                        </Table>749                                    )750                                })}751                            </Segment>752                            :753                            <Segment>754                                <Label color='teal' size='large' attached='top'>755                                    This scenario doesn't have any competitor756                                </Label>757                            </Segment>758                        }759                    </div>760            },761        ]762        if (this.state.currentScenario) {763            return (764                <Container fluid style={{ overflowY: "auto" }}>765                    <Segment color='teal'>766                        <Header as='h3'>767                            {this.state.currentScenario.BusinessName}768                        </Header>769                    </Segment>770                    <Tab menu={{ secondary: true }} panes={panes1} />771                </Container>772            )773        } else {774            return (775                <Loader active size='massive'>Please select to show more detail</Loader>776            )777        }778    }...

index.js

Source:index.js

1import React, { useEffect, useState } from "react";2import { useDispatch, useSelector } from "react-redux";3import styled from "styled-components";4import { Icon, Image } from "../../components/atoms";5import {6  Answers,7  CodeEditor,8  DefaultModal,9  DivideModal,10  FileTree,11  GreetingModal,12  PracticeCodeEditor,13  StepProgressBar,14  Visualization,15} from "../../components/organisms";16import { MainTemplate, TooltipModal } from "../../components/templates";17import { mode as studymode, scenarioId } from "../../constant";18import { fileSliceActions } from "../../modules/slices/fileSlice";19import { scenarioSliceActions } from "../../modules/slices/scenarioSlice";20const MainPage = () => {21  const dispatch = useDispatch();22  const { scenarios, currentScenario: currentId, mode } = useSelector((state) => state.scenario);23  const [isModalOpen, setIsModalOpen] = useState(false);24  const [content, setContent] = useState();25  const currentScenario = currentId && scenarios[currentId];26  const [isCorrectAnswer, setIsCorrectAnswer] = useState("none");27  const handleModalCloseClick = () => {28    setIsModalOpen(false);29  };30  const handleTutorialStartButtonClick = () => {31    dispatch(scenarioSliceActions.updateMode(studymode.TUTORIAl));32    const nextScenarioId = currentScenario.next;33    dispatch(scenarioSliceActions.updateCurrentScenario(nextScenarioId));34    dispatch(scenarioSliceActions.updateCurrent(scenarios[nextScenarioId]));35    setIsModalOpen(false);36  };37  const handlePracticeStartButtonClick = () => {38    dispatch(scenarioSliceActions.resetVisualizeAction());39    dispatch(scenarioSliceActions.updateMode(studymode.PRACTICE));40    dispatch(scenarioSliceActions.updateCurrentScenario(scenarioId.PRACTICE_1ST));41    dispatch(scenarioSliceActions.updateCurrent(scenarios[scenarioId.PRACTICE_1ST]));42    setIsModalOpen(false);43  };44  const handleNextButtonClick = () => {45    const nextScenarioId = currentScenario.next;46    dispatch(scenarioSliceActions.updateCurrentScenario(nextScenarioId));47    dispatch(scenarioSliceActions.updateCurrent(scenarios[nextScenarioId]));48    setIsModalOpen(false);49  };50  const handlePrevButtonClick = () => {51    const prevScenarioId = currentScenario.prev;52    dispatch(scenarioSliceActions.updateCurrentScenario(prevScenarioId));53    dispatch(scenarioSliceActions.updateCurrent(scenarios[prevScenarioId]));54    setIsModalOpen(false);55  };56  const handleTutorialRestart = () => {57    dispatch(scenarioSliceActions.resetVisualizeAction());58    dispatch(scenarioSliceActions.updateCurrentScenario(scenarioId.TUTORIAL_2ND));59    dispatch(scenarioSliceActions.updateCurrent(scenarios[scenarioId.TUTORIAL_2ND]));60  };61  const createDynamicElement = (elementList) => {62    return elementList.map((el, index) => {63      if (Array.isArray(el.text)) {64        if (el.direction === "column") {65          return <div key={"wr".concat(index)}>{createDynamicElement(el.text)}</div>;66        }67        return createDynamicElement(el.text);68      }69      const CustomTag = el.tag;70      if (el.tag === "a") {71        return (72          <CustomTag key={"cs".concat(index)} href={el.href}>73            {el.text}74          </CustomTag>75        );76      }77      if (el.tag === "Icon") {78        return <Icon key={"cs".concat(index)} type={el.type} color={el.color} />;79      }80      if (el.tag === "img") {81        return <Image key={"cs".concat(index)} src={el.src} width={el.width} height={el.height} alt="data-flow" />;82      }83      return <CustomTag key={"cs".concat(index)}>{el.text}</CustomTag>;84    });85  };86  const setModalContent = (scenario) => {87    switch (scenario.modalType) {88      case "welcome":89        setContent(90          <GreetingModal91            onClickClose={handleModalCloseClick}92            onClickLeftButton={handleTutorialStartButtonClick}93            onClickRightButton={handlePracticeStartButtonClick}94            leftText="Start Tutorial"95            rigthText="Start Practice"96          >97            {createDynamicElement(scenario.description)}98          </GreetingModal>,99        );100        break;101      case "tutorial_end":102        setContent(103          <GreetingModal104            onClickClose={handleModalCloseClick}105            onClickLeftButton={handleTutorialRestart}106            onClickRightButton={handlePracticeStartButtonClick}107            leftText="Try Again"108            rigthText="Start Practice"109          >110            {createDynamicElement(scenario.description)}111          </GreetingModal>,112        );113        break;114      case "practice_end":115        setContent(116          <GreetingModal117            onClickClose={handleModalCloseClick}118            onClickLeftButton={handleTutorialStartButtonClick}119            onClickRightButton={handlePracticeStartButtonClick}120            leftText="Start Tutorial"121            rigthText="Try Again"122          >123            {createDynamicElement(scenario.description)}124          </GreetingModal>,125        );126        break;127      case "divide":128        setContent(129          <DivideModal130            left={createDynamicElement(scenario.description.left)}131            right={createDynamicElement(scenario.description.right)}132            onPrevClick={handlePrevButtonClick}133            onNextClick={handleNextButtonClick}134          />,135        );136        break;137      case "default":138        setContent(139          <DefaultModal onPrevClick={handlePrevButtonClick} onNextClick={handleNextButtonClick}>140            {createDynamicElement(scenario.description)}141          </DefaultModal>,142        );143        break;144    }145  };146  useEffect(() => {147    const currentFile = currentScenario?.file;148    const selectedFile = currentScenario?.selectedFile;149    const highlightLine = currentScenario?.highlightLine;150    if (currentFile) {151      dispatch(fileSliceActions.setCurrentFile(currentFile));152    }153    if (highlightLine) {154      dispatch(fileSliceActions.setHighlightLines(highlightLine));155    }156    if (selectedFile && selectedFile.length > 0) {157      dispatch(fileSliceActions.setSelectedFiles(selectedFile));158    }159    if (160      currentId &&161      currentScenario.type === "description" &&162      currentScenario.modalType !== "tooltip" &&163      currentScenario.modalType !== "tooltip_wide"164    ) {165      setModalContent(currentScenario);166      setIsModalOpen(true);167    }168  }, [currentId]);169  useEffect(() => {170    let timeoutId = null;171    timeoutId = setTimeout(() => {172      if (isCorrectAnswer !== "none" && isCorrectAnswer) {173        const nextScenarioId = currentScenario.next;174        dispatch(scenarioSliceActions.updateCurrentScenario(nextScenarioId));175        dispatch(scenarioSliceActions.updateCurrent(scenarios[nextScenarioId]));176      }177    }, 2000);178    () => {179      clearTimeout(timeoutId);180    };181  }, [isCorrectAnswer]);182  return (183    <>184      <MainTemplate185        visualContent={186          <>187            <StepProgressBar labels={["Redux Store", "Slice Reducer", "View Component"]} />188            <Visualization />189          </>190        }191        codeContent={192          <CodeContentWrapper>193            <EditorWrapper mode={mode}>194              <FileTree isDone={currentId === scenarioId.PRACTICE_END || currentId === scenarioId.TUTORIAL_END} />195              {mode === studymode.TUTORIAl ? <CodeEditor /> : <PracticeCodeEditor onAnswerDone={setIsCorrectAnswer} />}196            </EditorWrapper>197            <AnswersWrapper mode={mode}>198              <Answers isCorrectAnswer={isCorrectAnswer} onIsCorrectAnswerChnage={setIsCorrectAnswer} />199            </AnswersWrapper>200          </CodeContentWrapper>201        }202        modalContent={isModalOpen && <>{content}</>}203      />204      {(currentScenario?.modalType === "tooltip" || currentScenario?.modalType === "tooltip_wide") && (205        <TooltipModal206          direction={currentScenario.modalDirection}207          onPrevClick={handlePrevButtonClick}208          onNextClick={handleNextButtonClick}209          type={currentScenario?.modalType === "tooltip_wide" ? "wide" : "default"}210        >211          {createDynamicElement(currentScenario.description)}212        </TooltipModal>213      )}214    </>215  );216};217export default MainPage;218const CodeContentWrapper = styled.div`219  display: flex;220  flex-direction: column;221  height: 100%;222`;223const EditorWrapper = styled.div`224  display: flex;225  height: ${({ mode }) => (mode === "tutorial" ? "100%" : "60%")};226`;227const AnswersWrapper = styled.div`228  background: red;229  display: flex;230  ${({ mode }) => mode === "tutorial" && "display: none;"};231  flex-direction: column;232  height: 40%;233  padding: 2rem 2rem 1rem 2rem;234  background: ${({ theme }) => theme.colors.lightdarkblue_1};235  color: ${({ theme }) => theme.colors.white_1};236  font-size: ${({ theme }) => theme.fontSizes.md};237  p {238    margin-top: 0.8rem;239    font-weight: 200;240  }...

quest.js

Source:quest.js

1import allThemes from './quests.js';2import scoreDisplay from './score-display.js'; 3const json = window.localStorage.getItem('user');4if(!json) {5    window.location = '/';6}7const user = JSON.parse(json);8scoreDisplay(user);9const htmlNode = document.getElementById('background-image');10const formNode = document.getElementById('choices');11const titleNode = document.getElementById('title');12const descriptionNode = document.getElementById('quest-description');13const resultNode = document.getElementById('scenario-result');14const resultParagraph = document.getElementById('result');15const continueButton = document.getElementById('continue');16const searchParams = new URLSearchParams(window.location.search);17const questTitle = searchParams.get('name');18let scenarioTitle = parseInt(searchParams.get('scenario'));19let currentTheme = null;20for(let i = 0; i < allThemes.length; i++) {21    if(questTitle === allThemes[i].id) {22        currentTheme = allThemes[i];23        break;24    }25}26titleNode.textContent = currentTheme.title;27descriptionNode.textContent = currentTheme['description' + String(scenarioTitle)];28const allScenarios = currentTheme.scenarios;29let chosen = null;30const currentScenario = allScenarios[scenarioTitle];31for(let i = 0; i < currentTheme.images.length; i++) {32    if(scenarioTitle === i) {33        htmlNode.style.backgroundImage = currentTheme.images[i];34        htmlNode.classList.add('resize');35    }36}37for(let i = 0; i < currentScenario.length; i++) {38    chosen = currentScenario[i];39    const label = document.createElement('label');40    label.for = chosen.id;41    42    const radio = document.createElement('input');43    radio.type = 'radio';44    radio.id = chosen.id; 45    radio.name = 'insane-choices'; // also applies to bank choices46    radio.value = chosen.id; 47    radio.required = true;48    49    label.textContent = chosen.name + ' - ' + chosen.description;50    51    formNode.prepend(label);52    formNode.prepend(radio);53    formNode.prepend(document.createElement('br'));54    formNode.prepend(document.createElement('br'));55}56formNode.addEventListener('submit', function(event) {57    event.preventDefault();58    formNode.hidden = true;59    resultNode.hidden = false;60    const formData = new FormData(formNode);61    const choice = formData.get('insane-choices');62    63    for(let i = 0; i < currentScenario.length; i++) {64        let chosen = currentScenario[i];65        66        if(choice === chosen.id) {67            user.completedThemes.push(currentTheme.id);68           69            resultParagraph.textContent = chosen.result;70            resultParagraph.classList.add('bold'); 71            72            user.hp += chosen.hp;73            user.cp += chosen.cp;74            const json = JSON.stringify(user);75            window.localStorage.setItem('user', json);76            scoreDisplay(user);77        }78    }79});80continueButton.addEventListener('click', function(event) {81    event.preventDefault();82    if(scenarioTitle < currentScenario.length) {83        scenarioTitle++;84        searchParams.set('scenario', scenarioTitle);85        window.location.search = searchParams;86    }87    if(scenarioTitle === currentScenario.length) {88        window.location = '../pages/result.html';89    }...

Using AI Code Generation

1var strykerParent = require('stryker-parent');2var currentScenario = strykerParent.currentScenario;3var strykerParent = require('stryker-parent');4var currentScenario = strykerParent.currentScenario;5var strykerParent = require('stryker-parent');6var currentScenario = strykerParent.currentScenario;7var strykerParent = require('stryker-parent');8var currentScenario = strykerParent.currentScenario;9var strykerParent = require('stryker-parent');10var currentScenario = strykerParent.currentScenario;11var strykerParent = require('stryker-parent');12var currentScenario = strykerParent.currentScenario;13var strykerParent = require('stryker-parent');14var currentScenario = strykerParent.currentScenario;15var strykerParent = require('stryker-parent');16var currentScenario = strykerParent.currentScenario;17var strykerParent = require('stryker-parent');18var currentScenario = strykerParent.currentScenario;19var strykerParent = require('stryker-parent');20var currentScenario = strykerParent.currentScenario;21var strykerParent = require('stryker-parent');22var currentScenario = strykerParent.currentScenario;23var strykerParent = require('stryker-parent');24var currentScenario = strykerParent.currentScenario;25var strykerParent = require('stryker-parent');26var currentScenario = strykerParent.currentScenario;27var strykerParent = require('stryker-parent');28var currentScenario = strykerParent.currentScenario;

Using AI Code Generation

1var currentScenario = require('stryker-parent').currentScenario;2var currentScenario = currentScenario();3console.log(currentScenario);4var currentScenario = require('stryker-parent').currentScenario;5var currentScenario = currentScenario();6console.log(currentScenario);7var currentScenario = require('stryker-parent').currentScenario;8var currentScenario = currentScenario();9console.log(currentScenario);10var currentScenario = require('stryker-parent').currentScenario;11var currentScenario = currentScenario();12console.log(currentScenario);13var currentScenario = require('stryker-parent').currentScenario;14var currentScenario = currentScenario();15console.log(currentScenario);16var currentScenario = require('stryker-parent').currentScenario;17var currentScenario = currentScenario();18console.log(currentScenario);19var currentScenario = require('stryker-parent').currentScenario;20var currentScenario = currentScenario();21console.log(currentScenario);22var currentScenario = require('stryker-parent').currentScenario;23var currentScenario = currentScenario();24console.log(currentScenario);25var currentScenario = require('stryker-parent').currentScenario;26var currentScenario = currentScenario();27console.log(currentScenario);28var currentScenario = require('stryker-parent').currentScenario;29var currentScenario = currentScenario();30console.log(currentScenario);31var currentScenario = require('stryker-parent').currentScenario;32var currentScenario = currentScenario();33console.log(currentScenario);34var currentScenario = require('stryker-parent').currentScenario;35var currentScenario = currentScenario();36console.log(currentScenario);37var currentScenario = require('stry

Using AI Code Generation

1const { currentScenario } = require('stryker-parent');2module.exports = function() {3  return currentScenario();4};5const { currentScenario } = require('stryker-parent');6module.exports = {7  mochaOptions: {8  },9    {10      mochaOptions: {11      },12    },13    {14      mochaOptions: {15      },16    }17};18at Object.<anonymous> (test.js:3:24)19at Module._compile (internal/modules/cjs/loader.js:1138:30)20at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)21at Module.load (internal/modules/cjs/loader.js:986:32)22at Function.Module._load (internal/modules/cjs/loader.js:879:14)23at Module.require (internal/modules/cjs/loader.js:1026:19)24at require (internal/modules/cjs/helpers.js:72:18)25at Object.<anonymous> (test.js:1:1)

Using AI Code Generation

1var stryker = require('stryker-parent');2var currentScenario = stryker.currentScenario;3var scenario = currentScenario();4console.log(scenario);5var stryker = require('stryker-parent');6var currentScenario = stryker.currentScenario;7var scenario = currentScenario();8console.log(scenario);9var stryker = require('stryker-parent');10var currentScenario = stryker.currentScenario;11var scenario = currentScenario();12console.log(scenario);13var stryker = require('stryker-parent');14var currentScenario = stryker.currentScenario;15var scenario = currentScenario();16console.log(scenario);17var stryker = require('stryker-parent');18var currentScenario = stryker.currentScenario;19var scenario = currentScenario();20console.log(scenario);21var stryker = require('stryker-parent');22var currentScenario = stryker.currentScenario;23var scenario = currentScenario();24console.log(scenario);25var stryker = require('stryker-parent');26var currentScenario = stryker.currentScenario;27var scenario = currentScenario();28console.log(scenario);29var stryker = require('stryker-parent');30var currentScenario = stryker.currentScenario;31var scenario = currentScenario();32console.log(scenario);33var stryker = require('stryker-parent');34var currentScenario = stryker.currentScenario;35var scenario = currentScenario();36console.log(scenario);37var stryker = require('stryker-parent');38var currentScenario = stryker.currentScenario;39var scenario = currentScenario();40console.log(scenario

Using AI Code Generation

1var stryker = require('stryker-parent');2var scenario = stryker.currentScenario();3console.log('Current scenario: ' + scenario);4module.exports = function(config) {5  config.set({6    mochaOptions: {7    },8  });9};

Using AI Code Generation

1var stryker = require('stryker-parent');2var currentScenario = stryker.currentScenario();3var stryker = require('stryker-parent');4var currentScenario = stryker.currentScenario();5var stryker = require('stryker-parent');6var currentScenario = stryker.currentScenario();

Using AI Code Generation

1var currentScenario = require('stryker-parent').currentScenario;2var scenario = currentScenario('test');3scenario.then(function (scenario) {4    scenario.addStep('Step 1', function () {5        console.log('Step 1');6    });7    scenario.addStep('Step 2', function () {8        console.log('Step 2');9    });10});11currentScenario(name)12Scenario(name)13Scenario#addStep(description, action)14Scenario#addStep(description, action)15Scenario#addStep(description, action)16Scenario#addStep(description, action)17Scenario#addStep(description, action)18Scenario#addStep(description, action)19Scenario#addStep(description, action)20Scenario#addStep(description, action)21Scenario#addStep(description, action)22Scenario#addStep(description, action)

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.