import React, { Component } from 'react'; import './PitContent.css'; import Logo from './1796NumberswithScratch.png'; import Row from 'react-bootstrap/Row'; import { Form, Dropdown } from 'react-bootstrap'; import BootstrapTable from 'react-bootstrap-table-next'; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'; import Button from 'react-bootstrap/Button'; import { Link } from 'react-router-dom'; import filterFactory, { selectFilter, textFilter } from 'react-bootstrap-table2-filter'; const selectOptions = { 'Not Started': 'Not Started', 'Follow Up': 'Follow Up', Done: 'Done' }; const defaultSorted = [ { dataField: 'team_num', order: 'asc' } ]; class PitNavigation extends Component { state = { widthSize: '', heightSize: '', competition: '', competitions: [], column: [ { headerStyle: { width: '25%', fontSize: '100%', outline: 'none' }, dataField: 'team_num', text: 'Team Number', filter: textFilter({ className: 'customtextbar' }) }, { headerStyle: { width: '25%', fontSize: '100%', outline: 'none' }, dataField: 'team_name', text: 'Team Name', filter: textFilter({ className: 'customtextbar' }) }, { headerStyle: { width: '20%', fontSize: '100%', outline: 'none' }, dataField: 'coalesce', text: 'Status', formatter: cell => selectOptions[cell], filter: selectFilter({ options: selectOptions }) }, { headerStyle: { width: '30%', fontSize: '100%', outline: 'none' }, dataField: 'buttonValue', text: 'Scout' } ], tableData: [] }; getPitData = competition => { this.setState({ competition: competition }); fetch(`/api/competitions/${competition}/pits`) .then(response => response.json()) .then(data => { let pitData = data.pitData; pitData.sort((a, b) => a.team_num - b.team_num); pitData.map(row => { let buttonLabel; if (row.coalesce === 'Not Started') { buttonLabel = 'Start'; } else if (row.coalesce === 'Follow Up') { buttonLabel = 'Continue'; } else { buttonLabel = 'Edit'; } row.buttonValue = ( <Link to={`/pits/${this.state.competition}/${row.team_num}`}> <Button variant='success' style={{ fontSize: '100%', boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black', border: '1px solid black' }} > {buttonLabel} </Button> </Link> ); }); this.setState({ tableData: pitData }); }) .catch(error => { console.error('Error:', error); }); this.forceUpdate(); }; componentDidMount() { window.onbeforeunload = null; fetch('/competitions') .then(response => response.json()) .then(data => { this.setState({ competitions: data.competitions }); data.competitions.map(c => { if (c.iscurrent) { this.setState({ competition: c.shortname }); } }); }) .then(() => { fetch(`/api/competitions/${this.state.competition}/pits`) .then(response => response.json()) .then(data => { let pitData = data.pitData; pitData.sort((a, b) => a.team_num - b.team_num); pitData.map(row => { let buttonLabel; if (row.coalesce === 'Not Started') { buttonLabel = 'Start'; } else if (row.coalesce === 'Follow Up') { buttonLabel = 'Continue'; } else { buttonLabel = 'Edit'; } row.buttonValue = ( <Link to={`/pits/${this.state.competition}/${row.team_num}`}> <Button type='btn' variant='success' style={{ fontSize: '100%', boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black', border: '1px solid black' }} > {buttonLabel} </Button> </Link> ); }); this.setState({ tableData: pitData }); }) .catch(error => { console.error('Error:', error); }); }); this.setState({ widthSize: window.innerWidth <= 760 ? '90%' : '50%' }); this.setState({ heightSize: window.innerHeight + 'px' }); this.forceUpdate(); } render() { const competitionItems = this.state.competitions.map(competition => ( <Dropdown.Item eventKey={competition.shortname} key={competition.competitionid} style={{ fontFamily: 'Helvetica, Arial' }} > {competition.shortname} </Dropdown.Item> )); if (this.state.competition === '') { return null; } return ( <div className='div-main' style={{ minHeight: this.state.heightSize }}> <div className='justify-content-center'> <img alt='Logo' src={Logo} style={{ width: this.state.widthSize === '90%' ? '70%' : '30%', marginTop: '20px', marginLeft: '10px' }} /> </div> <div style={{ width: this.state.widthSize }} className='div-second'> <div className='div-form'> <Form.Group style={{ width: '100%', margin: '0 auto', marginBottom: '10px' }} as={Row} > <Form.Label className='mb-1' style={{ fontFamily: 'Helvetica, Arial', fontSize: '110%', margin: '0 auto' }} > Competition: </Form.Label> </Form.Group> <Dropdown style={{ marginBottom: '10px' }} focusFirstItemOnShow={false} onSelect={this.getPitData} > <Dropdown.Toggle style={{ fontFamily: 'Helvetica, Arial', textAlign: 'center' }} size='lg' variant='success' id='dropdown-basic' > {this.state.competition} </Dropdown.Toggle> <Dropdown.Menu style={{ minWidth: '3%' }}> {competitionItems} </Dropdown.Menu> </Dropdown> <Button variant='dark' type='btn' onClick={() => this.getPitData(this.state.competition)} className='btn-xs' style={{ fontFamily: 'Helvetica, Arial' }} > Refresh </Button> </div> </div> <BootstrapTable striped hover keyField='team_num' bordered bootstrap4 // defaultSorted={defaultSorted} data={this.state.tableData} columns={this.state.column} filter={filterFactory()} /> </div> ); } } export default PitNavigation;